Skip to content

Commit

Permalink
redesign poll module
Browse files Browse the repository at this point in the history
  • Loading branch information
@hom3mad3 @goapunk
hom3mad3 authored and goapunk committed Jun 27, 2024
1 parent 2123d49 commit 657d849
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 80 deletions.
6 changes: 6 additions & 0 deletions changelog/_8186.md
View file
Original file line number Diff line number Diff line change
@@ -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`
163 changes: 92 additions & 71 deletions meinberlin/assets/scss/components/_poll.scss → ...scss/components_user_facing/_a4-poll.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -64,33 +69,57 @@ $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;
left: 0;
border-radius: 0.3em;
z-index: -1;
width: 0;
min-width: 0.4em;
min-width: 0.2em;

transition: width 0.3s;

Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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;

}
}

Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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;
}
}
}
1 change: 0 additions & 1 deletion meinberlin/assets/scss/style_dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
@import "components/multiform";
@import "components_dashboard/pagination";

@import "components/poll";
@import "components/participation_tile";
@import "components/progress";

Expand Down
8 changes: 4 additions & 4 deletions meinberlin/assets/scss/style_user_facing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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";

8 changes: 4 additions & 4 deletions meinberlin/assets/scss/styles_user_facing/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,25 @@ $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;

$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;
Expand Down

0 comments on commit 657d849

Please sign in to comment.