Template list grid, template filters and category label text size on …

…edit template (#1917)
cds-snc · Jul 31, 2024 · dce8425 · dce8425
1 parent b45837b
commit dce8425
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 7 deletions.
diff --git a/app/assets/javascripts/main.min.js b/app/assets/javascripts/main.min.js
diff --git a/app/assets/javascripts/scheduler.min.js b/app/assets/javascripts/scheduler.min.js
diff --git a/app/assets/stylesheets/index.css b/app/assets/stylesheets/index.css
diff --git a/app/assets/stylesheets/tailwind/components/message.css b/app/assets/stylesheets/tailwind/components/message.css
@@ -1,9 +1,13 @@
 @layer components {
   /*! purgecss start ignore */
   .message-name {
-    grid-column: span 2;
     @apply m-0 leading-tight font-bold text-title;
   }
+  @media (min-width: theme("screens.sm")) {
+    .message-name {
+      grid-column: span 2;
+    }
+  }
   .message-name a:hover {
     @apply text-blue-lightblue;
   }

diff --git a/app/templates/components/template-category.html b/app/templates/components/template-category.html
@@ -5,8 +5,8 @@
     {% endif %}
     <div id="tc_button_container" class="mb-gutter {% if expanded %}hidden{% endif %}" data-testid="tc_button_container">
         <div>
-            <p class="inline-flex items-center rounded-full bg-lime-100 px-4 py-2">
-                <i aria-hidden="true" class="p-1 fa-solid fa-fas fa-tag mr-4 text-lime-700"></i> {{ field_text }}
+            <p class="inline-flex items-center rounded-full bg-lime-100 px-4 py-2 text-small">
+                <i aria-hidden="true" class="p-1 fa-solid fa-fas fa-tag mr-2 text-lime-700"></i> {{ field_text }}
             </p>
         </div>
         <h3 class=" mt-0 pt-0 heading-small">{{ _('Does the category still apply?') }}</h3>

diff --git a/app/templates/components/template-filter.html b/app/templates/components/template-filter.html
@@ -26,7 +26,9 @@
         <div class="template-filter" data-row-selector="{{ row_selector }}">
             <details data-testid="filter">
                 <summary data-testid="filter-toggle">{{ _("Apply filters") }}</summary>
-                <nav class="flex p-0 gap-gutter pl-gutter mt-2" aria-label="{{ _('Filter by template type and category') }}" data-testid="filter-content">
+                <div>
+                    <nav class="flex p-0 gap-gutter mt-2" aria-label="{{ _('Filter by template type and category') }}"
+                        data-testid="filter-content">
                     {# Filter group for notification types #}
                     <div class="filter-list" data-target="{{ notification_type_data_attribue }}">
                         <h2 class="filter-heading">{{ _("Type") }}</h2>
@@ -49,6 +51,7 @@ <h2 class="filter-heading">{{ _("Category") }}</h2>
                         </div>
                     </div>
                 </nav>
+                </div>
             </details>
         </div>