From 86a902e9d8cf0503e9c39fadeef16e00ee60606f Mon Sep 17 00:00:00 2001 From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com> Date: Tue, 8 Oct 2024 10:55:54 +0200 Subject: [PATCH] a4-comments: fix issues introduced in redesign --- .../assets/scss/components/_a4-comments.scss | 78 ++++++++++++++++--- .../scss/components/_a4-control_bar.scss | 22 ++++++ .../assets/scss/components/_a4-forms.scss | 20 +++++ .../assets/scss/components/_control-bar.scss | 2 +- .../assets/scss/components/_rating.scss | 4 + meinberlin/assets/scss/style.scss | 2 + 6 files changed, 115 insertions(+), 13 deletions(-) create mode 100644 meinberlin/assets/scss/components/_a4-control_bar.scss create mode 100644 meinberlin/assets/scss/components/_a4-forms.scss diff --git a/meinberlin/assets/scss/components/_a4-comments.scss b/meinberlin/assets/scss/components/_a4-comments.scss index 76bf95dcef..3f2c05c2ae 100644 --- a/meinberlin/assets/scss/components/_a4-comments.scss +++ b/meinberlin/assets/scss/components/_a4-comments.scss @@ -1,5 +1,5 @@ .a4-comments__comment { - border-top: solid 1px $border-color; + border-top: none; } .a4-comments__text--highlighted { @@ -8,7 +8,7 @@ } .a4-comments__box { - margin-top: 0.75 * $spacer; + margin-top: $spacer * 2; } .a4-comments__anchor { @@ -39,6 +39,14 @@ } } +.a4-comments__comment-form__form { + .form-group { + flex-direction: column; + width: 100%; + margin-bottom: 0; + } +} + .a4-comments__filters__parent--closed, .a4-comments__filters, .a4-comments__action-bar-container, @@ -101,6 +109,19 @@ @extend .label; } +.a4-comments__comment-control-bar { + margin-top: $spacer * 2; + + .form-group--inline { + display: flex; + justify-content: space-between; + } + + .form-group { + margin-bottom: 0; + } +} + .a4-comments__filters__search { @extend .form-group; @extend .u-inline-flex; @@ -123,11 +144,11 @@ } } -.a4-comments__filters__search-input { +.a4-comments__filters__search-input, +.a4-forms__select__input { @extend .input-group__input; - border-top-left-radius: 0.3em !important; - border-bottom-left-radius: 0.3em !important; + border-radius: 0.3em !important; } .a4-comments__filters__search-btn { @@ -152,11 +173,10 @@ color: $text-color !important; } } -} -.a4-comments__dropdown-container .a4-comments__dropdown { - margin-left: auto; - padding-right: 0.75 * $spacer; + .dropdown-item { + padding: 0!important; + } } // No user images in mB @@ -197,12 +217,18 @@ } .a4-comments__char-count { - text-align: right; + display: flex; + justify-content: flex-end; + font-size: $font-size-sm; + margin-top: 0.4em; margin-left: auto; - margin-right: -$spacer; + margin-bottom: 0; +} + +.a4-comments__char-count-word { + margin-left: 0.2em; } -.a4-comments__char-count, .a4-comments__submission-date { font-size: $font-size-sm; display: block; @@ -217,6 +243,15 @@ @extend .btn--link; } +.a4-comments__dropdown-container { + margin-left: auto; + margin-right: 8px; + + @media screen and (width <= 478px) { + margin-right: 1.5em; + } +} + .a4-comments__filters__dropdown { @media screen and (width <= 478px) { flex-grow: 1; @@ -232,3 +267,22 @@ background-color: $success; color: $text-color-inverted; } + +.a4-comments__comment-form__heading-comments-allowed, +.a4-comments__commentbox__subtitle { + visibility: hidden; + height: 0; + width: 0; + position: absolute; +} + +.a4-comments__comment-form__actions { + display: inline-flex; +} + +.a4-comments__comment-form__actions__left { + > button { + margin-right: 0.5em; + } +} + diff --git a/meinberlin/assets/scss/components/_a4-control_bar.scss b/meinberlin/assets/scss/components/_a4-control_bar.scss new file mode 100644 index 0000000000..bacec11df5 --- /dev/null +++ b/meinberlin/assets/scss/components/_a4-control_bar.scss @@ -0,0 +1,22 @@ +.a4-control-bar__search__term { + display: flex; +} + +.a4-control-bar__search__input-submit { + display: block; + width: 40px; + border-top-right-radius: 0.3em; + border-bottom-right-radius: 0.3em; + border: 1px solid $input-border-color; + border-left: none; + + &:before { + font-family: "Font Awesome 6 Free", sans-serif; + content: "\f002"; + font-weight: 900; + } +} + +.a4-control-bar__search__input-submit:hover { + background-color: $bg-secondary; +} \ No newline at end of file diff --git a/meinberlin/assets/scss/components/_a4-forms.scss b/meinberlin/assets/scss/components/_a4-forms.scss new file mode 100644 index 0000000000..017d5730fd --- /dev/null +++ b/meinberlin/assets/scss/components/_a4-forms.scss @@ -0,0 +1,20 @@ +.a4-forms__select__wrapper { + position: relative; +} + +.a4-forms__select__input { + appearance: none; + background-color: transparent; + padding-right: 30px; +} + +.a4-forms__select__wrapper:after { + content: "\f0d7"; + font-family: "Font Awesome 6 Free", sans-serif; + font-weight: 900; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; +} diff --git a/meinberlin/assets/scss/components/_control-bar.scss b/meinberlin/assets/scss/components/_control-bar.scss index 12cd0b9ac9..69e4445b3b 100644 --- a/meinberlin/assets/scss/components/_control-bar.scss +++ b/meinberlin/assets/scss/components/_control-bar.scss @@ -65,4 +65,4 @@ position: relative; z-index: 1; top: -1em; -} +} \ No newline at end of file diff --git a/meinberlin/assets/scss/components/_rating.scss b/meinberlin/assets/scss/components/_rating.scss index 55f7cee7ba..f625d8bb71 100644 --- a/meinberlin/assets/scss/components/_rating.scss +++ b/meinberlin/assets/scss/components/_rating.scss @@ -72,3 +72,7 @@ .rating-down { @include rating-button($danger); } + +.rating__label { + display: none; +} \ No newline at end of file diff --git a/meinberlin/assets/scss/style.scss b/meinberlin/assets/scss/style.scss index d0dc98cde9..e88ae68fb9 100644 --- a/meinberlin/assets/scss/style.scss +++ b/meinberlin/assets/scss/style.scss @@ -24,6 +24,8 @@ @import "form"; @import "components/a4-comments"; +@import "components/a4-control_bar"; +@import "components/a4-forms"; @import "components/action"; @import "components/accordion"; @import "components/alert";