[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:
parent
6e6b2ea87b
commit
e73af2b887
GPG Key ID:
7D0C7EAFC9D835A0
@ -80,16 +80,6 @@
|
||||
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 {
|
||||
fill: var(--white);
|
||||
width: 1em;
|
||||
@ -109,6 +99,9 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
@ -116,11 +109,8 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.markdown-blocks {
|
||||
@ -258,54 +248,6 @@
|
||||
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 */
|
||||
.section-widget {
|
||||
display: flex;
|
||||
@ -494,6 +436,62 @@ input[type=file]:hover {
|
||||
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 */
|
||||
@keyframes fadeIn {
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
#left-panel {
|
||||
.panel-left .panel-content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#panel-left-toggle:not(:checked),
|
||||
#panel-left-toggle:checked {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* PROFILE */
|
||||
.profile-nav {
|
||||
font-family: var(--display-font);
|
||||
@ -99,6 +105,6 @@
|
||||
padding-left: var(--unit-size);
|
||||
}
|
||||
|
||||
.footer * {
|
||||
font-size: var(--small-size);
|
||||
.footer {
|
||||
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
#right-panel {
|
||||
.panel-right .panel-content {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#right-container .section-form {
|
||||
font-size: var(--small-size) !important;
|
||||
#panel-right-toggle:not(:checked),
|
||||
#panel-right-toggle:checked {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -31,12 +31,7 @@
|
||||
<body class="bg" aria-atomic="true">
|
||||
{% block header %}
|
||||
<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") }}
|
||||
</details>
|
||||
{{ block("leftpanel", "stdgrid.html.twig") }}
|
||||
|
||||
<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>
|
||||
@ -44,12 +39,7 @@
|
||||
</a>
|
||||
|
||||
{% 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") }}
|
||||
</details>
|
||||
{% endif %}
|
||||
</header>
|
||||
{% endblock header %}
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
<aside id='left-panel' role="region" tabindex="-1">
|
||||
<nav class='profile-nav'>
|
||||
<div class="panel panel-left">
|
||||
<input type="checkbox" id="panel-left-toggle">
|
||||
<label for="panel-left-toggle">{{ icon('menu', 'icon icon-left') | raw }}</label>
|
||||
|
||||
{% if app.user %}
|
||||
<section class='profile' role="complementary">
|
||||
<div id="profile-links">
|
||||
<a id="user-avatar" href="{{ path('settings') }}">
|
||||
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
|
||||
</a>
|
||||
<aside class="panel-content">
|
||||
<nav class='profile-nav'>
|
||||
{% if app.user %}
|
||||
<section class='profile' role="complementary">
|
||||
<div id="profile-links">
|
||||
<a id="user-avatar" href="{{ path('settings') }}">
|
||||
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
|
||||
</a>
|
||||
|
||||
<span id="user-info">
|
||||
<span id="user-info">
|
||||
<a id="user-nick" href="{{ path('settings') }}">
|
||||
<h1>{{ user_nickname }}</h1>
|
||||
</a>
|
||||
@ -22,70 +25,71 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="stats">
|
||||
<label>{{ 'Followers' | trans }} {{ user_followers }}</label>
|
||||
<label>{{ 'Followed' | trans }} {{ user_followed }}</label>
|
||||
</section>
|
||||
<section id="stats">
|
||||
<label>{{ 'Followers' | trans }} {{ user_followers }}</label>
|
||||
<label>{{ 'Followed' | trans }} {{ user_followed }}</label>
|
||||
</section>
|
||||
|
||||
{# {% for extra in profile_extras %}
|
||||
{# {% for extra in profile_extras %}
|
||||
{% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
|
||||
{% endfor %} #}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<nav role="navigation">
|
||||
<a href='#'>Messages</a>
|
||||
<a href="{{ path("replies", {'nickname' : user_nickname}) }}"
|
||||
class='hover-effect {{ active("replies") }}'>Replies</a>
|
||||
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
|
||||
{{ link | raw }}
|
||||
{% endfor %}
|
||||
<a href="{{ path('settings') }}"
|
||||
class='hover-effect {{ active('settings_') }}'>Settings</a>
|
||||
<a href='{{ path('logout') }}'>Logout</a>
|
||||
</nav>
|
||||
|
||||
{% else %}
|
||||
<nav>
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
|
||||
<a href="{{ path('register') }}">Register</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="timeline-nav" role="menu">
|
||||
<nav>
|
||||
<h1 role="tab">Timeline</h1>
|
||||
|
||||
<nav class='sec-nav' role="navigation">
|
||||
<a href="{{ path('main_public') }}"
|
||||
class='{{ active('main_public') }}'>Public</a>
|
||||
|
||||
{% if user_nickname is defined %}
|
||||
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
|
||||
class='{{ active("home_all") }}'>Home</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
|
||||
|
||||
{% if main_nav_tabs is defined %}
|
||||
{% for tab in main_nav_tabs %}
|
||||
<a href="{{ path(tab['route']) }}"
|
||||
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<nav role="navigation">
|
||||
<a href='#'>Messages</a>
|
||||
<a href="{{ path("replies", {'nickname' : user_nickname}) }}"
|
||||
class='hover-effect {{ active("replies") }}'>Replies</a>
|
||||
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
|
||||
{{ link | raw }}
|
||||
{% endfor %}
|
||||
<a href="{{ path('settings') }}"
|
||||
class='hover-effect {{ active('settings_') }}'>Settings</a>
|
||||
<a href='{{ path('logout') }}'>Logout</a>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
{% else %}
|
||||
<nav>
|
||||
<a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
|
||||
<a href="{{ path('register') }}">Register</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="timeline-nav" role="menu">
|
||||
<nav>
|
||||
<h1 role="tab">Timeline</h1>
|
||||
|
||||
<nav class='sec-nav' role="navigation">
|
||||
<a href="{{ path('main_public') }}"
|
||||
class='{{ active('main_public') }}'>Public</a>
|
||||
|
||||
{% if user_nickname is defined %}
|
||||
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
|
||||
class='{{ active("home_all") }}'>Home</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
|
||||
|
||||
{% if main_nav_tabs is defined %}
|
||||
{% for tab in main_nav_tabs %}
|
||||
<a href="{{ path(tab['route']) }}"
|
||||
class='{{ active(tab['route']) }}'>{{ tab['title'] }}</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="footer" role="contentinfo">
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
|
||||
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
|
||||
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</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>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="footer" role="contentinfo">
|
||||
<a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
|
||||
<a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
|
||||
<a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</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>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
</div>
|
||||
@ -1,52 +1,57 @@
|
||||
<aside id='right-panel' role="region" tabindex="-1">
|
||||
{% if post_form is defined %}
|
||||
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
|
||||
<details class="section-title">
|
||||
<summary class="section-title-menu">
|
||||
{{ "Create a note" | trans }}
|
||||
{{ icon('plus-circle', 'icon icon-plus') | raw }}
|
||||
</summary>
|
||||
<div class="panel panel-right">
|
||||
<input type="checkbox" id="panel-right-toggle">
|
||||
<label for="panel-right-toggle">{{ icon('notes', 'icon icon-right') | raw }}</label>
|
||||
|
||||
{% for tab in tabs %}
|
||||
<a class="section-title-menu-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
|
||||
{% endfor %}
|
||||
</details>
|
||||
<aside class="panel-content">
|
||||
{% if post_form is defined %}
|
||||
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
|
||||
<details class="section-title">
|
||||
<summary class="section-title-menu">
|
||||
{{ "Create a note" | trans }}
|
||||
{{ icon('plus-circle', 'icon icon-plus') | raw }}
|
||||
</summary>
|
||||
|
||||
<div class="section-form">
|
||||
{{ form_start(post_form) }}
|
||||
{% for tab in tabs %}
|
||||
<a class="section-title-menu-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
|
||||
{% endfor %}
|
||||
</details>
|
||||
|
||||
<span class="section-form-target">
|
||||
<div class="section-form">
|
||||
{{ form_start(post_form) }}
|
||||
|
||||
<span class="section-form-target">
|
||||
{{ form_label(post_form.to) }}
|
||||
{{ form_widget(post_form.to) }}
|
||||
{{ form_widget(post_form.to) }}
|
||||
</span>
|
||||
|
||||
{{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }}
|
||||
{{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }}
|
||||
|
||||
{{ form_row(post_form.content, {'attr': {'class': 'section-form-textarea'}}) }}
|
||||
{{ form_row(post_form.content, {'attr': {'class': 'section-form-textarea'}}) }}
|
||||
|
||||
<label for="{{ post_form.attachments.vars.id }}" class="section-form-options">
|
||||
{{ form_widget(post_form.attachments) }}
|
||||
</label>
|
||||
<label for="{{ post_form.attachments.vars.id }}" class="section-form-options">
|
||||
{{ form_widget(post_form.attachments) }}
|
||||
</label>
|
||||
|
||||
{{ form_row(post_form.post_note, {'attr': {'class': 'section-form-send'}}) }}
|
||||
{{ form_row(post_form.post_note, {'attr': {'class': 'section-form-send'}}) }}
|
||||
|
||||
{{ form_end(post_form) }}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% set current_path = app.request.get('_route') %}
|
||||
{% if right_panel_vars is defined %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
|
||||
<section class="section-widget">
|
||||
{{ block | raw }}
|
||||
{{ form_end(post_form) }}
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
|
||||
<section class="section-widget">
|
||||
{{ block | raw }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
{% set current_path = app.request.get('_route') %}
|
||||
{% if right_panel_vars is defined %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
|
||||
<section class="section-widget">
|
||||
{{ block | raw }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
|
||||
<section class="section-widget">
|
||||
{{ block | raw }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user