diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index 42c7dd4..40aab3e 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -9,7 +9,7 @@ import qualified NsfwWarning
import Control.Exception
import Control.Monad
import Data.List (sort, intersperse)
-import Data.Maybe (fromMaybe, isNothing)
+import Data.Maybe (fromMaybe, isNothing, isJust)
import qualified Data.Text as Strict
import qualified Data.Text.Lazy as Lazy
import System.FilePath (joinPath, splitPath)
@@ -234,21 +234,32 @@ makeButtonBar title images =
| otherwise ->
makeNav "cat" $ map (uncurry makeCat) cats
where
- makeNav (cls :: Text) inner = [b|@0
- |]
- makeCat lbl imgs = [b|@0
- |]
- where alts = makeAlts imgs
- makeAlts imgs = [b|@0
-
|]
- where elems = map (\(img,i) -> altButton img i) imgs
+ makeNav (cls :: Text) inner = [b|@0
+ |]
+ makeCat lbl imgs = [b|@0
+ |]
+ where alts = makeAlts imgs
+ makeAlts imgs = [b|@0
+ |]
+ where elems = map (\(img,i) -> altButton img i) imgs
+ skipAll =
+ if any (isJust . #warning . fst) images then
+ [b|@0
+
+
+
+
+ |]
+ else
+ ""
flatten :: [(Text, [(Image, a)])] -> [(Image, Text)]
flatten cats =
diff --git a/script/single.js b/script/single.js
index 0f9d3ae..479b433 100644
--- a/script/single.js
+++ b/script/single.js
@@ -5,10 +5,11 @@ let mainfig;
let mainimg;
let mainlink;
let altButtons;
+let skipAll;
let opened = new Set;
-function openCW(id, caption, focusLink) {
+function openCW(id, caption, focusLink = false) {
if (id) opened.add(id);
mainfig.removeChild(caption);
mainlink.tabIndex = 0;
@@ -27,7 +28,7 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
let caption = document.getElementById('cw');
let newCaption;
- if (!opened.has(id) && cw) {
+ if (!skipAll.checked && !opened.has(id) && cw) {
newCaption = document.getElementById('cw-template')
.content.firstElementChild.cloneNode(true);
newCaption.querySelector('#cw-text').innerHTML = cw;
@@ -81,14 +82,25 @@ function setup() {
mainfig = document.getElementById('mainfig');
mainimg = document.getElementById('mainimg');
mainlink = document.getElementById('mainlink');
+ skipAll = document.getElementById('skipAll');
let alts = document.getElementById('alts');
- altButtons = alts ? Array.from(alts.getElementsByTagName('input')) : [];
+ if (alts) {
+ let inputs = Array.from(alts.getElementsByTagName('input'));
+ altButtons = inputs.filter(e => e.name == 'variant');
+ } else {
+ altButtons = [];
+ }
for (let button of altButtons) {
button.onchange = e => { if (button.checked) activateButton(button); };
}
+ skipAll.onchange = e => { if (skipAll.checked) {
+ let caption = document.getElementById('cw');
+ if (caption) { openCW(null, caption, false); }
+ } };
+
window.addEventListener('popstate', useFragment);
useFragment(true);
}
diff --git a/style/shiny/base.css b/style/shiny/base.css
index f5094b8..93c3e78 100644
--- a/style/shiny/base.css
+++ b/style/shiny/base.css
@@ -123,6 +123,7 @@ figure > img {
display: flex;
align-items: flex-start;
flex-flow: row wrap;
+ margin-top: 0;
margin-bottom: -0.5em;
}
@@ -139,7 +140,7 @@ figure > img {
justify-content: center;
}
-.bb-choice input {
+.buttonbar input {
display: inline;
-webkit-appearance: none;
-moz-appearance: none;
@@ -149,7 +150,7 @@ figure > img {
width: 0;
}
-.bb-choice label, .bb-links li {
+.buttonbar label, .bb-links li {
margin-right: 0.5em;
padding: 0 0.35em;
border-radius: var(--button-corner);
@@ -159,11 +160,11 @@ figure > img {
text-shadow: none;
}
-.bb-choice :focus ~ label, .bb-links li:focus-within {
+.buttonbar :focus ~ label, .bb-links li:focus-within {
box-shadow: var(--focus-box);
}
-.bb-choice :checked ~ label {
+.buttonbar :checked ~ label {
color: var(--button-bg);
background: var(--text-col);
}
diff --git a/style/shiny/single.css b/style/shiny/single.css
index b42ba90..01cf2c9 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -190,17 +190,12 @@ footer {
#alts {
margin: 1.5em 0;
text-align: center;
-}
-
-#alts.cat {
display: grid;
- grid-template-columns: minmax(auto, 10em) auto;
grid-gap: 0.5em;
- align-items: baseline;
- justify-content: center;
+ grid-template-columns: minmax(auto, 10em) auto minmax(auto, 10em);
}
-#alts.cat :is(h3,ul) { margin: 0; }
+#alts.cat :is(h3, ul) { margin: 0; }
#alts section {
display: contents;
@@ -211,9 +206,18 @@ footer {
display: inline;
padding-right: 0.5em;
text-align: right;
+ grid-area: auto / 1 / auto / auto;
}
-#alts.cat ul {
+#alts ul {
display: inline flex;
- justify-content: start;
+ grid-area: auto / 2 / auto / auto;
+}
+
+.cat ul { justify-content: start; }
+
+#skipAllDiv {
+ align-self: start;
+ justify-content: end;
+ grid-area: 1 / 3 / auto / auto;
}