diff --git a/changelog/_7864.md b/changelog/_7864.md new file mode 100644 index 0000000000..61d878ed16 --- /dev/null +++ b/changelog/_7864.md @@ -0,0 +1,8 @@ +## Changed +- redesign rating and comments + +## Added +- Bootstrap support for modals and dropdown due to dependencies with a4 + +## Removed +- `assets/scss/components/rating.scss` \ No newline at end of file diff --git a/meinberlin/assets/scss/components/_rating.scss b/meinberlin/assets/scss/components/_rating.scss deleted file mode 100644 index 55f7cee7ba..0000000000 --- a/meinberlin/assets/scss/components/_rating.scss +++ /dev/null @@ -1,74 +0,0 @@ -.rating-bar { - display: inline-block; - margin: 0; - padding: 0; - - li { - display: inline-block; - } -} - -.rating-button { - border: 1px solid $border-color; - font-weight: normal; - padding: 0 0.4em; - - &.is-read-only, - &:disabled { - cursor: default; - } - - &:first-child { - margin-right: 0.5 * $spacer; - } -} - -@mixin rating-button($color) { - color: $color; - padding: 0.5 * $padding $padding; - border-radius: 0.3em; - - &:hover, - &:focus { - background: $color; - border-color: $color; - color: $text-color-inverted; - } - - &.is-selected { - background-color: $color; - border-color: $color; - color: $text-color-inverted; - } - - i { - margin-right: 0.4 * $spacer; - } - - &.is-read-only, - &:disabled { - color: $color; - background: none; - border: 0; - } - - &.is-selected.is-archived, - &.is-archived { - border-color: $border-color; - color: $gray-lighter; - background: unset; - - &:hover, - &:focus { - cursor: default; - } - } -} - -.rating-up { - @include rating-button($success); -} - -.rating-down { - @include rating-button($danger); -} diff --git a/meinberlin/assets/scss/components_user_facing/_a4-comments.scss b/meinberlin/assets/scss/components_user_facing/_a4-comments.scss index 475d8b7fc7..b837687d63 100644 --- a/meinberlin/assets/scss/components_user_facing/_a4-comments.scss +++ b/meinberlin/assets/scss/components_user_facing/_a4-comments.scss @@ -1,94 +1,234 @@ +.a4-comments { + @mixin pseudo-border { + content: ""; + display: block; + border-bottom: 1px solid $border-color; + margin-left: 12px; + margin-right: 12px; + } + + > li { + margin-bottom: 0; + + &:after { + @include pseudo-border; + } + + &:first-child:before { + @include pseudo-border; + } + } + + @media screen, (max-width: $breakpoint) { + width: calc(100% + 24px); + margin-left: -12px; + margin-right: -12px; + } +} + +.a4-comments__box { + padding-top: $em-spacer; + + .row { + position: relative; + } + + @media screen, (max-width: $breakpoint) { + padding-left: 12px; + padding-right: 12px; + } +} + .a4-comments__commentbox__title-comments { - display: none; + display: none; } .a4-comments__commentbox__subtitle { - margin-top: 2 * $spacer; - margin-bottom: 0.5 * $spacer; + margin-top: 2 * $spacer; + margin-bottom: 0.5 * $spacer; } .a4-comments__anchor { - display: block; - position: relative; - top: -100px; - visibility: hidden; - height: 1px; + display: block; + position: relative; + top: -100px; + visibility: hidden; + height: 1px; } .a4-comments__submit-input { - @extend .button; - @extend .button--fullwidth-palm; + @extend .button; + @extend .button--fullwidth-palm; } .a4-comments__cancel-edit-input { - @extend .button; - @extend .button--light; + @extend .button; + @extend .button--light; - @media screen and (max-width: $breakpoint-palm) { - margin-bottom: 0 !important; - } + @media screen and (max-width: $breakpoint-palm) { + margin-bottom: 0 !important; + } } .a4-comments__comment-form__heading-comments-allowed { - @extend h2; - margin-bottom: 0.75 * $spacer; + @extend h2; + margin-bottom: 0.75 * $spacer; } .a4-comments__comment-form__actions { - @extend .form-actions; - margin-top: 0.25 * $spacer; + @extend .form-actions; + margin-top: 0.25 * $spacer; } .a4-comments__comment-form__actions__left { - @extend .form-actions__left; + @extend .form-actions__left; - @media screen and (max-width: $breakpoint-palm) { - margin-bottom: 0 !important; - } + @media screen and (max-width: $breakpoint-palm) { + margin-bottom: 0 !important; + } } .a4-comments__comment-form__actions__right { - @extend .form-actions__right; + @extend .form-actions__right; - @media screen and (max-width: $breakpoint-palm) { - margin-top: 0 !important; - margin-bottom: 0 !important; - } + @media screen and (max-width: $breakpoint-palm) { + margin-top: 0 !important; + margin-bottom: 0 !important; + } } .a4-comments__comment-form__form { - @extend .panel--heavy; - margin-bottom: $spacer; + @extend .panel--heavy; + margin-bottom: $spacer; - .form-group { - margin-bottom: 0; - } + .form-group { + margin-bottom: 0; + } +} - .a4-comments__char-count { +.a4-comments__char-count { @extend .formgroup__help; color: var(--color-black); margin-top: 0.25 * $spacer; +} + +.a4-comments__comment-control-bar { + @extend .panel--heavy; + + .form-group--inline { + @extend .fullspace; + } + + margin-bottom: $spacer * 1.8; + + @media screen and (max-width: $breakpoint-palm) { + .form-group { + margin-bottom: 0 !important; + } + } - .a4-comments__char-count-word { - display: none; + .a4-control-bar__sorting .form-group { + margin-bottom: 0.8 * $spacer; } - } } -.a4-comments__comment-control-bar { - @extend .panel--heavy; +.a4-comments__author { + font-weight: bold !important; + display: inline; + margin-right: 0.5 * $spacer; +} - .form-group--inline { - @extend .fullspace; - } +.a4-comments__deleted-author { + font-weight: bold; +} - @media screen and (max-width: $breakpoint-palm) { - .form-group { - margin-bottom: 0 !important; +.a4-comments__moderator { + color: $purple; + font-size: 13px; + font-weight: bold; +} + +.a4-comments__submission-date { + display: block; +} + +.a4-comments__text { + margin-top: $spacer; +} + +.a4-comments__action { + margin-left: 12px; +} + +.a4-comments__action-bar-container { + display: inline-flex; + max-width: 100%; + padding: $em-spacer 0 1.5em 0; + overflow-x: scroll; + scrollbar-width: none; + + @media screen and (min-width: $breakpoint) { + display: flex; + align-items: baseline; + justify-content: space-between; + margin-left: 0; } - } +} + +.a4-comments__action-bar { + white-space: nowrap; +} + +.a4-comments__action-bar__btn { + margin-right: $spacer; + + .fa, + .far, + .fas { + color: $link-color; // overwrite icons default color + } +} + +.a4-comments__login { + padding: $em-spacer; +} - .a4-control-bar__sorting .form-group { - margin-bottom: 0.8 * $spacer; - } +.a4-comments__alert { + padding: $em-spacer; + background-color: $message-light-yellow; } + +.a4-comments__child--list { + margin-left: 2.5em; + padding-right: 12px; + margin-right: 0; + + .a4-comments__box { + padding-right: 12px; + } + + .a4-comments__comment-form__heading-comments-allowed { + margin-top: $spacer * 1.8; + } + + form { + padding-top: $spacer; + border-top: solid 1px $gray-lightest; + } + + &__text { + margin-top: $spacer; + } + + &__box { + padding-top: 0; + } + + &__comment { + margin-top: $spacer; + } + + @media screen and (min-width: $breakpoint) { + margin-left: $spacer * 5; + } +} \ No newline at end of file diff --git a/meinberlin/assets/scss/components_user_facing/_a4-modal.scss b/meinberlin/assets/scss/components_user_facing/_a4-modal.scss new file mode 100644 index 0000000000..53300e9980 --- /dev/null +++ b/meinberlin/assets/scss/components_user_facing/_a4-modal.scss @@ -0,0 +1 @@ +@import "~bootstrap/scss/modal"; // needed for a4-comments \ No newline at end of file diff --git a/meinberlin/assets/scss/components_user_facing/_dropdown.scss b/meinberlin/assets/scss/components_user_facing/_dropdown.scss index f52962be8b..60d137687e 100644 --- a/meinberlin/assets/scss/components_user_facing/_dropdown.scss +++ b/meinberlin/assets/scss/components_user_facing/_dropdown.scss @@ -1,9 +1,9 @@ +@import "~bootstrap/scss/dropdown"; // import needed for a4-comments bootstrap dropdown, overwrites below + .dropdown { @extend .content-language-select; position: relative; -} -.dropdown__toggle { i { font-size: 1.25em; } @@ -14,6 +14,7 @@ a { margin-bottom: 0; + color: $link-color; } .button { @@ -21,7 +22,11 @@ } button { - padding-right: 0!important; + padding-right: 0 !important; + } + + &:last-child { + margin-bottom: 0 !important; } } @@ -30,12 +35,13 @@ color: var(--color-white); } - > .dropdown .button { + >.dropdown .button { width: 100%; } // copied styles - @media print, (width <= 73.8125rem) { + @media print, + (width <=73.8125rem) { margin-left: -12px; margin-right: -12px; width: auto; @@ -56,11 +62,11 @@ white-space: nowrap; border: 1px solid $border-color; background-color: var(--color-white); - box-shadow: 0 0 5px rgba(100,100,100,.5); + box-shadow: 0 0 5px rgba(100, 100, 100, .5); h2 { font-size: 1.1em; - margin-bottom: 0.5em!important; + margin-bottom: 0.5em !important; } ul { @@ -75,3 +81,41 @@ .dropdown--open .dropdown__menu { display: flex; } + +// a4-comments dropdown - bootstrap overwrites +.a4-comments__dropdown { + .dropdown-toggle { + position: absolute; + top: -40px; + } + + .dropdown-menu { + --bs-dropdown-min-width: 0; // Bootstrap custom property overwrite + + padding: $spacer; + white-space: nowrap; + border: 1px solid $border-color; + border-radius: 0; + background-color: var(--color-white); + box-shadow: 0 0 5px rgba(100, 100, 100, .5); + } + + .dropdown-item { + color: $link-color; + padding: 0; + margin-bottom: 0.3em; + + &:hover { + background-color: transparent; + text-decoration: underline; + } + + button { + padding: 0; + } + + &:last-child { + margin-bottom: 0 !important; + } + } +} \ No newline at end of file diff --git a/meinberlin/assets/scss/components/_item_detail.scss b/meinberlin/assets/scss/components_user_facing/_item_detail.scss similarity index 100% rename from meinberlin/assets/scss/components/_item_detail.scss rename to meinberlin/assets/scss/components_user_facing/_item_detail.scss diff --git a/meinberlin/assets/scss/components_user_facing/_rating.scss b/meinberlin/assets/scss/components_user_facing/_rating.scss new file mode 100644 index 0000000000..2e6a3adca1 --- /dev/null +++ b/meinberlin/assets/scss/components_user_facing/_rating.scss @@ -0,0 +1,28 @@ +.rating { + display: inline-block; + white-space: nowrap; +} + +.rating__label { + word-break: normal; + margin-left: 0.4em; +} + +.rating-button { + color: $link-color; + margin-right: 1em; + + i { + margin-right: 0.4em; + } + + .fa-chevron-up:before { + content:"\f164"!important; // thumbs-up icon + font-weight: 400; + } + + .fa-chevron-down:before { + content:"\f165"!important; // thumbs-down icon + font-weight: 400; + } +} \ No newline at end of file diff --git a/meinberlin/assets/scss/style_dashboard.scss b/meinberlin/assets/scss/style_dashboard.scss index 9cab071280..c5c1f92353 100644 --- a/meinberlin/assets/scss/style_dashboard.scss +++ b/meinberlin/assets/scss/style_dashboard.scss @@ -77,7 +77,6 @@ // @import "components/project_header"; @import "components/radio"; -@import "components/rating"; @import "components/select2"; @import "components/select-item"; @import "components/select_dropdown"; diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss index 7ffb9e773b..c57b898273 100644 --- a/meinberlin/assets/scss/style_user_facing.scss +++ b/meinberlin/assets/scss/style_user_facing.scss @@ -20,26 +20,30 @@ @import "styles_user_facing/form"; @import "styles_user_facing/utility"; -@import "components_user_facing/a4-comments"; -@import "components_user_facing/a4-select"; -@import "components_user_facing/a4-poll"; @import "components_user_facing/account"; @import "components_user_facing/alert"; @import "components_user_facing/button"; @import "components_user_facing/card"; @import "components_user_facing/control-bar"; -@import "components_user_facing/a4-control-bar-search"; @import "components_user_facing/dropdown"; @import "components_user_facing/follow"; @import "components_user_facing/herounit_image_with_aside"; @import "components_user_facing/input"; +@import "components_user_facing/item_detail"; @import "components_user_facing/moderator_feedback"; @import "components_user_facing/moderator_notes"; @import "components_user_facing/moderator_status"; @import "components_user_facing/nextprev"; @import "components_user_facing/phase_info"; @import "components_user_facing/pill"; +@import "components_user_facing/rating"; @import "components_user_facing/searchform-slot"; @import "components_user_facing/tabnavigation"; @import "components_user_facing/user_indicator"; +// a4 overwrites +@import "components_user_facing/a4-comments"; +@import "components_user_facing/a4-control-bar-search"; +@import "components_user_facing/a4-modal"; +@import "components_user_facing/a4-select"; +@import "components_user_facing/a4-poll"; \ No newline at end of file diff --git a/meinberlin/assets/scss/styles_user_facing/_utility.scss b/meinberlin/assets/scss/styles_user_facing/_utility.scss index a18479e08e..7d912907d2 100644 --- a/meinberlin/assets/scss/styles_user_facing/_utility.scss +++ b/meinberlin/assets/scss/styles_user_facing/_utility.scss @@ -10,7 +10,8 @@ } } -.is-hidden { +// needed for a4-comments +.d-none { display: none; } diff --git a/package.json b/package.json index a45e9ad127..9fcd94a2f2 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@react-leaflet/core": "^2.1.0", "@turf/turf": "^6.5.0", "acorn": "8.12.0", - "adhocracy4": "liqd/adhocracy4#69c811feb292cd2a2bfacdccd1a3ded61ed9e34a", + "adhocracy4": "liqd/adhocracy4#e10457d42e72d39d305c2579c5de5ce98f65be9c", "autoprefixer": "10.4.19", "bootstrap": "5.2.3", "copy-webpack-plugin": "12.0.2", diff --git a/requirements/base.txt b/requirements/base.txt index 8642042b73..d7641ee5c6 100644 --- a/requirements/base.txt +++ b/requirements/base.txt @@ -1,5 +1,5 @@ # A4 -git+https://github.com/liqd/adhocracy4.git@69c811feb292cd2a2bfacdccd1a3ded61ed9e34a#egg=adhocracy4 +git+https://github.com/liqd/adhocracy4.git@e10457d42e72d39d305c2579c5de5ce98f65be9c#egg=adhocracy4 # Additional requirements beautifulsoup4==4.11.2