[Design-v2] - adapt style and structure

coreshop · Nov 25, 2024 · 425956d · 425956d
1 parent b84467e
commit 425956d
Show file tree

Hide file tree

Showing 14 changed files with 23,843 additions and 53 deletions.
diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/assets/js/scripts/shop.js b/src/CoreShop/Bundle/FrontendBundle/Resources/assets/js/scripts/shop.js
@@ -142,6 +142,14 @@ const shop = window.shop || {};
         const shippingAddress = addressStep.querySelector('select[name="coreshop[shippingAddress]"]');
         const useIasS = addressStep.querySelector('[name="coreshop[useInvoiceAsShipping]"]');
 
+        if (invoiceAddress) {
+            updateAddress(invoiceAddress, useIasS);
+        }
+
+        if (shippingAddress) {
+            updateShippingAddress(shippingAddress)
+        }
+
         setupAddressChangeEvents(invoiceAddress, shippingAddress, useIasS);
     };
 

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/assets/scss/cartwidget.scss b/src/CoreShop/Bundle/FrontendBundle/Resources/assets/scss/cartwidget.scss
@@ -21,6 +21,14 @@
                 width: calc(100% - 1.5rem);
             }
         }
+
+        .cart-total {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: rem(90px);
+            display: inline-block;
+        }
     }
 
     &-close-item {
@@ -36,8 +44,8 @@
 
     &-number {
         position: absolute;
-        top: 2px;
-        left: rem(24px);
+        top: 0;
+        left: rem(4px);
         font-size: rem(10px);
         width: rem(16px);
         height: rem(16px);

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/assets/scss/form.scss b/src/CoreShop/Bundle/FrontendBundle/Resources/assets/scss/form.scss
@@ -4,6 +4,10 @@
     margin-bottom: 0.875rem;
 }
 
+.form-control-sm {
+    border-color: var(--coreshop-border-color);
+}
+
 .col-form-label {
     font-family: var(--coreshop-font-family-heading), serif;
     font-size: 1.25rem;

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/public/build/app.css b/src/CoreShop/Bundle/FrontendBundle/Resources/public/build/app.css
diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/public/build/app.js b/src/CoreShop/Bundle/FrontendBundle/Resources/public/build/app.js
diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/public/build/app.js.LICENSE.txt b/src/CoreShop/Bundle/FrontendBundle/Resources/public/build/app.js.LICENSE.txt
diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/Summary/_item.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/Summary/_item.html.twig
@@ -39,7 +39,7 @@
                 <span class="price-new" {{ coreshop_test_html_attribute('cart-item-unit-price', item.name) }}>{{ currency.convertAndFormat(price) }}</span>
                 {% if price < retailPrice %}
                     {% if discountPrice > 0 %}
-                        <span class="price-old">{{ currency.convertAndFormat(retailPrice) }}</span>
+                        <span class="price-old order-2 text-decoration-line-through text-red">{{ currency.convertAndFormat(retailPrice) }}</span>
                     {% endif %}
                     {% if discount < 0 %}
                         <span class="price-discount">(-{{ currency.convertAndFormat(discount) }})</span>
@@ -74,9 +74,10 @@
                     <span class="unit-definition unit-name">{{ item.unitDefinition.unit.name }}</span>
                 {% endif %}
             {% else %}
-                <div class="input-group">
+                <div class="input-group gap-2">
                     {% set relation_id = random() %}
-                    {{ form_widget(form.quantity, coreshop_test_form_attribute('cart-item-quantity-input', item.name), {attr: {class: 'form-control cart-item-quantity cs-unit-input', 'data-cs-unit-identifier': relation_id }}) }}
+                    {{ form_widget(form.quantity, {attr: {class: 'form-control cart-item-quantity cs-unit-input', 'data-cs-unit-identifier': relation_id }}, coreshop_test_form_attribute('cart-item-quantity-input', item.name)) }}
+
                     {% if item.hasUnitDefinition %}
                         <div class="input-group-append">
                             <span class="input-group-text" {{ coreshop_test_html_attribute('cart-item-unit-' ~ item.unitDefinition.id, item.name) }}>

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/_widget.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Cart/_widget.html.twig
@@ -1,11 +1,12 @@
 {% import '@CoreShopFrontend/Common/Macro/currency.html.twig' as currency %}
 
 <div id="cart" class="cart-widget btn-group btn-block">
-    <button type="button" class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown">
+    <button type="button" class="btn btn-link dropdown-toggle d-flex align-items-center gap-2" data-bs-toggle="dropdown">
         <span class="cart-number">{% if cart.hasItems %}{{ cart.items|length }}{% else %}0{% endif %}</span>
         <i class="bi bi-cart"></i>
+        <span class="cart-total" {{ coreshop_test_html_attribute('cart-total') }}>{{ currency.convertAndFormat(cart.total) }}</span>
     </button>
-    <span class="cart-total" {{ coreshop_test_html_attribute('cart-total') }}>{{ currency.convertAndFormat(cart.total) }}</span>
+
     <div class="dropdown-menu pull-right" aria-labelledby="dropdownMenuButton">
         <div class="pt-1 px-3">
             {% if cart.hasItems %}

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Category/_list.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Category/_list.html.twig
@@ -30,7 +30,7 @@
                         {% endif %}
                     {% endfor %}
 
-                    <div class="price">
+                    <div class="price py-3">
                         {{ product_price.display_product_price(product) }}
                     </div>
 

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Category/index.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Category/index.html.twig
@@ -14,10 +14,10 @@
         {{ category.name }}
     </h2>
 
-    <div class="product-filter">
+    <div class="product-filter pb-4 pt-2">
         <div class="row">
             <div class="col-md-4">
-                <div class="display">
+                <div class="d-flex gap-2">
                     <a href="{{ pimcore_url({'type': 'list'})  }}" class="text-decoration-none {% if type == 'list' %} active {% endif %}" {{ coreshop_test_html_attribute('view-list') }}>
                         <i class="bi bi-view-list " title="" data-original-title="{{ 'coreshop.ui.list_view'|trans }}"></i>
                     </a>
@@ -26,31 +26,26 @@
                     </a>
                 </div>
             </div>
-            <div class="col-md-2 text-right">
-                <label class="col-form-label">{{ 'coreshop.ui.sort'|trans }}</label>
-            </div>
-            <div class="col-md-3 text-right">
-                {#
-                    TODO: Maybe use form for this?
-                #}
-                <select class="form-control site-reload" name="sort" {{ coreshop_test_html_attribute('order-selection') }}>
-                    {% for value in validSortElements %}
-                        {% set asc = value ~ '_asc' %}
-                        {% set desc = value ~ '_desc' %}
-                        <option value="{{ asc }}" {% if sort == asc %} selected="selected" {% endif %}>{{ value|capitalize ~ ' ' ~ ('coreshop.ui.ascending'|trans) }}</option>
-                        <option value="{{ desc }}" {% if sort == desc %} selected="selected" {% endif %}>{{ value|capitalize ~ ' ' ~ ('coreshop.ui.descending'|trans) }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div class="col-md-1 text-right">
-                <label class="col-form-label">{{ 'coreshop.ui.show'|trans }}</label>
-            </div>
-            <div class="col-md-2 text-right">
-                <select class="form-control site-reload" name="perPage">
-                    {% for perPageList in perPageAllowed %}
-                        <option value="{{ perPageList }}" {% if perPageList == perPage %} selected="selected" {% endif %}>{{ perPageList }}</option>
-                    {% endfor %}
-                </select>
+            <div class="d-flex col-md-8 gap-3 justify-content-end">
+                <div class="d-sm-flex align-items-center gap-sm-2">
+                    <label for="sorting" >{{ 'coreshop.ui.sort'|trans }}</label>
+                    <select id="sorting" class="form-control-sm site-reload" name="sort" {{ coreshop_test_html_attribute('order-selection') }}>
+                        {% for value in validSortElements %}
+                            {% set asc = value ~ '_asc' %}
+                            {% set desc = value ~ '_desc' %}
+                            <option value="{{ asc }}" {% if sort == asc %} selected="selected" {% endif %}>{{ value|capitalize ~ ' ' ~ ('coreshop.ui.ascending'|trans) }}</option>
+                            <option value="{{ desc }}" {% if sort == desc %} selected="selected" {% endif %}>{{ value|capitalize ~ ' ' ~ ('coreshop.ui.descending'|trans) }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="d-sm-flex align-items-center gap-sm-2">
+                    <label for="show-per-page">{{ 'coreshop.ui.show'|trans }}</label>
+                    <select id="show-per-page" class="form-control-sm site-reload" name="perPage">
+                        {% for perPageList in perPageAllowed %}
+                            <option value="{{ perPageList }}" {% if perPageList == perPage %} selected="selected" {% endif %}>{{ perPageList }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
             </div>
         </div>
     </div>

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Common/Order/_item.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Common/Order/_item.html.twig
@@ -41,7 +41,7 @@
                     <span class="price-new">{{ currency.convertAndFormat(price) }}</span>
                     {% if price < retailPrice %}
                         {% if discountPrice > 0 %}
-                            <span class="price-old">{{ currency.convertAndFormat(retailPrice) }}</span>
+                            <span class="price-old order-2 text-decoration-line-through text-red">{{ currency.convertAndFormat(retailPrice) }}</span>
                         {% endif %}
                         {% if discount < 0 %}
                             <span class="price-discount">(-{{ currency.convertAndFormat(discount) }})</span>
@@ -72,7 +72,7 @@
         {% if item %}
         <div class="d-flex justify-content-end gap-3">
             <div class="text-center">
-                {% if is_granted('CORESHOP_CART_REMOVE_ITEM') and not btnremove %}sss
+                {% if is_granted('CORESHOP_CART_REMOVE_ITEM') and not btnremove %}
                     <a
                             href="{{ path('coreshop_cart_remove', {cartItem: item.id|coreshop_string}) }}"
                             title="{{ 'coreshop.ui.remove'|trans }}"

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Header/_widgetbar.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Header/_widgetbar.html.twig
@@ -13,7 +13,7 @@
                 </a>
             {% endif %}
             {% if is_granted('CORESHOP_CART') %}
-                <div class="col-md-3 p-sm-2 me-sm-2 ">
+                <div class="col-md-6 p-sm-2 me-sm-2 ">
                     {{ render(controller('CoreShop\\Bundle\\FrontendBundle\\Controller\\CartController::widgetAction')) }}
                 </div>
             {% endif %}

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Product/_addToCart.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Product/_addToCart.html.twig
@@ -3,16 +3,16 @@
     {{ form_start(form, {'action': path('coreshop_cart_add', {'product': product.id|coreshop_string})}) }}
     {{ form_errors(form) }}
 
-    <div class="input-group">
+    <div class="input-group gap-2">
         {% set relation_id = random() %}
         {{ form_row(form.cartItem.quantity, coreshop_test_form_attribute('quantity')|coreshop_merge_recursive({label: false, attr: {class: 'form-control cart-item-quantity cs-unit-input', 'data-cs-unit-identifier': relation_id }})) }}
 
         {% if form.cartItem.unitDefinition is defined %}
-            {{ form_row(form.cartItem.unitDefinition, coreshop_test_form_attribute('unit')|coreshop_merge_recursive({label: false, row_attr: {class: 'ml-1'}, attr: {class: 'form-control cs-unit-selector', 'data-cs-unit-identifier': relation_id}})) }}
+            {{ form_row(form.cartItem.unitDefinition, coreshop_test_form_attribute('unit')|coreshop_merge_recursive({label: false, attr: {class: 'form-control form-select cs-unit-selector', 'data-cs-unit-identifier': relation_id}})) }}
         {% endif %}
 
-        <div class="input-group-append ml-2">
-            <button type="submit" class="btn btn-cart mt-0" rel="nofollow" {{ coreshop_test_html_attribute('add-to-cart') }}>
+        <div class="input-group-append">
+            <button type="submit" class="btn btn-cart btn-primary" rel="nofollow" {{ coreshop_test_html_attribute('add-to-cart') }}>
                 {{ 'coreshop.ui.add_to_cart'|trans }}
             </button>
         </div>

diff --git a/src/CoreShop/Bundle/FrontendBundle/Resources/views/Product/_preview.html.twig b/src/CoreShop/Bundle/FrontendBundle/Resources/views/Product/_preview.html.twig
@@ -23,7 +23,7 @@
     {{ product.shortDescription }}
 </div>
 <div class="product-price d-flex flex-column mb-2 mt-auto px-3">
-    {{ product_price.display_product_price(product, null, false, false) }}
+    {{ product_price.display_product_price(product) }}
 </div>
 {% if coreshop_inventory_is_available(product) %}
     <div class="cart-button px-3 pb-3">