💄 Remove solo stacked grid drag handle header. Closes #1432.

statamic · Apr 3, 2020 · a821f93 · a821f93
1 parent 1334d4b
commit a821f93
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -1,12 +1,12 @@
 <template>
 
     <div
-        class="bg-grey-20 shadow mb-2 rounded border"
+        class="bg-grey-10 shadow-sm mb-2 rounded border"
         :class="[sortableItemClass, { 'opacity-50': isExcessive }]"
     >
         <div
-            class="cursor-move bg-grey-30 border-b px-2 py-1 text-sm flex items-center justify-between outline-none"
-            :class="{ [sortableHandleClass]: grid.isReorderable }"
+            class="grid-item-header"
+            :class="{ [sortableHandleClass]: grid.isReorderable, 'hidden': ! grid.isReorderable }"
         >
             {{ index }}
             <span class="icon icon-cross cursor-pointer" @click="$emit('removed', index)" />

diff --git a/resources/sass/components/fieldtypes/grid.scss b/resources/sass/components/fieldtypes/grid.scss
@@ -62,3 +62,11 @@
     @apply w-8 pl-0 text-center;
     padding-top: 21px; // pseudo-center for text/select fields
 }
+
+.grid-item-header {
+    @apply bg-grey-20 border-b px-2 py-1 text-sm flex items-center justify-between outline-none cursor-move;
+}
+
+.grid-stacked .input-text {
+    @apply bg-white;
+}