Tighter table

cista-front/src/assets/main.css

@@ -121,6 +121,9 @@ button {
   min-width: 1rem;
   min-height: 1rem;
 }
+input {
+  margin: 0;
+}
 :focus {
   outline: none;
 }
@@ -133,6 +136,7 @@ a:hover {
 }
 table {
   border-collapse: collapse;
+  border-spacing: 0;
   border: 0;
   gap: 0;
 }

cista-front/src/components/BreadCrumb.vue

@@ -8,10 +8,7 @@
 </template>
 
 <script setup lang="ts">
-//import home from '@/assets/svg/home.svg'
-import { defineProps, defineAsyncComponent } from 'vue'
-
-const home = defineAsyncComponent(() => import(`@/assets/svg/home.svg`))
+import home from '@/assets/svg/home.svg'
 
 const props = defineProps<{
   path: Array<string>

cista-front/src/components/FileExplorer.vue

@@ -337,7 +337,7 @@ table .selection {
   width: 2rem;
 }
 table .modified {
-  width: 10rem;
+  width: 8rem;
 }
 table .size {
   width: 4rem;
@@ -378,9 +378,6 @@ tbody tr.cursor {
 .right {
   text-align: right;
 }
-.selection {
-  width: 2em;
-}
 .sortcolumn:hover {
   cursor: pointer;
 }
@@ -404,16 +401,17 @@ tbody tr.cursor {
 .name a {
   text-decoration: none;
 }
-tr {
-  height: 2.5rem;
-}
 tbody .selection input {
   z-index: 1;
   position: absolute;
   opacity: 0;
-  left: 0;
+  left: 0.5rem;
   top: 0;
 }
+.selection {
+  width: 2em;
+  height: 2em;
+}
 .selection input:checked {
   opacity: .7;
 }

cista-front/src/utils/index.ts

@@ -42,13 +42,15 @@ export function formatUnixDate(t: number) {
     return formatter.format(Math.round(diff / 86400000), 'day')
   }
 
-  const d = date.toLocaleDateString("us", {
+  let d = date.toLocaleDateString(undefined, {
     weekday: 'short',
     year: 'numeric',
     month: 'short',
     day: 'numeric'
-  }).replace("Sept", "Sep")
-  return (d.length === 16 ? d : d.replace(', ', ',\u202F\u2007')).replaceAll(' ', '\u202F')
+  }).replace("Sept", "Sep").replaceAll(',', '')
+  d = (d.length === 15 ? d : d.replace(' ', ' \u2007')).replaceAll(' ', '\u202F').replace('\u202F', '\u00A0')
+  d = d.slice(0, -4) + d.slice(-2)  // Two digit year is enough
+  return d
 }
 
 export function getFileExtension(filename: string) {