From 6938740b0f17fd195c5b708097c22c6aaf7325b4 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 6 Nov 2023 19:23:21 +0000
Subject: [PATCH] Improved responsive styles. Improved focus changes.

---
 cista-front/src/App.vue                     |  2 +-
 cista-front/src/assets/main.css             | 16 +++++++++-------
 cista-front/src/components/BreadCrumb.vue   |  1 -
 cista-front/src/components/FileExplorer.vue | 12 +++++++-----
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/cista-front/src/App.vue b/cista-front/src/App.vue
index 48b40a9..a7b5614 100644
--- a/cista-front/src/App.vue
+++ b/cista-front/src/App.vue
@@ -4,7 +4,7 @@
     <HeaderMain ref="headerMain">
       <HeaderSelected :path="path.pathList" />
     </HeaderMain>
-    <BreadCrumb :path="path.pathList" />
+    <BreadCrumb :path="path.pathList" tabindex="-1"/>
   </header>
   <main>
     <RouterView :path="path.pathList" />
diff --git a/cista-front/src/assets/main.css b/cista-front/src/assets/main.css
index 109baaa..c8add70 100644
--- a/cista-front/src/assets/main.css
+++ b/cista-front/src/assets/main.css
@@ -8,6 +8,8 @@
   --primary-color: #000;
   --accent-color: #f80;
   --transition-time: 0.2s;
+  /* The following are overridden by responsive layouts */
+  --root-font-size: 1rem;
   --header-font-size: 1rem;
   --header-height: calc(8 * var(--header-font-size));
 }
@@ -19,13 +21,13 @@
     --header-color: #ccc;
   }
 }
-@media screen and (orientation: portrait) and (max-width: 600px) {
+@media screen and (max-width: 600px) {
   .size,
   .modified {
     display: none;
   }
 }
-@media screen and (orientation: landscape) and (min-width: 600px) {
+@media screen and (orientation: landscape) and (min-width: 800px) {
   /* Breadcrumbs and buttons side by side */
   header {
     display: flex;
@@ -39,8 +41,8 @@
   }
 }
 @media screen and (min-width: 800px) and (--webkit-min-device-pixel-ratio: 2) {
-  html {
-    font-size: 1.5rem;
+  :root {
+    --root-font-size: calc(16 * 100vw / 800);
   }
   header .buttons:has(input[type='search']) > div {
     display: none;
@@ -49,9 +51,9 @@
     display: inherit;
   }
 }
-@media screen and (min-width: 1400px) and (--webkit-min-device-pixel-ratio: 3) {
-  html {
-    font-size: 2rem;
+@media screen and (min-width: 1600px) and (--webkit-min-device-pixel-ratio: 3) {
+  :root {
+    --root-font-size: 2rem;
   }
 }
 @media screen and (max-height: 600px) {
diff --git a/cista-front/src/components/BreadCrumb.vue b/cista-front/src/components/BreadCrumb.vue
index 7e85bde..0573c41 100644
--- a/cista-front/src/components/BreadCrumb.vue
+++ b/cista-front/src/components/BreadCrumb.vue
@@ -2,7 +2,6 @@
   <nav
     class="breadcrumb"
     aria-label="Breadcrumb"
-    tabindex="0"
     @keyup.left.stop="move(-1)"
     @keyup.right.stop="move(1)"
     @focus="move(0)"
diff --git a/cista-front/src/components/FileExplorer.vue b/cista-front/src/components/FileExplorer.vue
index e296fdf..1c865a2 100644
--- a/cista-front/src/components/FileExplorer.vue
+++ b/cista-front/src/components/FileExplorer.vue
@@ -1,5 +1,5 @@
 <template>
-  <table v-if="props.documents.length || editing" @blur="cursor = null">
+  <table v-if="props.documents.length || editing">
     <thead>
       <tr>
         <th class="selection">
@@ -95,8 +95,9 @@
             <a
               :href="url_for(doc)"
               tabindex="-1"
-              @contextmenu.stop
+              @contextmenu.prevent
               @focus.stop="cursor = doc"
+              @blur="ev => { if (!editing) cursor = null }"
               >{{ doc.name }}</a
             >
             <button
@@ -245,7 +246,8 @@ defineExpose({
     scrolltr = tr
     if (!scrolltimer) {
       scrolltimer = setTimeout(() => {
-        scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        if (scrolltr)
+          scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
         scrolltimer = null
       }, 300)
     }
@@ -370,10 +372,10 @@ table .selection {
   text-overflow: clip;
 }
 table .modified {
-  width: 8rem;
+  width: 8em;
 }
 table .size {
-  width: 4rem;
+  width: 5em;
 }
 table .menu {
   width: 1rem;