diff --git a/web/assets/static-pages/profile.html b/web/assets/static-pages/profile.html index 590a764ea..d09116d12 100644 --- a/web/assets/static-pages/profile.html +++ b/web/assets/static-pages/profile.html @@ -109,7 +109,7 @@ Avatar for admin -
+
admin , @admin @@ -194,7 +194,7 @@ Avatar for admin -
+
admin , @admin @@ -320,7 +320,7 @@ Avatar for admin -
+
admin , @admin @@ -398,7 +398,7 @@ Avatar for admin -
+
admin , @admin diff --git a/web/assets/static-pages/thread.html b/web/assets/static-pages/thread.html index f97b60aa0..a24f9b4c8 100644 --- a/web/assets/static-pages/thread.html +++ b/web/assets/static-pages/thread.html @@ -1,5 +1,5 @@ -< lang="en"> + @@ -24,19 +24,10 @@ - - - - - - - - - - - - - + + + + Post by @admin@localhost:8080 @@ -55,7 +46,7 @@
-
+

Single post

jump to replies
@@ -68,7 +59,7 @@ Avatar for admin -
+
admin , @admin @@ -168,7 +159,7 @@
-
+

1 reply

back to top
@@ -182,7 +173,7 @@ Avatar for Some_User -
+
some user , @Some_User@example.org diff --git a/web/source/css/components/column-header.css b/web/source/css/components/column-header.css index 3950d43e5..17b2f57b4 100644 --- a/web/source/css/components/column-header.css +++ b/web/source/css/components/column-header.css @@ -26,4 +26,19 @@ line-height: 1.3rem; margin: 0; } + + &.wrap { /* for headers that can have a lot more text, like thread summary/reply info */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: 1rem; + row-gap: 0.5rem; + + box-shadow: $boxshadow; + border: $boxshadow-border; + + h2 { + margin-right: auto; + } + } } diff --git a/web/source/css/components/status/header.css b/web/source/css/components/status/header.css new file mode 100644 index 000000000..1aeb38740 --- /dev/null +++ b/web/source/css/components/status/header.css @@ -0,0 +1,67 @@ +.status .status-header > address { + /* + Avoid stretching so wide that user + can't click on open thread link that's + behind the status header link. + */ + width: fit-content; + + > a { + padding: 0 0.75rem; + display: grid; + grid-template-columns: 3.5rem 1fr auto; + grid-template-rows: auto auto; + grid-template-areas: + "avatar author-strapline author-strapline" + "avatar author-strapline author-strapline"; + gap: 0 0.5rem; + font-style: normal; + + .avatar { + grid-area: avatar; + height: 3.5rem; + width: 3.5rem; + object-fit: cover; + + border: 0.15rem solid $avatar-border; + border-radius: $br; + overflow: hidden; /* hides corners from img overflowing */ + + img { + height: 100%; + width: 100%; + object-fit: cover; + background: $bg; + } + } + + .author-strapline { + grid-area: author-strapline; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto; + grid-template-areas: + "display display" + "user user"; + gap: 0 0.5rem; + + .displayname, .username { + justify-self: start; + align-self: start; + max-width: 100%; + font-size: 1rem; + line-height: 1.3rem; + } + + .displayname { + grid-area: display; + font-weight: bold; + } + + .username { + grid-area: user; + color: $link-fg; + } + } + } +} \ No newline at end of file diff --git a/web/source/css/components/status/indent.css b/web/source/css/components/status/indent.css new file mode 100644 index 000000000..97bb06c0e --- /dev/null +++ b/web/source/css/components/status/indent.css @@ -0,0 +1,43 @@ +.status { + &.indent-1 { + margin-left: 0.5rem; + } + + &.indent-2 { + margin-left: 1rem; + } + + &.indent-3 { + margin-left: 1.5rem; + } + + &.indent-4 { + margin-left: 2rem; + } + + &.indent-5 { + margin-left: 2.5rem; + } + + &.indent-1, + &.indent-2, + &.indent-3, + &.indent-4, + &.indent-5 { + .status-link { + margin-left: -0.5rem; + border-left: 0.1rem dashed $border-accent; + } + } + + border-radius: 0; + &:last-child { + border-bottom-left-radius: $br; + border-bottom-right-radius: $br; + + .status-info { + border-bottom-left-radius: $br; + border-bottom-right-radius: $br; + } + } +} \ No newline at end of file diff --git a/web/source/css_old/status.css b/web/source/css/components/status/status.css similarity index 76% rename from web/source/css_old/status.css rename to web/source/css/components/status/status.css index 21dc3416e..6c07ad56d 100644 --- a/web/source/css_old/status.css +++ b/web/source/css/components/status/status.css @@ -1,31 +1,7 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 - 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 . -*/ - @import "photoswipe/dist/photoswipe.css"; @import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; @import "plyr/dist/plyr.css"; -main { - background: transparent; - grid-auto-rows: auto; -} - .status { background: $status-bg; box-shadow: $boxshadow; @@ -41,74 +17,6 @@ main { text-decoration: none; } - .status-header > address { - /* - Avoid stretching so wide that user - can't click on open thread link that's - behind the status header link. - */ - width: fit-content; - - > a { - padding: 0 0.75rem; - display: grid; - grid-template-columns: 3.5rem 1fr auto; - grid-template-rows: auto auto; - grid-template-areas: - "avatar author-strap author-strap" - "avatar author-strap author-strap"; - gap: 0 0.5rem; - font-style: normal; - - .avatar { - grid-area: avatar; - height: 3.5rem; - width: 3.5rem; - object-fit: cover; - - border: 0.15rem solid $avatar-border; - border-radius: $br; - overflow: hidden; /* hides corners from img overflowing */ - - img { - height: 100%; - width: 100%; - object-fit: cover; - background: $bg; - } - } - - .author-strap { - grid-area: author-strap; - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: auto; - grid-template-areas: - "display display" - "user user"; - gap: 0 0.5rem; - - .displayname, .username { - justify-self: start; - align-self: start; - max-width: 100%; - font-size: 1rem; - line-height: 1.3rem; - } - - .displayname { - grid-area: display; - font-weight: bold; - } - - .username { - grid-area: user; - color: $link-fg; - } - } - } - } - .status-body { padding: 0.5rem 0.75rem; display: flex; diff --git a/web/source/css/components/utility.css b/web/source/css/components/utility.css index d08da2b0a..d2d53e1ed 100644 --- a/web/source/css/components/utility.css +++ b/web/source/css/components/utility.css @@ -14,4 +14,8 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; +} + +.wrap-text { + word-wrap: anywhere; } \ No newline at end of file diff --git a/web/source/css/layout/thread.css b/web/source/css/layout/thread.css new file mode 100644 index 000000000..f6e1bfae7 --- /dev/null +++ b/web/source/css/layout/thread.css @@ -0,0 +1,15 @@ +.thread, +.thread-wrapper { + display: flex; + flex-direction: column; + gap: 0.4rem; + + .col-header.replies.hidden-only { + /* + No visible replies below this column + header, so round off the bottom. + */ + border-bottom-left-radius: $br; + border-bottom-right-radius: $br; + } +} \ No newline at end of file diff --git a/web/source/css/main.css2 b/web/source/css/main.css2 deleted file mode 100644 index 4cfcd33d1..000000000 --- a/web/source/css/main.css2 +++ /dev/null @@ -1,31 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 - 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 . -*/ - -@import "modern-normalize/modern-normalize.css"; /* needs to be the first import */ - -/* @import "./base/fonts.css"; -@import "./base/main.css"; - -@import "./components/account-card.css"; -@import "./components/emoji.css"; -@import "./components/forms.css"; -@import "./components/lists.css"; -@import "./components/utility.css"; - -@import "./vendor/prism.css"; */ \ No newline at end of file diff --git a/web/source/css_old/tag.css b/web/source/css_old/tag.css deleted file mode 100644 index 2f1c9db98..000000000 --- a/web/source/css_old/tag.css +++ /dev/null @@ -1,25 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 - 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 . -*/ - -.thread { - #tag-name { - /* Ensure ridiculous length tags get wrapped */ - word-wrap: anywhere; - } -} diff --git a/web/source/css_old/thread.css b/web/source/css_old/thread.css deleted file mode 100644 index e2e6ae6b7..000000000 --- a/web/source/css_old/thread.css +++ /dev/null @@ -1,101 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 - 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 . -*/ - -.thread, -.thread-wrapper { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -.thread { - /* - This column header might contain - quite some info, so let it wrap. - */ - .col-header { - display: flex; - flex-direction: row; - flex-wrap: wrap; - column-gap: 1rem; - row-gap: 0.5rem; - - box-shadow: $boxshadow; - border: $boxshadow-border; - - h2 { - margin-right: auto; - } - - &.replies.hidden-only { - /* - No visible replies below this column - header, so round off the bottom. - */ - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; - } - } - - .status { - - - &.indent-1 { - margin-left: 0.5rem; - } - - &.indent-2 { - margin-left: 1rem; - } - - &.indent-3 { - margin-left: 1.5rem; - } - - &.indent-4 { - margin-left: 2rem; - } - - &.indent-5 { - margin-left: 2.5rem; - } - - &.indent-1, - &.indent-2, - &.indent-3, - &.indent-4, - &.indent-5 { - .status-link { - margin-left: -0.5rem; - border-left: 0.1rem dashed $border-accent; - } - } - - border-radius: 0; - &:last-child { - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; - - .status-info { - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; - } - } - } -} \ No newline at end of file diff --git a/web/template/tag.tmpl b/web/template/tag.tmpl index c1bba0720..ec5285614 100644 --- a/web/template/tag.tmpl +++ b/web/template/tag.tmpl @@ -19,7 +19,7 @@ {{- with . }}
-

#{{- .tagName -}}

+

#{{- .tagName -}}

There's nothing here!

For privacy reasons, GoToSocial doesn't (yet) implement public web views of tag timelines.