SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[frontend] Unified panels (#812)

Browse Source 
* settings panel restructuring

* clean up old Gin handlers

* colorscheme redesign, some other small css tweaks

* basic router layout, error boundary

* colorscheme redesign, some other small css tweaks

* kebab-case consistency

* superfluous padding on applist

* remove unused consts

* redux, whitespace changes..

* use .jsx extensions for components

* login flow up till app registration

* full redux oauth implementation, with basic error handling

* split oauth api functions

* oauth api revocation handling

* basic profile change submission

* move old dir

* profile overview

* fix keeping track of the wrong instance url (for different instance/api domains)

* use redux state for profile form

* delete old/index.js, old/basic.js, fully implemented

* implement old/user/profile.js

* implement password change

* remove debug logging

* support future api for removing files

* customize profile css

* remove unneeded wrapper components

* restructure form fields

* start on admin pages

* admin panel settings

* admin settings panel

* remove old/admin files

* add top-level redirect

* refactor/cleanup forms

* only do API checks on logged-in state

* admin-status based routing

* federation block routing

* federation blocks

* upgrade dependencies

* react 18 changes

* media cleanup

* fix useEffect hooks

* remove unused require

* custom emoji base

* emoji uploader

* delete last old panel files

* sidebar styling, remove unused page

* refactor submit functions

* fix sidebar boxshadow-border

* fix old css variables

* fix fake-toot avatar

* fix non-square emoji

* fix user settings redux keys

* properly get admin account contact from instance response

* Account.source default values

* source.status_format key

* mobile responsiveness

* mobile element tweaks

* proper redirect after removing block

* add redirects for old setting panel urls

* deletes

* fix mobile overflow

* clean up debug logging calls
This commit is contained in:
f0x52
2022-09-29 12:02:41 +02:00
committed by GitHub
parent 2f22780800
commit 938328cd07
59 changed files with 3989 additions and 2837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
web/source/css/status.css
View File

@@ -31,13 +31,13 @@ main {
}
.toot {
background: $status_unfocus_bg;
background: $toot-unfocus-bg;
box-shadow: $boxshadow;
border: $boxshadow_border;
border: $boxshadow-border;
position: relative;
margin-bottom: $br;
border-radius: $br;
padding: 1.5rem 0;
padding-top: 1.5rem;
padding-bottom: 0.7rem;
a {
position: relative;
@@ -49,27 +49,34 @@ main {
.contentgrid {
padding: 0 1.5rem;
display: grid;
grid-template-columns: 4rem auto 1fr;
grid-template-rows: 1.5rem auto auto;
grid-template-columns: 4rem 1fr auto;
grid-template-rows: 1.5rem auto auto auto;
column-gap: 0.5rem;
}
.not-expanded {
color: $fg-reduced;
grid-column: 3;
grid-row: 1;
}
.avatar {
grid-row: span 2;
grid-row: span 3;
aspect-ratio: 1/1;
display: flex;
border: 0.2rem solid $avatar-border;
border-radius: 0.4rem;
overflow: hidden; /* hides corners from img overflowing */
img {
height: 100%;
width: 100%;
object-fit: cover;
background: $bg;
border: 0.1rem solid $acc2;
border-radius: calc($br / 1.5);
}
}
.displayname {
grid-column: span 2;
font-weight: bold;
font-size: 1.2rem;
line-height: 2rem;
@@ -82,7 +89,7 @@ main {
}
.username {
color: $link_fg;
color: $link-fg;
line-height: 2rem;
margin-top: -0.5rem;
align-self: start;
@@ -119,8 +126,7 @@ main {
.text {
margin: 0;
margin-top: 0.5rem;
grid-column: span 3;
grid-column: 2 / span 2;
grid-row: span 1;
overflow: hidden;
@@ -128,34 +134,33 @@ main {
z-index: 2;
a {
color: $link_fg;
color: $link-fg;
text-decoration: underline;
}
.content {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
word-break: break-word;
blockquote {
padding: 0.5rem 0 0.5rem 1.5rem;
border-left: 0.2rem solid $sloth_orange1;
border-left: 0.2rem solid $border-accent;
margin-left: 1rem;
font-style: italic;
}
hr {
border: 1px dashed $sloth_orange1;
border: 1px dashed $border-accent;
}
pre, code {
background-color: $sloth_gray2_darker7;
background-color: $gray2;
}
code {
padding: 0.25rem;
border-radius: $br_inner;
border-radius: $br-inner;
}
pre {
@@ -249,7 +254,7 @@ main {
.closed {
transition: 0.3s;
background: $bg_sensitive;
background: $bg-sensitive;
@supports (backdrop-filter: blur(2rem)) {
background: transparent;
backdrop-filter: blur(2rem);
@@ -263,17 +268,17 @@ main {
}
.no-image-desc {
color: $button_fg;
color: $no-img-desc-fg;
background: $no-img-desc-bg;
display: flex;
position: absolute;
bottom: 0.1rem;
right: 0.4rem;
margin-bottom: 0.4rem;
margin-right: 0.4rem;
background: $bg_no_img_desc;
padding: 0.1rem 0.45rem;
border-radius: 100%;
border: 0.2rem solid $button_fg;
border: 0.2rem solid $button-fg;
z-index: 3;
i.fa {
@@ -302,12 +307,13 @@ main {
}
.info {
background: $toot-info-bg;
color: $fg-reduced;
display: none;
border-top: 0.15rem solid $status_unfocus_bg;
border-top: 0.15rem solid $toot-info-border;
padding: 0.5rem 1.5rem;
div {
position: relative;
padding-right: 1.3rem;
}
@@ -317,30 +323,6 @@ main {
grid-column: span 3;
flex-wrap: wrap;
div.stats::after {
display: none;
}
div::after {
$size: 0.25rem;
display: block;
background: $fg_dark;
height: $size;
width: $size;
content: "";
position: absolute;
top: calc((1.5rem - $size) / 2);
right: 0.55rem;
border-radius: 1rem;
}
div:last-child {
&::after {
display: none;
}
margin-right: 0;
}
}
.toot-link {
@@ -362,7 +344,7 @@ main {
border-top-right-radius: $br;
}
&:last-child {
&:last-child, &:last-child .info {
/* bottom left, bottom right */
border-bottom-left-radius: $br;
border-bottom-right-radius: $br;
@@ -370,11 +352,21 @@ main {
}
&.expanded {
background: $status_focus_bg;
background: $toot-focus-bg;
padding-bottom: 0;
.contentgrid {
padding-bottom: 1rem;
.displayname {
grid-column: span 2;
}
.text {
grid-column: 1 / span 3;
}
.not-expanded {
display: none;
}
}
.info {