From a0b820fd76289533095395779b914a4006aeaca9 Mon Sep 17 00:00:00 2001 From: Diogo Peralta Cordeiro Date: Fri, 30 Apr 2021 02:23:19 +0100 Subject: [PATCH] [CSS] Refactor Right Panel style --- public/assets/css/base.css | 66 ------------------- public/assets/css/base_mid.css | 66 ------------------- public/assets/css/base_small.css | 66 ------------------- public/assets/css/right/right.css | 64 ++++++++++++++++++ public/assets/css/right/right_mid.css | 64 ++++++++++++++++++ public/assets/css/right/right_small.css | 64 ++++++++++++++++++ templates/attachments/show.html.twig | 16 +---- templates/sidepanel/right/right.html.twig | 5 +- .../right/right_stylesheets.html.twig | 3 + templates/stdgrid.html.twig | 1 + 10 files changed, 198 insertions(+), 217 deletions(-) create mode 100644 public/assets/css/right/right.css create mode 100644 public/assets/css/right/right_mid.css create mode 100644 public/assets/css/right/right_small.css create mode 100644 templates/sidepanel/right/right_stylesheets.html.twig diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 9dbb247894..aa83e1cfb3 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -145,72 +145,6 @@ b { z-index: 1; } -/* RIGHT PANEL */ -#right-panel { - order: 3; -} - -.arrow { - border: solid var(--fg); - border-width: 0 3px 3px 0; - display: none; - padding: 0.3em; -} -.right { - transform: rotate(135deg); - -webkit-transform: rotate(135deg); -} - -.rss { - display: flex; - flex-direction: column; - width: var(--nav-size); - height: calc(100vh - (3 * var(--unit-size))); - position: fixed; - background-color: var(--bg1); - margin-top: calc(3 * var(--main-size)); - z-index: 0; - border-left: solid 1px var(--accent-low); -} - -input.larger { - width: var(--main-size); - height: calc( 2 * var(--main-size)); -} - -/* untoggled */ -.rss { - right: 0; - top: 0; - transition: 0.3s ease; -} -.arrow label { - display: block; - cursor: pointer; -} -#toggle-right { - position: absolute; - z-index: 2; - cursor: pointer; - opacity: 0; -} -#toggle-right:not(:checked)+.arrow { - transform: rotate(135deg); - transition: 0.3s ease; -} - -/* toggled */ -#toggle-right:checked~.rss { - display: flex; - right: 0; - top: 0; - transition: 0.3s ease; -} -#toggle-right:checked+.arrow { - transform: rotate(-45deg); - transition: 0.3s ease; -} - /* styling radio buttons and checkboxes */ .content input[type="checkbox"] + label::before { content: ''; diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css index a0e4d28d7a..fa5390aed0 100644 --- a/public/assets/css/base_mid.css +++ b/public/assets/css/base_mid.css @@ -173,72 +173,6 @@ b { z-index: 1; } - -/* RIGHT PANEL */ -#right-panel { - order: 3; -} - -.arrow { - border: solid var(--bg1); - border-width: 0 3px 3px 0; - display: inline-block; - padding: 0.3em; -} -.right { - transform: rotate(135deg); - -webkit-transform: rotate(135deg); -} - -.rss { - display: flex; - flex-direction: column; - width: var(--nav-size); - height: calc(100vh - (3 * var(--unit-size))); - position: fixed; - background-color: var(--bg1); - margin-top: calc(3 * var(--main-size)); - border: solid 1px var(--accent-low); -} - -input.larger { - width: var(--main-size); - height: calc( 2 * var(--main-size)); -} - -/* untoggled */ -.rss { - right: -100%; - top: 0; - transition: 0.3s ease; -} -.arrow label { - display: block; - cursor: pointer -} -#toggle-right { - position: absolute; - z-index: 2; - cursor: pointer; - opacity: 0; -} -#toggle-right:not(:checked)+.arrow { - transform: rotate(135deg); - transition: 0.3s ease; -} - -/* toggled */ -#toggle-right:checked~.rss { - display: flex; - right: 0; - top: 0; - transition: 0.3s ease; -} -#toggle-right:checked+.arrow { - transform: rotate(-45deg); - transition: 0.3s ease; -} - /* styling radio buttons and checkboxes */ .content input[type="checkbox"] + label::before { content: ''; diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index 6b867f6786..e6a080c1d8 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -172,72 +172,6 @@ b { z-index: 1; } - -/* RIGHT PANEL */ -#right-panel { - order: 3; -} - -.arrow { - border: solid var(--bg1); - border-width: 0 3px 3px 0; - display: inline-block; - padding: 0.3em; -} -.right { - transform: rotate(135deg); - -webkit-transform: rotate(135deg); -} - -.rss { - display: flex; - flex-direction: column; - width: var(--nav-size); - height: calc(100vh - (3 * var(--unit-size))); - position: fixed; - background-color: var(--bg1); - margin-top: calc(3 * var(--main-size)); - border: solid 1px var(--accent-low); -} - -input.larger { - width: var(--main-size); - height: calc( 2 * var(--main-size)); -} - -/* untoggled */ -.rss { - right: -100%; - top: 0; - transition: 0.3s ease; -} -.arrow label { - display: block; - cursor: pointer -} -#toggle-right { - position: absolute; - z-index: 2; - cursor: pointer; - opacity: 0; -} -#toggle-right:not(:checked)+.arrow { - transform: rotate(135deg); - transition: 0.3s ease; -} - -/* toggled */ -#toggle-right:checked~.rss { - display: flex; - right: 0; - top: 0; - transition: 0.3s ease; -} -#toggle-right:checked+.arrow { - transform: rotate(-45deg); - transition: 0.3s ease; -} - /* styling radio buttons and checkboxes */ .content input[type="checkbox"] + label::before { content: ''; diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css new file mode 100644 index 0000000000..425c994a05 --- /dev/null +++ b/public/assets/css/right/right.css @@ -0,0 +1,64 @@ +#right-panel { + order: 3; +} + +.arrow { + border: solid var(--fg); + border-width: 0 3px 3px 0; + display: none; + padding: 0.3em; +} +.right { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +#right-container { + display: flex; + flex-direction: column; + width: var(--nav-size); + height: calc(100vh - (3 * var(--unit-size))); + position: fixed; + background-color: var(--bg1); + margin-top: calc(3 * var(--main-size)); + z-index: 0; + border-left: solid 1px var(--accent-low); +} + +input.larger { + width: var(--main-size); + height: calc( 2 * var(--main-size)); +} + +/* untoggled */ +#right-container { + right: 0; + top: 0; + transition: 0.3s ease; +} +.arrow label { + display: block; + cursor: pointer; +} +#toggle-right { + position: absolute; + z-index: 2; + cursor: pointer; + opacity: 0; +} +#toggle-right:not(:checked)+.arrow { + transform: rotate(135deg); + transition: 0.3s ease; +} + +/* toggled */ +#toggle-right:checked~#right-container { + display: flex; + right: 0; + top: 0; + transition: 0.3s ease; +} +#toggle-right:checked+.arrow { + transform: rotate(-45deg); + transition: 0.3s ease; +} diff --git a/public/assets/css/right/right_mid.css b/public/assets/css/right/right_mid.css new file mode 100644 index 0000000000..95cbc78b3c --- /dev/null +++ b/public/assets/css/right/right_mid.css @@ -0,0 +1,64 @@ +/* RIGHT PANEL */ +#right-panel { + order: 3; +} + +.arrow { + border: solid var(--bg1); + border-width: 0 3px 3px 0; + display: inline-block; + padding: 0.3em; +} +.right { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +#right-container { + display: flex; + flex-direction: column; + width: var(--nav-size); + height: calc(100vh - (3 * var(--unit-size))); + position: fixed; + background-color: var(--bg1); + margin-top: calc(3 * var(--main-size)); + border: solid 1px var(--accent-low); +} + +input.larger { + width: var(--main-size); + height: calc( 2 * var(--main-size)); +} + +/* untoggled */ +#right-container { + right: -100%; + top: 0; + transition: 0.3s ease; +} +.arrow label { + display: block; + cursor: pointer +} +#toggle-right { + position: absolute; + z-index: 2; + cursor: pointer; + opacity: 0; +} +#toggle-right:not(:checked)+.arrow { + transform: rotate(135deg); + transition: 0.3s ease; +} + +/* toggled */ +#toggle-right:checked~#right-container { + display: flex; + right: 0; + top: 0; + transition: 0.3s ease; +} +#toggle-right:checked+.arrow { + transform: rotate(-45deg); + transition: 0.3s ease; +} \ No newline at end of file diff --git a/public/assets/css/right/right_small.css b/public/assets/css/right/right_small.css new file mode 100644 index 0000000000..2f7512f65b --- /dev/null +++ b/public/assets/css/right/right_small.css @@ -0,0 +1,64 @@ +/* RIGHT PANEL */ +#right-panel { + order: 3; +} + +.arrow { + border: solid var(--bg1); + border-width: 0 3px 3px 0; + display: inline-block; + padding: 0.3em; +} +.right { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +#right-container { + display: flex; + flex-direction: column; + width: var(--nav-size); + height: calc(100vh - (3 * var(--unit-size))); + position: fixed; + background-color: var(--bg1); + margin-top: calc(3 * var(--main-size)); + border: solid 1px var(--accent-low); +} + +input.larger { + width: var(--main-size); + height: calc( 2 * var(--main-size)); +} + +/* untoggled */ +#right-container { + right: -100%; + top: 0; + transition: 0.3s ease; +} +.arrow label { + display: block; + cursor: pointer +} +#toggle-right { + position: absolute; + z-index: 2; + cursor: pointer; + opacity: 0; +} +#toggle-right:not(:checked)+.arrow { + transform: rotate(135deg); + transition: 0.3s ease; +} + +/* toggled */ +#toggle-right:checked~#right-container { + display: flex; + right: 0; + top: 0; + transition: 0.3s ease; +} +#toggle-right:checked+.arrow { + transform: rotate(-45deg); + transition: 0.3s ease; +} diff --git a/templates/attachments/show.html.twig b/templates/attachments/show.html.twig index f94aaca979..fdb5d498fa 100644 --- a/templates/attachments/show.html.twig +++ b/templates/attachments/show.html.twig @@ -21,19 +21,5 @@ {% endblock body %} {% block right %} - - + {% endblock right %} diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index 6f3cd9aad2..1fa8bf3203 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -3,10 +3,7 @@
-
-
-
-
+
{% 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}) %} diff --git a/templates/sidepanel/right/right_stylesheets.html.twig b/templates/sidepanel/right/right_stylesheets.html.twig new file mode 100644 index 0000000000..54d8ac48b4 --- /dev/null +++ b/templates/sidepanel/right/right_stylesheets.html.twig @@ -0,0 +1,3 @@ + + + diff --git a/templates/stdgrid.html.twig b/templates/stdgrid.html.twig index 0a8a8cded6..2083dbfc2a 100644 --- a/templates/stdgrid.html.twig +++ b/templates/stdgrid.html.twig @@ -2,6 +2,7 @@ {% block stylesheets %} {{ parent() }} {% include '/sidepanel/left/left_stylesheets.html.twig' %} + {% include '/sidepanel/right/right_stylesheets.html.twig' %} {% endblock %} {% block leftpanel %} {% include '/sidepanel/left/left.html.twig' %}