From b1a4859001f1325aed9d7458453cbc81f57c1e56 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Fri, 17 Mar 2023 10:14:20 +0100
Subject: [PATCH] paper layout
---
assets/js/theme/design-system/modal.js | 26 +++++
assets/sass/_theme/sections/papers.sass | 62 +++++------
layouts/papers/single.html | 13 ++-
layouts/partials/commons/menu.html | 2 +-
layouts/partials/papers/modal.html | 4 +-
layouts/partials/papers/sidebar.html | 142 ++++++++++++------------
6 files changed, 142 insertions(+), 107 deletions(-)
diff --git a/assets/js/theme/design-system/modal.js b/assets/js/theme/design-system/modal.js
index b2035629..2bde96c2 100644
--- a/assets/js/theme/design-system/modal.js
+++ b/assets/js/theme/design-system/modal.js
@@ -35,6 +35,8 @@ class Modal {
window.addEventListener('keydown', (event) => {
if (event.keyCode === 27 || event.key === 'Escape') {
this.toggle(false);
+ } else if (event.key === "Tab") {
+ this.innerFocus(event);
}
});
@@ -45,12 +47,36 @@ class Modal {
});
}
+ innerFocus(event) {
+ const focusables = 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]';
+ const elements = this.element.querySelectorAll(focusables);
+
+ const focusableInDialog = Array.from(elements).filter(element => element.tabIndex >= 0);
+ const firstFocusable = focusableInDialog[0];
+ const lastFocusable = focusableInDialog.at(-1);
+
+ if (!this.state.isOpened) {
+ return;
+ }
+
+ if (!this.element.contains(event.target) && event.shiftKey) {
+ lastFocusable.focus();
+ }
+ else if (!this.element.contains(event.target)) {
+ firstFocusable.focus();
+ }
+ }
+
toggle(open = !this.state.isOpened) {
this.state.isOpened = open;
const classAction = this.state.isOpened ? 'add' : 'remove';
this.element.setAttribute('aria-hidden', !this.state.isOpened);
document.documentElement.classList[classAction](CLASSES.modalOpened);
+
+ if (!this.state.isOpened) {
+ this.button.focus();
+ }
}
}
diff --git a/assets/sass/_theme/sections/papers.sass b/assets/sass/_theme/sections/papers.sass
index 9dbfd0aa..c02f9ae1 100644
--- a/assets/sass/_theme/sections/papers.sass
+++ b/assets/sass/_theme/sections/papers.sass
@@ -47,37 +47,35 @@
.papers__page
- // @include media-breakpoint-down(desktop)
- // .document-content
- // display: flex
- // flex-direction: column
- // aside
- // order: 2
- // padding: 0 half($grid-gutter-sm)
- // @include media-breakpoint-up(desktop)
- // .paper-sidebar
- // @include container-margin-left
- // margin-top: 0
- // top: 0
- // left: 0
- // height: 100%
- // position: absolute
- // width: col-outside-container(4)
- // > div
- // @include sticky($spacing1)
- // .toc-container
- // border-top: 1px solid $color-border
- // padding-top: $spacing1
- // position: static
- // margin-left: 0
+ @include media-breakpoint-down(desktop)
+ .document-content
+ aside
+ order: 2
+ padding: 0 half($grid-gutter-sm)
+ @include media-breakpoint-up(desktop)
+ .paper-sidebar
+ @include container-margin-left
+ margin-top: 0
+ top: 0
+ left: 0
+ height: 100%
+ position: absolute
+ width: col-outside-container(4)
+ // > div
+ // @include sticky($spacing1)
+ .toc-container
+ border-top: 1px solid $color-border
+ padding-top: $spacing1
+ position: static
+ margin-left: 0
+ .media
+ width: col(2, 4)
.document-content
- .container
- @include media-breakpoint-up(desktop)
- @include grid
.content
+ margin-bottom: $spacing4
@include media-breakpoint-up(desktop)
- grid-column: 5 / 12
+ padding-left: offset(4)
section + section
margin-top: $spacing2
@include media-breakpoint-up(desktop)
@@ -86,6 +84,8 @@
margin-bottom: 0
margin-top: $spacing0
width: auto
+ h2
+ margin-bottom: $spacing0
.paper-essentials
h2
@include meta
@@ -108,10 +108,10 @@
@include stretched-link(before)
text-decoration: none
.document-nav
- @include media-breakpoint-up(desktop)
- grid-column: 1 / 5
- img
- width: col(2, 4)
+ // @include media-breakpoint-up(desktop)
+ // grid-column: 1 / 5
+ // img
+ // width: col(2, 4)
dl
margin: 0
dt
diff --git a/layouts/papers/single.html b/layouts/papers/single.html
index 23f997ab..c150270c 100644
--- a/layouts/papers/single.html
+++ b/layouts/papers/single.html
@@ -12,12 +12,15 @@
{{ partial "papers/sidebar.html" . }}
<div class="container">
- {{ partial "papers/abstract.html" . }}
- {{ partial "papers/authors.html" . }}
- {{ partial "papers/body.html" . }}
- {{ partial "papers/references.html" . }}
- {{ partial "blocks/list.html" . }}
+ <div class="content">
+ {{ partial "papers/abstract.html" . }}
+ {{ partial "papers/authors.html" . }}
+ {{ partial "papers/body.html" . }}
+ {{ partial "papers/references.html" . }}
+ </div>
</div>
+
+ {{ partial "blocks/list.html" . }}
</div>
diff --git a/layouts/partials/commons/menu.html b/layouts/partials/commons/menu.html
index 531f292e..3d1bb676 100644
--- a/layouts/partials/commons/menu.html
+++ b/layouts/partials/commons/menu.html
@@ -29,7 +29,7 @@
{{- end -}}
{{- if and (gt (len .children) 0) $dropdown (eq $level 1) -}}
{{- $hasDropdown = true -}}
- {{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" aria-pressed=\"false\" tabindex=\"0\"" $slug -}}
+ {{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\"" $slug -}}
{{- end -}}
{{- if and (hasPrefix .target "http") (eq .kind "url") -}}
{{- $attr = " target=\"_blank\" rel=\"noreferrer\"" -}}
diff --git a/layouts/partials/papers/modal.html b/layouts/partials/papers/modal.html
index fcd07d34..d6de154e 100644
--- a/layouts/partials/papers/modal.html
+++ b/layouts/partials/papers/modal.html
@@ -1,7 +1,7 @@
-<div class="modal paper-modal" id="{{ .modalId }}" tabindex="-1" aria-labelledby="{{ .modalId }}Label" aria-hidden="true" aria-modal="true">
+<div class="modal paper-modal" id="{{ .modalId }}" aria-labelledby="{{ .modalId }}-label" aria-hidden="true" aria-modal="true" role="dialog">
<div class="modal-content">
<div class="modal-header">
- <h3 class="modal-title" id="{{ .modalId }}Label">{{ .title }}</h3>
+ <h3 class="modal-title" id="{{ .modalId }}-label">{{ .title }}</h3>
<button class="close" type="button" aria-label="{{ i18n "commons.close" }}"></button>
</div>
<div class="modal-body">
diff --git a/layouts/partials/papers/sidebar.html b/layouts/partials/papers/sidebar.html
index e2faae70..bd22031c 100644
--- a/layouts/partials/papers/sidebar.html
+++ b/layouts/partials/papers/sidebar.html
@@ -1,71 +1,77 @@
-<aside class="document-nav">
- <dl>
- {{ range .GetTerms "volumes" }}
- <dt>{{ i18n "volumes.singular_name" }}</dt>
- <dd itemprop="isPartOf" itemscope itemtype="https://schema.org/PublicationVolume">
- <a href="{{ .Permalink }}" itemprop="url">
- <span itemprop="name">{{ .Title }}</span>
- <div class="media">
- {{- if .Params.image -}}
- {{- partial "commons/image.html"
- (dict
- "image" .Params.image
- "alt" .Title
- "mobile" "327x388"
- "tablet" "208x247"
- "desktop" "408x485"
- ) -}}
- {{- else if site.Params.default_image.url -}}
- {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
- {{- end -}}
- </div>
- </a>
- </dd>
- {{ end }}
+<div class="paper-sidebar">
+ <div>
+ <aside class="document-nav">
+ <dl>
+ {{ range .GetTerms "volumes" }}
+ <dt>{{ i18n "volumes.singular_name" }}</dt>
+ <dd itemprop="isPartOf" itemscope itemtype="https://schema.org/PublicationVolume">
+ <a href="{{ .Permalink }}" itemprop="url">
+ <span itemprop="name">{{ .Title }}</span>
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "alt" .Title
+ "mobile" "327x388"
+ "tablet" "208x247"
+ "desktop" "408x485"
+ ) -}}
+ {{- else if site.Params.default_image.url -}}
+ {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
+ {{- end -}}
+ </div>
+ </a>
+ </dd>
+ {{ end }}
+
+ {{ if isset .Params "type" }}
+ <dt>{{ i18n "volumes.nature" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.Type }}</dd>
+ {{ end }}
- {{ if isset .Params "type" }}
- <dt>{{ i18n "volumes.nature" }}</dt>
- <dd>{{ partial "PrepareHTML" .Params.Type }}</dd>
- {{ end }}
-
- {{ if isset .Params "keywords" }}
- {{ if gt ( len .Params.keywords ) 0 }}
- <dt>{{ i18n "volumes.keywords" }}</dt>
- <dd itemprop="keywords">{{ delimit .Params.Keywords " " }}</dd>
- {{ end }}
- {{ end }}
-
- {{ if isset .Params "lang" }}
- <dt>{{ i18n "commons.language" }}</dt>
- <dd itemprop="inLanguage" content="{{ .Params.Lang_iso }}">{{ .Params.Lang }}</dd>
- {{ end }}
-
- {{ if .Date }}
- <dt>{{ i18n "commons.date" }}</dt>
- <dd>
- <time itemprop="datePublished" datetime="{{ .Date | time.Format "2006-01-02T15:04" }}">{{ .Date | time.Format ":date_long" }}</time>
- </dd>
- {{ end }}
-
- {{ with .Params.dates.published }}
- <dt>{{ i18n "papers.dates.published" }}</dt>
- <dd>
- <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
- </dd>
- {{ end }}
+ {{ if isset .Params "keywords" }}
+ {{ if gt ( len .Params.keywords ) 0 }}
+ <dt>{{ i18n "volumes.keywords" }}</dt>
+ <dd itemprop="keywords">{{ delimit .Params.Keywords " " }}</dd>
+ {{ end }}
+ {{ end }}
+
+ {{ if isset .Params "lang" }}
+ <dt>{{ i18n "commons.language" }}</dt>
+ <dd itemprop="inLanguage" content="{{ .Params.Lang_iso }}">{{ .Params.Lang }}</dd>
+ {{ end }}
+
+ {{ if .Date }}
+ <dt>{{ i18n "commons.date" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ .Date | time.Format "2006-01-02T15:04" }}">{{ .Date | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+
+ {{ with .Params.dates.published }}
+ <dt>{{ i18n "papers.dates.published" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+
+ {{ with .Params.dates.accepted }}
+ <dt>{{ i18n "papers.dates.accepted" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+
+ {{ with .Params.dates.received }}
+ <dt>{{ i18n "papers.dates.received" }}</dt>
+ <dd>
+ <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
+ </dd>
+ {{ end }}
+ </dl>
+ </aside>
+ </div>
+</div>
- {{ with .Params.dates.accepted }}
- <dt>{{ i18n "papers.dates.accepted" }}</dt>
- <dd>
- <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
- </dd>
- {{ end }}
- {{ with .Params.dates.received }}
- <dt>{{ i18n "papers.dates.received" }}</dt>
- <dd>
- <time itemprop="datePublished" datetime="{{ . | time.Format "2006-01-02T15:04" }}">{{ . | time.Format ":date_long" }}</time>
- </dd>
- {{ end }}
- </dl>
-</aside>
\ No newline at end of file
--
GitLab