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

[TWIG][CSS][ICONS] New profile and notice creation panel, alternative text set correctly for header icons. WIP in base styling and panels.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-07-21 16:39:55 +01:00 committed by Hugo Sales
parent f687c7b315
commit a44e81a1ed
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
15 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/assets/css/base.css
View File

@ -109,6 +109,8 @@ a:focus {
/* DEFAULTS */
body,
html {
display: flex;
flex-direction: column;
height: 100%;
width: auto;
color: var(--white);
@ -122,10 +124,10 @@ html {
}
#header {
order: 1;
display: flex;
justify-content: center;
position: fixed;
pointer-events: none;
width: 100%;
height: calc(5 * var(--unit-size));
@ -159,29 +161,32 @@ html {
/* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container {
padding-top: calc(3 * var(--small-size) + var(--main-size));
order: 2;
display: flex;
justify-content: space-evenly;
width: 100%;
max-height: calc(100% - (3 * var(--small-size) + var(--main-size)));
margin-top: auto;
}
/* THE FOCUSED (middle) DIV */
.content {
order: 2;
max-width: calc(100vw / 2);
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
width: calc(3 * (100%/5));
padding: var(--small-size);
}
/* EVERY SIDE PANEL DETAIL ELEMENT */
.panel {
all: unset;
width: calc(1 * (100%/5));
}
.panel[open] {
width: calc((100vw / 4) - var(--small-size));
display: flex;
flex-direction: column;
padding: var(--small-size);
box-sizing: border-box;
height: 100%;
}
/*

10
public/assets/css/left/left.css
View File

@ -17,17 +17,25 @@
height: auto;
}
#right-container {
order: 1;
}
#left-container[open] > div {
opacity: 100%;
}
#left-container[open] {
order: 1;
width: calc(100vw / 4);
border-right: solid 1px var(--bg2);
}
#left-panel {
#left-container[open] > #left-panel {
position: fixed;
display: flex;
flex-direction: column;
width: 100%;
padding: var(--small-size);
}

9
public/assets/css/right/right.css
View File

@ -12,8 +12,8 @@
vertical-align: middle;
}
#right-container > div {
opacity: 0;
#right-container {
order: 3;
}
#right-container[open] > div {
@ -21,7 +21,7 @@
}
#right-container[open] {
order: 3;
width: calc(100vw / 4);
border-left: solid 1px var(--bg2);
}
@ -29,4 +29,7 @@
position: fixed;
display: flex;
flex-direction: column;
width: 100%;
padding: var(--small-size);
}

1
public/assets/icons/attach.svg.twig
View File

@ -1,4 +1,3 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>attach</title>
<path d="M4.703 29.192c-3.652-3.768-3.584-9.844 0.087-13.599l13.11-13.41c2.77-2.833 7.272-2.833 10.042 0 2.743 2.806 2.746 7.333 0 10.142l-13.051 11.381c-2.048 1.659-4.032 1.617-5.243 0.067-1.048-1.407-1.181-3.381 0.454-5.377l8.775-9.424c1.421-1.318 3.019 0.439 1.965 1.644l-8.723 9.548c-0.833 0.91 0.286 2.144 1.163 1.34l11.8-11.976c1.226-1.254 1.226-3.295-0.001-4.55-1.199-1.227-3.122-1.227-4.322 0l-13.11 13.41c-2.303 2.326-1.592 5.802 0.391 7.61 3.605 3.643 7.555 0.332 12.211-3.69 0.386-0.395 5.076-4.978 7.183-6.899 0.901-0.618 1.824 0.244 1.201 1.554l-9.69 11.7c-3.892 4.233-10.565 4.322-14.242 0.528z"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 814 B

After

Width:  |  Height:  |  Size: 781 B

1
public/assets/icons/avatar.svg.twig
View File

@ -1,4 +1,3 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>avatar</title>
<path opacity="0.992" fill="#fff" d="M31.612 16.632c-0.347 8.622-7.618 15.329-16.241 14.98s-15.331-7.622-14.984-16.245c0.347-8.622 7.618-15.329 16.241-14.98s15.331 7.622 14.984 16.245z"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 390 B

After

Width:  |  Height:  |  Size: 357 B

1
public/assets/icons/heart.svg.twig
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

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

@ -1,5 +1,4 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>logo</title>
<title>{{ config('site', 'name') }}</title>
<path d="M14.225 29.263c1.48-0.748 2.909-2.155 3.451-3.398 0.827-1.893 1.068-1.818-5.781-1.818-6.744 0-7.349-0.115-8.593-1.628-0.61-0.742-0.633-1.086-0.633-9.456 0-8.422 0.020-8.713 0.651-9.562 1.2-1.613 1.699-1.679 12.7-1.679 11.005 0 11.456 0.062 12.71 1.748 0.566 0.761 0.6 1.3 0.6 9.493 0 8.37-0.023 8.715-0.633 9.456-0.909 1.105-2.149 1.628-3.864 1.628-1.331 0-1.517 0.078-1.681 0.703-0.249 0.95-1.56 2.395-2.912 3.212-1.363 0.823-4.873 1.889-6.166 1.871l-0.953-0.013zM19.7 20.572c1.193-0.547 2.345-2.309 2.627-4.017 0.135-0.818 0.175-1.554 0.090-1.636-0.308-0.294-5.508-0.153-5.508 0.15 0 0.165-0.186 1.211 0.050 1.752 0.31 0.711 1.031 0.333 1.608 0.408 0.496 0.065 0.767 0.336 0.352 0.875-0.364 0.472-0.79 0.578-2.292 0.57-1.599-0.009-2.145-0.173-2.784-0.735-0.708-0.623-0.728-1.11-0.826-3.188-0.133-2.808 0.201-3.318 2.359-3.602 1.79-0.236 3.638 0.109 4.14 1.164 0.299 0.628 0.194 0.74 1.31 0.74 1.54 0 1.643-0.426 1.047-1.992-0.385-1.013-0.726-0.77-0.284-1.661 0.764-1.541 0.606-2.617-0.564-3.839-1.151-1.202-1.664-1.118-1.102 0.18 0.202 0.466 0.322 1.221 0.268 1.676-0.077 0.645-0.273 0.848-0.882 0.916-0.436 0.049-0.956-0.112-1.173-0.362-0.449-0.518-1.263-0.587-1.724-0.146-0.221 0.212-0.56 0.198-1.12-0.046-0.676-0.295-0.894-0.27-1.384 0.154-0.32 0.277-0.9 0.461-1.289 0.408-0.624-0.085-0.705-0.249-0.69-1.4 0.009-0.718 0.126-1.533 0.26-1.812 0.413-0.864-0.597-0.598-1.462 0.385-0.91 1.034-1.070 2.938-0.332 3.946 0.407 0.556 0.083 0.645-0.145 1.877-1.099 5.937 0.040 8.144 3.019 9.304 1.949 0.759 4.694 0.73 6.434-0.068z"></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

1
public/assets/icons/menu.svg.twig
View File

@ -1,4 +1,3 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>menu</title>
<path d="M2.222 12.6h27.497c1.219 0 2.208 0.988 2.208 2.208v1.263c0 1.219-0.988 2.208-2.208 2.208h-27.497c-1.219 0-2.208-0.988-2.208-2.208v-1.263c0-1.219 0.988-2.208 2.208-2.208z"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 761 B

After

Width:  |  Height:  |  Size: 728 B

6
public/assets/icons/notes.svg.twig Normal file
View File

@ -0,0 +1,6 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<title>Create a note</title>
<path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v9.5C0 13.216.784 14 1.75 14H3v1.543a1.457 1.457 0 002.487 1.03L8.061 14h6.189A1.75 1.75 0 0016 12.25v-9.5A1.75 1.75 0 0014.25 1H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 15.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-9.5z"></path><path d="M22.5 8.75a.25.25 0 00-.25-.25h-3.5a.75.75 0 010-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0122.25 20H21v1.543a1.457 1.457 0 01-2.487 1.03L15.939 20H10.75A1.75 1.75 0 019 18.25v-1.465a.75.75 0 011.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 01.53.22l2.72 2.72v-2.19a.75.75 0 01.75-.75h2a.25.25 0 00.25-.25v-9.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 928 B

6
public/assets/icons/person.svg.twig Normal file
View File

@ -0,0 +1,6 @@
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<title>Profile</title>
<path fill-rule="evenodd" d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 458 B

1
public/assets/icons/repeat.svg.twig
View File

@ -1,4 +1,3 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>repeat</title>
<path d="M16.93 22.627c0.914-0.547 1.931-0.247 2.325 0.762l0.544 1.697 6.041 0.087c1.566 0.034 2.565-1.676 1.765-3.022l-1.661-2.793c-0.212-0.356-0.868-1.092-0.094-1.553l2.149-1.278c0.74-0.44 1.172 0.43 1.383 0.786l1.658 2.787c2.407 4.047-0.585 9.169-5.289 9.066l-6.075 0.337-0.691 1.568c-0.455 0.764-1.106 1.047-2.245 0.51l-4.627-3.773c-0.382-0.399-0.382-1.349 0.017-1.73z"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/assets/icons/reply.svg.twig
View File

@ -1,4 +1,3 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>reply</title>
<path d="M0.958 15.559l5.203-10.197c0.499-1.17 1.745-3.012 3.015-0.799l0.933 1.625c10.329-3.208 17.723 1.178 19.613 6.884 1.208 3.645 0.922 8.871-1.711 13.899-0.663 0.954-1.522 0.315-1.375-0.532 3.126-11.733-6.743-17.108-11.882-10.468l0.81 1.99c0.518 1.271-0.64 1.541-2.779 1.161l-10.828-1.524c-0.884-0.232-1.358-1.197-0.999-2.039z"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 536 B

After

Width:  |  Height:  |  Size: 503 B

1
public/assets/icons/search.svg.twig
View File

@ -1,4 +1,3 @@
<!-- Generated by IcoMoon.io -->
<svg class="{{ iconClass|default('') }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>search</title>
<path d="M11.421 0.625c-5.74 0-10.394 4.653-10.394 10.394v0c0 5.74 4.653 10.394 10.394 10.394v0c2.434-0 4.673-0.837 6.445-2.239l-0.022 0.017 0.716 0.73c-0.311 0.579-0.224 1.321 0.256 1.808l9.021 9.14c0.576 0.584 1.492 0.573 2.055-0.023l0.651-0.69c0.562-0.596 0.552-1.546-0.024-2.13l-9.021-9.14c-0.471-0.477-1.17-0.557-1.716-0.244l-0.645-0.658c1.661-1.835 2.678-4.281 2.678-6.964v0c0-5.74-4.653-10.394-10.394-10.394v0zM11.421 3.932c0 0 0 0 0 0 3.914 0 7.086 3.173 7.086 7.086v0c-0 3.914-3.173 7.086-7.086 7.086-0 0-0 0-0 0v0c-3.914-0-7.086-3.173-7.086-7.086v0c0-3.914 3.173-7.086 7.086-7.086v0z"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 799 B

After

Width:  |  Height:  |  Size: 766 B

15
templates/base.html.twig
View File

@ -42,31 +42,20 @@
<div class="container">
<details class="panel" id="left-container">
<summary>
{{ icon('menu', 'icon icon-left') | raw }}
<div class="panel-desktop">
{{ block("leftpanel", "stdgrid.html.twig") }}
</div>
{{ icon('person', 'icon icon-left') | raw }}
</summary>
<div class="panel-mobile">
{{ block("leftpanel", "stdgrid.html.twig") }}
</div>
</details>
{% block nav %}{% endblock %}
{% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %}
<details class="panel" id="right-container">
<summary>
{{ icon('drop', 'icon icon-right') | raw }}
<div class="panel-desktop">
{{ block("rightpanel", "stdgrid.html.twig") }}
</div>
{{ icon('notes', 'icon icon-right') | raw }}
</summary>
<div class="panel-mobile">
{{ block("rightpanel", "stdgrid.html.twig") }}
</div>
</details>
</div>

7
templates/sidepanel/right/right.html.twig
View File

@ -1,9 +1,7 @@
<div id='right-panel'>
{% if post_form is defined %}
{{ post_form }}
{#{{ form_start(post_form) }}
{{ form_start(post_form) }}
<div class="create-notice">
<div class="target">
<div class="target-top">
@ -42,7 +40,8 @@
</div>
</div>
</div>
{{ form_end(post_form) }}#}
{{ form_end(post_form) }}
{% endif %}
{% set current_path = app.request.get('_route') %}