wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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

Browse Source 
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
No known key found for this signature in database
GPG Key ID: 18D2D35001FBFAB0
13 changed files with 186 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Collection/templates/collection/actors.html.twig
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>

12
components/Collection/templates/collection/widget_add_to.html.twig
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>

42
components/LeftPanel/templates/left_panel/view.html.twig
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 %}

118
components/RightPanel/templates/right_panel/view.html.twig
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 %}

12
components/Search/templates/cards/search/view.html.twig
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>

4
plugins/WebMonetization/templates/WebMonetization/widget.html.twig
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>

120
public/assets/default_theme/css/base.css
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;
}

32
public/assets/default_theme/css/pages/feeds.css
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;
}
}

13
public/assets/default_theme/css/widgets/sections.css
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);
}

95
public/components/LeftPanel/assets/css/view.css
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 Tschichold’s 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;
}
}

52
public/components/RightPanel/assets/css/view.css
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 Tschichold’s recommended 2:3 page-size ratio
*
* 50% - (100 * 2/3) / 2 = 33%
*
* > .section-panel-right
* 50 % - 33% = 17%
*/
.section-panel-right {
margin-right: 17vw;
}
}

14
templates/base.html.twig
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>

2
templates/settings/base.html.twig
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}] %}