Style grid fields templates

src/Sylius/Bundle/AdminBundle/templates/country/grid/field/name.html.twig

@@ -1,2 +1,2 @@
 <span class="flag flag-sm flag-country-{{ data.code|lower }}"></span>
-{{ data }}
+<span class="ps-2 fw-medium">{{ data }}</span>

src/Sylius/Bundle/AdminBundle/templates/locale/grid/field/name.html.twig

@@ -1,2 +1,2 @@
 <span class="flag flag-sm flag-country-{{ data.code|split('_')|last|lower }}"></span>
-{{ data }}
+<span class="ps-2 fw-medium">{{ data }}</span>

src/Sylius/Bundle/AdminBundle/templates/order/grid/field/order_total.html.twig

@@ -1,3 +1,3 @@
 {% import "@SyliusAdmin/shared/helper/money.html.twig" as _money %}
 
-{{ _money.format(data.total, data.currencyCode) }}
+<span class="fw-medium">{{ _money.format(data.total, data.currencyCode) }}</span>

src/Sylius/Bundle/AdminBundle/templates/product/grid/field/name.html.twig

@@ -1,5 +1,5 @@
 {% if data is not null %}
-    {{ data }}
+    <a href="#" class="fw-medium">{{ data }}</a>
 {% else %}
     {% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon as _icon %}
 

src/Sylius/Bundle/AdminBundle/templates/product/grid/field/product_image.html.twig

@@ -1,3 +1,5 @@
 {% import '@SyliusAdmin/shared/helper/product.html.twig' as _product %}
 
-{{ _product.image(data) }}
+<div class="py-1">
+    {{ _product.image(data) }}
+</div>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/boolean.html.twig

@@ -1,7 +1,7 @@
 {% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon as _icon %}
 
 {% if true == data %}
-    <span {{ sylius_test_html_attribute('status-enabled') }}>{{ _icon({ icon: 'check', class: 'icon text-green' }) }}</span>
+    <div class="text-center" {{ sylius_test_html_attribute('status-enabled') }}>{{ _icon({ icon: 'check', class: 'icon text-green' }) }}</div>
 {% else %}
-    <span {{ sylius_test_html_attribute('status-disabled') }}>{{ _icon({ icon: 'x', class: 'icon icon-sm text-secondary' }) }}</span>
+    <div class="text-center" {{ sylius_test_html_attribute('status-disabled') }}>{{ _icon({ icon: 'x', class: 'icon icon-sm text-secondary' }) }}</div>
 {% endif %}

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/channel.html.twig

@@ -1,7 +1,4 @@
-<div class="channel">
-    <span class="badge" style="background-color: {{ data.color|default('#000') }}"></span>
-
-    <span class="text-nowrap">
-        {{ data.name|default(data.code) }}
-    </span>
-</div>
+<span class="status status-blue status-lite">
+    <span class="status-dot" style="background-color: {{ data.color|default('#000') }}"></span>
+    <span class="text-nowrap fs-5">{{ data.name|default(data.code) }}</span>
+</span>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/channels.html.twig

@@ -1,7 +1,5 @@
-<div class="channel">
-    <span class="text-nowrap">
-        {% for channel in data %}
-            {% include('@SyliusAdmin/shared/grid/field/channel.html.twig') with { data: channel } %}
-        {% endfor %}
-    </span>
+<div>
+    {% for channel in data %}
+        <div>{% include('@SyliusAdmin/shared/grid/field/channel.html.twig') with { data: channel } %}</div>
+    {% endfor %}
 </div>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/code.html.twig

@@ -0,0 +1,3 @@
+{% if data is not null %}
+    <code>{{ data }}</code>
+{% endif %}

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/customer.html.twig

@@ -1,2 +1,2 @@
 <strong>{{ data.firstName }} {{ data.lastName }}</strong>
-<p>{{ data.email }}</p>
+<div class="fs-5 text-secondary">{{ data.email }}</div>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/date.html.twig

@@ -0,0 +1,8 @@
+<div class="text-center fs-5">
+    {% if data is null %}
+        <span class="text-secondary">-</span>
+    {% else %}
+        <div>{{ data|date('Y-m-d') }}</div>
+        <div>{{ data|date('H:i') }}</div>
+    {% endif %}
+</div>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/name.html.twig

@@ -0,0 +1,3 @@
+{% if data is not null %}
+    <a href="#" class="fw-medium">{{ data }}</a>
+{% endif %}

src/Sylius/Bundle/AdminBundle/templates/shared/grid/field/order_number.html.twig

@@ -1 +1 @@
-<a href="{{ path('sylius_admin_order_show', {'id' : data.id })|raw }}">#{{ data.number }}</a>
+<a class="fw-medium" href="{{ path('sylius_admin_order_show', {'id' : data.id })|raw }}">#{{ data.number }}</a>

src/Sylius/Bundle/AdminBundle/templates/shared/helper/sorting.html.twig

@@ -3,7 +3,7 @@
     {% set order = grid.getSortingOrder(field.name) %}
 
     {% if grid.isSortedBy(field.name) %}
-        <th class="sortable sorted {{ order == 'desc' ? 'descending' : 'ascending' }} sylius-table-column-{{ field.name }}">
+        <th class="sortable sorted {{ order == 'desc' ? 'descending' : 'ascending' }} sylius-table-column-{{ field.name }} {{ field.options.vars.th_class|default('') }}">
             <a class="link-reset" href="{{ link(field.name, attributes, (order == 'desc' ? 'asc' : 'desc'), grid.parameters.all) }}">
                 {{ field.label|trans }}
                 {% if order == 'desc' %}
@@ -19,7 +19,7 @@
             </a>
         </th>
     {% else %}
-        <th class="sortable sylius-table-column-{{ field.name }}">
+        <th class="sortable sylius-table-column-{{ field.name }} {{ field.options.vars.th_class|default('') }}">
             <a class="link-reset" href="{{ link(field.name, attributes, order, grid.parameters.all) }}">
                 {{ field.label|trans }}
                 <svg style="opacity: 0.7; transform: translateY(-1px)" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">

src/Sylius/Bundle/AdminBundle/templates/shared/helper/table.html.twig

@@ -2,7 +2,7 @@
     {% import '@SyliusAdmin/shared/helper/sorting.html.twig' as sorting %}
 
     {% if definition.actionGroups.bulk is defined and definition.getEnabledActions('bulk')|length > 0 %}
-        <th class="center aligned">
+        <th class="w-1 {{ field.options.vars.th_class|default('') }}">
             <input data-check-all="index" type="checkbox" class="form-check-input">
         </th>
     {% endif %}
@@ -12,12 +12,12 @@
             {% if field.isSortable %}
                 {{ sorting.tableHeader(grid, field, requestAttributes) }}
             {% else %}
-                <th class="text-body sylius-table-column-{{ field.name }}">{{ field.label|trans }}</th>
+                <th class="text-body sylius-table-column-{{ field.name }} {{ field.options.vars.th_class|default('') }}">{{ field.label|trans }}</th>
             {% endif %}
         {% endif %}
     {% endfor %}
     {% if definition.actionGroups.item is defined and definition.getEnabledActions('item')|length > 0 %}
-        <th class="text-body text-center sylius-table-column-actions">{{ 'sylius.ui.actions'|trans }}</th>
+        <th class="w-1 text-body text-center sylius-table-column-actions {{ field.options.vars.th_class|default('') }}">{{ 'sylius.ui.actions'|trans }}</th>
     {% endif %}
 {% endmacro %}
 
@@ -30,11 +30,13 @@
             <td class="center aligned"><input data-check-all-group="index" class="form-check-input" type="checkbox" value="{{ row.id }}" /></td>
         {% endif %}
         {% for field in definition.enabledFields|sort_by('position') %}
-            <td>{{ sylius_grid_render_field(grid, field, row) }}</td>
+            <td{% if field.options.vars.td_class is defined %} class="{{ field.options.vars.td_class }}"{% endif %}>
+                {{ sylius_grid_render_field(grid, field, row) }}
+            </td>
         {% endfor %}
         {% if definition.actionGroups.item is defined and definition.getEnabledActions('item')|length > 0 %}
-            <td {{ sylius_test_html_attribute('actions') }}>
-                <div class="d-flex gap-1 justify-content-end py-2">
+            <td{% if field.options.vars.td_class is defined %} class="{{ field.options.vars.td_class }}"{% endif %} {{ sylius_test_html_attribute('actions') }}>
+                <div class="d-flex gap-1 justify-content-end">
                     {% for action in definition.getEnabledActions('item')|sort_by('position') %}
                         {{ sylius_grid_render_item_action(grid, action, row) }}
                     {% endfor %}

src/Sylius/Bundle/UiBundle/Resources/views/Grid/Field/nameAndDescription.html.twig

@@ -1,4 +1,6 @@
 <strong>{{ data.name }}</strong>
 {% if data.description is not empty %}
-    <p>{{ data.description }}</p>
+    <div class="fs-5 text-secondary text-wrap pt-1">
+        {{ data.description }}
+    </div>
 {% endif %}

src/Sylius/Bundle/UiBundle/Resources/views/Grid/Field/position.html.twig

@@ -1 +1 @@
-<div style="text-align: center;"><span class="ui circular label">{{ data }}</span></div>
+<span class="badge bg-blue-lt">{{ data }}</span>