From 870f866c23bf3500c3adb7a8473253f79ec6c520 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Wed, 8 Dec 2021 15:16:30 +0000
Subject: [PATCH] [CARDS][Navigation] Section styling more consistent and can
 now be selectively hidden by user

[COMPONENTS][Right] Changed additional options div class names
---
 .../templates/right_panel/view.html.twig      | 10 ++-
 public/assets/default_theme/css/base.css      |  8 +-
 .../default_theme/css/widgets/sections.css    | 15 +++-
 templates/cards/navigation/view.html.twig     | 76 ++++++++++---------
 4 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index 03430affa0..b20770a04f 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/components/RightPanel/templates/right_panel/view.html.twig
@@ -13,7 +13,10 @@
                     <details class="section-widget-title-details" open="open"
                              title="{{ 'Expand if you want to access more options.' | trans }}">
                         <summary class="section-title-summary">
-                            {{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
+                            <h2>
+                                {{ "Create a note" | trans }}
+                            </h2>
+                            {{ icon('arrow-down', 'icon icon-details-open') | raw }}
                         </summary>
 
                         <div class="section-form">
@@ -26,7 +29,10 @@
 
                                 <details class="section-widget-subtitle-details">
                                     <summary class="section-subtitle-summary">
-                                        {{ "Additional options" | trans }}{{ icon('arrow-down', 'icon icon-details-close') | raw }}
+                                        <h3>
+                                            {{ "Additional options" | trans }}
+                                        </h3>
+                                        {{ icon('arrow-down', 'icon icon-details-close') | raw }}
                                     </summary>
                                     {{ form_row(blocks['post_form'].language) }}
                                     {{ form_row(blocks['post_form'].tag_use_canonical) }}
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index 2fc8fea096..bcdc2adb96 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -22,12 +22,10 @@
     align-self: center;
     fill: var(--foreground);
 }
-.edit-feed-link {
-    display: block;
-    float: right;
-}
 .active {
-    font-weight: bold;
+    font-size: 1.1em;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
 }
 .anchor-hidden {
     width: 1px;
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index eba4e8f6b1..55bf00a224 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -76,7 +76,7 @@
     font-family: 'Open Sans',sans-serif;
     font-weight: 700;
 }
-.section-widget-subtitle-details :not(summary,svg) {
+.section-widget-subtitle-details :not(summary,svg,h3) {
     border-radius: var(--smaller);
     background: var(--gradient);
     padding: 6px 10px;
@@ -98,19 +98,26 @@
     background: var(--gradient) !important;
 }
 .section-widget-subtitle-details[open] svg,
-.section-widget-title-details[open] svg {
+.section-widget-title-details[open] .icon-details-open {
     transform: rotate(180deg);
     animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
 }
 .section-widget-subtitle-details:not([open]) svg,
-.section-widget-title-details:not([open]) svg {
+.section-widget-title-details:not([open]) .icon-details-open {
     transform: initial;
     animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
 }
 .section-subtitle-summary,
 .section-title-summary {
     display: flex;
-    justify-content: space-between;
+}
+.section-subtitle-summary h3,
+.section-title-summary h2 {
+    margin-right: auto;
+}
+.section-subtitle-summary svg:last-child,
+.section-title-summary svg:last-child {
+    margin-left: 4px;
 }
 .section-form {
     display: flex;
diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig
index 18ad7f423a..9ba33fb4f3 100644
--- a/templates/cards/navigation/view.html.twig
+++ b/templates/cards/navigation/view.html.twig
@@ -1,42 +1,48 @@
 {% block feeds %}
-  <section class="section-widget section-widget-padded">
-    <h2 class="section-title">{{ icon('logo', 'icon icon-logo') | raw }}{{ 'Feeds' | trans }}
-    {% if app.user %}
-        {# User custom feeds #}
-        <a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>
-    {% endif %}
-    </h2>
-    <nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
-      {% if not app.user %} {# Default feeds #}
-        <ul>
-          <li>
-            <a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
-              Public
-            </a>
-          </li>
-          <li>
-            <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>
-              Network
-            </a>
-          </li>
-        </ul>
-      {% else %}
-        <ul>
-          {% for link in get_feeds(current_actor) %}
+  <section class="section-widget" title="{{ 'Feed navigation.' | trans }}">
+    <details class="section-widget-title-details" open="open"
+             title="{{ 'Expand if you want to access more options.' | trans }}">
+      <summary class="section-title-summary">
+        <h2>{{ 'Feeds' | trans }}</h2>
+        {% if app.user %}
+          {# User custom feeds #}
+          <a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>
+        {% endif %}
+        {{ icon('arrow-down', 'icon icon-details-open') | raw }}
+      </summary>
+
+      <nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
+        {% if not app.user %} {# Default feeds #}
+          <ul>
             <li>
-              <a href="{{ link.getUrl() }}" class='{{ active(link.getRoute()) }}'>{{ link.getTitle() }}</a>
-            </li>
-          {% endfor %}
-          {% for link in handle_event('AddMainNavigationItem', {'nickname': current_actor.getNickname()}) %}
-            <li>
-              <a href="{{ link['path'] }}" class='{{ active(link['path_id']) }}'>
-                {{ link['title'] }}
+              <a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
+                Public
               </a>
             </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </nav>
+            <li>
+              <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>
+                Network
+              </a>
+            </li>
+          </ul>
+        {% else %}
+          <ul>
+            {% for link in get_feeds(current_actor) %}
+              <li>
+                <a href="{{ link.getUrl() }}" class='{{ active(link.getRoute()) }}'>{{ link.getTitle() }}</a>
+              </li>
+            {% endfor %}
+            {% for link in handle_event('AddMainNavigationItem', {'nickname': current_actor.getNickname()}) %}
+              <li>
+                <a href="{{ link['path'] }}" class='{{ active(link['path_id']) }}'>
+                  {{ link['title'] }}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </nav>
+    </details>
   </section>
 {% endblock feeds %}