fix styling quirks

UMN-LATIS · Jul 7, 2023 · 3ab4104 · 3ab4104
1 parent f645c39
commit 3ab4104
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/pages/DrawerViewPage/DrawerItemsGrid.vue b/src/pages/DrawerViewPage/DrawerItemsGrid.vue
@@ -11,10 +11,12 @@
       @end="emits('dragEnd', clonedMatches)"
     >
       <template #item="{ element }">
-        <div class="item-container relative rounded flex items-start group">
+        <div
+          class="item-container relative rounded flex items-start group shadow-sm"
+        >
           <div
             v-if="isDraggable"
-            class="drag-handle cursor-move h-full py-1 rounded-l border border-l-0 group-hover:bg-blue-600 group-hover:border-blue-600 group-hover:text-blue-100 transition-colors"
+            class="drag-handle cursor-move h-full py-1 rounded-l border border-r-0 group-hover:bg-blue-600 group-hover:border-blue-600 group-hover:text-blue-100 transition-colors"
           >
             <DragIcon />
           </div>
@@ -27,7 +29,7 @@
             class="search-result-card h-full flex-1 !rounded-l-none"
             :mediaCardClass="[
               'group-hover:bg-blue-50 group-hover:border-blue-600 group-hover:!text-blue-600',
-              isDraggable ? 'rounded-l-none border-l-none' : '',
+              isDraggable ? 'rounded-l-none !border-l-0 shadow-none' : '',
             ]"
           />
         </div>

diff --git a/src/pages/DrawerViewPage/DrawerItemsList.vue b/src/pages/DrawerViewPage/DrawerItemsList.vue
@@ -11,10 +11,10 @@
       @end="emits('dragEnd', clonedMatches)"
     >
       <template #item="{ element }">
-        <div class="item-container relative rounded flex group">
+        <div class="item-container relative rounded flex group shadow-sm">
           <div
             v-if="isDraggable"
-            class="drag-handle cursor-move py-1 rounded-l border border-l-0 group-hover:bg-blue-600 group-hover:border-blue-600 group-hover:text-blue-100 transition-colors"
+            class="drag-handle cursor-move py-1 rounded-l group-hover:bg-blue-600 group-hover:border-blue-600 group-hover:text-blue-100 transition-colors bg-white"
           >
             <DragIcon />
           </div>
@@ -90,12 +90,12 @@ const hasMoreResults = computed(() => {
 });
 </script>
 <style scoped>
-.drag-handle {
+/* .drag-handle {
   background: white;
   border: var(--app-mediaCard-borderWidth) solid
     var(--app-mediaCard-borderColor);
   border-right: none;
-}
+} */
 
 .draggable-ghost {
   opacity: 0.5;