thread/status css
This commit is contained in:
f0x
parent
0436cd4d90
commit
784475124f
|
|
@ -109,7 +109,7 @@
|
|||
<img src="http://localhost:8080/assets/default_avatars/GoToSocial_icon4.webp"
|
||||
alt="Avatar for admin" title="Avatar for admin">
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">admin</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@admin</span>
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
<img src="http://localhost:8080/assets/default_avatars/GoToSocial_icon4.webp"
|
||||
alt="Avatar for admin" title="Avatar for admin">
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">admin</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@admin</span>
|
||||
|
|
@ -320,7 +320,7 @@
|
|||
<img src="http://localhost:8080/assets/default_avatars/GoToSocial_icon4.webp"
|
||||
alt="Avatar for admin" title="Avatar for admin">
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">admin</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@admin</span>
|
||||
|
|
@ -398,7 +398,7 @@
|
|||
<img src="http://localhost:8080/assets/default_avatars/GoToSocial_icon4.webp"
|
||||
alt="Avatar for admin" title="Avatar for admin">
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">admin</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@admin</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
< lang="en">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
|
@ -24,19 +24,10 @@
|
|||
<link rel="icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||
<link rel="apple-touch-icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||
<link rel="apple-touch-startup-image" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||
<link rel="preload" href="/assets/dist/_colors.css" as="style">
|
||||
<link rel="preload" href="/assets/dist/base.css" as="style">
|
||||
<link rel="preload" href="/assets/dist/page.css" as="style">
|
||||
<link rel="preload" href="/assets/Fork-Awesome/css/fork-awesome.min.css" as="style">
|
||||
<link rel="preload" href="/assets/dist/status.css" as="style">
|
||||
<link rel="preload" href="/assets/dist/thread.css" as="style">
|
||||
<link rel="preload" href="/@admin/custom.css" as="style">
|
||||
<link rel="stylesheet" href="/assets/dist/_colors.css">
|
||||
<link rel="stylesheet" href="/assets/dist/base.css">
|
||||
<link rel="stylesheet" href="/assets/dist/page.css">
|
||||
<link rel="stylesheet" href="/assets/Fork-Awesome/css/fork-awesome.min.css">
|
||||
<link rel="stylesheet" href="/assets/dist/status.css">
|
||||
<link rel="stylesheet" href="/assets/dist/thread.css">
|
||||
<link rel="preload" href="/assets/fonts/noto-sans-v27-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/fonts/noto-sans-v27-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="stylesheet" href="/assets/dist/default.css">
|
||||
<link rel="stylesheet" href="/assets/dist/style.css">
|
||||
<link rel="stylesheet" href="/@admin/custom.css">
|
||||
<script type="text/javascript" src="/assets/dist/frontend.js" async="" defer=""></script>
|
||||
<title>Post by @admin@localhost:8080</title>
|
||||
|
|
@ -55,7 +46,7 @@
|
|||
<div class="page-content">
|
||||
<main class="thread-wrapper" data-nosnippet>
|
||||
<section class="thread thread-main" aria-labelledby="thread-summary">
|
||||
<div class="col-header">
|
||||
<div class="col-header wrap">
|
||||
<h2 id="thread-summary">Single post</h2>
|
||||
<a href="#replies">jump to replies</a>
|
||||
</div>
|
||||
|
|
@ -68,7 +59,7 @@
|
|||
<img src="http://localhost:8080/assets/default_avatars/GoToSocial_icon4.webp" alt="Avatar for admin"
|
||||
title="Avatar for admin">
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">admin</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@admin</span>
|
||||
|
|
@ -168,7 +159,7 @@
|
|||
</article>
|
||||
</section>
|
||||
<section class="thread thread-replies" aria-labelledby="replies" open>
|
||||
<div class="col-header replies">
|
||||
<div class="col-header wrap replies">
|
||||
<h2 id="replies">1 reply</h2>
|
||||
<a href="#thread-summary">back to top</a>
|
||||
</div>
|
||||
|
|
@ -182,7 +173,7 @@
|
|||
<img src="http://localhost:8080/assets/default_avatars/GoToSocial_icon4.webp"
|
||||
alt="Avatar for Some_User" title="Avatar for Some_User">
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">some user</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@Some_User@example.org</span>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@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;
|
||||
|
|
@ -14,4 +14,8 @@
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wrap-text {
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@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"; */
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.thread {
|
||||
#tag-name {
|
||||
/* Ensure ridiculous length tags get wrapped */
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
{{- with . }}
|
||||
<main>
|
||||
<h2 id="tag-name" tabindex="-1">#{{- .tagName -}}</h2>
|
||||
<h2 class="wrap-text" tabindex="-1">#{{- .tagName -}}</h2>
|
||||
<p>There's nothing here!</p>
|
||||
<p>
|
||||
For privacy reasons, GoToSocial doesn't (yet) implement public web views of tag timelines.
|
||||
|
|
|
|||
Loading…
Reference in New Issue