From 95c81cc741a6fc1918638c9cdc9fb03c7fd32449 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Tue, 20 Jul 2021 15:51:32 +0100 Subject: [PATCH] [TWIG][CSS] Panels functionality works as intended, size needs to be worked upon. --- public/assets/css/base.css | 34 ++++++-- public/assets/css/left/left.css | 20 +++++ public/assets/css/reset.css | 49 +++--------- public/assets/css/right/right.css | 16 ++++ templates/base.html.twig | 7 +- templates/sidepanel/left/left.html.twig | 2 +- templates/sidepanel/right/right.html.twig | 96 +++++++++++------------ 7 files changed, 122 insertions(+), 102 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 0f4a3364c9..76aa808c13 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -111,12 +111,11 @@ html { color: var(--white); /* BLENDING BANDING IN FIREFOX */ - /* basically emulating screen blending with just "images" */ - background-color: var(--bg1); - background-image: radial-gradient(ellipse at bottom, var(--bg1), transparent), - url(data:image/png;base64,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); + 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; + } #header { @@ -129,9 +128,10 @@ html { height: calc(5 * var(--unit-size)); padding: var(--small-size); - background: repeating-linear-gradient(var(--bg2), var(--bg1)), - url(data:image/png;base64,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); + background-image: radial-gradient(ellipse at 50% 5%, var(--bg1), var(--bg3)), + 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; box-shadow: var(--shadow); } @@ -153,6 +153,24 @@ html { fill: var(--white); } -.navigation { - padding-top: calc(2 * var(--small-size) + var(--main-size)); +/* CONTAINS ALL ELEMENTS BESIDES HEADER */ +.container { + padding-top: calc(3 * var(--small-size) + var(--main-size)); + display: flex; + justify-content: center; } +/* THE FOCUSED (middle) DIV */ +.content { + order: 2; + flex-grow: 5; + max-width: calc(100vw/2); +} + +/* EVERY SIDE PANEL DETAIL ELEMENT */ +.panel[open] { + flex-grow: 1; + display: flex; + flex-direction: column; + padding: var(--small-size); + box-sizing: border-box; +} \ No newline at end of file diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index d8a3395162..5d18131da9 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -10,4 +10,24 @@ fill: var(--white); stroke-width: 0; vertical-align: middle; +} +.icon-avatar { + width: var(--main-size); + height: auto; +} + +#left-container > div { + opacity: 0; +} +#left-container[open] > div { + opacity: 100%; +} +#left-container[open] { + order: 1; + border-right: solid 1px var(--bg2); +} + +#left-panel { + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 7f9b159b24..7da7777022 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -1,19 +1,13 @@ /* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */ -:link, :visited { - text-decoration: none -} +:link,:visited { text-decoration:none } /* no list-markers by default, since lists are used more often for semantics */ -ul, ol { - list-style: none -} +ul,ol { list-style:none } /* avoid browser default inconsistent heading font-sizes */ /* and pre/code too */ -h1, h2, h3, h4, h5, h6, pre, code { - font-size: 1em; -} +h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } /* remove the inconsistent (among browsers) default ul,ol padding or margin */ /* the default spacing on headings does not match nor align with @@ -21,48 +15,23 @@ h1, h2, h3, h4, h5, h6, pre, code { /* zero out the spacing around pre, form, body, html, p, blockquote as well */ /* form elements are oddly inconsistent, and not quite CSS emulatable. */ /* nonetheless strip their margin and padding as well */ -ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea { - margin: 0; - padding: 0; - border: none; -} +ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,textarea +{ margin:0; padding:0; border:none; } /* whoever thought blue linked image borders were a good idea? */ -a img, :link img, :visited img { - border: none -} +a img,:link img,:visited img { border:none } /* de-italicize address */ -address { - font-style: normal -} +address { font-style:normal } /* firefox focus outline */ -:focus { - outline: none; -} - -::-moz-focus-inner { - border: 0; -} +:focus {outline:none;} +::-moz-focus-inner {border:0;} /* details element arrow */ details > summary { list-style: none; } - details > summary::-webkit-details-marker { display: none; -} - -/* have IE ignore the detail elements altogether */ -@supports not (-ms-ime-align: auto) { - - details summary { - cursor: pointer; - } - - details summary > * { - display: inline; - } } \ No newline at end of file diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index f4997f17f5..9387a0f6d6 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -10,4 +10,20 @@ fill: var(--white); stroke-width: 0; vertical-align: middle; +} + +#right-container > div { + opacity: 0; +} +#right-container[open] > div { + opacity: 100%; +} +#right-container[open] { + order: 3; + border-left: solid 1px var(--bg2); +} + +#right-panel { + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index 02570a34eb..82c3542d4c 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -28,7 +28,6 @@ {% endfor %} - {% block header %} diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index 2c53ef1b94..dfc267c8d1 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -1,4 +1,4 @@ -
+
{{ icon('menu', 'icon icon-left') | raw }} {% if app.user %}
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index 45cb30ae92..76e2ca2a15 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -1,60 +1,58 @@ -
- {{ icon('menu', 'icon icon-right') | raw }} -
-
- {% if post_form is defined %} - {{ form_start(post_form) }} -
-
-
- {{ form_label(post_form.to) }} +
+ {{ icon('drop', 'icon icon-right') | raw }} +
+ {% if post_form is defined %} + {{ form_start(post_form) }} +
+
+
+ {{ form_label(post_form.to) }} +
+
+ {{ form_widget(post_form.to) }} +
+
+
+
+
+ {{ form_row(post_form.visibility) }}
-
- {{ form_widget(post_form.to) }} +
+ {% for tab in tabs %} + {{ tab['title'] }} + {% endfor %}
-
-
-
- {{ form_row(post_form.visibility) }} -
-
- {% for tab in tabs %} - {{ tab['title'] }} - {% endfor %} -
+
+
+ {{ form_row(post_form.content) }}
-
-
- {{ form_row(post_form.content) }} -
+
+
+
+ {{ form_widget(post_form.attachments) }} +
-
-
- {{ form_widget(post_form.attachments) }} - -
-
- {{ form_row(post_form.post) }} -
+
+ {{ form_row(post_form.post) }}
- {{ form_end(post_form) }} - {% endif %} +
+ {{ form_end(post_form) }} + {% endif %} - {% set current_path = app.request.get('_route') %} - {% if right_panel_vars is defined %} - {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %} - {{ block | raw }} - {% endfor %} - {% else %} - {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %} - {{ block | raw }} - {% endfor %} - {% endif %} -
+ {% set current_path = app.request.get('_route') %} + {% if right_panel_vars is defined %} + {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %} + {{ block | raw }} + {% endfor %} + {% else %} + {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %} + {{ block | raw }} + {% endfor %} + {% endif %}
\ No newline at end of file