From 026674bc2c4eb5f53bcb38e7efce2fe2dfebe974 Mon Sep 17 00:00:00 2001 From: f0x52 Date: Mon, 13 Sep 2021 14:45:33 +0200 Subject: Thread views on the web (#207) * Webviews for status threads * fix up templates * add ForkAwesome and gotosocial-styling into repo * clean up gotosocial-styling, old styling * update CONTRIBUTING with new css building, and nodemon recommendation * update Dockerfile with new css bundling * those weren't supposed to make it in * upgrade gotosocial-styling deps * update authorize template with main wrapper * update css pipeline * abstract status from thread to avoid copy-pasting * basic CW implementation * fix PR review suggestions * fix no-image-desc icon alignment * remove template loading println * remove println * remove changes to testmodels * reset changes to testmodels --- web/assets/Fork-Awesome | 1 + web/assets/base.css | 208 +++++++++++++++++++++++++++++++++++++++++++ web/assets/bundle.css | 188 --------------------------------------- web/assets/colors.css | 1 + web/assets/logo.png | Bin 0 -> 144838 bytes web/assets/status.css | 230 ++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 440 insertions(+), 188 deletions(-) create mode 160000 web/assets/Fork-Awesome create mode 100644 web/assets/base.css delete mode 100644 web/assets/bundle.css create mode 100644 web/assets/colors.css create mode 100644 web/assets/logo.png create mode 100644 web/assets/status.css (limited to 'web/assets') diff --git a/web/assets/Fork-Awesome b/web/assets/Fork-Awesome new file mode 160000 index 000000000..5c126c4fb --- /dev/null +++ b/web/assets/Fork-Awesome @@ -0,0 +1 @@ +Subproject commit 5c126c4fb5ce9c78d24148afc514f9c4ccbe4051 diff --git a/web/assets/base.css b/web/assets/base.css new file mode 100644 index 000000000..b28cf2533 --- /dev/null +++ b/web/assets/base.css @@ -0,0 +1,208 @@ +html, body { + padding: 0; + margin: 0; + background: rgb(70, 79, 88); + color: #fafaff; + font-family: sans-serif; +} + +body { + display: grid; + + grid-template-rows: auto 1fr auto; + min-height: 100vh; + line-height: 1.5em; +} + +main { + background: #525c66; + display: grid; + padding-top: 2rem; + grid-template-columns: 1fr 50% 1fr; + grid-template-columns: auto min(92%, 90ch) auto; +} + +main .left { + grid-column: 1; + } + +main .right { + grid-column: 3; + } + +main.lightgray { + background: #525c66; + } + +main > * { + align-self: start; + grid-column: 2; + } + +header { + background: rgb(70, 79, 88); + padding: 2rem 0; + padding-bottom: 0; + display: flex; + flex-wrap: wrap; +} + +header img { + height: 4rem; + padding-left: 2rem; + padding-bottom: 2rem; + } + +header div { + height: 100%; + margin: 0 2rem; + margin-top: -2rem; + flex-grow: 1; + align-self: center; + display: flex; + } + +header div h1 { + align-self: center; + } + +h1 { + /* color: $acc1; */ + margin: 0; + line-height: 2.4rem; +} + +a { + color: #de8957; +} + +.button, button { + border-radius: 0.2rem; + background: #de8957; + color: #fafaff; + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; + padding: 0.5rem; + border: none; + cursor: pointer; +} + +.button:hover, button:hover { + background: #c76d33; + } + +.count { + background: rgb(70, 79, 88); + border-radius: 0.3rem; + padding: 0.2rem; +} + +.nounderline { + text-decoration: none; +} + +.accent { + color: #de8957; +} + +.logo { + justify-self: center; +} + +.logo img { + height: 30vh; + } + +section.apps { + align-self: start; +} + +section.apps .applist { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0.5rem; + align-content: start; + } + +section.apps .applist .entry { + display: grid; + grid-template-columns: 30% 1fr; + gap: 0.5rem; + padding: 0.5rem; + background: rgb(70, 79, 88); + border-radius: 0.5rem; + } + +section.apps .applist .entry .logo { + align-self: center; + width: 100%; + object-fit: contain; + flex: 1 1 auto; + } + +section.apps .applist .entry .logo.redraw { + fill: #fafaff; + stroke: #fafaff; + } + +section.apps .applist .entry div { + padding: 1rem 0; + } + +section.apps .applist .entry div h3 { + margin-top: 0; + } + +section.login form { + display: inline-grid; + grid-template-columns: auto 100%; + grid-gap: 0.7rem; + } + +section.login form button { + place-self: center; + grid-column: 2; + } + +input, select, textarea { + border: 1px solid #fafaff; + color: #fafaff; + background: #525c66; + width: 100%; +} + +footer { + align-self: end; + + padding: 2rem; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +footer a { + font-weight: bold; + } + +@media screen and (orientation: portrait) { + main { + grid-template-columns: 1fr 92% 1fr; + } + + header { + text-align: center; + } + + footer { + margin-top: 2rem; + grid-template-columns: 1fr; + } + + footer div { + margin: 0.3rem 0; + } + + section.apps .applist { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/web/assets/bundle.css b/web/assets/bundle.css deleted file mode 100644 index 7d4eae172..000000000 --- a/web/assets/bundle.css +++ /dev/null @@ -1,188 +0,0 @@ -html, body { - padding: 0; - margin: 0; - background: #525c66; - color: #fafaff; - font-family: sans-serif; -} - -body { - display: grid; - grid-template-columns: 1fr 50% 1fr; - grid-template-columns: 1fr 90ch 1fr; - line-height: 1.5em; - - min-height: 100vh; - grid-auto-rows: auto; - grid-auto-flow: dense; -} - -body > * { - align-self: start; - grid-column: 2; - } - -body header, body footer, body .fullWidth { - grid-column: 1/4; - grid-column: 1/-1; - } - -body .left { - grid-column: 1; - } - -body .right { - grid-column: 3; - } - -header { - background: rgb(70, 79, 88); - padding: 2rem; - margin-bottom: 4rem; -} - -h1 { - /* color: $acc1; */ - margin: 0; - line-height: 2.4rem; -} - -a { - color: #de8957; -} - -.button, button { - border-radius: 0.2rem; - background: #de8957; - color: #fafaff; - text-decoration: none; - font-size: 1.2rem; - font-weight: bold; - padding: 0.5rem; - border: none; - cursor: pointer; -} - -.button:hover, button:hover { - background: #c76d33; - } - -.count { - background: rgb(70, 79, 88); - border-radius: 0.3rem; - padding: 0.2rem; -} - -.nounderline { - text-decoration: none; -} - -.accent { - color: #de8957; -} - -.logo { - justify-self: center; -} - -.logo img { - height: 30vh; - } - -section.apps { - align-self: start; -} - -section.apps .applist { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 0.5rem; - align-content: start; - } - -section.apps .applist .entry { - display: grid; - grid-template-columns: 30% 1fr; - gap: 0.5rem; - padding: 0.5rem; - background: rgb(70, 79, 88); - border-radius: 0.5rem; - } - -section.apps .applist .entry .logo { - align-self: center; - width: 100%; - object-fit: contain; - flex: 1 1 auto; - } - -section.apps .applist .entry .logo.redraw { - fill: #fafaff; - stroke: #fafaff; - } - -section.apps .applist .entry div { - padding: 1rem 0; - } - -section.apps .applist .entry div h3 { - margin-top: 0; - } - -section.login form { - display: inline-grid; - grid-template-columns: auto 100%; - grid-gap: 0.7rem; - } - -section.login form button { - place-self: center; - grid-column: 2; - } - -input, select, textarea { - border: 1px solid #fafaff; - color: #fafaff; - background: #525c66; - width: 100%; -} - -footer { - align-self: end; - - padding: 2rem; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; -} - -footer a { - font-weight: bold; - } - -@media screen and (orientation: portrait) { - body { - grid-template-columns: 1fr 92% 1fr; - } - - body footer, body .left, body .right { - grid-column: 2; - } - - header { - text-align: center; - } - - footer { - padding: 0; - margin-top: 2rem; - grid-template-columns: 1fr; - } - - footer div { - margin: 1rem 0; - } - - section.apps .applist { - grid-template-columns: 1fr; - } -} \ No newline at end of file diff --git a/web/assets/colors.css b/web/assets/colors.css new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/web/assets/colors.css @@ -0,0 +1 @@ + diff --git a/web/assets/logo.png b/web/assets/logo.png new file mode 100644 index 000000000..d6d485df1 Binary files /dev/null and b/web/assets/logo.png differ diff --git a/web/assets/status.css b/web/assets/status.css new file mode 100644 index 000000000..9dd788a9e --- /dev/null +++ b/web/assets/status.css @@ -0,0 +1,230 @@ +main { + background: transparent; + grid-auto-rows: auto; +} + +.thread { + display: flex; + flex-direction: column; +} + +.toot { + position: relative; + background: rgb(75, 84, 93); + padding: 2rem; + /* padding-bottom: 0; */ + display: grid; + grid-template-columns: 3.2rem auto 1fr; + column-gap: 0.5rem; + margin-bottom: 0.2rem; +} + +.toot a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + } + +.toot .avatar { + grid-row: span 2; + } + +.toot .avatar img { + height: 3.2rem; + width: 3.2rem; + object-fit: cover; + } + +.toot .displayname { + font-weight: bold; + font-size: 1.2rem; + align-self: start; + } + +.toot .username { + color: #b0b0b5; + justify-self: start; + } + +.toot input.spoiler:checked ~ .content { + display: none; + } + +.toot .spoiler label { + background: #de8957; + border-radius: 0.3rem; + padding: 0.3rem; + margin-left: 0.4rem; + position: relative; + z-index: 2; + cursor: pointer; + } + +.toot .text { + margin: 0; + grid-column: span 2; + } + +.toot .text a { + color: #de8957; + text-decoration: underline; + } + +.toot .media { + margin-top: 0.6rem; + border-radius: 0.2rem; + grid-column: span 3; + display: grid; + grid-template-columns: 50% 50%; + grid-auto-rows: 10rem; + overflow: hidden; + gap: 0.3rem; + } + +.toot .media a { + position: relative; + } + +.toot .media .no-image-desc { + display: flex; + position: absolute; + bottom: 0.1rem; + right: 0.4rem; + color: white; + background: #5897df; + padding: 0.2rem 0.4rem; + border-radius: 100%; + z-index: 3; + } + +.toot .media .no-image-desc i.fa { + display: block; + line-height: 1.3rem; + } + +.toot .media .no-image-desc span { + margin-left: 0.3rem; + display: none; + } + +.toot .media .no-image-desc:hover span { + display: block; + } + +.toot .media .no-image-desc:hover { + border-radius: 0.2rem; +} + +.toot .media img { + width: 100%; + height: 100%; + object-fit: cover; + } + +.toot .media.single a { + grid-column: span 2; + } + +.toot .media.odd a:first-child, .toot .media.double a { + grid-row: span 2; + } + +.toot .info { + display: none; + } + +.toot .info div { + position: relative; + padding-right: 1.3rem; + } + +.toot .info .stats { + display: flex; + } + +.toot .info { + + color: #b0b0b5; + grid-column: span 3; + margin-top: 0.5rem; + flex-wrap: wrap; +} + +.toot .info div.stats::after { + display: none; + } + +.toot .info div::after { + display: block; + background: #b0b0b5; + height: 0.25rem; + width: 0.25rem; + content: ""; + position: absolute; + top: calc((1.5rem - 0.25rem) / 2); + right: 0.55rem; + border-radius: 1rem; + } + +.toot .info div:last-child::after { + display: none; + } + +.toot .info div:last-child { + margin-right: 0; +} + +.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 {} + +.toot:first-child { + /* top left, top right */ + border-radius: 0.3rem 0.3rem 0 0; + } + +.toot:last-child { + /* bottom left, bottom right */ + border-radius: 0 0 0.3rem 0.3rem; + padding-bottom: 1.5rem; + } + +.toot.expanded { + background: #525c66; + padding-bottom: 1.5rem; + } + +.toot.expanded .displayname { + grid-column: span 2; + } + +.toot.expanded .text { + grid-column: span 3; + grid-row: span 1; + margin-top: 0.3rem; + } + +.toot.expanded .info { + display: flex; + } + +.toot.expanded .media { + grid-auto-rows: 1fr; + max-height: 120rem; + } + +footer + div { /* something weird from the devstack.. */ + display: none; +} \ No newline at end of file -- cgit v1.2.3