UI improvements to header

factsmission · Jan 2, 2025 · bf9366e · bf9366e
1 parent 160e07d
commit bf9366e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 46 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -23,6 +23,7 @@
 }
 
 @keyframes high-light {
+
   10%,
   50% {
     background: var(--highlight-background);
@@ -171,7 +172,6 @@ syno-form {
   .search {
     display: grid;
     grid-template-columns: 1fr auto;
-    gap: 0.4rem;
   }
 
   .options {
@@ -184,18 +184,30 @@ syno-form {
   .awesomplete {
     z-index: 300;
 
-    * {
+    mark {
+      background: var(--highlight-background);
+    }
+
+    ul {
       background: var(--nav-background);
+      border: 1px solid var(--accent);
       color: var(--text-color);
+      overflow: hidden;
+
+      &::before {
+        background: var(--nav-background);
+      }
     }
 
     input {
-      border: 1px solid var(--text-color);
-      border-radius: 0.6rem 0 0 0.6rem;
+      background: var(--body-background);
+      border: 2px solid var(--accent-mild);
+      border-right: none;
+      border-radius: 8px 0 0 8px;
       height: 100%;
       font-size: 1rem;
-      line-height: 2rem;
-      padding: 0 0.5rem;
+      line-height: 1.25rem;
+      padding: 0 4px;
       width: 100%;
     }
   }
@@ -219,6 +231,19 @@ syno-form {
   }
 }
 
+.result-header {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  gap: 4px;
+  justify-content: space-between;
+  margin: 1rem 0;
+
+  .sort {
+    flex-grow: 1;
+    text-align: end;
+  }
+}
+
 /* COPIED FROM SYNOLIB EXAMPLE */
 
 img {
@@ -299,6 +324,7 @@ syno-treatment.open {
   font-family: inherit;
   font-weight: normal;
   font-feature-settings: "liga", "calt", "dlig", "case", "ss02", "tnum";
+  word-break: break-all;
 
   &.taxon {
     color: #4e69ae;
@@ -338,7 +364,7 @@ ul {
   padding: 0;
   position: relative;
 
-  & > svg {
+  &>svg {
     height: 1rem;
     margin: 0;
   }
@@ -372,4 +398,4 @@ ul {
 
 .gray {
   color: #666666;
-}
+}
diff --git a/src/components/SynoMain.ts b/src/components/SynoMain.ts
@@ -45,7 +45,7 @@ export class SynoMain extends LitElement {
   @state()
   protected accessor isWaiting = false;
   @state()
-  accessor sortOrder = sortOrder.Oldest;
+  accessor sortOrder = sortOrder.Newest;
   @state()
   protected accessor names: NameState[] = [];
   @state()
@@ -85,8 +85,9 @@ export class SynoMain extends LitElement {
       let dateNew = -Infinity;
       name.treatments.treats.forEach((t) => {
         if (t.date) {
-          if (t.date < dateOld) dateOld = t.date;
-          if (t.date > dateNew) dateNew = t.date;
+          const date = t.date + 0.2;
+          if (date < dateOld) dateOld = date;
+          if (date > dateNew) dateNew = date;
         }
       });
       name.treatments.cite.forEach((t) => {
@@ -98,14 +99,16 @@ export class SynoMain extends LitElement {
       name.authorizedNames.forEach((a) => {
         a.treatments.def.forEach((t) => {
           if (t.date) {
-            if (t.date < dateOld) dateOld = t.date;
-            if (t.date > dateNew) dateNew = t.date;
+            const date = t.date + 0.4;
+            if (date < dateOld) dateOld = date;
+            if (date > dateNew) dateNew = date;
           }
         });
         a.treatments.aug.forEach((t) => {
           if (t.date) {
-            if (t.date < dateOld) dateOld = t.date;
-            if (t.date > dateNew) dateNew = t.date;
+            const date = t.date + 0.3;
+            if (date < dateOld) dateOld = date;
+            if (date > dateNew) dateNew = date;
           }
         });
         a.treatments.dpr.forEach((t) => {
@@ -205,35 +208,9 @@ export class SynoMain extends LitElement {
     }
 
     return html`
-    <div class="option">
-      Sort Names:
-      <label><input type="radio" name="sort"
-        ?checked=${this.sortOrder === sortOrder.Found}
-        @change=${(_: Event) => {
-      this.sortOrder = sortOrder.Found;
-    }}
-      >Order Found</label>
-      <label><input type="radio" name="sort"
-        ?checked=${this.sortOrder === sortOrder.Alphabetical}
-        @change=${(_: Event) => {
-      this.sortOrder = sortOrder.Alphabetical;
-    }}
-      >Alphabetical</label>
-      <label><input type="radio" name="sort"
-        ?checked=${this.sortOrder === sortOrder.Oldest}
-        @change=${(_: Event) => {
-      this.sortOrder = sortOrder.Oldest;
-    }}
-      >Oldest Treatment</label>
-      <label><input type="radio" name="sort"
-        ?checked=${this.sortOrder === sortOrder.Newest}
-        @change=${(_: Event) => {
-      this.sortOrder = sortOrder.Newest;
-    }}
-      >Newest Treatment</label>
-      (Date of defining treatment may be inferred from the authority)
-    </div>
-    <div>${
+    <div class="result-header">
+      <div class="status">
+      ${
       this.timeEnd === null
         ? html`Finding Synonyms for ${this.NAME} <progress></progress> (`
         : nothing
@@ -247,7 +224,43 @@ export class SynoMain extends LitElement {
       this.timeEnd === null
         ? ` so far)`
         : `. This took ${(this.timeEnd - this.timeStart) / 1000} seconds.`
-    }</div>
+    }
+      </div>
+      <div class="sort">
+        <label>
+          Sort
+          <select name="sort" required @change=${(e: Event) => {
+      const value = (e.target as HTMLSelectElement).value;
+      switch (value) {
+        case "Found": {
+          this.sortOrder = sortOrder.Found;
+          break;
+        }
+        case "Alphabetical": {
+          this.sortOrder = sortOrder.Alphabetical;
+          break;
+        }
+        case "Oldest": {
+          this.sortOrder = sortOrder.Oldest;
+          break;
+        }
+        case "Newest": {
+          this.sortOrder = sortOrder.Newest;
+          break;
+        }
+        default: {
+          console.error("Invalid Sort Order", e);
+        }
+      }
+    }}>
+            <option value="Found">Order Found</option>
+            <option value="Alphabetical">Alphabetical</option>
+            <option value="Oldest">Oldest Treatment</option>
+            <option value="Newest" selected>Newest Treatment</option>
+          </select>
+        </label>
+      </div>
+    </div>
     <s-timeline .names=${this.names} .cols=${this.cols} .years=${this.years} ></s-timeline>
     ${
       // this.names.map((name) =>
@@ -258,7 +271,11 @@ export class SynoMain extends LitElement {
         (name) => name.name.displayName + (name.name.taxonNameURI ?? "@"),
         (name) =>
           html`<syno-name .synoGroup=${this.synoGroup} .name=${name.name}></syno-name>`,
-      )}
+      )}${
+      this.timeEnd === null && this.names.length === 0
+        ? html`<div class="placeholder">It may take a moment for the first result to appear.</div>`
+        : nothing
+    }
     `;
   }
 

diff --git a/src/components/SynoTreatment.ts b/src/components/SynoTreatment.ts
@@ -167,6 +167,7 @@ button {
 
 .uri, .id {
   font-feature-settings: "liga", "calt", "dlig", "case", "ss02", "tnum";
+  word-break: break-all;
 }
 
 .uri:not(:empty) {