a4-comments: fix issues introduced in redesign

liqd · Oct 10, 2024 · 86a902e · 86a902e
1 parent 21172ab
commit 86a902e
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 13 deletions.
diff --git 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
@@ -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;
+}
diff --git a/meinberlin/assets/scss/components/_a4-forms.scss 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
@@ -65,4 +65,4 @@
     position: relative;
     z-index: 1;
     top: -1em;
-}
+}
diff --git 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;
+}
diff --git 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";