Quick add modal fixes for Desktop (#3488)

* Centre 'view cart' label in quick add modal. * Remove extra spacing at the bottom of quick order modal. * Fix the extra underlined space between the 'view full details' text and the arrow. * Make the product title a link to the product page. * Tweak breakpoints for consistently when the viewport is exactly 989 or 990 px wide
Shopify · Jun 4, 2024 · 8cadefd · 8cadefd
1 parent faa9caf
commit 8cadefd
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -35,6 +35,10 @@
   transform: none;
 }
 
+.quick-add-modal .quick-order-list__container {
+  padding-bottom: 1.5rem;
+}
+
 .quick-add-modal__content.quick-add-modal__content--bulk {
   width: 90%;
 }
@@ -78,6 +82,10 @@
   max-width: 100%;
 }
 
+.quick-add-modal__content-info.quick-add-modal__content-info--bulk {
+  padding-bottom: 0;
+}
+
 .quick-add-modal__content-info--bulk h3 {
   margin-bottom: 0.5rem;
   margin-top: 0;
@@ -132,6 +140,11 @@
   padding-left: 1rem;
 }
 
+.quick-add-modal__content-info--bulk-details > a:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
 @media screen and (min-width: 990px) {
   .quick-add-modal__content-info--bulk .quick-add__product-media,
   .quick-add-modal__content-info--bulk .quick-add__product-container,
@@ -164,7 +177,7 @@
   width: auto;
 }
 
-@media screen and (max-width: 990px) {
+@media screen and (max-width: 989px) {
   .quick-add-modal__content-info--bulk .quick-add__content-info__media {
     display: flex;
     margin: 0;
@@ -180,7 +193,7 @@
   }
 }
 
-@media screen and (min-width: 989px) {
+@media screen and (min-width: 990px) {
   .quick-add-modal__content-info--bulk .quick-add__info {
     flex-direction: column;
     position: sticky;
@@ -190,7 +203,7 @@
   }
 }
 
-@media screen and (max-width: 990px) {
+@media screen and (max-width: 989px) {
   .quick-add-modal__content-info--bulk {
     flex-direction: column;
   }
@@ -266,6 +279,10 @@ quick-add-modal .product:not(.featured-product) .product__view-details {
   display: block;
 }
 
+.quick-add-modal__content--bulk .product__view-details .icon {
+  margin-left: 1.2rem;
+}
+
 quick-add-modal .quick-add-hidden,
 quick-add-modal .product__modal-opener:not(.product__modal-opener--image),
 quick-add-modal .product__media-item:not(:first-child) {

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
@@ -450,6 +450,10 @@ quick-order-list-remove-button:hover .icon-remove {
   }
 }
 
+.quick-order-list__button-text {
+  text-align: center;
+}
+
 .quick-order-list-total__confirmation {
   display: flex;
   justify-content: center;

diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -499,12 +499,14 @@
                           {% endif %}
                           class="link product__view-details animate-arrow small-hide medium-hide"
                         >
-                          {{ 'products.product.view_full_details' | t }}
+                          {{ 'products.product.view_full_details' | t -}}
                           {% render 'icon-arrow' %}
                         </a>
                       </div>
                       <div class="quick-add-modal__content-info--bulk-details large-up-hide">
-                        <h3>{{ card_product.title | escape }}</h3>
+                        <a href="{{ card_product.url }}" class="full-unstyled-link">
+                          <h3>{{ card_product.title | escape }}</h3>
+                        </a>
                         {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
                         {%- if card_product.quantity_price_breaks_configured? -%}
                           <div class="card__information-volume-pricing-note">
@@ -515,7 +517,11 @@
                     </div>
                     <div>
                       <div class="quick-add-modal__content-info--bulk-details small-hide medium-hide">
-                        <h3 class="h2">{{ card_product.title | escape }}</h3>
+                        <a href="{{ card_product.url }}" class="full-unstyled-link">
+                          <h3 class="h2">
+                            {{ card_product.title | escape }}
+                          </h3>
+                        </a>
                         {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
                         {%- if card_product.quantity_price_breaks_configured? -%}
                           <div class="card__information-volume-pricing-note">