[TWIG][CSS] Left and Right panels now using a checkbox trick to control their visibility. Details element couldn't be properly controlled by CSS without breaking accessibility.

This commit is contained in:
Eliseu Amaro 2021-08-28 21:23:25 +01:00 committed by Hugo Sales
parent 6e6b2ea87b
commit e73af2b887
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
6 changed files with 192 additions and 187 deletions

View File

@ -80,16 +80,6 @@
transition: var(--cubic-transition); transition: var(--cubic-transition);
} }
.panel aside {
font-size: var(--medium-size);
position: absolute;
top: 100%;
width: 20%;
animation: var(--fade-in);
padding: var(--unit-size);
}
.icon { .icon {
fill: var(--white); fill: var(--white);
width: 1em; width: 1em;
@ -109,6 +99,9 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
margin-left: 20%;
margin-right: 20%;
padding: var(--unit-size); padding: var(--unit-size);
} }
@ -116,11 +109,8 @@
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20%;
margin-right: 20%;
width: 100%; width: 100%;
max-width: 60%;
} }
.markdown-blocks { .markdown-blocks {
@ -258,54 +248,6 @@
height: auto; height: auto;
} }
/* MEDIA RESIZE */
@media (min-width: 1200px) {
/* no need to make the panels disappear at this size */
/*.icon-left,
.icon-right {
visibility: hidden;
}*/
}
@media (max-width: 1200px) {
/* content should occupy the entire width at this size */
.content {
margin: unset;
max-width: 100%;
}
/* by default they are hidden */
.panel aside {
display: none;
}
.panel:not(:focus-within or :not[open]) aside {
display: none;
}
.panel[open]:focus-within aside,
.panel[open] {
display: flex;
flex-direction: column;
}
.panel[open] aside {
padding: var(--unit-size);
box-sizing: border-box;
width: 100%;
height: 100vh;
background-color: var(--bg3);
background-image: url(../images/bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 100%;
}
.panel[open] aside .footer {
max-width: 100%;
}
}
/* SECTIONS */ /* SECTIONS */
.section-widget { .section-widget {
display: flex; display: flex;
@ -494,6 +436,62 @@ input[type=file]:hover {
color: var(--white) !important; color: var(--white) !important;
} }
/* MEDIA QUERIES */
/* sidepanels need to be shown by default on desktop, hidden on mobile */
.panel .panel-content {
display: flex;
flex-direction: column;
/* should remain in place for the user */
position: fixed;
top: 0;
/* should be bellow header */
margin-top: 3rem;
/* should occupy the entire vertical real estate */
height: 100%;
padding: var(--unit-size);
}
@media (min-width: 1200px) {
.panel label {
display: none;
}
.panel .panel-content {
width: 100%;
max-width: 20%;
}
}
@media (max-width: 1200px) {
/* content should occupy the entire width at this size */
.container {
margin: unset;
}
.content {
max-width: 100%;
}
#panel-left-toggle:not(:checked) ~ .panel-content,
#panel-right-toggle:not(:checked) ~ .panel-content {
display: none;
}
#panel-left-toggle:checked ~ .panel-content,
#panel-right-toggle:checked ~ .panel-content {
display: flex;
width: 100%;
background-color: var(--bg2);
background-image: url(../images/bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
/* ANIMATIONS */ /* ANIMATIONS */
@keyframes fadeIn { @keyframes fadeIn {

View File

@ -1,7 +1,13 @@
#left-panel { .panel-left .panel-content {
left: 0; left: 0;
} }
#panel-left-toggle:not(:checked),
#panel-left-toggle:checked {
position: absolute;
opacity: 0;
}
/* PROFILE */ /* PROFILE */
.profile-nav { .profile-nav {
font-family: var(--display-font); font-family: var(--display-font);
@ -99,6 +105,6 @@
padding-left: var(--unit-size); padding-left: var(--unit-size);
} }
.footer * { .footer {
font-size: var(--small-size);
} }

View File

@ -1,7 +1,9 @@
#right-panel { .panel-right .panel-content {
right: 0; right: 0;
} }
#right-container .section-form { #panel-right-toggle:not(:checked),
font-size: var(--small-size) !important; #panel-right-toggle:checked {
position: absolute;
opacity: 0;
} }

View File

@ -31,12 +31,7 @@
<body class="bg" aria-atomic="true"> <body class="bg" aria-atomic="true">
{% block header %} {% block header %}
<header id='header' role="banner"> <header id='header' role="banner">
<details class="panel" id="left-container" aria-live="polite">
<summary tabindex="0" aria-roledescription="Left Panel. Expand to login, register or navigate this instance.">
{{ icon('menu', 'icon icon-left') | raw }}
</summary>
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
</details>
<a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name."> <a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div> <div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
@ -44,12 +39,7 @@
</a> </a>
{% if app.user %} {% if app.user %}
<details class="panel" id="right-container" aria-live="polite">
<summary tabindex="0" aria-roledescription="Right Panel. Expand to create a new note.">
{{ icon('notes', 'icon icon-right') | raw }}
</summary>
{{ block("rightpanel", "stdgrid.html.twig") }} {{ block("rightpanel", "stdgrid.html.twig") }}
</details>
{% endif %} {% endif %}
</header> </header>
{% endblock header %} {% endblock header %}

View File

@ -1,6 +1,9 @@
<aside id='left-panel' role="region" tabindex="-1"> <div class="panel panel-left">
<nav class='profile-nav'> <input type="checkbox" id="panel-left-toggle">
<label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
<aside class="panel-content">
<nav class='profile-nav'>
{% if app.user %} {% if app.user %}
<section class='profile' role="complementary"> <section class='profile' role="complementary">
<div id="profile-links"> <div id="profile-links">
@ -88,4 +91,5 @@
<a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a> <a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
<a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a> <a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
</div> </div>
</aside> </aside>
</div>

View File

@ -1,4 +1,8 @@
<aside id='right-panel' role="region" tabindex="-1"> <div class="panel panel-right">
<input type="checkbox" id="panel-right-toggle">
<label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
<aside class="panel-content">
{% if post_form is defined %} {% if post_form is defined %}
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}> <section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
<details class="section-title"> <details class="section-title">
@ -49,4 +53,5 @@
</section> </section>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</aside> </aside>
</div>