diff options
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 |
commit | 42c9000389a114463447c6e0a18b77c408ef5388 (patch) | |
tree | de1e0f83d37aacde068c261b62e0ae3e1ecdd7ec | |
parent | 5c66e7be6dcbfd7ecbb31b29c8c220d2ed5e0182 (diff) |
content, css: refactor tooltip classes, offset icons-tooltip in lists
-rw-r--r-- | src/content/dependencies/generateDatetimestampTemplate.js | 4 | ||||
-rw-r--r-- | src/content/dependencies/linkContribution.js | 4 | ||||
-rw-r--r-- | src/static/site6.css | 36 | ||||
-rwxr-xr-x | src/upd8.js | 2 | ||||
-rw-r--r-- | tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs | 2 | ||||
-rw-r--r-- | tap-snapshots/test/snapshot/linkContribution.js.test.cjs | 10 |
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 & 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 & 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/"> |