feat: article list in basket improved

Related: #1

locale.xml

@@ -22,6 +22,10 @@
             <de><![CDATA[Dein Warenkorb enthält leider keine Artikel]]></de>
             <en><![CDATA[Your shopping cart does not contain any items]]></en>
         </locale>
+        <locale name="simpleCheckout.basket.btn.moreDetails">
+            <de><![CDATA[Produktdetails]]></de>
+            <en><![CDATA[Product details]]></en>
+        </locale>
         <locale name="logged.in.guest">
             <de><![CDATA[Eingeloggt als: Gast]]></de>
             <en><![CDATA[Logged in as: Guest]]></en>

src/QUI/ERP/Order/SimpleCheckout/Basket.ArticleList.html

@@ -12,7 +12,9 @@
             </a>
         </div>
         <div class="articleList-entry__data">
-            <div class="articleData__title">{$Article->getAttribute('title')|escape:'html'}</div>
+            <div class="articleData__title">
+                <a href="{$Product->getUrl()}">{$Article->getAttribute('title')|escape:'html'}</a>
+            </div>
 
             <div class="articleData__artNo text-muted">
                 <span>
@@ -26,10 +28,11 @@
                     {$Article->getAttribute('quantity')} {$Article->getQuantityUnit()} x
                     {$Currency->format($calc.basisPrice)}
                 </div>
-                <div class="sum fw-bolder">
-                    {$Currency->format($calc.sum)}
+                <div class="articleData__sum">
+                    <span class="articleData__sumValue fw-bolder">{$Currency->format($calc.sum)}</span>
+
                     {if !empty($vatArray)}
-                        <div class="articleData__price-vat text-muted">
+                        <div class="articleData__vat text-muted">
                             {locale group="quiqqer/erp" var="article.list.articles.header.vat" Locale=$Locale}
                             {$Article->getAttribute('vat')}%
                         </div>
@@ -37,9 +40,11 @@
                 </div>
             </div>
 
+            {if $Article->getAttribute('description') || $Article->getCustomFields()}
             <button class="articleData__btnToggleDetails btn btn-link-dark btn-sm btn-small"
                     {literal}onClick="(() => {this.classList.toggle('open')})();return false;"{/literal}>
-                Produktdetails <span class="fa fa-angle-down"></span>
+                {locale group="quiqqer/order-simple-checkout" var="simpleCheckout.basket.btn.moreDetails" Locale=$Locale}
+                <span class="fa fa-angle-down"></span>
             </button>
 
             <div class="articleData__more">
@@ -54,7 +59,7 @@
                     <ul class="articleData__fields">
                         {foreach $Article->getCustomFields() as $field}
                             <li>
-                                <span>{$field.title}:</span>
+                                <span class="text-muted">{$field.title}:</span>
                                 {if isset($field.custom_calc) && isset($field.custom_calc.valueText)}
                                     <span>{$field.custom_calc.valueText}</span>
                                 {elseif isset($field['valueText'])}
@@ -67,9 +72,7 @@
                     </ul>
                 </div>
             </div>
-
-
-
+            {/if}
         </div>
 
     </section>

src/QUI/ERP/Order/SimpleCheckout/Basket.css

-
+/***********/
+/* article */
+/***********/
 .articleList-entry {
+    --_gap: var(--gap, 0.5rem);
+
     display: grid;
-    gap: var(--_gap, 0.5rem);
+    gap: var(--_gap);
     grid-template-areas: "image data";
-    margin-bottom: var(--_gap, 0.5rem);
+    margin-bottom: var(--_gap);
     grid-template-columns: auto 1fr;
 }
 
 .articleList-entry__image,
 .articleList-entry__data {
+    --_bg: var(--bg, #fff);
+
     padding: 1rem;
     border-radius: 0.5rem;
-    background-color: var(--_bg, #fff);
+    background-color: var(--_bg);
 }
 
+/*********/
 /* image */
+/*********/
 .articleList-entry__image {
     display: grid;
 }
 
-/* data */
+/****************/
+/* product data */
+/****************/
 .articleData__title {
     font-size: var(--qui-fs-md, 1.125rem);
 }
 
+.articleData__title > a:not(:hover, :focus) {
+    color: inherit;
+}
+
 .articleData__price {
     display: flex;
     justify-content: space-between;
@@ -35,24 +49,32 @@
     flex-grow: 1;
 }
 
-.articleData__price > .sum {
+.articleData__sumValue {
     font-weight: bolder;
 }
 
-.articleData__price-vat {
+.articleData__vat {
     font-size: 0.75rem;
     text-align: right;
     line-height: 1;
-    font-weight: normal;
 }
 
-.articleList-entry__data {
+.articleData__desc {
+    margin-block: 0.5rem;
 }
 
-.articleData__action {
-    text-align: right;
+.articleData__desc > .label {
+    font-size: var(--qui-fs-sm, 0.875rem);
 }
 
+ul.articleData__fields {
+    list-style: none;
+    padding-left: 0;
+    margin-block: 0;
+    line-height: 1.5;
+}
+
+/* toggle button */
 .articleData__btnToggleDetails.btn {
     padding-inline: 0;
     display: block;
@@ -64,11 +86,14 @@
     margin-right: 0;
 }
 
+/* toggle button: open status */
 .articleData__btnToggleDetails.open > .fa {
     transform: rotate(180deg);
 }
 
+/******************/
 /* hidden content */
+/******************/
 .articleData__more {
     overflow: hidden;
     display: grid;
@@ -77,19 +102,11 @@
     height: auto;
 }
 
-.open + .articleData__more  {
-    grid-template-rows: 1fr;
-}
-
 .articleData__more > .inner {
     overflow: hidden;
 }
 
-.articleData__desc {
-    margin-block: 0.5rem;
-}
-
-.articleData__desc > .label {
-    font-size: var(--qui-fs-sm, 0.875rem);
-}
-
+/*  hidden content: open status */
+.open + .articleData__more  {
+    grid-template-rows: 1fr;
+}
\ No newline at end of file