misc/dl: restore old graphics

docs/pages/misc/dl.html

@@ -1,8 +1,15 @@
 ---
 title: Downloads
 date: "2007-01-01 00:00:00 -1200"
-mdate: 2022-02-26 15:55:55 -0700
+mdate: 2025-01-05 21:12:55 -0700
 entry: app_misc_dl
 ---
 <link rel="stylesheet" href="{{assets}}victorz/dl/i/style.css" />
+
+<h2>
+    <img src="{{assets}}victorz/dl/i/download.png" alt="downstream" />
+    Victor's AJAX Downloads
+    <img src="{{assets}}victorz/dl/i/upload.png" alt="upstream" />
+</h2>
+
 {%- include 'app.html' -%}

docs/pass/assets/victorz/dl/i/style.css

@@ -50,3 +50,18 @@
 .file-file[data-ext='rm'] { background-image: url('rm.png'); }
 .file-file[data-ext='eps'] { background-image: url('eps.png'); }
 .file-file[data-ext='css'] { background-image: url('css.png'); }
+
+.breadcrumb-dl::before {
+	content: url('here.png');
+	padding: 0 0.5rem 0 0.25rem;
+}
+
+.sort-a::after {
+	content: url('s_a.png');
+}
+.sort-d::after {
+	content: url('s_d.png');
+}
+.sort-a::after, .sort-d::after {
+	padding-left: 0.4rem;
+}

scripts/misc/dl/AppMiscDL.svelte

@@ -79,14 +79,6 @@ function cmpProp(a: any, b: any, prop: string, reverse = false): number {
   return cmp(a[prop], b[prop]) * (reverse ? -1 : 1)
 }
 
-function sortText (isSort: boolean, reverse: boolean): string {
-  return isSort
-    ? reverse
-      ? ' (desc)'
-      : ' (asc)'
-    : ''
-}
-
 // Load from hash
 function updateLocationHash (replaceHash = false) {
   const newHash = getPathString(curPath)
@@ -134,7 +126,7 @@ void init()
 <svelte:window onhashchange={browseLocationHash} />
 
 <nav aria-label="breadcrumb">
-  <ol class="breadcrumb">
+  <ol class="breadcrumb breadcrumb-dl">
     {#each curPath as item, index}
       {#if index + 1 === curPath.length}
         <li class="breadcrumb-item active" aria-current="page">{item.name} ({formatSize(item.size)})</li>
@@ -148,10 +140,13 @@ void init()
 <table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
-      <th onclick={() => setSort('name')}>Name{sortText(curSort === 'name', curSortReverse)}</th>
-      <th onclick={() => setSort('size')}>Size{sortText(curSort === 'size', curSortReverse)}</th>
-      <th onclick={() => setSort('remark')}>Remarks{sortText(curSort === 'remark', curSortReverse)}</th>
-      <th onclick={() => setSort('mtime')}>Modified Time{sortText(curSort === 'mtime', curSortReverse)}</th>
+      {#snippet fileHeader (id: string, name: string)}
+        <th onclick={() => setSort(id)} class="sort-{curSort === id ? curSortReverse ? 'd' : 'a' : 'n'}">{name}</th>
+      {/snippet}
+      {@render fileHeader('name', 'Name')}
+      {@render fileHeader('size', 'Size')}
+      {@render fileHeader('remark', 'Remarks')}
+      {@render fileHeader('mtime', 'Modified Time')}
     </tr>
   </thead>
   <tbody>