From 27766c5ff76076b41e4a74a4d128a83fcceef9dc Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 28 Jun 2024 11:09:35 -0300
Subject: [PATCH] Updates to mosaic view mode: move checkbox to bottom. #900

---
 .../admin/components/lists/items-list.vue     | 55 +++++++++----------
 src/views/admin/scss/_view-mode-mosaic.scss   | 12 ++--
 2 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index 043399001..00992fc69 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -2016,38 +2016,35 @@
                                 :transition-duration="500"
                             />
 
-                        <!-- Checkbox -->
-                        <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
-                        <div
-                                v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
-                                :class="{ 'is-selecting': isSelectingItems }"
-                                class="mosaic-item-checkbox">
-                            <label
-                                    tabindex="0"
-                                    :class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
-                                <input
-                                        v-if="!$adminOptions.itemsSingleSelectionMode"
-                                        type="checkbox"
-                                        :checked="getSelectedItemChecked(item.id)"
-                                        @input="setSelectedItemChecked(item.id)">
-                                <input
-                                        v-else
-                                        v-model="singleItemSelection"
-                                        type="radio"
-                                        name="item-single-selection"
-                                        :value="item.id">
-                                <span class="check" />
-                                <span class="control-label" />
-                                <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
-                            </label>
-                        </div>
-
                         <!-- Title -->
                         <div
                                 class="metadata-title"
-                                :style="{
-                                    'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '0 !important' : (isOnAllItemsTabs ? '0.5em' : '1em')
-                                }">
+                                :style="{ 'padding-left': collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) ? '1.75em' : '1.0em' }">
+                            <!-- Checkbox -->
+                            <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
+                            <div
+                                    v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
+                                    :class="{ 'is-selecting': isSelectingItems }"
+                                    class="mosaic-item-checkbox">
+                                <label
+                                        tabindex="0"
+                                        :class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
+                                    <input
+                                            v-if="!$adminOptions.itemsSingleSelectionMode"
+                                            type="checkbox"
+                                            :checked="getSelectedItemChecked(item.id)"
+                                            @input="setSelectedItemChecked(item.id)">
+                                    <input
+                                            v-else
+                                            v-model="singleItemSelection"
+                                            type="radio"
+                                            name="item-single-selection"
+                                            :value="item.id">
+                                    <span class="check" />
+                                    <span class="control-label" />
+                                    <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
+                                </label>
+                            </div>
                             <p 
                                     v-tooltip="{
                                         delay: {
diff --git a/src/views/admin/scss/_view-mode-mosaic.scss b/src/views/admin/scss/_view-mode-mosaic.scss
index 6032d82fc..25f60c01c 100644
--- a/src/views/admin/scss/_view-mode-mosaic.scss
+++ b/src/views/admin/scss/_view-mode-mosaic.scss
@@ -59,8 +59,8 @@
 
         .mosaic-item-checkbox {
             position: absolute;
-            margin-top: 8px;
-            margin-left: 1em;
+            margin-top: -2px;
+            margin-left: -1em;
             z-index: 9;
         }
         .actions-area {
@@ -105,9 +105,11 @@
                 }
             }
         }
-        &.selected-mosaic-item {
-            .actions-area {
-                background-color: var(--tainacan-turquoise1);
+        & > .selected-mosaic-item {
+            background-color: var(--tainacan-turquoise1);
+            .actions-area,
+            .metadata-title {
+                background-color: var(--tainacan-turquoise1) !important;
             }
         }