Made Name Details expandable

factsmission · Jan 2, 2025 · 930567d · 930567d
1 parent 5854acc
commit 930567d
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 70 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -14,6 +14,7 @@
   --accent: light-dark(#476100, #9bc134);
   --text-color: light-dark(#222222, #dddddd);
   --text-color-muted: light-dark(#666666, #808080);
+  --button-hover: rgb(from var(--text-color) r g b / 50%);
 }
 
 @supports (font-variation-settings: normal) {
@@ -23,7 +24,6 @@
 }
 
 @keyframes high-light {
-
   10%,
   50% {
     background: var(--highlight-background);
@@ -258,20 +258,66 @@ svg {
 }
 
 syno-name {
+  border-radius: 0.8rem;
   display: block;
   margin: 1rem 0;
-  border-radius: 0.8rem;
 
   &:has(:target) {
     animation: 2s ease-in-out high-light;
   }
 
   .header {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
     align-items: center;
-    gap: 0.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    justify-content: space-between;
+    padding-right: 4px;
+
+    &:hover button.icon::before {
+      background: var(--button-hover);
+    }
+  }
+
+  .details {
+    color: var(--text-color-muted);
+    margin: 4px 4px 4px 8px;
+
+    .row {
+      display: grid;
+      line-height: 16px;
+      font-size: 0.75em;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: 16px auto;
+      gap: 0 4px;
+      align-items: center;
+
+      & > s-icon {
+        height: 12px;
+      }
+
+      & > div {
+        grid-row-end: span 2;
+      }
+    }
+
+    .row + .row {
+      margin-top: 4px;
+    }
+
+    .row.hidden {
+      display: none;
+    }
+
+    &.open .row.hidden {
+      display: grid;
+    }
+  }
+
+  b {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-feature-settings: "liga", "calt", "dlig", "cpsp", "case";
   }
 }
 
@@ -314,32 +360,34 @@ syno-treatment.open {
   font-weight: normal;
 }
 
+.uri,
+.id {
+  font-feature-settings: "liga", "calt", "dlig", "ss02";
+  word-break: break-all;
+}
+
 .uri:not(:empty) {
-  font-size: 0.8rem;
-  line-height: 1rem;
-  padding: 0 0.2rem;
-  margin: 0.2rem 0;
-  border-radius: 0.2rem;
+  font-size: 0.75rem;
+  line-height: 1em;
+  padding: 0 4px;
+  border-radius: 4px;
   background: var(--nav-background);
   font-family: inherit;
   font-weight: normal;
-  font-feature-settings: "liga", "calt", "dlig", "case", "ss02", "tnum";
-  word-break: break-all;
+  text-decoration: none;
+  color: var(--text-color-muted);
 
   &.taxon {
     color: #4e69ae;
   }
 
-  &.treatment {
-    color: var(--text-color-muted);
-  }
-
   &.col {
     color: #177669;
   }
 
-  s-icon,
-  svg {
+  s-icon:last-child,
+  svg:last-child {
+    display: inline-block;
     height: 0.8em;
     vertical-align: baseline;
     margin: 0 -0.1em 0 0.2em;
@@ -353,7 +401,8 @@ ul {
   scroll-margin: 2rem 1rem 5rem;
 }
 
-.icon.button {
+button.icon,
+.button.icon {
   border-radius: 1rem;
   border: none;
   background: none;
@@ -364,7 +413,7 @@ ul {
   padding: 0;
   position: relative;
 
-  &>svg {
+  & > svg {
     height: 1rem;
     margin: 0;
   }
@@ -380,7 +429,7 @@ ul {
   }
 
   &:hover::before {
-    background: #ededed8c;
+    background: var(--button-hover);
   }
 }
 
@@ -398,4 +447,4 @@ ul {
 
 .gray {
   color: #666666;
-}
+}
diff --git a/src/components/Icons.ts b/src/components/Icons.ts
@@ -16,6 +16,13 @@ const icon = {
   unknown:
     '<path fill="#666666" d="M480-240q20 0 34-14t14-34q0-20-14-34t-34-14q-20 0-34 14t-14 34q0 20 14 34t34 14Zm-36-153h73q0-37 6.5-52.5T555-485q35-34 48.5-58t13.5-53q0-55-37.5-89.5T484-720q-51 0-88.5 27T343-620l65 27q9-28 28.5-43.5T482-652q28 0 46 16t18 42q0 23-15.5 41T496-518q-35 32-43.5 52.5T444-393Zm36 297q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30-149.5t82.5-122Q261-804 331-834t149-30q80 0 149.5 30t122 82.5Q804-699 834-629.5T864-480q0 79-30 149t-82.5 122.5Q699-156 629.5-126T480-96Zm0-72q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Z"/>',
 
+  // TODO
+
+  vernacular:
+    '<path fill="#e53935" d="M480-240q20 0 34-14t14-34q0-20-14-34t-34-14q-20 0-34 14t-14 34q0 20 14 34t34 14Zm-36-153h73q0-37 6.5-52.5T555-485q35-34 48.5-58t13.5-53q0-55-37.5-89.5T484-720q-51 0-88.5 27T343-620l65 27q9-28 28.5-43.5T482-652q28 0 46 16t18 42q0 23-15.5 41T496-518q-35 32-43.5 52.5T444-393Zm36 297q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30-149.5t82.5-122Q261-804 331-834t149-30q80 0 149.5 30t122 82.5Q804-699 834-629.5T864-480q0 79-30 149t-82.5 122.5Q699-156 629.5-126T480-96Zm0-72q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Z"/>',
+  justification:
+    '<path fill="#e53935" d="M480-240q20 0 34-14t14-34q0-20-14-34t-34-14q-20 0-34 14t-14 34q0 20 14 34t34 14Zm-36-153h73q0-37 6.5-52.5T555-485q35-34 48.5-58t13.5-53q0-55-37.5-89.5T484-720q-51 0-88.5 27T343-620l65 27q9-28 28.5-43.5T482-652q28 0 46 16t18 42q0 23-15.5 41T496-518q-35 32-43.5 52.5T444-393Zm36 297q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30-149.5t82.5-122Q261-804 331-834t149-30q80 0 149.5 30t122 82.5Q804-699 834-629.5T864-480q0 79-30 149t-82.5 122.5Q699-156 629.5-126T480-96Zm0-72q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Z"/>',
+
   def_dpr:
     `<path fill="#e53935" d="M 552.46094 -864 C 540.28135 -864 528.28991 -863.40865 516.44727 -862.35352 C 556.10993 -858.81486 593.809 -849.40619 629.5 -834 C 675.83333 -814 716.5 -786.5 751.5 -751.5 C 786.5 -716.5 814 -675.7593 834 -629.2793 C 854 -582.79263 864 -533.12597 864 -480.2793 C 864 -427.42597 854 -377.66667 834 -331 C 814 -284.33333 786.5 -243.5 751.5 -208.5 C 716.5 -173.5 675.7593 -146 629.2793 -126 C 593.50023 -110.60674 555.81809 -101.19993 516.27148 -97.654297 C 528.11686 -96.59328 540.10571 -96 552.2793 -96 C 605.12597 -96 654.79263 -106 701.2793 -126 C 747.7593 -146 788.5 -173.5 823.5 -208.5 C 858.5 -243.5 886 -284.33333 906 -331 C 926 -377.66667 936 -427.42597 936 -480.2793 C 936 -533.12597 926 -582.79263 906 -629.2793 C 886 -675.7593 858.5 -716.5 823.5 -751.5 C 788.5 -786.5 747.83333 -814 701.5 -834 C 655.16667 -854 605.48761 -864 552.46094 -864 z"/>
     <path fill="#388e3c" "m 372,-288 h 72 v -156 h 156 v -72 H 444 v -156 h -72 v 156 H 216 v 72 h 156 z m 36.28,192 Q 329,-96 259,-126 189,-156 136.5,-208.5 84,-261 54,-330.96 24,-400.92 24,-480.46 24,-560 54,-629.5 84,-699 136.5,-751.5 189,-804 258.96,-834 q 69.96,-30 149.5,-30 79.54,0 149.04,30 69.5,30 122,82.5 52.5,52.5 82.5,122.22 30,69.73 30,149 0,79.28 -30,149.28 -30,70 -82.5,122.5 -52.5,52.5 -122.22,82.5 -69.73,30 -149,30 z"/>`,
@@ -43,9 +50,9 @@ const icon = {
   empty: '<path fill="currentcolor" d=""/>',
 
   Plantae:
-    `<path fill="#666666" d="M444-144v-297h-9q-56.97 0-109.48-21.5Q273-484 232-524q-42.58-41.23-65.29-95.3Q144-673.36 144-732v-84h84q57 0 109 21.5t93 61.5q29 28 48.5 62.5T508-598q38-53 98-81.5T732-708h84v84q0 58.73-22.5 112.86Q771-457 728-416q-40 35-88.8 54-48.81 19-102.2 19h-21v199h-72Zm0-372q0-46-15.5-89.5T381-681q-32-32-75.5-47.5T216-744q0 46 15.5 89.5T279-579q32 32 75.5 47.5T444-516Zm72 108q46 0 89.5-15.5T681-471q32-32 47.5-75.5T744-636q-46 0-89.5 15.5T579-573q-32 32-47.5 75.5T516-408Zm0 0Zm-72-108Z"/>`,
+    `<path fill="currentcolor" d="M444-144v-297h-9q-56.97 0-109.48-21.5Q273-484 232-524q-42.58-41.23-65.29-95.3Q144-673.36 144-732v-84h84q57 0 109 21.5t93 61.5q29 28 48.5 62.5T508-598q38-53 98-81.5T732-708h84v84q0 58.73-22.5 112.86Q771-457 728-416q-40 35-88.8 54-48.81 19-102.2 19h-21v199h-72Zm0-372q0-46-15.5-89.5T381-681q-32-32-75.5-47.5T216-744q0 46 15.5 89.5T279-579q32 32 75.5 47.5T444-516Zm72 108q46 0 89.5-15.5T681-471q32-32 47.5-75.5T744-636q-46 0-89.5 15.5T579-573q-32 32-47.5 75.5T516-408Zm0 0Zm-72-108Z"/>`,
   Animalia:
-    `<path fill="#666666" d="M468-144q-83.75 0-145.88-54.5Q260-253 252-336q-67-13-111.5-63T96-517q0-76 57-127.5T288-696h96q9.6 0 16.8-7.2 7.2-7.2 7.2-16.8 0-9.6-7.2-16.8-7.2-7.2-16.8-7.2h-60q-15.3 0-25.65-10.29Q288-764.58 288-779.79t10.35-25.71Q308.7-816 324-816h60q40.32 0 68.16 27.77 27.84 27.78 27.84 68Q480-680 452.16-652q-27.84 28-68.16 28h-96q-48 0-84 30t-36 76.8q0 38.2 24.5 68.2t62.5 41q23-89 84.5-128.5T465-576q20 0 44.5 4.5T548-559q9-5 18.5-8t19-5q9.5-2 19.17-3 9.66-1 19.33-1 70 0 119 50t49 121v12l29 27q20 18 31.5 42.61 11.5 24.6 11.5 51.53Q864-218 825.55-181q-38.44 37-92.55 37H468Zm0-72h264.66q24.34 0 41.84-16.64 17.5-16.64 17.5-39.47 0-12.36-5-22.82T773-313l-61-56q4-9 6-18.75t2-20.25q0-40-27.77-68-27.78-28-68-28Q584-504 556-476.21q-28 27.79-28 68.04 0 19.17 6.52 36.22Q541.03-354.9 555-342l-50 51q-25-21-37-51.42T456-405q0-26 7-51.5t24-45.5q-5-2-11-2h-11q-54 0-98.5 39.5T322-361.33q0 32.33 12.5 58.83t33 46q20.5 19.5 46.5 30t54 10.5Zm205.21-41q-15.21 0-25.71-10.29t-10.5-25.5q0-15.21 10.29-25.71t25.5-10.5q15.21 0 25.71 10.29t10.5 25.5q0 15.21-10.29 25.71t-25.5 10.5ZM624-408Z"/>`,
+    `<path fill="currentcolor" d="M468-144q-83.75 0-145.88-54.5Q260-253 252-336q-67-13-111.5-63T96-517q0-76 57-127.5T288-696h96q9.6 0 16.8-7.2 7.2-7.2 7.2-16.8 0-9.6-7.2-16.8-7.2-7.2-16.8-7.2h-60q-15.3 0-25.65-10.29Q288-764.58 288-779.79t10.35-25.71Q308.7-816 324-816h60q40.32 0 68.16 27.77 27.84 27.78 27.84 68Q480-680 452.16-652q-27.84 28-68.16 28h-96q-48 0-84 30t-36 76.8q0 38.2 24.5 68.2t62.5 41q23-89 84.5-128.5T465-576q20 0 44.5 4.5T548-559q9-5 18.5-8t19-5q9.5-2 19.17-3 9.66-1 19.33-1 70 0 119 50t49 121v12l29 27q20 18 31.5 42.61 11.5 24.6 11.5 51.53Q864-218 825.55-181q-38.44 37-92.55 37H468Zm0-72h264.66q24.34 0 41.84-16.64 17.5-16.64 17.5-39.47 0-12.36-5-22.82T773-313l-61-56q4-9 6-18.75t2-20.25q0-40-27.77-68-27.78-28-68-28Q584-504 556-476.21q-28 27.79-28 68.04 0 19.17 6.52 36.22Q541.03-354.9 555-342l-50 51q-25-21-37-51.42T456-405q0-26 7-51.5t24-45.5q-5-2-11-2h-11q-54 0-98.5 39.5T322-361.33q0 32.33 12.5 58.83t33 46q20.5 19.5 46.5 30t54 10.5Zm205.21-41q-15.21 0-25.71-10.29t-10.5-25.5q0-15.21 10.29-25.71t25.5-10.5q15.21 0 25.71 10.29t10.5 25.5q0 15.21-10.29 25.71t-25.5 10.5ZM624-408Z"/>`,
 
   image:
     `<path fill="currentcolor" d="M216-144q-29.7 0-50.85-21.5Q144-187 144-216v-528q0-29 21.15-50.5T216-816h528q29.7 0 50.85 21.5Q816-773 816-744v528q0 29-21.15 50.5T744-144H216Zm0-72h528v-528H216v528Zm48-72h432L552-480 444-336l-72-96-108 144Zm-48 72v-528 528Z"/>`,

diff --git a/src/components/SynoMain.ts b/src/components/SynoMain.ts
@@ -49,6 +49,8 @@ export class SynoMain extends LitElement {
   @state()
   protected accessor names: NameState[] = [];
   @state()
+  protected accessor hasHomonyms = false;
+  @state()
   protected accessor colExpanded: boolean = false;
   @state()
   protected accessor cols: string[] = [];
@@ -79,7 +81,10 @@ export class SynoMain extends LitElement {
       const sameName = this.names.find((n) =>
         n.name.displayName === name.displayName
       );
-      if (sameName) sameName.homonym = true;
+      if (sameName) {
+        sameName.homonym = true;
+        this.hasHomonyms = true;
+      }
 
       let dateOld = Infinity;
       let dateNew = -Infinity;
@@ -261,7 +266,7 @@ export class SynoMain extends LitElement {
         </label>
       </div>
     </div>
-    <s-timeline .names=${this.names} .cols=${this.cols} .years=${this.years} ></s-timeline>
+    <s-timeline .names=${this.names} .cols=${this.cols} .years=${this.years} .showKingdoms=${this.hasHomonyms}></s-timeline>
     ${
       // this.names.map((name) =>
       //   html`<syno-name .synoGroup=${this.synoGroup} .name=${name.name}></syno-name>`
@@ -270,7 +275,7 @@ export class SynoMain extends LitElement {
         this.names,
         (name) => name.name.displayName + (name.name.taxonNameURI ?? "@"),
         (name) =>
-          html`<syno-name .synoGroup=${this.synoGroup} .name=${name.name}></syno-name>`,
+          html`<syno-name .synoGroup=${this.synoGroup} .name=${name} .showKingdom=${this.hasHomonyms}></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>`