consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use details tag to show/hide a draft version TOC

Browse Source 
We were using JavaScript to show/hide the Table of Contents.

In my humble opinion, the <details> tag has a few shortcomings [1][2],
which means we should be careful about when to use it.

IMHO a Table of Contents is a good candidate for this tag because it's a
very common pattern to add a show/hide behavior for it, even if using it
means the "navigation" role (which we are *not* using anyway) wouldn't
be identified correctly.

I'm adding a <details> tag to the comments section as well for
consistency and in order to simplify the code. I'm not sure this is as
good an application of the <details> tag, though, but then again I'm not
sure about the interface we use to show/hide the comments (and this
feeling is increased by the fact that we use a different interface on
small screens). If we decide to change the interface in the future, we
might consider using the <details> tag for the Table of Contents but not
for the comments.

Since the <details> tag is not supported on Internet Explorer, I'm
only adding styles to this tag using the `:not([open])` option. On
Internet Explorer <details> will always be opened and so these styles
will be ignored.

[1] https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html
[2] https://daverupert.com/2019/12/why-details-is-not-an-accordion/
This commit is contained in:
Javi Martín
2020-11-14 12:50:30 +01:00
parent 220b1de01e
commit 41e5ddbcdf
5 changed files with 57 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
app/assets/stylesheets/legislation_process.scss
View File

@@ -326,33 +326,6 @@
position: relative;
padding: rem-calc(32) 0;
%calc-collapsed {
.draft-panel {
@include breakpoint(medium) {
line-height: 1;
display: block;
font-size: $small-font-size;
text-transform: uppercase;
font-weight: 700;
color: #696969;
padding: 0;
text-align: center;
.icon-banner::before,
.icon-comments::before {
display: block;
margin: rem-calc(24) auto rem-calc(36);
}
.panel-title {
display: block;
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
}
}
}
.draft-chooser {
h3 {
@@ -411,12 +384,6 @@
padding-right: rem-calc(15);
}
.calc-index {
.draft-panel {
cursor: pointer;
}
}
@media screen and (min-width: 40em) {
.calc-index {
width: calc(35% - 25px);
@@ -425,19 +392,6 @@
.calc-text {
width: calc(65% - 25px);
}
.calc-comments {
cursor: pointer;
background: #f2f2f2;
width: rem-calc(50);
.draft-panel {
.panel-title {
display: none;
}
}
}
}
.border-right {
@@ -558,26 +512,51 @@
}
}
&:not(.comments-on) .calc-comments {
@extend %calc-collapsed;
.calc-comments {
position: relative;
}
.comment-box {
summary {
cursor: pointer;
list-style: none;
&::-webkit-details-marker {
display: none;
}
}
}
.comments-on {
.calc-index {
@extend %calc-collapsed;
width: rem-calc(50);
details:not([open]) {
background: #f2f2f2;
cursor: pointer;
.draft-index {
display: none;
@include breakpoint(small only) {
border-bottom: 1px solid #d4d4d4;
}
@include breakpoint(medium) {
width: rem-calc(50);
.draft-panel {
line-height: 1;
display: block;
font-size: $small-font-size;
text-transform: uppercase;
font-weight: 700;
color: #696969;
padding: 0;
text-align: center;
.icon-banner::before,
.icon-comments::before {
display: block;
margin: rem-calc(24) auto rem-calc(36);
}
.panel-title {
display: block;
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
}
}
}
@@ -604,8 +583,14 @@
cursor: auto;
width: calc(35% - 25px);
.draft-panel {
cursor: pointer;
@include breakpoint(small only) {
summary {
display: none;
}
}
&:not([open]) {
border-left: 1px solid #d4d4d4;
}
.comments-box-container {
@@ -790,15 +775,6 @@
}
}
}
.draft-panel {
background: #e5e5e5;
border-left: 1px solid #d4d4d4;
.panel-title {
display: inline-block;
}
}
}
}
}