add extra link support to index page
This commit is contained in:
parent
980d790874
commit
5a1181ec76
|
|
@ -10,7 +10,7 @@ make :: IndexInfo -> Lazy.Text
|
|||
make info = toLazyText $ make' info
|
||||
|
||||
make' :: IndexInfo -> Builder
|
||||
make' (IndexInfo {title, galleries, footer}) = [b|@0
|
||||
make' (IndexInfo {title, galleries, links, footer}) = [b|@0
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
|
|
@ -23,24 +23,44 @@ make' (IndexInfo {title, galleries, footer}) = [b|@0
|
|||
</header>
|
||||
|
||||
<main>
|
||||
$galleryList
|
||||
$linkList
|
||||
</main>
|
||||
|
||||
$footer'
|
||||
|]
|
||||
where
|
||||
galleryList = if null galleries then "" else [b|@2
|
||||
<ul class=gallery-list>
|
||||
$4.items
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
$4*footer
|
||||
</footer>
|
||||
|]
|
||||
where
|
||||
items = map makeItem galleries
|
||||
|]
|
||||
where items = map makeItem galleries
|
||||
linkList = if null links then "" else [b|@2
|
||||
<ul class=link-list>
|
||||
$4.items
|
||||
</ul>
|
||||
|]
|
||||
where items = map makeLink links
|
||||
footer' = case footer of
|
||||
Nothing -> ""
|
||||
Just f -> [b|@0
|
||||
<footer>
|
||||
$2*f
|
||||
</footer>
|
||||
|]
|
||||
|
||||
makeItem :: GalleryInfo -> Builder
|
||||
makeItem (GalleryInfo {title, prefix, filters}) = [b|@4
|
||||
<li$nsfw><a href=$@prefix>$*title</a>
|
||||
|]
|
||||
where
|
||||
nsfw = if hasNsfw filters then " class=nsfw" else ""
|
||||
where nsfw = if hasNsfw filters then " class=nsfw" else ""
|
||||
|
||||
makeLink :: Link -> Builder
|
||||
makeLink (Link {title, url, nsfw}) = [b|@4
|
||||
<li$nsfw'><a href=$*url>$*title</a>
|
||||
|]
|
||||
where nsfw' = if nsfw then " class=nsfw" else ""
|
||||
|
||||
hasNsfw :: GalleryFilters -> Bool
|
||||
hasNsfw (GalleryFilters {nsfw}) = nsfw /= Just False
|
||||
|
|
|
|||
|
|
@ -200,7 +200,8 @@ data IndexInfo =
|
|||
IndexInfo {
|
||||
title :: !Text,
|
||||
galleries :: ![GalleryInfo],
|
||||
footer :: !Text
|
||||
links :: ![Link],
|
||||
footer :: !(Maybe Text)
|
||||
}
|
||||
deriving Show
|
||||
|
||||
|
|
@ -208,7 +209,8 @@ instance FromYAML IndexInfo where
|
|||
parseYAML = YAML.withMap "index info" \m ->
|
||||
IndexInfo <$> m .: "title"
|
||||
<*> m .:? "galleries" .!= []
|
||||
<*> m .:? "footer" .!= ""
|
||||
<*> m .:? "links" .!= []
|
||||
<*> m .:? "footer"
|
||||
|
||||
|
||||
data Pair a b = Pair !a !b
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@ body {
|
|||
width: 40em;
|
||||
}
|
||||
|
||||
.gallery-list {
|
||||
.gallery-list, .link-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
align-items: center;
|
||||
--gap: 0.05em;
|
||||
grid-gap: var(--gap);
|
||||
background: var(--text);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -16,41 +18,50 @@ body {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gallery-list a {
|
||||
.gallery-list {
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.link-list {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.gallery-list + .link-list {
|
||||
padding-top: var(--gap);
|
||||
}
|
||||
|
||||
main a {
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
color: var(--text);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.gallery-list a:hover {
|
||||
main a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gallery-list li {
|
||||
main li {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-list li {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.gallery-list li:nth-child(2n) {
|
||||
border-left: 2px solid hsla(0, 0%, 100%, 30%);
|
||||
}
|
||||
|
||||
.gallery-list li:nth-child(2n+1) {
|
||||
border-right: 2px solid hsla(0, 0%, 100%, 30%);
|
||||
}
|
||||
|
||||
|
||||
.gallery-list .nsfw {
|
||||
li.nsfw {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.link-list li {
|
||||
background: var(--yellow);
|
||||
}
|
||||
|
||||
.nsfw a::after {
|
||||
content: url(18_plus.svg);
|
||||
display: inline-block;
|
||||
|
|
@ -78,14 +89,14 @@ footer {
|
|||
}
|
||||
|
||||
@media (hover) and (prefers-reduced-motion: no-preference) {
|
||||
.gallery-list a:hover {
|
||||
main a:hover {
|
||||
transform: scale(110%);
|
||||
transition: transform 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.gallery-list {
|
||||
main {
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue