From a176405dd492ca9941d5b02011436db0e3f2076e Mon Sep 17 00:00:00 2001 From: 22px <22px@tuta.io> Date: Thu, 17 Oct 2019 21:56:22 +0200 Subject: [PATCH 1/3] [front] global : increase main wrap size --- src/assets/scss/atoms/_main.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/assets/scss/atoms/_main.scss b/src/assets/scss/atoms/_main.scss index 527ff8df..b6b3032e 100644 --- a/src/assets/scss/atoms/_main.scss +++ b/src/assets/scss/atoms/_main.scss @@ -1,9 +1,11 @@ @charset "UTF-8"; main { - max-width: 320px; // to look like the styleguide, to remove when we will have full width views - width: 100%; - display: block; - margin: 0 auto; - padding: 0 2rem; + display: block; + width: 100%; + //max-width: 320px; // to look like the styleguide, to remove when we will have full width views + max-width: 800px; + margin: 0 auto; + padding: 0 2rem; } + From 3e29117ea62ee3025ed1e3ae8b328aa51197dc3e Mon Sep 17 00:00:00 2001 From: 22px <22px@tuta.io> Date: Thu, 17 Oct 2019 21:56:59 +0200 Subject: [PATCH 2/3] [front] component : vote choice --- .../vote-choice/vote-choice.component.html | 88 ++++---- .../vote-choice/vote-choice.component.scss | 211 +++++++++++++----- 2 files changed, 193 insertions(+), 106 deletions(-) diff --git a/src/app/vote-choice/vote-choice.component.html b/src/app/vote-choice/vote-choice.component.html index e4a30afd..aee7a1b8 100644 --- a/src/app/vote-choice/vote-choice.component.html +++ b/src/app/vote-choice/vote-choice.component.html @@ -1,52 +1,42 @@ -
-
-
-
- {{choice.date | date:'EEEE'}} -
-
- {{choice.date | date:'dd'}} -
-
- {{choice.date | date:'LLLL'}} -
-
- {{choice.date | date:'H:m'}} -
-
- {{choice.text}} -
-

{{choice.date | date:'EEEE'}} {{choice.date | date:'dd'}} {{choice.date | date:'LLLL'}}

-

08:00

-
-
- -

{{choice.votesCount.yes}}

- - -

{{choice.votesCount.maybe}}

- -
-
- - - - -
+
+
+
+ {{choice.date | date:'EEE'}} {{choice.date | date:'dd'}} {{choice.date | date:'LLL'}} +
+
+ 08:00 +
+
+ + + + +
+
+
+
+ {{choice.votesCount.yes}} + +
+
+ {{choice.votesCount.maybe}} + +
+
+
+ Choix ayant reçu le plus de votes +
+
+ +
+ +
\ No newline at end of file diff --git a/src/app/vote-choice/vote-choice.component.scss b/src/app/vote-choice/vote-choice.component.scss index a1303168..b28c4636 100644 --- a/src/app/vote-choice/vote-choice.component.scss +++ b/src/app/vote-choice/vote-choice.component.scss @@ -1,67 +1,164 @@ -.choice_container { - width: 320px; - height: 172px; - box-shadow: 0 3px 6px 0 rgba(black, 0.2); - overflow: auto; - display: flex; -align-items: center; -flex-direction: row; -} -.vote img{ - vertical-align: middle; - display: block; - margin-left: auto; - margin-right: auto; +// --------------------------------------------------------- +// -- VOTE CHOICE COMPONENT +// --------------------------------------------------------- + +// -- IMPORTS +// ---------------------------- + +@import "../../assets/scss/variables"; + + + +// -- VARIABLES +// ---------------------------- + +$box-padding: 2rem; +$box-border-width: .6rem; +$btn-size: 5rem; +$btn-margin-x: 1rem; +$btn-margin-y: 1.5rem; +$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x}); +$breakpoint-responsive: 640px; // à définir + + + +// -- GLOBAL +// ---------------------------- + +.choicebox { + position: relative; + min-width: 32rem; + padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width}); + border-left: $box-border-width solid transparent; + background-color: $white; + box-shadow: 0 .3rem .6rem 0 rgba($black, .2); + &--active { + padding-left: $box-padding; + border-left-color: $primary_color; + } + + @media (min-width: $breakpoint-responsive) { + display: flex; + align-items: center; + justify-content: space-between; + } } -h2, h3 { - font-weight: normal; + + +// -- DATE +// ---------------------------- + +.choicebox__time { + margin-bottom: 3rem; + padding-right: $btn-wrap-size; + font-size: 1.8rem; + + @media (min-width: $breakpoint-responsive) { + margin-bottom: 0; + padding-right: 0; + } } -span { +.choicebox__date { + margin-bottom: .5rem; + white-space: nowrap; + text-transform: capitalize; + + @media (min-width: $breakpoint-responsive) { + margin-bottom: 0; + } +} + +.choicebox__day { + font-size: 2.4rem; font-weight: bold; - font-size: 24px; } -.nombre_vote { + + +// -- VOTE BTNS +// ---------------------------- + +.choicebox__actions { + position: absolute; + display: flex; + max-width: $btn-wrap-size; + top: 50%; + right: $box-padding; + flex-flow: row-reverse wrap; + transform: translateY(-50%); + + @media (min-width: $breakpoint-responsive) { + position: static; + max-width: none; + flex-flow: row nowrap; + transform: none; + } +} + +.choicebox__btn { + display: flex; + width: $btn-size; + height: $btn-size; + align-items: center; + justify-content: center; + margin: $btn-margin-y $btn-margin-x; + border: .1rem solid $primary_color; + border-radius: 50%; + + @media (min-width: $breakpoint-responsive) { + margin-top: 0; + margin-bottom: 0; + } + + &:focus, + &:hover, + &:active { + border-color: #ccc9c9; + background-color: #f7f7f7; + } + + &--maybe { + position: relative; + top: calc( (#{$btn-size} + 2 * #{$btn-margin-y}) / 2 ); + @media (min-width: $breakpoint-responsive) { + top: auto; + left: auto; + } + } + + &--active { + border-width: .3rem; + border-color: #bf83c2; + } +} + + + +// -- VOTE COUNT +// ---------------------------- + +.choicebox__count { + padding-right: $btn-wrap-size; + + @media (min-width: $breakpoint-responsive) { + padding-right: 0; + } +} + +.choicebox__vote { + display: inline-block; vertical-align: middle; - float: left; + margin-right: 3rem; +} -} -.nombre_vote span{ - display: flex; - align-items: center; -} -// TODO intricate selectors -.nombre_vote p { - font-weight: normal; - font-size: 16px; -} -.vote{ - justify-content: flex-end; - align-items: flex-end; -} -.vote button{ -border: 1px solid #aeafb1;; -border-radius: 50%; -width:48px; -height: 48px; -display: flex; -align-items: center; -} -.vote button:hover{ - border-color: #807e7e; - transition:0,5s; -} -.vote button:focus{ - border:3px solid #bf83c2; - outline:0; -} -.nombre_vote img{ -/* vertical-align: middle; - display:inline;*/ - display: block; -width: 20px; -height: 20px; -} +.choicebox__countxt { + display: none; + margin-top: .5rem; + color: $primary_color; + .choicebox--active & { + display: block; + } +} \ No newline at end of file From 6ee9f742faa27b039785290660563bce998fe52b Mon Sep 17 00:00:00 2001 From: 22px <22px@tuta.io> Date: Wed, 23 Oct 2019 18:08:35 +0200 Subject: [PATCH 3/3] [front] component : vote choice --- .../vote-choice/vote-choice.component.html | 45 +++++-- .../vote-choice/vote-choice.component.scss | 122 ++++++++++++++++-- 2 files changed, 145 insertions(+), 22 deletions(-) diff --git a/src/app/vote-choice/vote-choice.component.html b/src/app/vote-choice/vote-choice.component.html index aee7a1b8..b6ac1c0d 100644 --- a/src/app/vote-choice/vote-choice.component.html +++ b/src/app/vote-choice/vote-choice.component.html @@ -1,5 +1,4 @@
-
{{choice.date | date:'EEE'}} {{choice.date | date:'dd'}} {{choice.date | date:'LLL'}} @@ -21,22 +20,48 @@
-
-
+
Choix ayant reçu le plus de votes
- - -
- -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/app/vote-choice/vote-choice.component.scss b/src/app/vote-choice/vote-choice.component.scss index b28c4636..9e520d3b 100644 --- a/src/app/vote-choice/vote-choice.component.scss +++ b/src/app/vote-choice/vote-choice.component.scss @@ -12,13 +12,13 @@ // -- VARIABLES // ---------------------------- -$box-padding: 2rem; -$box-border-width: .6rem; -$btn-size: 5rem; -$btn-margin-x: 1rem; -$btn-margin-y: 1.5rem; -$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x}); -$breakpoint-responsive: 640px; // à définir +$box-padding : 2rem; +$box-border-width : .6rem; +$btn-size : 5rem; +$btn-margin-x : 1rem; +$btn-margin-y : 1.5rem; +$btn-wrap-size : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x}); +$breakpoint-responsive : 640px; // à définir @@ -31,7 +31,7 @@ $breakpoint-responsive: 640px; // à définir padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width}); border-left: $box-border-width solid transparent; background-color: $white; - box-shadow: 0 .3rem .6rem 0 rgba($black, .2); + box-shadow: 0 0 .6rem 0 rgba($black, .2); &--active { padding-left: $box-padding; border-left-color: $primary_color; @@ -83,6 +83,7 @@ $breakpoint-responsive: 640px; // à définir .choicebox__actions { position: absolute; + z-index: 1; display: flex; max-width: $btn-wrap-size; top: 50%; @@ -141,24 +142,121 @@ $breakpoint-responsive: 640px; // à définir // ---------------------------- .choicebox__count { + position: relative; padding-right: $btn-wrap-size; - @media (min-width: $breakpoint-responsive) { + text-align: right; padding-right: 0; } } +.choicebox__votes { + border: 0; + padding: 0; + line-height: normal; + @media (min-width: $breakpoint-responsive) { + padding: 1.5rem; + &:focus, + &:hover, + &:active { + & .choicebox__tooltip { + display: flex; + } + } + } +} + .choicebox__vote { display: inline-block; vertical-align: middle; - margin-right: 3rem; + & + .choicebox__vote { + margin-left: 1.5rem; + } } .choicebox__countxt { display: none; margin-top: .5rem; - color: $primary_color; .choicebox--active & { display: block; + @media (min-width: $breakpoint-responsive) { + display: none; + } } -} \ No newline at end of file +} + + + +// -- TOOLTIP +// ---------------------------- + +.choicebox__tooltip { + display: none; + @media (min-width: $breakpoint-responsive) { + position: absolute; + min-width: 18rem; + font-weight: normal; + top: 5rem; + left: 50%; + z-index: 1; + padding: 2rem; + border: .1rem solid rgba($black, .1); + background-color: $white; + text-align: left; + transform: translateX(-50%); + &::after, + &::before { + position: absolute; + width: 0; + height: 0; + bottom: 100%; + left: 50%; + content: " "; + pointer-events: none; + border: solid transparent; + } + &::after { + margin-left: -1.5rem; + border-width: 1.5rem; + border-color: rgba($white, 0); + border-bottom-color: #fff; + } + &::before { + margin-left: -1.6rem; + border-width: 1.6rem; + border-color: rgba($black, 0); + border-bottom-color: rgba($black, .1); + } + ul { + margin: 0; + padding: 0; + list-style: none; + } + } +} + +.choicebox__tooltiplist { + & + .choicebox__tooltiplist { + padding-left: 3rem; + } + ul { + max-height: 15rem; + overflow: scroll; + } +} + +.choicebox__tooltipttl { + @media (min-width: $breakpoint-responsive) { + margin-bottom: 1rem; + font-size: 1.6rem; + font-weight: bold; + white-space: nowrap; + img { + margin-right: .5rem; + vertical-align: sub; + } + & ~ .choicebox__tooltipttl { + margin-top: 3rem; + } + } +}