From 3d9edd1db885b1850457b62b246f55c02472aa77 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Fri, 21 Jan 2022 19:51:13 +0000
Subject: [PATCH] [COMPONENTS][LeftPanel] Edit feeds page polish, existing
 links are shown in a grid, saving space [COMPONENTS][Collection] Fixing
 details summary class [PLUGINS][WebMonetization] Fixing widget details
 summary class

---
 .../collection/widget_add_to.html.twig        |  6 +--
 .../templates/left_panel/edit_feeds.html.twig | 51 ++++++++++++-------
 .../WebMonetization/widget.html.twig          |  2 +-
 .../default_theme/css/widgets/sections.css    |  2 +-
 4 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/components/Collection/templates/collection/widget_add_to.html.twig b/components/Collection/templates/collection/widget_add_to.html.twig
index 55fc3ebd6b..f5b65d1bd1 100644
--- a/components/Collection/templates/collection/widget_add_to.html.twig
+++ b/components/Collection/templates/collection/widget_add_to.html.twig
@@ -1,6 +1,6 @@
 <section class="frame-section collections">
     <details class="section-details-title" title="Expand if you want to access more options.">
-        <summary class="details-title-summary">
+        <summary class="details-summary-title">
             <h2>{{ctitle}}</h2>
         </summary>
         {% if has_collections %}
@@ -8,9 +8,9 @@
                 {{ form(add_form) }}
             </section>
 
-            <details class="section-details-subtitle frame-section-padding"
+            <details class="frame-section-padding section-details-subtitle"
                      title="Expand if you want to access more options.">
-                <summary class="details-subtitle-summary">
+                <summary class="details-summary-subtitle">
                     <strong>{% trans %}Other options{% endtrans %}</strong>
                 </summary>
                 <section class="section-form">
diff --git a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
index 161d2ba548..ca833ad5d4 100644
--- a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
+++ b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig
@@ -5,36 +5,49 @@
   <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/feeds.css') }}" type="text/css">
 {% endblock stylesheets %}
 
+{% macro edit_feeds_form_row(child) %}
+    <div class="form-row">
+        {{ form_label(child) }}
+        {{ form_widget(child) }}
+    </div>
+{% endmacro  %}
+
 {% block body %}
   <div class="frame-section">
     <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
-
-      <fieldset>
-        <legend class="section-form-legend">{{ "Edit feed navigation links" | trans }}</legend>
-
+        <h1 class="frame-section-title">{{ "Edit feed navigation links" | trans }}</h1>
         {# Since the form is not separated into individual groups, this happened #}
         {{ form_start(edit_feeds) }}
         {{ form_errors(edit_feeds) }}
-        {% for child in edit_feeds.children %}
-            {% if 'row_url' in child.vars.block_prefixes %}
-                <div class="frame-section frame-section-padding">
-                    {{ form_label(child) }}
-                    {{ form_widget(child) }}
+        <section class="container-grid">
+            {% for child in edit_feeds.children %}
+                {% if 'row_url' in child.vars.block_prefixes %}
+                    <div class="frame-section frame-section-padding">
+                        {{ _self.edit_feeds_form_row(child) }}
                 {% elseif 'row_title' in child.vars.block_prefixes %}
-                    {{ form_label(child) }}
-                    {{ form_widget(child) }}
+                        {{ _self.edit_feeds_form_row(child) }}
                 {% elseif 'row_order' in child.vars.block_prefixes %}
-                    {{ form_label(child) }}
-                    {{ form_widget(child) }}
+                        {{ _self.edit_feeds_form_row(child) }}
                 {% elseif 'row_remove' in child.vars.block_prefixes %}
-                    {{ form_label(child) }}
-                    {{ form_widget(child) }}
-                </div>
-            {% endif %}
-        {% endfor %}
+                        {{ _self.edit_feeds_form_row(child) }}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </section>
+
+        <div class="form-row">
+            {{ form_row(edit_feeds.update_exisiting) }}
+            {{ form_row(edit_feeds.reset) }}
+        </div>
+
+        <hr>
+
+        <section class="frame-section frame-section-padding">
+            <h2>{% trans %}Add a new feed{% endtrans %}</h2>
+            {{ form_rest(edit_feeds) }}
+        </section>
         {{ form_end(edit_feeds) }}
 
-      </fieldset>
     </form>
 
   </div>
diff --git a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
index 89f1bac0da..c3a3f3ea74 100644
--- a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
+++ b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
@@ -1,6 +1,6 @@
 <section class="frame-section">
     <details class="section-details-title" title="Expand if you want to access more options.">
-        <summary class="details-title-summary">
+        <summary class="details-summary-title">
             <h2>Web Monetization</h2>
         </summary>
         <section class="section-form">
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 99e148fa6b..9503bf06c5 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -57,7 +57,7 @@
 
 .container-grid {
     display: grid;
-    gap: 10px;
+    gap: var(--s);
     grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 }