From 565140adcf84501183237e5affde64b1ce3d6095 Mon Sep 17 00:00:00 2001
From: rainydaysavings <eliseuamaro@pm.me>
Date: Thu, 13 Aug 2020 02:54:51 +0100
Subject: [PATCH] [UI] Right panel added

---
 public/assets/css/base.css          | 67 +++++++++++++++++++++++++++++
 public/assets/css/base_mid.css      |  2 +-
 public/assets/css/base_small.css    |  2 +-
 public/assets/css/left/left.css     |  3 --
 public/assets/css/left/left_mid.css |  2 +-
 templates/base.html.twig            |  8 ++++
 6 files changed, 78 insertions(+), 6 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index eafd76c291..65ef0bd56c 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -137,4 +137,71 @@ b {
       stroke: currentColor;
       fill: currentColor;
       align-self: center;
+}
+
+
+/* RIGHT PANEL */
+#right-panel {
+      order: 4;
+}
+
+.arrow {
+      border: solid white;
+      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: rgba(0, 0, 0, 0.40);
+      margin-top: calc(3 * var(--main-size));
+}
+
+.right-panel input[type=checkbox] {
+      transform: scale(3);
+      -ms-transform: scale(3);
+      -webkit-transform: scale(3);
+      padding: 3em;
+}
+
+/* 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;
 }
\ No newline at end of file
diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css
index 565bb6f038..1555f45c12 100644
--- a/public/assets/css/base_mid.css
+++ b/public/assets/css/base_mid.css
@@ -144,7 +144,7 @@ b {
 }
 
 #left-panel {
-      order: 2;
+      order: 1;
 }
 
 #search {
diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index adc85ca872..1e4264bfe1 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -140,7 +140,7 @@ b {
 }
 
 #left-panel {
-      order: 2;
+      order: 1;
 }
 
 #search {
diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index a154d9cca4..af5af42317 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -25,9 +25,6 @@
       margin-right: var(--unit-size);
 }
 .navbar {
-      left: -15em;
-      top: 0;
-      transition: 0.3s ease;
       left: 0;
       top: 0;
       transition: 0.3s ease;
diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css
index 712e6baba4..daf0f9d82b 100644
--- a/public/assets/css/left/left_mid.css
+++ b/public/assets/css/left/left_mid.css
@@ -30,7 +30,7 @@
 }
 .navbar {
       left: -100%;
-      top:0;
+      top: 0;
       transition: 0.3s ease;
 }
 .navbar a {
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 60625d8457..b1ef9fa2a7 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -66,6 +66,14 @@
                               <svg id='search' class="icon icon-search">
                                     <use xlink:href="#icon-search"></use>
                               </svg>
+                              <div id="right-panel">
+                                    <input type="checkbox" id="toggle-right" autofocus>
+                                    <div class="arrow right">
+                                          <label for="toggle-right" id='right-panel'></label>
+                                    </div>
+                                    <div class='rss'>
+                                    </div>
+                              </div>
                         </div>
                   </div>
             {% endblock header%}