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

This commit is contained in:
Eliseu Amaro 2021-07-21 16:39:55 +01:00 committed by Hugo Sales
parent 868dbbd44e
commit 98e7e94dfa
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
5 changed files with 37 additions and 33 deletions

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%;
}
/*

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);
}

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);
}

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>

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') %}