Merge pull request #11416 from jibees/11197-buu-no-results-page-and-number-of-results-tweaks

🚧 BUU: No results page and number of results tweaks

app/views/admin/products_v3/_filters.html.haml

@@ -10,4 +10,4 @@
     = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories'),  "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
   .submit
     .search-button
-      = button_tag t(".search"), class: "secondary icon-search"
+      = button_tag t(".search"), class: "secondary icon-search relaxed"

app/views/admin/products_v3/_no_products.html.haml

@@ -1,6 +1,6 @@
 - if search_term.present? || producer_id.present? || category_id.present?
   = t('.no_products_found_for_search')
-  %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } }
+  %a{ href: "#", class: "button disruptive relaxed", data: { reflex: "click->products#clear_search" } }
     = t("admin.products_v3.sort.pagination.clear_search")
 - else
   = t('.no_products_found')

app/views/admin/products_v3/_sort.html.haml

@@ -2,7 +2,7 @@
   %div
     = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to)
     - if search_term.present? || producer_id.present? || category_id.present?
-      %a{ href: "#", class: "button disruptive medium", data: { reflex: "click->products#clear_search" } }
+      %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } }
         = t(".pagination.clear_search")  
   %div.with-dropdown
     = t(".pagination.per_page.show")

app/webpacker/css/admin/products_v3.scss

@@ -83,8 +83,10 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    font-size: $h3-size;
+    font-size: $h6-size;
+    font-weight: 600;
     gap: 20px;
+    margin-top: 116px;
 
     #no-products-actions {
       display: flex;
@@ -102,8 +104,8 @@
   }
 
   #sort {
-    line-height: $btn-medium-height;
-    height: $btn-medium-height;
+    line-height: $btn-relaxed-height;
+    height: $btn-relaxed-height;
 
     .with-dropdown {
       display: flex;
@@ -148,8 +150,8 @@
         background-color: $lighter-grey;
         border: 1px solid $lighter-grey;
         border-radius: 4px;
-        height: $btn-height;
-        line-height: $btn-height;
+        height: $btn-relaxed-height;
+        line-height: $btn-relaxed-height;
 
         &:has(input:focus),
         &:has(input:active) {
@@ -157,7 +159,10 @@
         }
 
         > input {
-          background-color: $lighter-grey;
+          // Totally hide the input from its container
+          background-color: transparent;
+          border: none;
+          width: calc(100% - 30px); // 30px is the width of the search icon + padding
         }
 
         &:before {
@@ -174,7 +179,7 @@
     .categories {
       select {
         width: 150px;
-        height: $btn-height;
+        height: $btn-relaxed-height;
       }
     }
 

app/webpacker/css/admin_v3/components/buttons.scss

@@ -12,8 +12,8 @@ button:not(.plain):not(.trix-button),
   border: 1px solid $color-btn-bg;
   color: $color-btn-text;
   text-transform: uppercase;
-  line-height: 40px;
-  height: 40px;
+  line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
+  height: $btn-regular-height;
   font-weight: bold;
 
   &:before {
@@ -79,9 +79,14 @@ button:not(.plain):not(.trix-button),
     }
   }
 
-  &.medium {
-    line-height: $btn-medium-height;
-    height: $btn-medium-height;
+  &.condensed {
+    line-height: $btn-condensed-height - 2px; // remove 2px to compensate for border
+    height: $btn-condensed-height;
+  }
+
+  &.relaxed {
+    line-height: $btn-relaxed-height - 2px; // remove 2px to compensate for border
+    height: $btn-relaxed-height;
   }
 
   .badge {
@@ -106,3 +111,14 @@ button:not(.plain):not(.trix-button),
     }
   }
 }
+
+a.button {
+  text-decoration: none;
+}
+
+.button.disruptive::before {
+  margin-right: 3px;
+
+  @extend .icon-remove-sign;
+  font-family: FontAwesome;
+}

app/webpacker/css/admin_v3/globals/variables.scss

@@ -155,5 +155,6 @@ $border-radius:                  4px !default;
 $font-weight-bold:               600 !default;
 $font-weight-normal:             400 !default;
 
-$btn-height:                     40px !default;
-$btn-medium-height:              32px !default;
+$btn-relaxed-height:             40px !default;
+$btn-regular-height:             32px !default;
+$btn-condensed-height:           26px !default;

config/locales/en.yml

@@ -797,7 +797,7 @@ en:
         loading: Loading your products
       sort:
         pagination:
-          total_html: "<strong>%{total} products</strong> in your catalogue. Showing %{from} to %{to}."
+          total_html: "<strong>%{total} products</strong> found for your search criteria. Showing %{from} to %{to}."
           per_page:
             show: Show
             per_page: "%{num} per page"