[CSS] Improved performance, reduced padding [COMPONENTS][LeftPanel] Consolidated CSS into base.css [COMPONENTS][RightPanel] Consolidated CSS into base.css [PLUGINS][WebMonetization] Replaced fieldset with section

Accessibility tests failed if the fieldset had no legend, since it
wasn't really neeeded, it was replaced as another element.
This commit is contained in:
Eliseu Amaro 2022-01-19 18:21:51 +00:00 committed by Diogo Peralta Cordeiro
parent bdeb3bcff5
commit 7d546e8901
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
13 changed files with 186 additions and 334 deletions

View File

@ -4,7 +4,7 @@
{% block body %}
<section class="section-widget section-padding">
<h2 class="section-title">{{ title }}</h2>
<h1 class="section-title">{{ title }}</h1>
<div>
<p>{% trans %}Sort by:{% endtrans %}</p>
@ -26,7 +26,7 @@
{% endfor %}
<p>{% trans %}Page: %page%{% endtrans %}</p>
{% else %}
<h3>{{ empty_message }}</h3>
<h2>{{ empty_message }}</h2>
{% endif %}
</div>
</section>

View File

@ -4,23 +4,23 @@
<h2>{{ctitle}}</h2>
</summary>
{% if has_collections %}
<fieldset class="section-form">
<section class="section-form">
{{ form(add_form) }}
</fieldset>
</section>
<details class="section-widget-subtitle-details section-padding"
title="Expand if you want to access more options.">
<summary class="section-subtitle-summary">
<strong>{% trans %}Other options{% endtrans %}</strong>
</summary>
<fieldset class="section-form">
<section class="section-form">
{{ form(create_form) }}
</fieldset>
</section>
</details>
{% else %}
<fieldset class="section-form">
<section class="section-form">
{{ form(create_form) }}
</fieldset>
</section>
{% endif %}
</details>
</section>

View File

@ -1,28 +1,24 @@
{% block leftpanel %}
<section class="section-panel-left">
<a id="anchor-left-panel" class="anchor-hidden"
title="{{ 'Press tab followed by a space to access left panel' | trans }}"></a>
<label class="panel-left-icon" for="panel-left-toggle"
tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
<input type="checkbox" id="panel-left-toggle" tabindex="0" title="{{ 'Open right panel' | trans }}">
<label class="panel-left-icon" for="toggle-panel-left" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
<a id="anchor-left-panel" class="anchor-hidden" tabindex="0" title="{{ 'Press tab followed by a space to access left panel' | trans }}"></a>
<input type="checkbox" id="toggle-panel-left" tabindex="0" title="{{ 'Open left panel' | trans }}">
<aside class="header-panel">
<article class="panel-content accessibility-target">
{% if app.user %}
<section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
{% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
{{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
</section>
{% else %}
<section>
{{ block("profile_security", "cards/navigation/view.html.twig") }}
</section>
{% endif %}
<aside class="section-panel section-panel-left">
<article class="panel-content accessibility-target">
{% if app.user %}
<section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
{% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
{{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
</section>
{% else %}
<section>
{{ block("profile_security", "cards/navigation/view.html.twig") }}
</section>
{% endif %}
{{ block("feeds", "cards/navigation/view.html.twig") }}
{{ block("feeds", "cards/navigation/view.html.twig") }}
{{ block("footer", "cards/navigation/view.html.twig") }}
</article>
</aside>
</section>
{{ block("footer", "cards/navigation/view.html.twig") }}
</article>
</aside>
{% endblock leftpanel %}

View File

@ -1,69 +1,65 @@
{% block rightpanel %}
<section class="section-panel-right">
<a id="anchor-right-panel" class="anchor-hidden"
title="{{ 'Press tab followed by a space to access right panel' | trans }}"></a>
<label class="panel-right-icon" for="panel-right-toggle"
tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
<input type="checkbox" id="panel-right-toggle" tabindex="0" title="{{ 'Open right panel' | trans }}">
<label class="panel-right-icon" for="toggle-panel-right" tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
<a id="anchor-right-panel" class="anchor-hidden" tabindex="0" title="{{ 'Press tab followed by a space to access right panel' | trans }}"></a>
<input type="checkbox" id="toggle-panel-right" tabindex="0" title="{{ 'Open right panel' | trans }}">
<aside class="header-panel">
<article class="panel-content accessibility-target">
<section>
{% set prepend_right_panel = handle_event('PrependRightPanel', request) %}
{% for widget in prepend_right_panel %}
{{ widget | raw }}
{% endfor %}
</section>
<aside class="section-panel section-panel-right">
<article class="panel-content accessibility-target">
<section>
{% set prepend_right_panel = handle_event('PrependRightPanel', request) %}
{% for widget in prepend_right_panel %}
{{ widget | raw }}
{% endfor %}
</section>
{% set current_path = app.request.get('_route') %}
{% set blocks = handle_event('AppendRightPostingBlock', request) %}
{% if blocks['post_form'] is defined %}
<section class="section-widget" title="{{ 'Create a new note.' | trans }}">
<details class="section-widget-title-details" open="open"
title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="section-title-summary">
<h2>
{% set current_path = app.request.get('_route') %}
{% if current_path == 'conversation_reply_to' %}
{{ "Reply to note" | trans }}
{% else %}
{{ "Create a note" | trans }}
{% endif %}
</h2>
{% set current_path = app.request.get('_route') %}
{% set blocks = handle_event('AppendRightPostingBlock', request) %}
{% if blocks['post_form'] is defined %}
<section class="section-widget" title="{{ 'Create a new note.' | trans }}">
<details class="section-widget-title-details" open="open"
title="{{ 'Expand if you want to access more options.' | trans }}">
<summary class="section-title-summary">
<h2>
{% set current_path = app.request.get('_route') %}
{% if current_path == 'conversation_reply_to' %}
{{ "Reply to note" | trans }}
{% else %}
{{ "Create a note" | trans }}
{% endif %}
</h2>
</summary>
<section class="section-form">
{{ form_start(blocks['post_form']) }}
{{ form_errors(blocks['post_form']) }}
{% if blocks['post_form'].in is defined %}
{{ form_row(blocks['post_form'].in) }}
{% endif %}
{{ form_row(blocks['post_form'].visibility) }}
{{ form_row(blocks['post_form'].content_type) }}
{{ form_row(blocks['post_form'].content) }}
{{ form_row(blocks['post_form'].attachments) }}
<details class="section-widget-subtitle-details">
<summary class="section-subtitle-summary">
<strong>
{{ "Additional options" | trans }}
</strong>
</summary>
<fieldset class="section-form">
{{ form_start(blocks['post_form']) }}
{{ form_errors(blocks['post_form']) }}
{% if blocks['post_form'].in is defined %}
{{ form_row(blocks['post_form'].in) }}
{% endif %}
{{ form_row(blocks['post_form'].visibility) }}
{{ form_row(blocks['post_form'].content_type) }}
{{ form_row(blocks['post_form'].content) }}
{{ form_row(blocks['post_form'].attachments) }}
<details class="section-widget-subtitle-details">
<summary class="section-subtitle-summary">
<strong>
{{ "Additional options" | trans }}
</strong>
</summary>
{{ form_row(blocks['post_form'].language) }}
{{ form_row(blocks['post_form'].tag_use_canonical) }}
</details>
{{ form_rest(blocks['post_form']) }}
{{ form_end(blocks['post_form']) }}
</fieldset>
{{ form_row(blocks['post_form'].language) }}
{{ form_row(blocks['post_form'].tag_use_canonical) }}
</details>
{{ form_rest(blocks['post_form']) }}
{{ form_end(blocks['post_form']) }}
</section>
{% endif %}
</details>
</section>
{% endif %}
{% set extra_blocks = get_right_panel_blocks({'path': current_path, 'request': app.request, 'vars': (right_panel_vars | default)}) %}
{% for block in extra_blocks %}
{{ block | raw }}
{% endfor %}
</article>
</aside>
</section>
{% set extra_blocks = get_right_panel_blocks({'path': current_path, 'request': app.request, 'vars': (right_panel_vars | default)}) %}
{% for block in extra_blocks %}
{{ block | raw }}
{% endfor %}
</article>
</aside>
{% endblock rightpanel %}

View File

@ -1,8 +1,6 @@
<section title="{{ 'Search for notes, actors, and beyond' | trans }}">
<fieldset class="section-form form-search">
{{ form_start(search) }}
<span>{{ form_row(search.search_query) }}{{ form_row(search.submit_search) }}</span>
{{ form_rest(search) }}
{{ form_end(search) }}
</fieldset>
<section class="section-form form-search" title="{{ 'Search for notes, actors, and beyond' | trans }}">
{{ form_start(search) }}
<span>{{ form_row(search.search_query) }}{{ form_row(search.submit_search) }}</span>
{{ form_rest(search) }}
{{ form_end(search) }}
</section>

View File

@ -3,9 +3,9 @@
<summary class="section-title-summary">
<h2>Web Monetization</h2>
</summary>
<fieldset class="section-form">
<section class="section-form">
{{ form(the_form) }}
</fieldset>
</section>
</details>
</section>

View File

@ -1,5 +1,6 @@
html {
font-family: 'Open Sans', sans-serif;
scroll-margin-top: var(--xxl);
}
@ -50,65 +51,25 @@ html {
.page-header {
z-index: 1;
display: inline-flex;
justify-content: center;
position: fixed;
display: flex;
top: 0;
align-items: baseline;
font-family: 'Poppins', sans-serif;
height: var(--xxl);
align-items: baseline;
padding: var(--s);
background: var(--gradient) !important;
box-shadow: var(--shadow);
}
.header-instance {
display: flex;
position: absolute;
text-align: center;
align-items: center;
align-self: center;
margin-left: auto;
flex: 1;
}
.header-instance > * {
.header-instance * {
margin: unset;
}
.header-extra-actions {
justify-self: flex-end;
margin-left: auto;
}
.header-extra-actions[open] > *:not(summary) {
z-index: 2;
position: absolute;
top: 100%;
right: 0;
width: 16.5vw;
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background: var(--background-hard);
box-shadow: var(--shadow);
}
.header-panel {
display: flex;
flex-direction: column;
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 0;
margin-top: var(--xxl);
height: calc(100% - var(--xxl));
padding: var(--s);
overflow-y: auto;
}
.panel-content {
display: flex;
flex-direction: column;
}
.page-content-wrapper {
position: relative;
top: var(--xxl);
@ -151,6 +112,26 @@ html {
justify-content: space-evenly;
}
.section-panel {
position: fixed;
top: var(--xxl);
padding: var(--s);
}
.section-panel-left {
left: 0;
}
.section-panel-right {
right: 0;
}
.section-panel .panel-content {
display: block;
height: 100vh;
background: var(--background-hard);
}
@media only screen and (max-width: 1280px) {
.page-header {
width: 100%;
@ -164,23 +145,26 @@ html {
max-width: 100%;
}
.header-extra-actions[open] > *:not(summary) {
width: 100%;
label[for|="toggle-panel"] {
cursor: pointer;
}
#panel-left-toggle:not(:checked) + .header-panel,
#panel-right-toggle:not(:checked) + .header-panel {
input[id|="toggle-panel"] {
position: absolute;
top: -100%;
}
#toggle-panel-left:not(:checked) ~ .section-panel-left,
#toggle-panel-right:not(:checked) ~ .section-panel-right {
display: none;
}
#panel-left-toggle:checked + .header-panel,
#panel-right-toggle:checked + .header-panel,
a[id|="anchor"]:target ~ .panel-content {
display: flex;
width: 100%;
background-size: 100% 100%;
z-index: auto;
background-color: var(--background-hard) !important;
#toggle-panel-left:checked ~ .section-panel-left,
#toggle-panel-right:checked ~ .section-panel-right {
z-index: 1;
width: 100vw;
left: 0;
overflow-y: auto;
}
}
@ -189,7 +173,12 @@ html {
width: 100%;
}
.header-panel {
label[for|="toggle-panel"],
input[id|="toggle-panel"] {
display: none !important;
}
.section-panel {
width: 17vw;
}
@ -213,7 +202,7 @@ html {
* > .page-content-wrapper
* 66% * 2/3 = 44%
*
* > .header-panel
* > .section-panel
* 66% - 44% = 22%
* 22% / 2 = 11%
*/
@ -222,10 +211,23 @@ html {
align-self: center;
}
.header-panel {
label[for|="toggle-panel"],
input[id|="toggle-panel"] {
display: none !important;
}
.section-panel {
width: 11vw;
}
.section-panel-left {
left: 17vw;
}
.section-panel-right {
right: 17vw;
}
.page-content-wrapper {
width: 44vw;
}

View File

@ -32,8 +32,8 @@
}
.note-sidebar > * {
max-width: 4rem;
max-height: 4rem;
max-width: 3rem;
max-height: 3rem;
width: 100%;
height: auto;
border-radius: 2px;
@ -137,12 +137,11 @@ embed header {
border-bottom: unset;
border-radius: 0 var(--s) 0 0;
line-height: initial;
padding: 8px var(--s) 8px 0;
padding: 4px var(--s) 4px 0;
}
.note-info {
margin-top: 2px;
margin-right: 2px;
background: var(--gradient-backwards);
}
@ -152,6 +151,7 @@ embed header {
.note-info-start {
display: flex;
flex: 1;
flex-wrap: wrap;
}
@ -188,9 +188,7 @@ embed header {
}
.note-actions {
display: inline-block;
align-items: center;
margin-left: auto;
float: right;
}
.note-actions > li {
@ -269,10 +267,10 @@ embed header {
.button-container {
border: none !important;
mask-repeat: no-repeat !important;
mask-size: cover !important;
mask-size: contain !important;
display: inline-block;
width: var(--unit);
height: var(--unit);
width: 14px;
height: 14px;
background-color: var(--foreground);
opacity: 0.33;
}
@ -322,7 +320,7 @@ embed header {
display: flex;
flex-direction: column;
border-radius: 0 0 var(--s) var(--s);
padding: 0 var(--s) var(--s) 0;
padding: 0 4px 4px 0;
}
.note-text a {
@ -341,7 +339,6 @@ embed header {
border-radius: var(--s);
padding: var(--s);
align-self: flex-start;
background-color: var(--background-card) !important;
}
.note-attachments-unit:not(:only-child) {
@ -401,13 +398,8 @@ embed header {
.note-sidebar {
padding: 8px 2px 0 2px;
}
.note-sidebar .avatar {
width: 60%;
}
.button-container {
width: 0.937rem;
height: 0.937rem;
.note-sidebar > * {
max-width: 2rem;
max-height: 2rem;
}
}

View File

@ -74,6 +74,10 @@
margin: 4px unset unset;
}
.profile-navigation > * {
display: block;
}
.profile-extra-actions {
margin-top: var(--s);
margin-right: var(--s);
@ -346,4 +350,13 @@ textarea.form-row-widget {
padding: 2px 6px;
margin-top: 6px;
margin-bottom: 6px;
}
.footer ul {
display: flex;
flex-wrap: wrap;
}
.footer ul li {
margin-right: var(--s);
}

View File

@ -1,95 +0,0 @@
.section-panel-left {
position: absolute;
left: 0;
}
#panel-left-toggle:not(:checked),
#panel-left-toggle:checked {
position: absolute;
top: -100%;
}
.panel-left-icon {
cursor: pointer !important;
padding-left: var(--s);
border: 2px solid transparent;
vertical-align: middle;
}
.profile-navigation {
display: flex;
flex-direction: column;
}
/* FEED NAVIGATION / PLUGINS */
.feed-nav {
margin-bottom: var(--xl);
}
.feed-nav a {
display: flex;
}
.feed-nav hr {
flex: 1;
background: linear-gradient(90deg, var(--accent), transparent);
}
.feed-nav a {
color: var(--foreground);
}
.feed-nav .active {
color: var(--foreground);
}
.main-nav a {
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
font-size: var(--unit);
}
.footer ul {
display: inline-flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-start;
}
.footer ul li {
margin-right: 5px;
}
/* > 720p */
@media only screen and (min-width:1281px) {
.section-panel-left #panel-left-toggle ~ .header-panel {
left: 0;
}
.panel-left-icon {
opacity: 0;
}
}
/* > 1080p */
@media only screen and (min-width:1921px) {
/*
* Using the Van de Graaf Canon and Tschicholds recommended 2:3 page-size ratio
*
* 50% - (100 * 2/3) / 2 = 33%
*
* > .section-panel-left
* 50 % - 33% = 17%
*/
.section-panel-left {
left: 0;
margin-left: 17vw;
}
}

View File

@ -1,52 +0,0 @@
.section-panel-right {
position: absolute;
right: 0;
}
#panel-right-toggle:not(:checked),
#panel-right-toggle:checked {
position: absolute;
top: -100%;
}
.section-panel-right #panel-right-toggle:checked ~ .header-panel {
left: 0;
}
.panel-right-icon {
cursor: pointer !important;
padding-right: var(--s);
border: 2px solid transparent;
vertical-align: middle;
}
.section-panel-right textarea {
resize: vertical;
}
@media only screen and (min-width: 1281px) {
.section-panel-right #panel-right-toggle ~ .header-panel {
right: 0;
}
.panel-right-icon {
opacity: 0;
}
}
/* > 1080p */
@media only screen and (min-width:1921px) {
/*
* Using the Van de Graaf Canon and Tschicholds recommended 2:3 page-size ratio
*
* 50% - (100 * 2/3) / 2 = 33%
*
* > .section-panel-right
* 50 % - 33% = 17%
*/
.section-panel-right {
margin-right: 17vw;
}
}

View File

@ -94,12 +94,14 @@
<header class="page-header">
{{ block("leftpanel", "stdgrid.html.twig") }}
<a id="anchor-main-page" class="anchor-hidden"
title="{{ 'Press tab to access instance\'s main page.' | trans }}"></a>
<a class="accessibility-target header-instance" href="{{ path('feed_public') }}" tabindex="0"
title="{{ 'This instance\'s name. Access public feed.' | trans }}">
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }}</h1>
</a>
<span class="header-instance">
<a id="anchor-main-page" class="anchor-hidden"
title="{{ 'Press tab to access instance\'s main page.' | trans }}"></a>
<a class="accessibility-target" href="{{ path('feed_public') }}" tabindex="0"
title="{{ 'This instance\'s name. Access public feed.' | trans }}">
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }}</h1>
</a>
</span>
{{ block("rightpanel", "stdgrid.html.twig") }}
</header>

View File

@ -12,7 +12,7 @@
{% block body %}
<nav class='section-widget section-padding'>
<h2 class="section-widget-title">Settings</h2>
<h1 class="section-widget-title">Settings</h1>
<ul>
<li>
{% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}