rhi/gallery
1
0
Fork 0
Code Issues 5 Pull requests 1 Releases Wiki Activity

add dates to gallery

Browse source
This commit is contained in:
Rhiannon Morris 2020-09-03 22:32:54 +02:00
parent ef9e6f4ad9
commit b7561d2b9b
2 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
make-pages/GalleryPage.hs
View file

@ -8,6 +8,7 @@ import Data.HashSet (HashSet)
import qualified Data.HashSet as HashSet import qualified Data.HashSet as HashSet
import Data.List (intersperse, groupBy, sortOn) import Data.List (intersperse, groupBy, sortOn)
import qualified Data.Text.Lazy as Lazy import qualified Data.Text.Lazy as Lazy
import qualified Data.Time as Time
import System.FilePath (takeDirectory, joinPath, splitPath) import System.FilePath (takeDirectory, joinPath, splitPath)
import GHC.Exts (Down (..), the) import GHC.Exts (Down (..), the)
@ -130,8 +131,8 @@ makeYearItems nsfw year infos = [b|@4
year' = show year & foldMap \c -> [b|<span class=y>$c</span>|] year' = show year & foldMap \c -> [b|<span class=y>$c</span>|]
makeItem :: Bool -> FilePath -> Info -> Builder makeItem :: Bool -> FilePath -> Info -> Builder
makeItem nsfw file info@(Info {title, bg}) = [b|@4 makeItem nsfw file info@(Info {title, bg, date}) = [b|@4
<li class="item post$nsfw'" data-tags="$tags'"> <li class="item post$nsfw'" data-tags="$tags'" data-date="$date'">
<figure> <figure>
<a href="$dir"> <a href="$dir">
<img src="$thumb"$bgStyle> <img src="$thumb"$bgStyle>
@ -144,4 +145,10 @@ makeItem nsfw file info@(Info {title, bg}) = [b|@4
thumb = getThumb dir info thumb = getThumb dir info
nsfw' = if nsfw && #anyNsfw info then [b| nsfw|] else "" nsfw' = if nsfw && #anyNsfw info then [b| nsfw|] else ""
tags' = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info tags' = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info
date' = formatDateShort date
bgStyle = ifJust bg \col -> [b| style="background: $col"|] bgStyle = ifJust bg \col -> [b| style="background: $col"|]
formatDateShort :: Time.Day -> Builder
formatDateShort date = [b|$day $month|] where
(_, m, day) = Time.toGregorian date
month = words "jan feb mar apr may jun jul aug sep oct nov dec" !! (m - 1)

20
style/shiny/gallery.css
View file

@ -111,16 +111,18 @@ body {
box-shadow: var(--focus-box); box-shadow: var(--focus-box);
} }
.item[data-date]::before {
content: attr(data-date);
}
figure { figure {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
figcaption { figcaption, .item::before {
position: absolute; position: absolute;
bottom: -1px;
left: -1px;
width: 100%; width: 100%;
border: 1px solid var(--text-col); border: 1px solid var(--text-col);
display: block; display: block;
@ -129,6 +131,8 @@ figcaption {
font-size: 80%; font-size: 80%;
} }
figcaption { bottom: -1px; left: -1px; }
.item::before { top: -1px; left: -1px; }
.year-marker { .year-marker {
grid-area: auto / 1; grid-area: auto / 1;
@ -163,7 +167,7 @@ figcaption {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 3px; top: calc(1em + 3px);
right: 3px; right: 3px;
transform: rotate(var(--nsfw-sticker-rotate)); transform: rotate(var(--nsfw-sticker-rotate));
@ -178,7 +182,7 @@ footer {
@media (hover) { @media (hover) {
.item:hover figcaption { .item:hover figcaption, .item:hover::before {
filter: opacity(20%); filter: opacity(20%);
} }
@ -189,7 +193,7 @@ footer {
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.item figcaption { figcaption, .item::before {
transition-property: filter, transform; transition-property: filter, transform;
transition-duration: 0.25s; transition-duration: 0.25s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
@ -198,6 +202,10 @@ footer {
.item:hover figcaption { .item:hover figcaption {
transform: translate(-20%, 80%) rotateZ(7deg); transform: translate(-20%, 80%) rotateZ(7deg);
} }
.item:hover::before {
transform: translate(20%, -80%) rotateZ(7deg);
}
} }
} }