From b26abaf8b16b41dfc37b75c484efbc2097c1c5d2 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Mon, 31 Oct 2022 21:59:24 -0700
Subject: [PATCH] Improve mobile selection bar

---
 src/App.vue                         |  1 +
 src/components/SelectionManager.vue | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 06f8142e..feb86522 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -268,6 +268,7 @@ body {
 // Prevent content overflow on NC <25
 #content-vue {
   max-height: 100vh;
+  z-index: 3000; // above header
 }
 
 // Patch viewer to remove the title and
diff --git a/src/components/SelectionManager.vue b/src/components/SelectionManager.vue
index 288ca578..abff9c97 100644
--- a/src/components/SelectionManager.vue
+++ b/src/components/SelectionManager.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="selection.size > 0" class="top-bar">
-      <NcActions>
+      <NcActions :inline="1">
         <NcActionButton
           :aria-label="t('memories', 'Cancel')"
           @click="clearSelection()"
@@ -88,7 +88,7 @@ type Selection = Map<number, IPhoto>;
     CloseIcon,
   },
 })
-export default class SelectionHandler extends Mixins(GlobalMixin, UserConfig) {
+export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
   @Prop() public selection: Selection;
   @Prop() public heads: { [dayid: number]: IHeadRow };
 
@@ -509,11 +509,11 @@ export default class SelectionHandler extends Mixins(GlobalMixin, UserConfig) {
   right: 60px;
   padding: 8px;
   width: 400px;
-  max-width: calc(100vw - 30px);
+  max-width: 100vw;
   background-color: var(--color-main-background);
   box-shadow: 0 0 2px gray;
   border-radius: 10px;
-  opacity: 0.95;
+  opacity: 0.97;
   display: flex;
   vertical-align: middle;
   z-index: 100;
@@ -524,9 +524,16 @@ export default class SelectionHandler extends Mixins(GlobalMixin, UserConfig) {
     padding-left: 8px;
   }
 
-  @media (max-width: 768px) {
-    top: 35px;
-    right: 15px;
+  @media (max-width: 1024px) { // sidebar is hidden below this point
+    top: 0;
+    left: 0;
+    right: unset;
+    position: fixed;
+    width: 100vw;
+    border-radius: 0px;
+    opacity: 1;
+    padding-top: 3px;
+    padding-bottom: 3px;
   }
 }
 </style>