Directory Formatting (#109)

Mostly small style changes so far.
- allow scrolling the table horizontally
- minimum sizes on columns
- datetime format changes
- left/right justify on some columns

frontend/app/view/directorypreview.less

@@ -2,9 +2,8 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    overflow-x: hidden;
     .dir-table {
-        overflow-x: hidden;
+        overflow-x: auto;
         height: 100%;
         min-width: 600px;
         --col-size-size: 0.2rem;
@@ -42,10 +41,8 @@
                             margin-top: 0.2rem;
                         }
 
-                        .dir-table-head-size,
+                        .dir-table-head-size {
-                        .dir-table-head-type {
+                            align-self: flex-end;
-                            width: 100%;
-                            text-align: right;
                         }
                     }
 
@@ -92,7 +89,7 @@
             .dir-table-body-scroll-box {
                 position: relative;
                 overflow-y: auto;
-                overflow-x: hidden;
+                overflow-x: auto;
                 .dummy {
                     position: absolute;
                     visibility: hidden;
@@ -158,10 +155,6 @@
                             margin-right: 12px;
                         }
 
-                        .dir-table-type {
-                            float: right;
-                        }
-
                         .dir-table-modestr {
                             font-family: Hack;
                         }

frontend/app/view/directorypreview.tsx

@@ -6,6 +6,7 @@ import * as keyutil from "@/util/keyutil";
 import * as util from "@/util/util";
 import type { PreviewModel } from "@/view/preview";
 import {
+    Column,
     Row,
     Table,
     createColumnHelper,
@@ -88,17 +89,23 @@ function getSpecificUnit(bytes: number, suffix: string): string {
     return `${bytes / divisor} ${displaySuffixes[suffix]}`;
 }
 
-function getLastModifiedTime(unixMillis: number): string {
+function getLastModifiedTime(unixMillis: number, column: Column<FileInfo, number>): string {
     let fileDatetime = dayjs(new Date(unixMillis));
     let nowDatetime = dayjs(new Date());
 
-    if (nowDatetime.year() != fileDatetime.year()) {
+    let datePortion: string;
-        return dayjs(fileDatetime).format("M/D/YY");
+    if (nowDatetime.isSame(fileDatetime, "date")) {
-    } else if (nowDatetime.month() != fileDatetime.month()) {
+        datePortion = "Today";
-        return dayjs(fileDatetime).format("MMM D");
+    } else if (nowDatetime.subtract(1, "day").isSame(fileDatetime, "date")) {
+        datePortion = "Yesterday";
     } else {
-        return dayjs(fileDatetime).format("MMM D h:mm A");
+        datePortion = dayjs(fileDatetime).format("M/D/YY");
     }
+
+    if (column.getSize() > 120) {
+        return `${datePortion}, ${dayjs(fileDatetime).format("h:mm A")}`;
+    }
+    return datePortion;
 }
 
 const iconRegex = /^[a-z0-9- ]+$/;
@@ -185,28 +192,37 @@ function DirectoryTable({
                 cell: (info) => <span className="dir-table-name">{info.getValue()}</span>,
                 header: () => <span className="dir-table-head-name">Name</span>,
                 sortingFn: "alphanumeric",
+                size: 200,
+                minSize: 90,
             }),
             columnHelper.accessor("modestr", {
                 cell: (info) => <span className="dir-table-modestr">{info.getValue()}</span>,
                 header: () => <span>Permissions</span>,
                 size: 91,
+                minSize: 90,
                 sortingFn: "alphanumeric",
             }),
             columnHelper.accessor("modtime", {
-                cell: (info) => <span className="dir-table-lastmod">{getLastModifiedTime(info.getValue())}</span>,
+                cell: (info) => (
+                    <span className="dir-table-lastmod">{getLastModifiedTime(info.getValue(), info.column)}</span>
+                ),
                 header: () => <span>Last Modified</span>,
-                size: 185,
+                size: 91,
+                minSize: 65,
                 sortingFn: "datetime",
             }),
             columnHelper.accessor("size", {
                 cell: (info) => <span className="dir-table-size">{getBestUnit(info.getValue())}</span>,
                 header: () => <span className="dir-table-head-size">Size</span>,
                 size: 55,
+                minSize: 50,
                 sortingFn: "auto",
             }),
             columnHelper.accessor("mimetype", {
                 cell: (info) => <span className="dir-table-type">{cleanMimetype(info.getValue() ?? "")}</span>,
                 header: () => <span className="dir-table-head-type">Type</span>,
+                size: 67,
+                minSize: 67,
                 sortingFn: "alphanumeric",
             }),
             columnHelper.accessor("path", {}),