[frontend] Settings navigation design (#1652)

* change header image alignment

(cherry picked from commit df1bb339a5c597a2b668cedb3dafec5a390df120)

* big mess navigation refactor

* bit of cleanup

* minor css tweaks

* fix error rendering code for remote emoji

* refactor navigation structure code

* refactor styling

* fix className

* stash

* restructure navigation generation

* url wildcard formatting

* remove un-implemented User menu entry

* remove commented lines

* clarify permissions check

* invert permissions logic for clarity
This commit is contained in:
f0x52 2023-03-29 12:18:45 +02:00 committed by GitHub
commit 0746ef741a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 627 additions and 312 deletions

View file

@ -101,15 +101,15 @@ $input-border: $blue1;
$input-error-border: $error3;
$input-focus-border: $blue3;
$settings-nav-bg: $bg-accent;
$settings-nav-header-fg: $gray1;
$settings-nav-header-bg: $orange1;
$settings-nav-bg: $bg;
$settings-nav-header-fg: $orange2;
$settings-nav-bg-hover: $gray3;
/* $settings-nav-fg-hover: $gray1; */
$settings-nav-fg-hover: $fg;
$settings-nav-bg-active: $gray2;
/* $settings-nav-fg-active: $orange2; */
$settings-nav-bg-active: $blue3;
$settings-nav-border-active: $info-bg;
$settings-nav-fg-active: $gray2;
$error-fg: $error1;
$error-bg: $error2;

View file

@ -97,11 +97,10 @@ header {
header a {
margin: 2rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2rem;
img {
margin-bottom: 1rem;
align-self: center;
height: 6rem;
}
@ -120,7 +119,6 @@ header a {
}
.excerpt-top {
margin-top: -1rem;
margin-bottom: 2rem;
font-style: italic;
font-weight: normal;
@ -515,41 +513,37 @@ label {
margin-bottom: 0;
}
.contact-account-card {
/* display: inline-grid;
grid-template-columns: 4rem auto;
grid-template-rows: 4rem;
gap: 1rem;
padding: 0.5rem; */
display: inline-grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
text-decoration: none;
gap: 0.5rem 1rem;
border-radius: $br;
padding: 0.5rem;
min-width: 40%;
margin-bottom: 0.3rem;
}
background: $list-entry-bg;
.account-card {
display: inline-grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
text-decoration: none;
gap: 0.5rem 1rem;
border-radius: $br;
padding: 0.5rem;
min-width: 40%;
margin-bottom: 0.3rem;
&:hover {
background: $list-entry-alternate-bg;
}
background: $list-entry-bg;
h3 {
align-self: end;
margin: 0;
color: $fg;
}
&:hover {
background: $list-entry-alternate-bg;
}
img.avatar {
border-radius: 0.5rem;
width: 5rem;
height: 5rem;
object-fit: cover;
grid-row: 1 / span 2;
}
h3 {
align-self: end;
margin: 0;
color: $fg;
}
img.avatar {
border-radius: 0.5rem;
width: 5rem;
height: 5rem;
object-fit: cover;
grid-row: 1 / span 2;
}
}