admin: order items table sizes are now fixed

shopsys · Apr 24, 2023 · 53750a9 · 53750a9
1 parent 0cb9f2b
commit 53750a9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 21 deletions.
diff --git a/packages/framework/assets/styles/admin/components/table/col.less b/packages/framework/assets/styles/admin/components/table/col.less
@@ -33,3 +33,31 @@
 .table-col-40px {
     width: 40px;
 }
+
+.table-col-125px {
+    width: 125px;
+}
+
+.table-col-130px {
+    width: 130px;
+}
+
+.table-col-135px {
+    width: 135px;
+}
+
+.table-col-145px {
+    width: 145px;
+}
+
+.table-col-155px {
+    width: 155px;
+}
+
+.table-col-375px {
+    width: 375px;
+}
+
+.table-col-145px {
+    width: 145px;
+}
diff --git a/packages/framework/assets/styles/admin/todo.less b/packages/framework/assets/styles/admin/todo.less
@@ -6,3 +6,7 @@
 .list-files__item .form-line__side {
   margin-left: 0;
 }
+
+.table-fixed {
+  table-layout: fixed;
+}
diff --git a/packages/framework/src/Resources/views/Admin/Content/Order/orderItem.html.twig b/packages/framework/src/Resources/views/Admin/Content/Order/orderItem.html.twig
@@ -19,22 +19,22 @@
                 {% endif %}
             </div>
         </td>
-        <td>
+        <td class="text-right">
             {{ form_widget(orderItemForm.catnum, {attr: { class: 'input--medium text-right'}}) }}
             {{ form_errors(orderItemForm.catnum, {errors_attr: { inline: false }}) }}
         </td>
-        <td>
+        <td class="text-right">
             {{ self.priceWithVatWidget(orderItemForm.priceWithVat) }}
         </td>
-        <td>
+        <td class="text-right">
             {{ form_widget(orderItemForm.quantity, {attr: { class: 'input--small text-right'}, error_attr: { inline: false }}) }}
             {{ form_errors(orderItemForm.quantity, {errors_attr: { inline: false }}) }}
         </td>
-        <td>
+        <td class="text-right">
             {{ form_widget(orderItemForm.unitName, {attr: { class: 'input--small text-right'}}) }}
             {{ form_errors(orderItemForm.unitName, {errors_attr: { inline: false }}) }}
         </td>
-        <td>
+        <td class="text-right">
             {{ form_widget(orderItemForm.vatPercent, {attr: { class: 'input--small text-right'}}) }}
             {{ form_errors(orderItemForm.vatPercent, {errors_attr: { inline: false }}) }}
         </td>
@@ -43,7 +43,7 @@
         <td class="text-right">{{ self.calculablePriceWidget(orderItemForm.priceWithoutVat) }}</td>
         <td class="text-right">{{ self.calculablePriceWidget(orderItemForm.totalPriceWithVat) }}</td>
         <td class="text-right">{{ self.calculablePriceWidget(orderItemForm.totalPriceWithoutVat) }}</td>
-        <td class="table-col-5 table-grid__cell--actions text-center">
+        <td class="table-col-5 table-grid__cell--actions text-left">
             <a href="#" class="js-order-item-remove table-action in-icon in-icon--delete"><i class="svg svg-trash"></i></a>
         </td>
     </tr>
@@ -63,10 +63,10 @@
             </div>
         </td>
         <td class="text-right">-</td>
-        <td>{{ self.priceWithVatWidget(orderTransportForm.priceWithVat) }}</td>
+        <td class="text-right">{{ self.priceWithVatWidget(orderTransportForm.priceWithVat) }}</td>
         <td class="text-right">1</td>
         <td></td>
-        <td>
+        <td class="text-right">
             {{ form_widget(orderTransportForm.vatPercent, {attr: { class: 'input--small text-right'}}) }}
             {{ form_errors(orderTransportForm.vatPercent, {errors_attr: { inline: false }}) }}
         </td>
@@ -92,10 +92,10 @@
             </div>
         </td>
         <td class="text-right">-</td>
-        <td>{{ self.priceWithVatWidget(orderPaymentForm.priceWithVat) }}</td>
+        <td class="text-right">{{ self.priceWithVatWidget(orderPaymentForm.priceWithVat) }}</td>
         <td class="text-right">1</td>
         <td></td>
-        <td>
+        <td class="text-right">
             {{ form_widget(orderPaymentForm.vatPercent, {attr: { class: 'input--small text-right'}}) }}
             {{ form_errors(orderPaymentForm.vatPercent, {errors_attr: { inline: false }}) }}
         </td>

diff --git a/packages/framework/src/Resources/views/Admin/Form/orderItems.html.twig b/packages/framework/src/Resources/views/Admin/Form/orderItems.html.twig
@@ -7,16 +7,16 @@
             <div class="table-touch-always">
                 {{ form_errors(form.itemsWithoutTransportAndPayment) }}
                 <div class="table-touch-always__in">
-                    <table class="table-main table-main--with-inline-form">
+                    <table class="table-main table-main--with-inline-form table-fixed">
                         <thead>
                             <tr>
-                                <th><span class="padding-left-10">{{ 'Name'|trans }}</span></th>
-                                <th class="text-right">{{ 'Catalog number'|trans }}</th>
-                                <th class="text-right"><span class="table-main__column-with-info">{{ 'Unit price including VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</span></th>
-                                <th class="text-right">{{ 'Amount'|trans }}</th>
-                                <th class="text-right">{{ 'Unit'|trans }}</th>
-                                <th class="text-right">{{ 'VAT rate (%)'|trans }}</th>
-                                <th class="text-center">
+                                <th class="table-col-375px"><span class="padding-left-10">{{ 'Name'|trans }}</span></th>
+                                <th class="table-col-155px">{{ 'Catalog number'|trans }}</th>
+                                <th class="table-col-145px text-right"><span class="table-main__column-with-info">{{ 'Unit price including VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</span></th>
+                                <th class="table-col-125px text-right">{{ 'Amount'|trans }}</th>
+                                <th class="table-col-125px text-right">{{ 'Unit'|trans }}</th>
+                                <th class="table-col-125px text-right">{{ 'VAT rate (%)'|trans }}</th>
+                                <th class="table-col-135px text-center">
                                     <span class="display-inline-block min-width-80">
                                         {{ 'Set prices manually'|trans }}
                                         <i class="svg svg-info cursor-help js-tooltip"
@@ -25,9 +25,9 @@
                                         ></i>
                                     </span>
                                 </th>
-                                <th class="text-right">{{ 'Unit price excluding VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</th>
-                                <th class="text-right">{{ 'Total including VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</th>
-                                <th class="text-right">{{ 'Total excluding VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</th>
+                                <th class="table-col-130px text-right">{{ 'Unit price excluding VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</th>
+                                <th class="table-col-145px text-right">{{ 'Total including VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</th>
+                                <th class="table-col-145px text-right">{{ 'Total excluding VAT'|trans }} ({{ currencySymbolByCurrencyId(order.currency.id) }})</th>
                                 <th></th>
                             </tr>
                         </thead>