Nice settings layout for mobule

gryphon · May 28, 2024 · b4063ee · b4063ee
1 parent c38c1ee
commit b4063ee
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/app/assets/stylesheets/custom_table/table.scss b/app/assets/stylesheets/custom_table/table.scss
@@ -88,7 +88,6 @@ table.custom-table {
   overflow: hidden;
 }
 
-
 @include media-breakpoint-down(md) {
   .custom-table-filter {
     > :not(.has-value, .btn-group, .sm-visible) {
@@ -100,11 +99,28 @@ table.custom-table {
       }
     }
   }
+
 }
 
 
 @include media-breakpoint-down(lg) {
   .overflow-x-lg-scroll {
     overflow-x: scroll;
   }
+
+}
+
+@include media-breakpoint-up(sm) {
+  .custom-table-settings {
+    columns: 2
+  }
 }
+
+
+@include media-breakpoint-up(lg) {
+  .custom-table-settings {
+    columns: 3
+  }
+}
+
+
diff --git a/app/views/custom_table/_settings.html.haml b/app/views/custom_table/_settings.html.haml
@@ -32,11 +32,11 @@
             = f.hidden_field "variant", value: variant
 
             = f.simple_fields_for :fields do |sfi|
-              %div{data: {controller: "sortable", "data-sortable-handle-value": ".handle"}, style: "columns: #{columns}"}
+              %div.custom-table-settings{data: {controller: "sortable", "sortable-handle-value": ".handle"}}
 
                 - items.each do |field, item|
                   -# = abort item.inspect
-                  %div
+                  %div.text-nowrap.overflow-x-hidden
                     %i.handle{style: "cursor: move", class: custom_table_move_icon_class}
                     .form-check.form-switch.d-inline-block
                       -# - if item[:appear] == :always