Skip to content
Snippets Groups Projects
Unverified Commit 6c05f8c7 authored by Alexis BENOIT's avatar Alexis BENOIT Committed by GitHub
Browse files

Merge pull request #107 from noesya/style/paper-layout 

Style/paper layout
parents 74ca539e 9815001a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/js/theme/design-system/modal.js
+ 30
− 0
View file @ 6c05f8c7
......@@ -35,6 +35,9 @@ class Modal {
window.addEventListener('keydown', (event) => {
if (event.keyCode === 27 || event.key === 'Escape') {
this.toggle(false);
} else if (event.key === "Tab") {
// TODO fix a11y inner focus
// this.innerFocus(event);
}
});
......@@ -45,12 +48,39 @@ 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);
console.log(firstFocusable, lastFocusable)
if (!this.state.isOpened) {
return;
}
if (!this.element.contains(event.target) && event.shiftKey) {
lastFocusable.focus();
}
else if (!this.element.contains(event.target)) {
firstFocusable.focus();
}
this.closeButtons[0].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();
}
}
}
......
assets/sass/_theme/design-system/layout.sass
+ 1
− 0
View file @ 6c05f8c7
......@@ -127,5 +127,6 @@ details
@include button-reset
@include icon-block(close, before)
position: absolute
padding: 0
right: 0
top: 0
\ No newline at end of file
assets/sass/_theme/sections/papers.sass
+ 73
− 49
View file @ 6c05f8c7
......@@ -47,57 +47,81 @@
.papers__page
@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
.content
margin-bottom: $spacing4
@include media-breakpoint-up(desktop)
@include grid
.content
padding-left: offset(4)
section + section
margin-top: $spacing2
@include media-breakpoint-up(desktop)
grid-column: 5 / 12
section + section
margin-top: $spacing4
.squared-button
margin-bottom: 0
margin-top: $spacing0
width: auto
h2
margin-bottom: $spacing0
.paper-essentials
h2
@include meta
margin-top: $spacing2
@include media-breakpoint-up(desktop)
margin-top: $spacing4
.squared-button
margin-bottom: 0
margin-top: $spacing0
width: auto
.paper-essentials
h2
@include meta
&:first-of-type
margin-top: 0
.paper-body
h2
margin-bottom: $spacing2
.paper-authors
h2
@include h3
.authors
@include grid(2, desktop)
article
margin-top: $spacing2
&:first-of-type
margin-top: 0
.paper-body
h2
margin-bottom: $spacing2
.paper-authors
h2
@include h3
.authors
@include grid(2, desktop)
article
margin-top: $spacing2
.name
a
@include h4
@include stretched-link(before)
text-decoration: none
.document-nav
@include media-breakpoint-up(desktop)
grid-column: 1 / 5
img
width: col(2, 4)
dl
margin: 0
dt
@include meta
margin-bottom: $spacing0
&:not(:first-of-type)
margin-top: $spacing2
dd:first-of-type
a
display: flex
flex-direction: column
span
order: 3
.name
a
@include h4
@include stretched-link(before)
text-decoration: none
.document-nav
// @include media-breakpoint-up(desktop)
// grid-column: 1 / 5
// img
// width: col(2, 4)
dl
margin: 0
dt
@include meta
margin-bottom: $spacing0
&:not(:first-of-type)
margin-top: $spacing2
dd:first-of-type
a
display: flex
flex-direction: column
span
order: 3
layouts/papers/single.html
+ 3
− 5
View file @ 6c05f8c7
......@@ -9,21 +9,19 @@
) -}}
<div class="document-content" itemscope itemtype="https://schema.org/ScholarlyArticle">
<meta itemprop="name" content="{{ partial "PrepareHTML" .Title }}">
{{ partial "papers/sidebar.html" . }}
<div class="container">
{{ partial "papers/document-nav.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>
{{ partial "blocks/list.html" . }}
{{ end }}
layouts/partials/commons/menu.html
+ 1
− 1
View file @ 6c05f8c7
......@@ -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\"" -}}
......
layouts/partials/papers/modal.html
+ 2
− 2
View file @ 6c05f8c7
<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">
......
layouts/partials/papers/sidebar.html 0 → 100644
+ 77
− 0
View file @ 6c05f8c7
<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 "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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment