From 09d6522fdf4c7c4e4264f2bb56ca230ddede8be5 Mon Sep 17 00:00:00 2001 From: Dym Sohin Date: Thu, 12 Oct 2023 23:40:00 +0200 Subject: [PATCH] moved status-infos to upper right corner on single-post pages --- assets/dist/base.css | 5 +- assets/dist/profile.css | 59 ++--- assets/dist/status.css | 453 ++++++++++++++++------------------- template/about.tmpl | 2 +- template/status.tmpl | 59 +++-- template/status_profile.tmpl | 22 +- 6 files changed, 270 insertions(+), 330 deletions(-) diff --git a/assets/dist/base.css b/assets/dist/base.css index dd5ec18..6ead6f9 100644 --- a/assets/dist/base.css +++ b/assets/dist/base.css @@ -347,6 +347,9 @@ body { grid-template-columns: 1fr minmax(auto, 50rem) 1fr; grid-template-columns: 1fr min(92%, 50rem) 1fr; grid-template-rows: auto 1fr auto; + + gap: 1rem; + padding: 1rem 0; } h1 { @@ -610,8 +613,6 @@ hr { footer { align-self: end; - padding: 2rem 0 1rem 0; - display: flex; flex-wrap: wrap; justify-content: center; diff --git a/assets/dist/profile.css b/assets/dist/profile.css index 6dd2499..34c6b8b 100644 --- a/assets/dist/profile.css +++ b/assets/dist/profile.css @@ -54,7 +54,7 @@ width: 100%; height: 100%; -o-object-fit: cover; - object-fit: cover; + object-fit: cover; } .profile .header { @@ -101,7 +101,7 @@ height: 100%; width: 100%; -o-object-fit: cover; - object-fit: cover; + object-fit: cover; } .profile .header .basic-info .displayname { @@ -120,22 +120,22 @@ font-weight: bold; color: var(--fg-accent); -webkit-user-select: all; - user-select: all; + user-select: all; } .profile .header .basic-info .role { background: var(--bg); color: var(--fg); - border: 0.1rem solid var(--bg); - grid-area: role; - align-self: center; - justify-self: start; - border-radius: var(--br); - padding: 0.25rem 0.5rem 0.35rem 0.5rem; - line-height: 0.75rem; - font-size: 0.75rem; - font-variant: small-caps; + border: 0.1rem solid var(--bg); + grid-area: role; + align-self: center; + justify-self: start; + border-radius: var(--br); + padding: 0.25rem 0.5rem 0.35rem 0.5rem; + line-height: 0.75rem; + font-size: 0.75rem; + font-variant: small-caps; } .profile .header .basic-info .role.admin { @@ -164,19 +164,6 @@ } } -.profile .col-header { - display: flex; - justify-content: start; - gap: 2rem; - align-items: center; - - margin: 0; - background: var(--profile-bg); - border-top-left-radius: var(--br); - border-top-right-radius: var(--br); - padding: 0.75rem; -} - .profile .col-header h1, .profile .col-header h2 { font-size: 1.2rem; line-height: 1.3rem; @@ -203,7 +190,7 @@ .profile .rss-icon .fa { font-size: 2rem; -o-object-fit: contain; - object-fit: contain; + object-fit: contain; vertical-align: middle; color: var(--orange2); /* can't size a single-color background, so we use a linear-gradient that's effectively white */ @@ -212,18 +199,12 @@ } .profile .toots .toot { - border-radius: 0; - padding-top: 0; + border-radius: var(--br); + } +.toot .info { + flex-direction: row; + gap: 1rem; } - -.profile .toots .toot .info { - padding: 0.3rem 0.75rem; - } - -.profile .toots .toot:last-child { - border-bottom-left-radius: var(--br); - border-bottom-right-radius: var(--br); - } .profile .toots .backnextlinks { display: flex; @@ -265,7 +246,7 @@ .profile .about-user .fields > span { } .profile .about-user .fields > span + b { - border-top: 0.1rem solid var(--gray1); + border-top: 0.1rem solid var(--gray2); } .profile .about-user .bio { @@ -297,5 +278,5 @@ } .profile .accountstats > b { - border-bottom: 0.1rem solid var(--gray1); + border-bottom: 0.1rem solid var(--gray2); } diff --git a/assets/dist/status.css b/assets/dist/status.css index f82b696..687e43e 100644 --- a/assets/dist/status.css +++ b/assets/dist/status.css @@ -11,32 +11,32 @@ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . + along with this program. If not, see . */ /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ .pswp { - --pswp-bg: #000; - --pswp-placeholder-bg: #222; - + --pswp-bg: #000; + --pswp-placeholder-bg: #222; - --pswp-root-z-index: 100000; - - --pswp-preloader-color: rgba(79, 79, 79, 0.4); - --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); - - /* defined via js: - --pswp-transition-duration: 333ms; */ - - --pswp-icon-color: #fff; - --pswp-icon-color-secondary: #4f4f4f; - --pswp-icon-stroke-color: #4f4f4f; - --pswp-icon-stroke-width: 2px; - --pswp-error-text-color: var(--pswp-icon-color); + --pswp-root-z-index: 100000; + + --pswp-preloader-color: rgba(79, 79, 79, 0.4); + --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); + + /* defined via js: + --pswp-transition-duration: 333ms; */ + + --pswp-icon-color: #fff; + --pswp-icon-color-secondary: #4f4f4f; + --pswp-icon-stroke-color: #4f4f4f; + --pswp-icon-stroke-width: 2px; + + --pswp-error-text-color: var(--pswp-icon-color); } /* Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) @@ -56,15 +56,15 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Prevents focus outline on the root element, - (it may be focused initially) */ + (it may be focused initially) */ .pswp:focus { - outline: 0; + outline: 0; } .pswp * { - box-sizing: border-box; + box-sizing: border-box; } .pswp img { - max-width: none; + max-width: none; } .pswp--open { display: block; @@ -72,11 +72,11 @@ .pswp, .pswp__bg { -webkit-transform: translateZ(0); - transform: translateZ(0); + transform: translateZ(0); will-change: opacity; } .pswp__bg { - opacity: 0.005; + opacity: 0.005; background: var(--pswp-bg); } .pswp, @@ -109,7 +109,7 @@ cursor: grab; } .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { - cursor: grabbing; + cursor: grabbing; } /* :active to override grabbing cursor */ .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, @@ -135,14 +135,14 @@ } /* Allow to click through pswp__content element, but not its children */ .pswp__content { - pointer-events: none; + pointer-events: none; } .pswp__content > * { - pointer-events: auto; + pointer-events: auto; } /* - PhotoSwipe UI + PhotoSwipe UI */ /* @@ -150,7 +150,7 @@ (JS option errorMsg controls markup) */ .pswp__error-msg-container { - display: grid; + display: grid; } .pswp__error-msg { margin: auto; @@ -195,34 +195,34 @@ and show (for example fade in) when PhotoSwipe is opened .pswp__button:hover, .pswp__button:active, .pswp__button:focus { - transition: none; - padding: 0; - background: none; - border: 0; - box-shadow: none; - opacity: 1; + transition: none; + padding: 0; + background: none; + border: 0; + box-shadow: none; + opacity: 1; } .pswp__button:disabled { - opacity: 0.3; - cursor: auto; + opacity: 0.3; + cursor: auto; } .pswp__icn { - fill: var(--pswp-icon-color); - color: var(--pswp-icon-color-secondary); + fill: var(--pswp-icon-color); + color: var(--pswp-icon-color-secondary); } .pswp__icn { - position: absolute; - top: 14px; - left: 9px; - width: 32px; - height: 32px; - overflow: hidden; - pointer-events: none; + position: absolute; + top: 14px; + left: 9px; + width: 32px; + height: 32px; + overflow: hidden; + pointer-events: none; } .pswp__icn-shadow { - stroke: var(--pswp-icon-stroke-color); - stroke-width: var(--pswp-icon-stroke-width); - fill: none; + stroke: var(--pswp-icon-stroke-color); + stroke-width: var(--pswp-icon-stroke-width); + fill: none; } .pswp__icn:focus { outline: 0; @@ -243,184 +243,184 @@ div.pswp__img--placeholder, width: 100%; height: 60px; display: flex; - flex-direction: row; - justify-content: flex-end; + flex-direction: row; + justify-content: flex-end; z-index: 10; /* allow events to pass through top bar itself */ pointer-events: none !important; } .pswp__top-bar > * { - pointer-events: auto; - /* this makes transition significantly more smooth, - even though inner elements are not animated */ - will-change: opacity; + pointer-events: auto; + /* this makes transition significantly more smooth, + even though inner elements are not animated */ + will-change: opacity; } /* - Close button + Close button */ .pswp__button--close { - margin-right: 6px; + margin-right: 6px; } /* - Arrow buttons + Arrow buttons */ .pswp__button--arrow { - position: absolute; - top: 0; - width: 75px; - height: 100px; - top: 50%; - margin-top: -50px; + position: absolute; + top: 0; + width: 75px; + height: 100px; + top: 50%; + margin-top: -50px; } .pswp__button--arrow:disabled { - display: none; - cursor: default; + display: none; + cursor: default; } .pswp__button--arrow .pswp__icn { - top: 50%; - margin-top: -30px; - width: 60px; - height: 60px; - background: none; - border-radius: 0; + top: 50%; + margin-top: -30px; + width: 60px; + height: 60px; + background: none; + border-radius: 0; } .pswp--one-slide .pswp__button--arrow { - display: none; + display: none; } /* hide arrows on touch screens */ .pswp--touch .pswp__button--arrow { - visibility: hidden; + visibility: hidden; } /* show arrows only after mouse was used */ .pswp--has_mouse .pswp__button--arrow { - visibility: visible; + visibility: visible; } .pswp__button--arrow--prev { - right: auto; - left: 0px; + right: auto; + left: 0px; } .pswp__button--arrow--next { - right: 0px; + right: 0px; } .pswp__button--arrow--next .pswp__icn { - left: auto; - right: 14px; - /* flip horizontally */ - -webkit-transform: scale(-1, 1); - transform: scale(-1, 1); + left: auto; + right: 14px; + /* flip horizontally */ + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); } /* - Zoom button + Zoom button */ .pswp__button--zoom { - display: none; + display: none; } .pswp--zoom-allowed .pswp__button--zoom { - display: block; + display: block; } /* "+" => "-" */ .pswp--zoomed-in .pswp__zoom-icn-bar-v { - display: none; + display: none; } /* - Loading indicator + Loading indicator */ .pswp__preloader { - position: relative; - overflow: hidden; - width: 50px; - height: 60px; - margin-right: auto; + position: relative; + overflow: hidden; + width: 50px; + height: 60px; + margin-right: auto; } .pswp__preloader .pswp__icn { - opacity: 0; - transition: opacity 0.2s linear; - -webkit-animation: pswp-clockwise 600ms linear infinite; - animation: pswp-clockwise 600ms linear infinite; + opacity: 0; + transition: opacity 0.2s linear; + -webkit-animation: pswp-clockwise 600ms linear infinite; + animation: pswp-clockwise 600ms linear infinite; } .pswp__preloader--active .pswp__icn { - opacity: 0.85; + opacity: 0.85; } @-webkit-keyframes pswp-clockwise { - 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } + 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pswp-clockwise { - 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } + 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* - "1 of 10" counter + "1 of 10" counter */ .pswp__counter { - height: 30px; - margin-top: 15px; - -webkit-margin-start: 20px; - margin-inline-start: 20px; - font-size: 14px; - line-height: 30px; - color: var(--pswp-icon-color); - text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary); - opacity: 0.85; + height: 30px; + margin-top: 15px; + -webkit-margin-start: 20px; + margin-inline-start: 20px; + font-size: 14px; + line-height: 30px; + color: var(--pswp-icon-color); + text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary); + opacity: 0.85; } .pswp--one-slide .pswp__counter { - display: none; + display: none; } .pswp__dynamic-caption { - color: #fff; - position: absolute; - width: 100%; - left: 0; - top: 0; - transition: opacity 120ms linear !important; /* override default */ + color: #fff; + position: absolute; + width: 100%; + left: 0; + top: 0; + transition: opacity 120ms linear !important; /* override default */ } .pswp-caption-content { - display: none; + display: none; } .pswp__dynamic-caption a { - color: #fff; + color: #fff; } .pswp__dynamic-caption--faded { - opacity: 0 !important; + opacity: 0 !important; } .pswp__dynamic-caption--aside { - width: auto; - max-width: 300px; - padding: 20px 15px 20px 20px; - margin-top: 70px; + width: auto; + max-width: 300px; + padding: 20px 15px 20px 20px; + margin-top: 70px; } .pswp__dynamic-caption--below { - width: auto; - max-width: 700px; - padding: 15px 0 0; + width: auto; + max-width: 700px; + padding: 15px 0 0; } .pswp__dynamic-caption--on-hor-edge { - padding-left: 15px; - padding-right: 15px; + padding-left: 15px; + padding-right: 15px; } .pswp__dynamic-caption--mobile { - width: 100%; - background: rgba(0,0,0,0.5); - padding: 10px 15px; + width: 100%; + background: rgba(0,0,0,0.5); + padding: 10px 15px; - right: 0; - bottom: 0; + right: 0; + bottom: 0; - /* override styles that were set via JS. - as they interfere with size measurement */ - top: auto !important; - left: 0 !important; + /* override styles that were set via JS. + as they interfere with size measurement */ + top: auto !important; + left: 0 !important; } @-webkit-keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}} @keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}} @@ -612,80 +612,62 @@ main { .thread { display: flex; flex-direction: column; + gap: 1rem; border-radius: var(--br); } .toot { background: var(--toot-bg); - box-shadow: var(--boxshadow); - border: var(--boxshadow-border); border-radius: var(--br); - position: relative; - margin-bottom: var(--br); - padding-top: 0.75rem; + display: flex; + flex-direction: column; + padding: 1rem; + gap: 0.75rem; } .toot a { - position: relative; - z-index: 1; color: inherit; text-decoration: none; } -.toot .author > a { - padding: 0 0.75rem; - display: grid; - grid-template-columns: 3.5rem 1fr auto; - grid-template-rows: auto auto; - grid-template-areas: - "avatar display date" - "avatar user ."; - gap: 0 0.5rem; +.toot .author { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 0.75rem; } -.toot .author > a .avatar { - grid-area: avatar; - height: 3.5rem; - width: 3.5rem; +.toot .author .avatar { + height: 3rem; + width: 3rem; + -o-object-fit: cover; + object-fit: cover; + border-radius: var(--br); + overflow: hidden; + } +.toot .author .avatar img { + height: 100%; + width: 100%; -o-object-fit: cover; - object-fit: cover; - - border: 0.15rem solid var(--avatar-border); - border-radius: var(--br); - overflow: hidden; + object-fit: cover; } -/* hides corners from img overflowing */ -.toot .author > a .avatar img { - height: 100%; - width: 100%; - -o-object-fit: cover; - object-fit: cover; - background: var(--bg); - } -.toot .author > a .displayname, .toot .author > a .username { - justify-self: start; - align-self: start; - - max-width: 100%; + +.toot .author .user-info { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-around; + } +.toot .author .displayname, +.toot .author .username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.toot .author > a .displayname { - grid-area: display; +.toot .author .displayname { font-weight: bold; - font-size: 1rem; - line-height: 1.3rem; - /* margin-top: -0.5rem; */ } -.toot .author > a .username { - grid-area: user; +.toot .author .username { color: var(--link-fg); - font-size: 1rem; - line-height: 1.3rem; - } -.toot .author > a .timestamp { - grid-area: date; - color: var(--fg-reduced); } + .toot .body { - padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; @@ -701,16 +683,6 @@ main { white-space: nowrap; cursor: pointer; } -.toot .text { - margin: 0; - grid-row: span 1; - grid-column: 1 / span 3; - - position: relative; - z-index: 2; - - width: 100%; - } .toot .text details > summary { padding-bottom: 0.5rem; } @@ -726,8 +698,8 @@ main { word-break: break-word; } .toot .text .content blockquote { - padding: 0.5rem 0 0.5rem 0.5rem; - border-left: 0.2rem solid var(--border-accent); + padding: 0.25rem 0 0.25rem 0.5rem; + border-left: 0.25rem solid var(--border-accent); margin: 0; font-style: italic; } @@ -744,13 +716,14 @@ main { .toot .text .content pre { display: flex; border-radius: var(--br); - padding: 0.5rem; + overflow: hidden; + margin: 0; } .toot .text .content pre code { - padding: 0.5rem; + padding: 0.25rem 0.5rem; white-space: pre; border-radius: 0; - overflow-x: auto; + overflow: auto; -webkit-overflow-scrolling: touch; } .toot .text .content img { @@ -765,7 +738,7 @@ main { } .toot .text .emoji:hover, .toot .text .emoji:active { -webkit-transform: scale(2); - transform: scale(2); + transform: scale(2); background-color: var(--bg); box-shadow: var(--boxshadow); border: var(--boxshadow-border); @@ -782,7 +755,7 @@ main { height: 100%; width: 100%; box-sizing: border-box; - border: 0.15rem solid var(--gray1); + border: 0.15rem solid var(--gray2); border-radius: var(--br); position: relative; overflow: hidden; @@ -819,8 +792,8 @@ main { grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: - "eye sensitive ." - ". sensitive ."; + "eye sensitive ." + ". sensitive ."; } .toot .media .media-wrapper details summary .eye.button { grid-area: eye; @@ -851,15 +824,15 @@ main { top: -0.6rem; left: -0.6rem; -webkit-filter: blur(1.2rem); - filter: blur(1.2rem); + filter: blur(1.2rem); } .toot .media .media-wrapper details video.plyr-video, .toot .media .media-wrapper details .plyr { position: absolute; height: 100%; width: 100%; -o-object-fit: contain; - object-fit: contain; - background: var(--gray1); + object-fit: contain; + background: var(--gray2); } .toot .media.single .media-wrapper { grid-column: span 2; @@ -871,38 +844,35 @@ main { width: 100%; height: 100%; -o-object-fit: cover; - object-fit: cover; + object-fit: cover; } +.toot .meta { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.75rem; + align-items: flex-start; + justify-content: space-between; +} + .toot .info { display: flex; - background: var(--toot-info-bg); - color: var(--fg-reduced); - border-top: 0.15rem solid var(--toot-info-border); - padding: 0.5rem 0.75rem; - } -.toot .info div, .toot .info time { - padding-right: 1rem; - } -.toot .info .stats { - display: flex; - } -.toot .info{ - - grid-column: span 3; + flex-direction: column; flex-wrap: wrap; + gap: 0.5rem; + line-height: 1rem; + color: var(--fg-reduced); + align-items: flex-end; } -.toot .toot-link { - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - text-indent: 100%; - white-space: nowrap; - - position: absolute; - z-index: 0; - } +.toot .info .stats { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + line-height: 1rem; + color: var(--fg-reduced); +} +.stats .toot:first-child { /* top left, top right */ border-top-left-radius: var(--br); @@ -916,7 +886,6 @@ main { } .toot.expanded { background: var(--toot-focus-bg); - padding-bottom: 0; } .toot.expanded .info { background: var(--toot-focus-info-bg); diff --git a/template/about.tmpl b/template/about.tmpl index 52cbcae..e66ad6b 100644 --- a/template/about.tmpl +++ b/template/about.tmpl @@ -49,7 +49,7 @@ diff --git a/template/status.tmpl b/template/status.tmpl index 442860c..f0ebbc9 100644 --- a/template/status.tmpl +++ b/template/status.tmpl @@ -17,19 +17,37 @@ // along with this program. If not, see . */ -}} -
- - - - {{if .Account.DisplayName}} - {{emojify .Account.Emojis (escape .Account.DisplayName)}} - {{else}} - {{.Account.Username}} - {{end}} +
+ + + - @{{.Account.Username}} + + + + +
+ {{if .RepliesCount | eq 0 | not}} + replies: {{.RepliesCount}} + {{end}}{{if .FavouritesCount | eq 0 | not}} + favs: {{.FavouritesCount}} + {{end}}{{if .ReblogsCount | eq 0 | not}} + reposts: {{.ReblogsCount}} + {{end}}{{if .Pinned}} + /pinned + {{end}} +
+
{{if .SpoilerText}} @@ -92,24 +110,3 @@
{{end}}
- - -Open thread \ No newline at end of file diff --git a/template/status_profile.tmpl b/template/status_profile.tmpl index f546b8d..c8e7e64 100644 --- a/template/status_profile.tmpl +++ b/template/status_profile.tmpl @@ -80,19 +80,11 @@ {{end}}
- -Open thread \ No newline at end of file + {{if .Pinned}} + /pinned + {{end}}{{if .RepliesCount | eq 0 | not}} + replies:{{.RepliesCount}} + {{end}} + \ No newline at end of file