[BootstrapAdminUi] General UI improvements (#159)

Fixes #157
Sylius · Dec 12, 2024 · 85bf9b6 · 85bf9b6
2 parents ca61287 + bcdc38d
commit 85bf9b6
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 7 deletions.
diff --git a/src/BootstrapAdminUi/assets/styles/_accordion.scss b/src/BootstrapAdminUi/assets/styles/_accordion.scss
@@ -0,0 +1,18 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.accordion {
+  .accordion-item {
+    .accordion-header {
+      &:hover {
+        background: $gray-100;
+      }
+    }
+  }
+}
diff --git a/src/BootstrapAdminUi/assets/styles/_variables.scss b/src/BootstrapAdminUi/assets/styles/_variables.scss
@@ -24,6 +24,23 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000 !default;
 
+$grid-breakpoints: (
+        xs: 0,
+        sm: 768px,
+        md: 992px,
+        lg: 1200px,
+        xl: 1400px,
+        xxl: 2200px
+);
+
+$container-max-widths: (
+        sm: 720px,
+        md: 960px,
+        lg: 1140px,
+        xl: 1320px,
+        xxl: 1920px
+);
+
 $body-color: $gray-900;
 
 $text-secondary: $gray-600;

diff --git a/src/BootstrapAdminUi/assets/styles/main.scss b/src/BootstrapAdminUi/assets/styles/main.scss
@@ -12,7 +12,7 @@
 @import "@tabler/core/src/scss/tabler.scss";
 
 @import "body";
-
+@import "accordion";
 @import "alert";
 @import "datatable";
 @import "flashes";

diff --git a/src/BootstrapAdminUi/public/app.css b/src/BootstrapAdminUi/public/app.css
diff --git a/src/BootstrapAdminUi/public/app.rtl.css b/src/BootstrapAdminUi/public/app.rtl.css
diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/flashes.html.twig
@@ -8,11 +8,11 @@
         'warning': 'tabler:alert-triangle',
     } %}
 
-    <div class="container-xl mt-3" {{ sylius_test_html_attribute('sylius-flashes-container') }}>
+    <div class="container-xl" {{ sylius_test_html_attribute('sylius-flashes-container') }}>
         {% for type in ['success', 'error', 'info', 'warning'] %}
             {% for flash in session.flashbag.get(type) %}
                 <div
-                    class="sylius alert alert-{{ type == 'error' ? 'danger' : type }}"
+                    class="mt-3 sylius alert alert-{{ type == 'error' ? 'danger' : type }}"
                     role="alert"
                     {{ sylius_test_html_attribute('sylius-flash-message') }}
                     {{ sylius_test_html_attribute('sylius-flash-message-type', type) }}

diff --git a/src/BootstrapAdminUi/templates/shared/helper/table.html.twig b/src/BootstrapAdminUi/templates/shared/helper/table.html.twig
@@ -26,11 +26,15 @@
 
     <tr class="item" {{ sylius_test_html_attribute('row') }} {{ sylius_test_html_attribute('resource-id', row.id) }}>
         {% if definition.actionGroups.bulk is defined and definition.getEnabledActions('bulk')|length > 0 %}
-            <td class="center aligned"><input data-check-all-group="index" class="form-check-input" type="checkbox" value="{{ row.id }}" /></td>
+            <td class="text-center"><input data-check-all-group="index" class="form-check-input" type="checkbox" value="{{ row.id }}" /></td>
         {% endif %}
         {% for field in definition.enabledFields|sylius_sort_by('position') %}
             <td{% if field.options.vars.td_class is defined %} class="{{ field.options.vars.td_class }}"{% endif %}>
-                {{ sylius_grid_render_field(grid, field, row) }}
+                {% if field.name == 'code' %}
+                    <code>{{ sylius_grid_render_field(grid, field, row) }}</code>
+                {% else %}
+                    {{ sylius_grid_render_field(grid, field, row) }}
+                {% endif %}
             </td>
         {% endfor %}
         {% if definition.actionGroups.item is defined and definition.getEnabledActions('item')|length > 0 %}