From d0fa07957fa100fa3afe08aea1703726126db0d1 Mon Sep 17 00:00:00 2001 From: 3nprob <3nprob@3nprob> Date: Fri, 8 Oct 2021 18:11:44 +0900 Subject: [PATCH] Add page header --- static/css/custom.css | 50 ++++++++++++ static/css/styles.css | 143 +++++++++++++++++----------------- templates/bare-album.pug | 4 +- templates/gallery.pug | 74 +++++++++--------- templates/includes/header.pug | 4 + templates/posts.pug | 124 ++++++++++++++--------------- 6 files changed, 232 insertions(+), 167 deletions(-) create mode 100644 templates/includes/header.pug diff --git a/static/css/custom.css b/static/css/custom.css index a428c46..d0bbe8c 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -11,3 +11,53 @@ img.album-img { .ProfilePosts-posts { margin-top: 311px; } + +body { + margin: 0; +} + + +.App { + padding: 16px; +} + + +.Navbar { + padding: 16px; + background: #222; +} + +.NavbarContainer-left { + font-size: 2em; + font-weight: bold; + float: left; + padding: 8px; +} + +.NavbarContainer-right { + /* margin: 0 0 0 auto; */ + align-items: end; + /* flex: 1; */ + justify-content: space-around; + text-align: right; + float: right; + padding: 8px; +} + +.NavbarContainer-left, .NavbarContainer-right { + display: block; +} + +.HomeNavbar { + position: sticky; + position: -webkit-sticky; + padding: 0; + display: inline-block; + top: 0; +} +.Navbar { + width: 100%; + z-index: 1000; + text-align: center; + margin: 0 auto; +} diff --git a/static/css/styles.css b/static/css/styles.css index 2f7c492..8ea2347 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,7 +1,10 @@ body { font-size: 100%; font-family: Proxima Nova Regular,Helvetica Neue,Helvetica,Arial,sans-serif; + background-color: #2e3035; color: #fff; + overflow-y: scroll; + overflow-x: hidden; } .UserAvatar { @@ -393,125 +396,125 @@ Post-item-title { /* USER HEADER */ .ProfileMeta-stats { - font-size: 14px; - font-weight: 600; - text-transform: uppercase; - margin-top: 8px; - cursor: default; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + margin-top: 8px; + cursor: default; } .ProfileCover-header { - height: 258px; - /* padding: 52px 0 0; */ - padding: 52px 16px 0; - width: 100%; - margin: 0 auto; - min-width: 450px; - z-index: 1; + height: 258px; + /* padding: 52px 0 0; */ + padding: 52px 16px 0; + width: 100%; + margin: 0 auto; + min-width: 450px; + z-index: 1; } .ProfileMeta { - display: flex; - justify-content: flex-start; + display: flex; + justify-content: flex-start; } .ProfileMeta .UserAvatar { - position: relative; - height: 128px; - width: 128px; - overflow: hidden; - flex-grow: 0; - flex-shrink: 0; + position: relative; + height: 128px; + width: 128px; + overflow: hidden; + flex-grow: 0; + flex-shrink: 0; } .UserAvatar { - border-radius: 50%; - background: grey; - background-image: none; - background-size: cover; + border-radius: 50%; + background: grey; + background-image: none; + background-size: cover; } .ProfileMeta-data { - margin: auto 24px; - color: #f2f2f2; - overflow: hidden; + margin: auto 24px; + color: #f2f2f2; + overflow: hidden; } .ProfileMeta-user { - font-size: 44px; - font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif; - text-overflow: ellipsis; - overflow: hidden; + font-size: 44px; + font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif; + text-overflow: ellipsis; + overflow: hidden; } .ProfileMeta-divider { - margin: auto 15px; + margin: auto 15px; } /* TAG HEADER */ .Cover-item-count { - text-transform: uppercase; + text-transform: uppercase; } .Cover-stats { - font-size: 16px; - margin: 13px 0 20px; + font-size: 16px; + margin: 13px 0 20px; } .Cover-description { - margin: 0 0 10px; - font-size: 22px; - max-width: 390px; + margin: 0 0 10px; + font-size: 22px; + max-width: 390px; } Cover-description, .Cover-name, .Cover-stats { - text-align: center; + text-align: center; } .Cover-name { - font-size: 52px; - color: #fff; - margin: 0; - font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif; + font-size: 52px; + color: #fff; + margin: 0; + font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif; } .Cover-metadata { - position: relative; - margin: 0 auto; - text-align: center; - height: 100%; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - align-content: stretch; - align-items: center; - z-index: 0; + position: relative; + margin: 0 auto; + text-align: center; + height: 100%; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: stretch; + align-items: center; + z-index: 0; } .NewCover-change-sort-wrapper .Dropdown, .NewCover .Cover-metadata { - margin: auto; + margin: auto; } .NewCover { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - background-size: cover; - background-position: 50%; - background-color: #474a51; - padding-bottom: 76px; - opacity: 1; - transition: opacity .5s,box-shadow .4s; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-size: cover; + background-position: 50%; + background-color: #474a51; + padding-bottom: 76px; + opacity: 1; + transition: opacity .5s,box-shadow .4s; } .App-cover { - width: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; } diff --git a/templates/bare-album.pug b/templates/bare-album.pug index f5a9646..236ab22 100644 --- a/templates/bare-album.pug +++ b/templates/bare-album.pug @@ -2,4 +2,6 @@ html head include includes/head.pug body - img(src=util.proxyURL(url), alt='' class='album-img') + include includes/header.pug + .App + img(src=util.proxyURL(url), alt='' class='album-img') diff --git a/templates/gallery.pug b/templates/gallery.pug index e6e182e..0604e24 100644 --- a/templates/gallery.pug +++ b/templates/gallery.pug @@ -52,38 +52,42 @@ html head include includes/head.pug body - div(class='Gallery-Content') - div(class='Gallery-Header') - div(class='Gallery-Title') - span #{title} - div(class='Gallery-Byline') - if account_id > 0 - a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username) - span(class='UserAvatar Avatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");') - div(class='Info-Wrapper') - if account_id > 0 - div(class='Info') - a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username} - div(class='Meta') - span #{view_count} Views - span(class='delimiter') • - span(title=created_at) #{created_at} - div(class='Gallery-ContentWrapper') - each m in media - +media(m) - if tags - div(class='Gallery-Content--tags') - each tag in tags - a(class='TagPill' - style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;' - href='/t/'+tag.tag) #{tag.tag} - if comments != null - div(class='CommentsList') - div(class='CommentsList-headline') - div(class='CommentsList-headline--counter') - span #{comments.length} Comments - div - div(class='CommentsList-comments') - div(class='CommentsList-comments--container') - each comment in comments - +commentbox(comment) + include includes/header.pug + .App + .Gallery-MainContainer + .Gallery-contentWrapper + div(class='Gallery-Content') + div(class='Gallery-Header') + div(class='Gallery-Title') + span #{title} + div(class='Gallery-Byline') + if account_id > 0 + a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username) + span(class='UserAvatar Avatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");') + div(class='Info-Wrapper') + if account_id > 0 + div(class='Info') + a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username} + div(class='Meta') + span #{view_count} Views + span(class='delimiter') • + span(title=created_at) #{created_at} + div(class='Gallery-ContentWrapper') + each m in media + +media(m) + if tags + div(class='Gallery-Content--tags') + each tag in tags + a(class='TagPill' + style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;' + href='/t/'+tag.tag) #{tag.tag} + if comments != null + div(class='CommentsList') + div(class='CommentsList-headline') + div(class='CommentsList-headline--counter') + span #{comments.length} Comments + div + div(class='CommentsList-comments') + div(class='CommentsList-comments--container') + each comment in comments + +commentbox(comment) diff --git a/templates/includes/header.pug b/templates/includes/header.pug new file mode 100644 index 0000000..9fef6a0 --- /dev/null +++ b/templates/includes/header.pug @@ -0,0 +1,4 @@ +.MoveContainer.Navbar.HomeNavbar + .NavbarContainer-left rimgu + .NavbarContainer-right + a(href='https://codeberg.org/3np/rimgu' target='blank') [src] diff --git a/templates/posts.pug b/templates/posts.pug index 1e66dbc..ff4dfa3 100644 --- a/templates/posts.pug +++ b/templates/posts.pug @@ -2,64 +2,66 @@ html head include includes/head.pug body - .Profile - if tag - .App-cover.NewCover.TagsCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 20%), url("/' + tag.background_hash + '.jpg");') - .Cover-metadata - h1.Cover-name= tag.display_name - p.description= tag.description - .Cover-stats - .Cover-item-count #{tag.total_items} posts - else if user - .App-cover.NewCover.ProfilesCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("' + util.proxyURL(user.cover_url) + '");') - .ProfileCover-header - .ProfileMeta - span.UserAvatar.ProfileMeta-avatar(style='background-image: url("' + util.proxyURL(user.avatar_url) + '");' title=user.username) - .ProfileMeta-data - .ProfileMeta-user= user.username - .ProfileMeta-stats - | #{user.reputation_count} pts - span.ProfileMeta-divider • - | #{user.reputation_name} - .ProfilePosts-posts - .ProfilePosts-top - each post in posts - div.ProfilePost - a.Post-item.novote(href="/gallery/"+post.id) - .Post-item-container - .Post-item-media - if post.images && post.images[0].animated - .PostVideo - .PostVideo-video-wrapper - video(playsinline autoplay loop mute) - source(type="video/mp4" src=util.proxyURL(post.images[0].mp4)) - else - .imageContainer - img(src=util.proxyURL(post.images ? post.images[0].link : post.link) loading="lazy") - .Post-item-meta - .Post-item-title-wrap - .Post-item-title - span= post.title - .Post-item-info - .Media - div(class='Post-item-stat Post-item-vote' title='Upvotes') - div(class='Vote Vote-up') - svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg') - title Upvotes - | - .points= post.points - div(class='Post-item-stat Post-item-vote' title='Downvotes') - div(class='Vote Vote-down') - svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg') - title Downvotes - | - .Media.Post-item-stat - svg(width="16" height="16" viewBox="0 0 16 16" class="PostCommentsIcon" fill="none" xmlns="http://www.w3.org/2000/svg") - title Comments - | - .MediaBody= post.comment_count - .Media.Post-item-stat - svg(width="16" height="16" viewBox="0 0 16 16" class="PostViewsIcon" fill="none" xmlns="http://www.w3.org/2000/svg") - title Post views - | - .MediaBody= post.views + include includes/header.pug + .App + .Profile + if tag + .App-cover.NewCover.TagsCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 20%), url("/' + tag.background_hash + '.jpg");') + .Cover-metadata + h1.Cover-name= tag.display_name + p.description= tag.description + .Cover-stats + .Cover-item-count #{tag.total_items} posts + else if user + .App-cover.NewCover.ProfilesCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("' + util.proxyURL(user.cover_url) + '");') + .ProfileCover-header + .ProfileMeta + span.UserAvatar.ProfileMeta-avatar(style='background-image: url("' + util.proxyURL(user.avatar_url) + '");' title=user.username) + .ProfileMeta-data + .ProfileMeta-user= user.username + .ProfileMeta-stats + | #{user.reputation_count} pts + span.ProfileMeta-divider • + | #{user.reputation_name} + .ProfilePosts-posts + .ProfilePosts-top + each post in posts + div.ProfilePost + a.Post-item.novote(href="/gallery/"+post.id) + .Post-item-container + .Post-item-media + if post.images && post.images[0].animated + .PostVideo + .PostVideo-video-wrapper + video(playsinline autoplay loop mute) + source(type="video/mp4" src=util.proxyURL(post.images[0].mp4)) + else + .imageContainer + img(src=util.proxyURL(post.images ? post.images[0].link : post.link) loading="lazy") + .Post-item-meta + .Post-item-title-wrap + .Post-item-title + span= post.title + .Post-item-info + .Media + div(class='Post-item-stat Post-item-vote' title='Upvotes') + div(class='Vote Vote-up') + svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg') + title Upvotes + | + .points= post.points + div(class='Post-item-stat Post-item-vote' title='Downvotes') + div(class='Vote Vote-down') + svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg') + title Downvotes + | + .Media.Post-item-stat + svg(width="16" height="16" viewBox="0 0 16 16" class="PostCommentsIcon" fill="none" xmlns="http://www.w3.org/2000/svg") + title Comments + | + .MediaBody= post.comment_count + .Media.Post-item-stat + svg(width="16" height="16" viewBox="0 0 16 16" class="PostViewsIcon" fill="none" xmlns="http://www.w3.org/2000/svg") + title Post views + | + .MediaBody= post.views