GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[TWIG] Fix empty accessibility menu anchor, accesskey anchors placement 

[CSS] Dark theme hover/focus border, settings page form visibility
This commit is contained in:
Eliseu Amaro 2021-12-01 20:13:24 +00:00
parent 030c966b74
commit e7ee558f4a
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
15 changed files with 99 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/Left/templates/left/view.html.twig
View File

@ -1,24 +0,0 @@
{% block leftpanel %}
<label class="panel-left-icon" for="panel-left-toggle" aria-hidden="true" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
<input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
<section class="header-panel section-panel-left">
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content accessibility-target">
{% if app.user %}
<section class='section-widget section-widget-padded' 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("footer", "cards/navigation/view.html.twig") }}
</aside>
</section>
{% endblock leftpanel %}

2
components/Left/Controller/EditFeeds.php → components/LeftPanel/Controller/EditFeeds.php
View File

@ -21,7 +21,7 @@ declare(strict_types = 1);
// }}}
namespace Component\Left\Controller;
namespace Component\LeftPanel\Controller;
use App\Core\Cache;
use App\Core\Controller;

6
components/Left/Left.php → components/LeftPanel/LeftPanel.php
View File

@ -19,14 +19,14 @@ declare(strict_types = 1);
// along with GNU social. If not, see <http://www.gnu.org/licenses/>.
// }}}
namespace Component\Left;
namespace Component\LeftPanel;
use App\Core\Event;
use App\Core\Modules\Component;
use App\Core\Router\RouteLoader;
use Component\Left\Controller as C;
use Component\LeftPanel\Controller as C;
class Left extends Component
class LeftPanel extends Component
{
public function onAddRoute(RouteLoader $r): bool
{

0
components/Left/templates/left/edit_feeds.html.twig → components/LeftPanel/templates/left_panel/edit_feeds.html.twig
View File

25
components/LeftPanel/templates/left_panel/view.html.twig Normal file
View File

@ -0,0 +1,25 @@
{% block leftpanel %}
<label class="panel-left-icon" for="panel-left-toggle" aria-hidden="true"
tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
<input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<section class="header-panel section-panel-left accessibility-target">
<aside class="panel-content">
{% if app.user %}
<section class='section-widget section-widget-padded' 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("footer", "cards/navigation/view.html.twig") }}
</aside>
</section>
{% endblock leftpanel %}

33
components/Right/templates/right/view.html.twig
View File

@ -1,33 +0,0 @@
{% block rightpanel %}
<label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
<div class="header-panel section-panel-right">
<a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content accessibility-target">
{% 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-title-details" title={{ 'Expand if you want to access more options.' | trans }}>
<summary class="section-title-summary">
{{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary>
</details>
<div class="section-form">
<fieldset>
{{ form(blocks['post_form']) }}
</fieldset>
</div>
</section>
{% endif %}
{% set current_path = app.request.get('_route') %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars | default }) %}
{{ block | raw }}
{% endfor %}
</aside>
</div>
{% endblock rightpanel %}

4
components/Right/Right.php → components/RightPanel/RightPanel.php
View File

@ -19,12 +19,12 @@ declare(strict_types = 1);
// along with GNU social. If not, see <http://www.gnu.org/licenses/>.
// }}}
namespace Component\Right;
namespace Component\RightPanel;
use App\Core\Event;
use App\Core\Modules\Component;
class Right extends Component
class RightPanel extends Component
{
/**
* Output our dedicated stylesheet

35
components/RightPanel/templates/right_panel/view.html.twig Normal file
View File

@ -0,0 +1,35 @@
{% block rightpanel %}
<label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true"
tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
<a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<div class="header-panel section-panel-right accessibility-target">
<aside class="panel-content">
{% 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-title-details"
title={{ 'Expand if you want to access more options.' | trans }}>
<summary class="section-title-summary">
{{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary>
</details>
<div class="section-form">
<fieldset>
{{ form(blocks['post_form']) }}
</fieldset>
</div>
</section>
{% endif %}
{% set current_path = app.request.get('_route') %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars | default }) %}
{{ block | raw }}
{% endfor %}
</aside>
</div>
{% endblock rightpanel %}

3
public/assets/default_theme/css/base.css
View File

@ -38,7 +38,8 @@ body,input,textarea,select {
color: currentColor;
}
a:hover {
a:hover,
a:focus {
text-decoration: underline;
}

6
public/assets/default_theme/css/pages/settings.css
View File

@ -1,5 +1,6 @@
.section-settings {
border: 2px solid var(--border);
box-shadow: var(--shadow);
}
.section-settings,
@ -9,7 +10,10 @@
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
box-shadow: var(--shadow);
}
.section-title-settings[open] {
border-left: 2px solid var(--accent);
}
.section-title-settings[open] > summary:first-child {

6
public/assets/default_theme/css/root.css
View File

@ -13,8 +13,8 @@
--background-card: #131217;
--border: #201f25;
--accent: #5ddbcf;
--shadow: 0px 0px 199px -76px #01010166;
--shadow: 0px 25px 42px -10px rgba(0,0,0,0.09) !important;
--shadow: 0px 5px 20px -10px rgba(255,255,255,0.1) !important;
--shadow-inset-accent: inset 0 0 0 2px var(--accent);
--background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
--gradient: linear-gradient(10deg,var(--border) 0,transparent 90%) !important;
--gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important;
@ -28,7 +28,7 @@
--background-card: #f0f0f0;
--border: #d5d5d5;
--accent: #a22430;
--shadow: 0px 25px 42px -10px rgba(0,0,0,0.09) !important;
--shadow: 0px 25px 42px -10px rgba(0,0,0,0.1) !important;
--shadow-inset-accent: inset 0 0 0 2px var(--accent);
--background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
--gradient: linear-gradient(10deg,var(--background-hard) 0,transparent 60%) !important;

2
public/assets/default_theme/css/widgets/buttons.css
View File

@ -136,7 +136,7 @@ textarea {
padding: 6px 8px !important;
border-radius: var(--smaller);
border: 2px solid var(--border) !important;
box-shadow: var(--shadow);
box-shadow: var(--shadow) !important;
width: inherit;
max-width: border-box !important;
}

60
public/assets/icons/logo.svg.twig
View File

@ -1,57 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg6"
sodipodi:docname="logo.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs10" />
<sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
width="16px"
inkscape:zoom="7.2107905"
inkscape:cx="-29.955107"
inkscape:cy="30.232469"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<title
id="title2">
{{ config('site', 'name') }}
</title>
<path
d="M 6.9900123,15.675447 C 7.83238,15.249709 8.6457213,14.448891 8.9542101,13.741415 9.4249113,12.663981 9.562081,12.706668 5.6638515,12.706668 c -3.8384667,0 -4.1828131,-0.06545 -4.89085768,-0.926605 C 0.42580152,11.35774 0.4127107,11.161947 0.4127107,6.3980138 c 0,-4.79353 0.0113834,-4.9591578 0.37052813,-5.44238122 C 1.4662401,0.03756508 1.7502547,3.4146019e-8 8.0116686,3.4146019e-8 14.275358,3.4146019e-8 14.532053,0.03528851 15.245789,0.99490515 c 0.322149,0.43313655 0.3415,0.73991795 0.3415,5.40310865 0,4.7639332 -0.01309,4.9602962 -0.360283,5.3820492 -0.517374,0.62893 -1.223141,0.926605 -2.199264,0.926605 -0.757562,0 -0.863427,0.0444 -0.956771,0.400125 -0.141723,0.54071 -0.887901,1.363157 -1.657416,1.828167 -0.7757747,0.468424 -2.7735536,1.075157 -3.509487,1.064912 l -0.5424168,-0.0074 z m 3.1161927,-4.946636 c 0.679017,-0.311335 1.334698,-1.314208 1.495203,-2.2863465 0.07684,-0.4655798 0.0996,-0.884487 0.05122,-0.9311588 -0.175303,-0.1673352 -3.1349746,-0.087082 -3.1349746,0.085375 0,0.093913 -0.1058655,0.6892627 0.028462,0.9971814 C 8.7225578,8.9985406 9.1329277,8.7833955 9.4613369,8.8260834 9.7436439,8.8630814 9.8978893,9.017323 9.661685,9.3241046 9.4545112,9.5927521 9.2120461,9.6530834 8.3571558,9.6485301 7.4470538,9.6434077 7.1362884,9.5500641 6.7725902,9.2301921 6.3696195,8.875601 6.3582361,8.5984165 6.3024577,7.4156856 6.2267584,5.8174628 6.4168605,5.5271873 7.6451238,5.3655437 c 1.0188108,-0.1343236 2.070632,0.062039 2.3563542,0.6625112 0.170181,0.3574372 0.110418,0.421184 0.74561,0.421184 0.876518,0 0.935142,-0.2424654 0.595918,-1.133782 C 11.123876,4.7388901 10.92979,4.8771979 11.181362,4.3700694 11.616206,3.4929821 11.526278,2.8805577 10.860352,2.1850348 10.20524,1.5008952 9.9132573,1.5487053 10.23313,2.287485 10.348101,2.552717 10.416401,2.9824386 10.385665,3.24141 10.34184,3.6085231 10.230284,3.7240641 9.8836603,3.7627676 9.6355032,3.7906568 9.3395363,3.6990208 9.2160266,3.5567288 8.9604706,3.2619 8.4971679,3.2226274 8.2347823,3.4736304 8.1089955,3.594294 7.9160479,3.5863256 7.5973144,3.4474486 7.2125569,3.2795442 7.0884782,3.2937734 6.8095861,3.5351005 6.6274525,3.6927599 6.2973352,3.7974867 6.075929,3.7673209 5.7207684,3.7189417 5.6746658,3.6255982 5.6832033,2.9704861 5.6883258,2.5618238 5.7549185,2.0979522 5.8311868,1.9391543 6.0662531,1.4473935 5.4913938,1.5987921 4.9990638,2.1582839 4.4811212,2.7468032 4.3900543,3.8304985 4.8101001,4.4042195 c 0.2316513,0.3164572 0.047241,0.3671131 -0.08253,1.0683277 -0.6255152,3.3791482 0.022767,4.6353018 1.7183172,5.2955358 1.1093075,0.431999 2.6716727,0.415493 3.6620237,-0.0387 z"
id="path4"
style="stroke-width:0.569167" />
<metadata
id="metadata12">
<?xml version="1.0" encoding="UTF-8"?>
<svg class="{{ iconClass|default('') }}" version="1.1" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<title>{{ config('site', 'name') }}</title>
<path d="m6.99 15.675c0.84237-0.42574 1.6557-1.2266 1.9642-1.934 0.4707-1.0774 0.60787-1.0347-3.2904-1.0347-3.8385 0-4.1828-0.06545-4.8909-0.9266-0.34719-0.42232-0.36028-0.61812-0.36028-5.382 0-4.7935 0.011383-4.9592 0.37053-5.4424 0.683-0.91807 0.96702-0.95563 7.2284-0.95563 6.2637 0 6.5204 0.035288 7.2341 0.99491 0.32215 0.43314 0.3415 0.73992 0.3415 5.4031 0 4.7639-0.01309 4.9603-0.36028 5.382-0.51737 0.62893-1.2231 0.9266-2.1993 0.9266-0.75756 0-0.86343 0.0444-0.95677 0.40012-0.14172 0.54071-0.8879 1.3632-1.6574 1.8282-0.77577 0.46842-2.7736 1.0752-3.5095 1.0649l-0.54242-0.0074zm3.1162-4.9466c0.67902-0.31134 1.3347-1.3142 1.4952-2.2863 0.07684-0.46558 0.0996-0.88449 0.05122-0.93116-0.1753-0.16734-3.135-0.087082-3.135 0.085375 0 0.093913-0.10587 0.68926 0.028462 0.99718 0.17644 0.40468 0.58681 0.18953 0.91522 0.23222 0.28231 0.036998 0.43655 0.19124 0.20035 0.49802-0.20717 0.26865-0.44964 0.32898-1.3045 0.32443-0.9101-0.0051224-1.2209-0.098466-1.5846-0.41834-0.40297-0.35459-0.41435-0.63178-0.47013-1.8145-0.075699-1.5982 0.1144-1.8885 1.3427-2.0501 1.0188-0.13432 2.0706 0.062039 2.3564 0.66251 0.17018 0.35744 0.11042 0.42118 0.74561 0.42118 0.87652 0 0.93514-0.24247 0.59592-1.1338-0.21913-0.57657-0.41322-0.43826-0.16164-0.94539 0.43484-0.87709 0.34492-1.4895-0.32101-2.185-0.65511-0.68414-0.94709-0.63633-0.62722 0.10245 0.11497 0.26523 0.18327 0.69495 0.15254 0.95392-0.043825 0.36711-0.15538 0.48265-0.502 0.52136-0.24816 0.027889-0.54412-0.063747-0.66763-0.20604-0.25556-0.29483-0.71886-0.3341-0.98124-0.083098-0.12579 0.12066-0.31873 0.1127-0.63747-0.026182-0.38476-0.1679-0.50884-0.15368-0.78773 0.087652-0.18213 0.15766-0.51225 0.26239-0.73366 0.23222-0.35516-0.048379-0.40126-0.14172-0.39273-0.79683 0.0051225-0.40866 0.071715-0.87253 0.14798-1.0313 0.23507-0.49176-0.33979-0.34036-0.83212 0.21913-0.51794 0.58852-0.60901 1.6722-0.18896 2.2459 0.23165 0.31646 0.047241 0.36711-0.08253 1.0683-0.62552 3.3791 0.022767 4.6353 1.7183 5.2955 1.1093 0.432 2.6717 0.41549 3.662-0.0387z" stroke-width=".56917"/>
<metadata>
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>
{{ config('site', 'name') }}
</dc:title>
<cc:Work rdf:about="">
<dc:title>{{ config('site', 'name') }}</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

24
templates/base.html.twig
View File

@ -3,7 +3,8 @@
<head>
{% block meta %}
{# This is far from perfect. The response headers should already come with this. #}
{% if app.request.server.get('APP_ENV') not in ['test', 'dev'] %}<meta http-equiv="Content-Security-Policy" content="default-src https:">{% endif %}
{% if app.request.server.get('APP_ENV') not in ['test', 'dev'] %}
<meta http-equiv="Content-Security-Policy" content="default-src https:">{% endif %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="home" href="/">
@ -38,7 +39,8 @@
<p tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</p>
<p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
<br>
<p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}</p>
<p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}
</p>
<p tabindex="0">
{% if is_firefox() == true %}
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
@ -48,13 +50,10 @@
</p>
<br>
<a accesskey="z" href="#anchor-accessibility-menu" class="anchor-hidden"></a>
<a id="anchor-accessibility-menu" class="anchor-hidden"></a>
<p tabindex="0">
<a id="anchor-accessibility-menu" accesskey="z" href="#anchor-accessibility-menu">
<strong>{{ 'The keyboard key ' | trans }}<kbd>Z</kbd>{{ ' accesses this menu.' | trans }}</strong>
<strong>{{ 'The other access keys are:' | trans }}</strong>
</p>
</a>
<nav>
<ul>
@ -72,14 +71,16 @@
<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('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public feed.' | trans }}">
<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('main_public') }}" tabindex="0"
title="{{ 'This instance\'s name. Access public feed.' | trans }}">
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }}</h1>
</a>
<details class="header-extra-actions">
<summary>
{{ icon('kebab', 'icon icon-details-open') | raw }}
{{ icon('kebab', 'icon icon-details-open') | raw }}
</summary>
<div class="header-extra-actions-open">
{% for extra_form in extra_header_forms %}
@ -95,7 +96,8 @@
{% endblock header %}
<div class="page-content-wrapper">
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access main content.' | trans }}"></a>
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
title="{{ 'Press tab to access main content.' | trans }}"></a>
<div class='page-content accessibility-target'>
{% block nav %}{% endblock %}
{% block body %}{% endblock %}

4
templates/stdgrid.html.twig
View File

@ -5,9 +5,9 @@
{% endblock %}
{% block leftpanel %}
{% include '/left/view.html.twig' %}
{% include '/left_panel/view.html.twig' %}
{% endblock %}
{% block rightpanel %}
{% include '/right/view.html.twig' %}
{% include '/right_panel/view.html.twig' %}
{% endblock %}