[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

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">

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 %}
 
-{% block body %}
+{% macro edit_feeds_form_row(child) %}
-  <div class="frame-section">
+    <div class="form-row">
-    <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
-
-      <fieldset>
-        <legend class="section-form-legend">{{ "Edit feed navigation links" | trans }}</legend>
-
-        {# 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) }}
-                {% elseif 'row_title' in child.vars.block_prefixes %}
-                    {{ form_label(child) }}
-                    {{ form_widget(child) }}
-                {% elseif 'row_order' in child.vars.block_prefixes %}
-                    {{ form_label(child) }}
-                    {{ form_widget(child) }}
-                {% elseif 'row_remove' in child.vars.block_prefixes %}
         {{ form_label(child) }}
         {{ form_widget(child) }}
     </div>
+{% endmacro  %}
+
+{% block body %}
+  <div class="frame-section">
+    <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
+        <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) }}
+        <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 %}
+                        {{ _self.edit_feeds_form_row(child) }}
+                {% elseif 'row_order' in child.vars.block_prefixes %}
+                        {{ _self.edit_feeds_form_row(child) }}
+                {% elseif 'row_remove' in child.vars.block_prefixes %}
+                        {{ _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>

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">

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