From 80b53623e1bb5a3e0c220d4f2f30d62ddf3e37b1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 22 Oct 2022 11:44:41 +0200 Subject: [PATCH] [Glitch] Change settings area to be separated into categories in admin UI Port 7c152acb2cc545a87610de349a94e14f45fbed5d to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/admin.scss | 82 +++++++++++++++---- .../glitch/styles/components/index.scss | 5 ++ .../flavours/glitch/styles/forms.scss | 16 +++- 3 files changed, 85 insertions(+), 18 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index cb5a2d7ce..0f0a785ea 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -188,24 +188,71 @@ $content-width: 840px; padding-top: 30px; } - &-heading { - display: flex; - + &__heading { padding-bottom: 36px; border-bottom: 1px solid lighten($ui-base-color, 8%); - margin: -15px -15px 40px 0; + margin-bottom: 40px; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; + &__row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + margin: -15px -15px 0 0; - & > * { - margin-top: 15px; - margin-right: 15px; + & > * { + margin-top: 15px; + margin-right: 15px; + } } - &-actions { + &__tabs { + margin-top: 30px; + margin-bottom: -31px; + + & > div { + display: flex; + gap: 10px; + } + + a { + font-size: 14px; + display: inline-flex; + align-items: center; + padding: 7px 15px; + border-radius: 4px; + color: $darker-text-color; + text-decoration: none; + position: relative; + font-weight: 500; + gap: 5px; + white-space: nowrap; + + &.selected { + font-weight: 700; + color: $primary-text-color; + + &::after { + content: ""; + display: block; + width: 100%; + border-bottom: 1px solid $ui-highlight-color; + position: absolute; + bottom: -5px; + left: 0; + } + } + + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + } + } + + &__actions { display: inline-flex; & > :not(:first-child) { @@ -231,11 +278,7 @@ $content-width: 840px; color: $secondary-text-color; font-size: 24px; line-height: 36px; - font-weight: 400; - - @media screen and (max-width: $no-columns-breakpoint) { - font-weight: 700; - } + font-weight: 700; } h3 { @@ -440,6 +483,11 @@ body, } } + & > div { + display: flex; + gap: 5px; + } + strong { font-weight: 500; text-transform: uppercase; @@ -1162,7 +1210,7 @@ a.name-tag, path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 1 !important; + fill-opacity: 100% !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8877626b8..d25ca579b 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -20,6 +20,11 @@ background: transparent; padding: 0; cursor: pointer; + text-decoration: none; + + &--destructive { + color: $error-value-color; + } &:hover, &:active { diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 57075a75f..84a87eb86 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -244,7 +244,7 @@ code { & > label { font-family: inherit; - font-size: 16px; + font-size: 14px; color: $primary-text-color; display: block; font-weight: 500; @@ -281,6 +281,20 @@ code { .input:last-child { margin-bottom: 0; } + + &__thumbnail { + display: block; + margin: 0; + margin-bottom: 10px; + max-width: 100%; + height: auto; + border-radius: 4px; + background: url("images/void.png"); + + &:last-child { + margin-bottom: 0; + } + } } .fields-row {