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

[TWIG][CSS] Panels are fixed and base content acts accordingly on all sizes.

Browse Source 
Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-28 15:37:54 +01:00 committed by Hugo Sales
parent 7b6a44cfbb
commit d16614982a
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 78 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,8 +110,8 @@ a:hover {
transition: all 0.4s ease;
}
#instance a:focus svg,
#instance a:hover svg {
#instance:focus svg,
#instance:hover svg {
fill: var(--bg1);
transition: all 0.4s ease;
}
@ -119,6 +119,7 @@ a:hover {
summary:hover > svg,
summary:focus > svg {
border-radius: var(--unit-size);
padding: var(--small-size) !important;
background: var(--white);
fill: var(--bg1);
transition: all 0.4s ease;
@ -134,10 +135,6 @@ hr {
/* DEFAULTS */
body,
html {
display: flex;
flex-direction: column;
height: 100%;
width: auto;
color: var(--white);
font-family: var(--main-font);
@ -150,14 +147,18 @@ html {
}
#header {
font-size: var(--main-size);
display: flex;
justify-content: center;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
height: calc(5 * var(--unit-size));
padding: var(--small-size);
box-sizing: content-box;
padding: var(--unit-size);
box-sizing: border-box;
width: 100vw;
max-width: 100%;
align-items: center;
background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--accent-blue)),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
@ -169,15 +170,6 @@ html {
#instance {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
#instance a {
display: flex;
color: var(--white);
font-size: var(--main-size);
}
.icon-logo {
@ -195,11 +187,11 @@ html {
/* THE FOCUSED (middle) DIV */
.content {
margin: var(--main-size);
display: flex;
flex-direction: column;
flex: 1;
margin-left: calc(100% / 5);
margin-right: calc(100% / 5);
padding: var(--small-size);
width: 100%;
max-width: calc(3 * (100% / 5));
@ -278,15 +270,11 @@ figcaption a:link {
/* SIDE PANELS */
.panel {
width: 100%;
max-width: calc(100% / 5);
margin: var(--unit-size);
font-size: var(--main-size);
}
.panel aside {
position: sticky;
display: contents;
animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
}
.icon-left,
@ -294,22 +282,35 @@ figcaption a:link {
display: none;
}
/* MEDIA RESIZE */
@media (min-width: 1200px) {
.panel aside {
padding: var(--unit-size);
box-sizing: border-box;
width: calc(100% / 5);
height: border-box;
display: flex !important;
flex-direction: column !important;
position: absolute !important;
top: 100% !important;
}
}
@media (max-width: 1200px) {
.icon-left,
.icon-right {
display: flex;
padding: var(--unit-size);
}
.content {
order: 1;
margin: unset;
max-width: 100% !important;
}
.panel {
all: unset;
width: 0;
}
.panel aside {
display: none;
}
@ -317,18 +318,30 @@ figcaption a:link {
.panel[open] {
width: 100%;
font-size: var(--main-size);
margin: var(--unit-size);
}
.panel[open] {
width: 100%;
all: unset;
display: block;
}
.panel[open] aside {
display: contents;
padding: var(--unit-size);
box-sizing: border-box;
width: 100%;
height: border-box;
display: flex !important;
flex-direction: column !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg2)),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
background-blend-mode: multiply;
background-attachment: fixed;
}
}
/* ANIMATIONS */

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

@ -1,14 +1,4 @@
#left-container {
top: inherit;
left: 0;
}
.icon-left {
position: fixed;
top: 0;
left: 0;
padding: calc(3 * var(--unit-size));
width: var(--main-size);
height: auto;
@ -17,6 +7,10 @@
vertical-align: middle;
}
#left-panel {
left: 0;
}
/* PROFILE */
.profile-nav {
font-family: var(--display-font);

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

@ -1,14 +1,4 @@
#right-container {
top: inherit;
right: 0;
}
.icon-right {
position: fixed;
top: 0;
right: 0;
padding: calc(3 * var(--unit-size));
width: var(--main-size);
height: auto;
@ -17,6 +7,10 @@
vertical-align: middle;
}
#right-panel {
right: 0;
}
.create-notice {
display: flex;
flex-direction: column;

39
templates/base.html.twig
View File

@ -30,34 +30,31 @@
<body>
{% block header %}
<div id='header'>
<nav id='instance'>
<a href="{{ path('main_public') }}" tabindex="2">
{{ icon('logo', 'icon icon-logo') | raw }}
<h1> {{ config('site', 'name') }} </h1>
</a>
</nav>
<details class="panel" id="left-container">
<summary tabindex="1">
{{ icon('person', 'icon icon-left') | raw }}
{{ block("leftpanel", "stdgrid.html.twig") }}
</summary>
</details>
<a id='instance' href="{{ path('main_public') }}" tabindex="2">
{{ icon('logo', 'icon icon-logo') | raw }}
<h1> {{ config('site', 'name') }} </h1>
</a>
<details class="panel" id="right-container">
<summary tabindex="3">
{{ icon('notes', 'icon icon-right') | raw }}
{{ block("rightpanel", "stdgrid.html.twig") }}
</summary>
</details>
</div>
{% endblock header %}
<div class="container">
<details class="panel" id="left-container">
<summary tabindex="1">
{{ icon('person', 'icon icon-left') | raw }}
{{ block("leftpanel", "stdgrid.html.twig") }}
</summary>
</details>
{% block nav %}{% endblock %}
{% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %}
<details class="panel" id="right-container">
<summary tabindex="3">
{{ icon('notes', 'icon icon-right') | raw }}
{{ block("rightpanel", "stdgrid.html.twig") }}
</summary>
</details>
</div>
</body>