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

use headings & figures for gallery grid instead of a ul

Browse source
This commit is contained in:
rhiannon morris 2024-08-21 08:22:28 +02:00
parent 035aa78920
commit 07011227bc
2 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
make-pages/GalleryPage.hs
View file

@ -80,9 +80,7 @@ make' root (GalleryInfo {title, desc, prefix, filters, hidden}) infos = [b|
</nav> </nav>
<main> <main>
<ul class=grid> $items
$items
</ul>
</main> </main>
</div> </div>
|] |]
@ -137,8 +135,9 @@ makeYearItems :: Bool -- ^ nsfw
-> [(FilePath, Info)] -> [(FilePath, Info)]
-> Builder -> Builder
makeYearItems nsfw year infos = [b| makeYearItems nsfw year infos = [b|
<li class="item year-marker" id="marker-$year"> <h2 class="item year-marker" id="marker-$year" aria-label=$year>
<span class=year-text>$year'</span> $year'
</h2>
$items $items
|] |]
where where
@ -147,16 +146,17 @@ makeYearItems nsfw year infos = [b|
makeItem :: Bool -> FilePath -> Info -> Builder makeItem :: Bool -> FilePath -> Info -> Builder
makeItem nsfw file info@(Info {bg}) = [b| makeItem nsfw file info@(Info {bg}) = [b|
<li class="item post$nsfw'" data-year=$year' data-updated="$updated'" <figure class="item post$nsfw'" data-year=$year' data-updated="$updated'"
data-tags="$tags'"> data-tags="$tags'">
<a href="$dir"> <a href="$dir">
<img src="$thumbnail" loading=lazy$bgStyle <img src="$thumbnail" loading=lazy$bgStyle
width=200 height=200 width=200 height=200
title="$tooltip"> title="$tooltip">
</a> </a>
</figure>
|] |]
where where
title = fromMaybe info.title $ info.galleryTitle title = fromMaybe info.title info.galleryTitle
dir = takeDirectory file dir = takeDirectory file
thumbnail = getThumb dir info thumbnail = getThumb dir info
nsfw' = if nsfw && anyNsfw info then [b|$& nsfw|] else "" nsfw' = if nsfw && anyNsfw info then [b|$& nsfw|] else ""

9
style/shiny/gallery.css
View file

@ -154,7 +154,7 @@
} }
.grid { main {
padding: 0; padding: 0;
display: grid; display: grid;
grid: auto-flow / repeat(auto-fit, var(--image-size)); grid: auto-flow / repeat(auto-fit, var(--image-size));
@ -169,6 +169,7 @@
width: var(--image-size); width: var(--image-size);
height: var(--image-size); height: var(--image-size);
overflow: hidden; overflow: hidden;
margin: 0;
position: relative; position: relative;
} }
@ -189,13 +190,9 @@
/* uncomment to reenable line breaks before year markers */ /* uncomment to reenable line breaks before year markers */
/* grid-area: auto / 1; */ /* grid-area: auto / 1; */
padding: var(--border-thickness); padding: var(--border-thickness);
}
.year-text {
--gap: 0.2em;
display: grid; display: grid;
grid-template-columns: repeat(2, calc(50% - 3 * var(--gap))); grid-template-columns: repeat(2, calc(50% - 3 * var(--gap)));
grid-gap: var(--gap); grid-gap: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;