« get me outta code hell

content, css: refactor tooltip classes, offset icons-tooltip in lists - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2024-01-12 13:19:34 -0400
committer(quasar) nebula <qznebula@protonmail.com>2024-01-13 20:21:47 -0400
commit42c9000389a114463447c6e0a18b77c408ef5388 (patch)
treede1e0f83d37aacde068c261b62e0ae3e1ecdd7ec
parent5c66e7be6dcbfd7ecbb31b29c8c220d2ed5e0182 (diff)
content, css: refactor tooltip classes, offset icons-tooltip in lists
-rw-r--r--src/content/dependencies/generateDatetimestampTemplate.js4
-rw-r--r--src/content/dependencies/linkContribution.js4
-rw-r--r--src/static/site6.css36
-rwxr-xr-xsrc/upd8.js2
-rw-r--r--tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs2
-rw-r--r--tap-snapshots/test/snapshot/linkContribution.js.test.cjs10
6 files changed, 28 insertions, 30 deletions
diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js
index dcc79130..29c81572 100644
--- a/src/content/dependencies/generateDatetimestampTemplate.js
+++ b/src/content/dependencies/generateDatetimestampTemplate.js
@@ -28,8 +28,8 @@ export default {
           slots.mainContent),
 
         slots.tooltipContent &&
-          html.tag('span', {class: 'datetimestamp-tooltip'},
-            html.tag('span', {class: 'datetimestamp-tooltip-content'},
+          html.tag('span', {class: ['tooltip', 'datetimestamp-tooltip']},
+            html.tag('span', {class: 'tooltip-content'},
               slots.tooltipContent)),
       ]),
 };
diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index f0f36bcb..1b656516 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -64,11 +64,11 @@ export default {
     if (hasExternalIcons && slots.iconMode === 'tooltip') {
       content = [
         content,
-        html.tag('span', {class: ['icons', 'icons-tooltip']},
+        html.tag('span', {class: ['icons', 'tooltip', 'icons-tooltip']},
           {[html.noEdgeWhitespace]: true},
           {inert: true},
 
-          html.tag('span', {class: 'icons-tooltip-content'},
+          html.tag('span', {class: 'tooltip-content'},
             {[html.noEdgeWhitespace]: true},
             {[html.joinChildren]: ''},
 
diff --git a/src/static/site6.css b/src/static/site6.css
index cd00a721..baa2efdf 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -525,32 +525,20 @@ a:not([href]):hover {
   text-decoration-style: wavy !important;
 }
 
-.icons-tooltip,
-.datetimestamp-tooltip {
+.tooltip {
   position: absolute;
   z-index: 3;
-  left: -34px;
+  left: -10px;
   top: calc(1em + 1px);
   display: none;
 }
 
-.icons-tooltip {
-  padding: 3px 6px 6px 6px;
-  left: -34px;
-}
-
-.datetimestamp-tooltip {
-  padding: 3px 4px 2px 2px;
-  left: -10px;
-}
-
-li:not(:first-child:last-child) .datetimestamp-tooltip,
-.offset-tooltips > :not(:first-child:last-child) .datetimestamp-tooltip {
+li:not(:first-child:last-child) .tooltip,
+.offset-tooltips > :not(:first-child:last-child) .tooltip {
   left: 14px;
 }
 
-.icons-tooltip-content,
-.datetimestamp-tooltip-content {
+.tooltip-content {
   display: block;
 
   background: var(--bg-black-color);
@@ -568,7 +556,17 @@ li:not(:first-child:last-child) .datetimestamp-tooltip,
     0 -2px 4px -2px var(--primary-color) inset;
 }
 
-.icons-tooltip-content {
+.icons-tooltip {
+  padding: 3px 6px 6px 6px;
+  left: -34px;
+}
+
+.datetimestamp-tooltip {
+  padding: 3px 4px 2px 2px;
+  left: -10px;
+}
+
+.icons-tooltip .tooltip-content {
   padding: 6px 2px 2px 2px;
 
   -webkit-user-select: none;
@@ -577,7 +575,7 @@ li:not(:first-child:last-child) .datetimestamp-tooltip,
   cursor: default;
 }
 
-.datetimestamp-tooltip-content {
+.datetimestamp-tooltip .tooltip-content {
   padding: 5px 6px;
   white-space: nowrap;
   font-size: 0.9em;
diff --git a/src/upd8.js b/src/upd8.js
index 17c4d360..bfa48da4 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -82,7 +82,7 @@ import * as buildModes from './write/build-modes/index.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const CACHEBUST = 22;
+const CACHEBUST = 23;
 
 let COMMIT;
 try {
diff --git a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
index 9257aeb8..c4d10995 100644
--- a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
@@ -7,7 +7,7 @@
 'use strict'
 exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > basic behavior 1`] = `
 <p>
-    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution has-tooltip nowrap"><a href="artist/tensei/">Tensei</a> (hot jams)<span class="icons icons-tooltip" inert><span class="icons-tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/">
+    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution has-tooltip nowrap"><a href="artist/tensei/">Tensei</a> (hot jams)<span class="icons tooltip icons-tooltip" inert><span class="tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/">
                     <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
                     <span class="icon-text">tenseimusic</span>
                 </a></span></span></span>.
diff --git a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
index 2304088d..c02cff3a 100644
--- a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
@@ -30,7 +30,7 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) >
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links (tooltip) 1`] = `
-<span class="contribution has-tooltip"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a><span class="icons icons-tooltip" inert><span class="icons-tooltip-content"><a class="icon has-text" href="https://loremipsum.io">
+<span class="contribution has-tooltip"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a><span class="icons tooltip icons-tooltip" inert><span class="tooltip-content"><a class="icon has-text" href="https://loremipsum.io">
                 <svg><use href="static/icons.svg#icon-globe"></use></svg>
                 <span class="icon-text">loremipsum.io</span>
             </a><a class="icon has-text" href="https://loremipsum.io/generator/">
@@ -112,12 +112,12 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) >
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showIcons (tooltip) 1`] = `
-<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons icons-tooltip" inert><span class="icons-tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
+<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons tooltip icons-tooltip" inert><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
                 <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
                 <span class="icon-text">plazmataz</span>
             </a></span></span></span>
 <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons icons-tooltip" inert><span class="icons-tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
+<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons tooltip icons-tooltip" inert><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
                 <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
                 <span class="icon-text">tobyfox</span>
             </a><a class="icon has-text" href="https://toby.fox/">
@@ -148,12 +148,12 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) >
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (tooltip) 1`] = `
-<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons icons-tooltip" inert><span class="icons-tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
+<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons tooltip icons-tooltip" inert><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
                 <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
                 <span class="icon-text">plazmataz</span>
             </a></span></span></span>
 <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons icons-tooltip" inert><span class="icons-tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
+<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons tooltip icons-tooltip" inert><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
                 <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
                 <span class="icon-text">tobyfox</span>
             </a><a class="icon has-text" href="https://toby.fox/">