diff --git a/src/site/api/routes.js b/src/site/api/routes.js index d081cf5..d43b08d 100644 --- a/src/site/api/routes.js +++ b/src/site/api/routes.js @@ -4,6 +4,11 @@ const {fetchUser, getOrFetchShortcode, userRequestCache, history} = require("../ const {render, redirect} = require("pinski/plugins") const {pugCache} = require("../passthrough") +/** @param {import("../../lib/structures/TimelineEntry")} post */ +function getPageTitle(post) { + return (post.getCaptionIntroduction() || `Post from @${post.getBasicOwner().username}`) + " | Bibliogram" +} + module.exports = [ { route: "/", methods: ["GET"], code: async () => { @@ -124,7 +129,7 @@ module.exports = [ statusCode: 200, contentType: "application/json", content: { - title: post.getCaptionIntroduction(), + title: getPageTitle(post), html: pugCache.get("pug/fragments/post.pug").web({post}) } } @@ -165,7 +170,10 @@ module.exports = [ await post.fetchChildren() await post.fetchExtendedOwnerP() // serial await is okay since intermediate fetch result is cached if (post.isVideo()) await post.fetchVideoURL() - return render(200, "pug/post.pug", {post}) + return render(200, "pug/post.pug", { + title: getPageTitle(post), + post + }) }).catch(error => { if (error === constants.symbols.NOT_FOUND) { return render(404, "pug/friendlyerror.pug", { diff --git a/src/site/pug/includes/post.pug b/src/site/pug/includes/post.pug index ee41af8..8c91923 100644 --- a/src/site/pug/includes/post.pug +++ b/src/site/pug/includes/post.pug @@ -16,9 +16,11 @@ mixin post(post, headerWithNavigation) img(src="/static/img/arrow-circled.svg" alt="Previous post." style="transform: rotate(180deg)").icon button.navigate-posts.next img(src="/static/img/arrow-circled.svg" alt="Next post.").icon - if post.getCaption() - p.structured-text.description - +display_structured(post.getStructuredCaption()) + div.relative-box + div.scrolling-box + if post.getCaption() + p.structured-text.description + +display_structured(post.getStructuredCaption()) section.images-gallery for entry in post.children if entry.isVideo() diff --git a/src/site/pug/post.pug b/src/site/pug/post.pug index 3169d6d..021f94d 100644 --- a/src/site/pug/post.pug +++ b/src/site/pug/post.pug @@ -1,14 +1,11 @@ +//- Needs title, post + include includes/post doctype html html head - title - if post.getCaptionIntroduction() - =post.getCaptionIntroduction() - else - =`Post from @${post.getBasicOwner().username}` - =` | Bibliogram` + title= title include includes/head script(type="module" src="/static/js/post_overlay.js") body.post-page diff --git a/src/site/sass/main.sass b/src/site/sass/main.sass index 582c76b..4649949 100644 --- a/src/site/sass/main.sass +++ b/src/site/sass/main.sass @@ -233,16 +233,16 @@ body .description-section display: grid - align-items: start - align-content: normal - background-color: #eee + align-items: stretch + align-content: stretch + grid-template-rows: auto 1fr position: sticky top: 0 height: 100vh - overflow-y: auto box-sizing: border-box @media screen and (max-width: $layout-a-max) + display: contents // this is absolutely disgusting position: inherit top: inherit height: inherit @@ -254,6 +254,8 @@ body justify-content: center background-color: #b3b3b3 padding: 10px + position: sticky + top: 0 .navigate-posts -webkit-appearance: none @@ -291,6 +293,21 @@ body &:hover text-decoration: underline + .relative-box + background-color: #eee + + @media screen and (min-width: $layout-b-min) + .relative-box + position: relative + + .scrolling-box + position: absolute + top: 0 + bottom: 0 + overflow-y: auto + display: grid + align-items: center + .description margin: 12px white-space: pre-line @@ -298,6 +315,8 @@ body font-size: 20px line-height: 1.4 unicode-bidi: plaintext + @media screen and (min-width: $layout-b-min) + padding-bottom: 20px @media screen and (max-width: $layout-a-max) font-size: 18px @@ -312,6 +331,7 @@ body @media screen and (max-width: $layout-a-max) flex: 1 + position: relative .sized-image, .sized-video color: #eee @@ -524,7 +544,7 @@ body bottom: 0 background: rgba(0, 0, 0, 0.7) z-index: 10 - overflow-y: auto + overflow-y: scroll &:not(.loading) > * min-height: 100vh