From 657d849c1b3c37cf114d9ffd67e7a28d040437b1 Mon Sep 17 00:00:00 2001 From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com> Date: Wed, 19 Jun 2024 16:33:53 +0200 Subject: [PATCH] redesign poll module --- changelog/_8186.md | 6 + .../_a4-poll.scss} | 163 ++++++++++-------- meinberlin/assets/scss/style_dashboard.scss | 1 - meinberlin/assets/scss/style_user_facing.scss | 8 +- .../scss/styles_user_facing/_variables.scss | 8 +- 5 files changed, 106 insertions(+), 80 deletions(-) create mode 100644 changelog/_8186.md rename meinberlin/assets/scss/{components/_poll.scss => components_user_facing/_a4-poll.scss} (66%) diff --git a/changelog/_8186.md b/changelog/_8186.md new file mode 100644 index 0000000000..ea85774359 --- /dev/null +++ b/changelog/_8186.md @@ -0,0 +1,6 @@ +## Changed + +- redesigned poll module +- moved and renamed `components/poll.scss` to `meinberlin/assets/scss/components_user_facing/_a4-poll.scss` +- updated `styles_user_facing/_variables.scss` +- removed `components/radio.scss` from `styles_user_facing.scss` \ No newline at end of file diff --git a/meinberlin/assets/scss/components/_poll.scss b/meinberlin/assets/scss/components_user_facing/_a4-poll.scss similarity index 66% rename from meinberlin/assets/scss/components/_poll.scss rename to meinberlin/assets/scss/components_user_facing/_a4-poll.scss index 76ce48ee4a..f690715490 100644 --- a/meinberlin/assets/scss/components/_poll.scss +++ b/meinberlin/assets/scss/components_user_facing/_a4-poll.scss @@ -1,58 +1,63 @@ -// standard size from radio.scss -$checkbox-size: 20px; - .pollquestionlist-container { - border: 1px solid $border-color; + border: none; + background-color: $bg-secondary; + padding: 18px; + padding-bottom: 0; - .alert--success { - margin: 0 1.5 * $spacer; + form { + margin: 0; + padding: 0; } } .poll { - padding: 1.5 * $spacer; - background-color: $body-bg; - h2 { + font-size: 1.0625em; margin-top: 0; } } -// PollQuestion/s +.poll:last-of-type { + padding: 1rem 0; +} + +.poll--question { + border-bottom: 1px solid $border-color; +} + +.poll--result { + border-bottom: 1px solid $border-color; + padding: 1em 0; + + &:first-child { + padding-top: 0; + } +} + +.poll__rows { + .a4-muted { + font-size: $font-size-sm; + color: $text-color-gray; + } +} + .poll-row { display: flex; position: relative; z-index: 1; - padding: 0.2 * $spacer 0; margin-bottom: 0.5 * $spacer; + font-weight: normal; &--answered { left: 2 * $spacer; } - - // FIXME - .form-control { - margin-left: $checkbox-size + 7px !important; - margin-top: 0.5 * $spacer; - width: auto; - } -} - -.poll-row.radio { - flex-direction: column; -} - -.poll__rows { - display: flex; - flex-direction: column; - padding-bottom: $spacer; - border-bottom: 1px solid $border-color; } .poll__char-counter { align-self: flex-end; font-size: $font-size-xs; color: $text-color-gray; + padding-bottom: 1em; } .poll__actions > :last-child { @@ -64,25 +69,49 @@ $checkbox-size: 20px; } } +.poll-row .radio { + @extend .form-check; + @extend .form-check-inline; +} + +.poll-row__radio { + @extend .form-check-input; +} + .poll-row__number, .poll-row__label, .poll-row__radio { - display: inline-block; - margin: 0; - margin-right: 0.2 * $spacer; + @extend .form-check-label; } .poll-row__container { position: relative; +} + +.poll__btn--wrapper { + display: flex; + flex-direction: row-reverse; +} + +.poll__btn--link { + margin-right: $spacer; - .poll__btn--link { - margin: 0.1 * $spacer 0 0.6 * $spacer 0; // corrects spaceing for other answers + color: $link-color; + cursor: pointer; + + &:hover, + &:focus { + text-decoration: underline; } } -// RESULTS +.poll__btn--dark { + @extend .button; + @extend .button--fullwidth-palm; +} + .poll-row__bar { - background-color: $bg-secondary; + background-color: $icon-light-grey; position: absolute; top: 0; bottom: 0; @@ -90,7 +119,7 @@ $checkbox-size: 20px; border-radius: 0.3em; z-index: -1; width: 0; - min-width: 0.4em; + min-width: 0.2em; transition: width 0.3s; @@ -101,19 +130,14 @@ $checkbox-size: 20px; max-width: 96%; } } - - @media print { - border: 1px solid $border-color; - } } -.poll-row > .poll__highlight { - background-color: $primary-tint; +.poll__highlight { + background-color: $message-light-green; } .poll-row__chosen { - font-size: $font-size-lg; - color: $gray-lighter; + color: $primary; position: absolute; top: 0.25 * $spacer; } @@ -128,18 +152,12 @@ $checkbox-size: 20px; margin: 0.5 * $spacer 0; } -.poll__btn--wrapper { - display: flex; - align-items: center; -} - -// EditPollQuestions/EditPollOpenQuestions - .editpoll__help-text, .poll__help-text { - color: $gray-lighter; + color: $text-color-gray; margin-top: -0.7 * $spacer; margin-bottom: 0.8 * $spacer; + font-size: 14px; } .editpoll__help-text { @@ -170,16 +188,17 @@ $checkbox-size: 20px; } // Open/Other answers - -.poll-slider__item { - padding: $spacer; +.poll-slider__container { + overflow: hidden; } .poll-slider__answer { + margin-bottom: 1.5 * $spacer; padding-bottom: 2 * $spacer; i { - color: $gray-lighter; + color: $primary; + } } @@ -188,34 +207,32 @@ $checkbox-size: 20px; font-size: $font-size-xs; color: $gray-lighter; position: absolute; - bottom: 1.75 * $spacer; // to allign with arrows - left: $spacer; + bottom: 1 * $spacer; // to align with arrows } .poll-slider { position: relative; - margin-bottom: $spacer; // slick overwrites - nested for specificity .slick-prev { left: revert !important; - right: 5 * $spacer !important; + right: 2 * $spacer !important; } .slick-next { - right: 1.5 * $spacer !important; + right: 0; } .slick-prev, .slick-next { position: absolute; - top: revert; bottom: 0; text-align: center; width: 40px; height: 40px; border-radius: 100%; - z-index: 1; // for when tile links overlap + z-index: 4; // for when tile links overlap + color: transparent; // this instead of 'visibility: hidden' to keep keyboard navigation &.slick-disabled { opacity: 0.25; @@ -225,21 +242,20 @@ $checkbox-size: 20px; } &:before { - color: $body-bg; + color: $text-color; opacity: 1; font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; - font-size: $font-size-xxl; - line-height: 1.6rem; + font-size: 1.2em; } } .slick-prev:before { - content: "\f104"; // angle-left + content: "\f053"; } .slick-next:before { - content: "\f105"; // angle-right + content: "\f054"; } // Ensure centermode works @@ -258,13 +274,18 @@ $checkbox-size: 20px; } @media (min-width: $breakpoint) { + .poll-slider__answer { + margin-bottom: 0; + } + .poll-slider__count--spaced { left: revert; - right: 8.5 * $spacer; + right: 5 * $spacer; + bottom: 1.5em; } .poll-slider__count { left: revert; right: 2 * $spacer; } -} +} \ No newline at end of file diff --git a/meinberlin/assets/scss/style_dashboard.scss b/meinberlin/assets/scss/style_dashboard.scss index 9b551638cc..9cab071280 100644 --- a/meinberlin/assets/scss/style_dashboard.scss +++ b/meinberlin/assets/scss/style_dashboard.scss @@ -72,7 +72,6 @@ @import "components/multiform"; @import "components_dashboard/pagination"; -@import "components/poll"; @import "components/participation_tile"; @import "components/progress"; diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss index b7f35e971d..bb6f9878d3 100644 --- a/meinberlin/assets/scss/style_user_facing.scss +++ b/meinberlin/assets/scss/style_user_facing.scss @@ -30,10 +30,8 @@ @import "components/maplist"; @import "components/module"; @import "components/multiform"; -@import "components/poll"; @import "components/participation_tile"; @import "components/progress"; -@import "components/radio"; @import "components/rating"; @import "components/select2"; @import "components/select-item"; @@ -54,6 +52,9 @@ @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/button"; @import "components_user_facing/card"; @@ -70,7 +71,6 @@ @import "components_user_facing/phase_info"; @import "components_user_facing/pill"; @import "components_user_facing/searchform-slot"; -@import "components_user_facing/a4-select"; @import "components_user_facing/tabnavigation"; @import "components_user_facing/user_indicator"; -@import "components_user_facing/a4-comments"; + diff --git a/meinberlin/assets/scss/styles_user_facing/_variables.scss b/meinberlin/assets/scss/styles_user_facing/_variables.scss index 6a92a419b1..ac2dea3192 100644 --- a/meinberlin/assets/scss/styles_user_facing/_variables.scss +++ b/meinberlin/assets/scss/styles_user_facing/_variables.scss @@ -14,11 +14,11 @@ $warning: #f49e00 !default; $danger: #a72b1e !default; $body-bg: #fff !default; -$bg-secondary: #f2f2f2 !default; +$bg-secondary: #f5f5f5 !default; // updated $bg-tertiary: #e6e6e6 !default; $text-color: #333 !default; $text-color-inverted: $body-bg !default; -$text-color-gray: #666; +$text-color-gray: #454545; $shadow: rgba(#000, 0.25) !default; $white-shadow: rgba(255, 255, 255, 0.8) !default; $blue-light: #bfd3ff !default; @@ -26,13 +26,13 @@ $blue-light: #bfd3ff !default; $print-black: #000 !default; $print-link: #005cb4 !default; -$link-color: $secondary !default; +$link-color: #0047d3 !default; $link-hover-color: $primary !default; $link-color-btn: $primary !default; $link-hover-color-btn: darken($link-color-btn, 15%) !default; -$border-color: #ccc !default; +$border-color: #ddd !default; $input-border-color: $border-color !default; $em-spacer: 1em !default;