[CSS] Refactor Right Panel style

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: '';

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: '';

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: '';

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

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

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

templates/attachments/show.html.twig

@@ -21,19 +21,5 @@
 {% endblock body %}
 
 {% block right %}
-  <div id="related-notes">
+
-    {{ 'Notes where this attachment appears' | trans }}
-    {% for note in related_notes %}
-      {% include '/note/view.html.twig' with {'note' : note, 'hide_attachments': true} only %}
-    {% endfor %}
-  </div>
-  <div id="related-tags">
-    {{ 'Tags for this attachment' | trans }}
-    <br/>
-    {% for tag in related_tags %}
-      <i>#{{tag['tag']}}</i>
-    {% else %}
-      {{ 'No tags' | trans }}
-    {% endfor %}
-  </div>
 {% endblock right %}

templates/sidepanel/right/right.html.twig

@@ -3,10 +3,7 @@
     <div class="arrow right">
         <label for="toggle-right" id='right-panel'></label>
     </div>
-    <div class='rss'>
+    <div id='right-container'>
-        <div> </div>
-    </div>
-    <div>
         {% 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}) %}

templates/sidepanel/right/right_stylesheets.html.twig

@@ -0,0 +1,3 @@
+<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/right.css') }}" media="screen and (min-width: 1300px)">
+<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/right_mid.css') }}" media="screen and (max-width: 1300px)">
+<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/right/right_small.css') }}" media="screen and (max-width: 750px)">

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