diff --git a/src/app/vote-choice/vote-choice.component.html b/src/app/vote-choice/vote-choice.component.html index e4a30afd..b6ac1c0d 100644 --- a/src/app/vote-choice/vote-choice.component.html +++ b/src/app/vote-choice/vote-choice.component.html @@ -1,52 +1,67 @@ -
-
-
-
- {{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.date | date:'EEE'}} {{choice.date | date:'dd'}} {{choice.date | date:'LLL'}}
-
- -

{{choice.votesCount.yes}}

- - -

{{choice.votesCount.maybe}}

- +
+ 08:00
-
- - - - -
-
-
+
+ + + + +
+
+ +
+ 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..9e520d3b 100644 --- a/src/app/vote-choice/vote-choice.component.scss +++ b/src/app/vote-choice/vote-choice.component.scss @@ -1,67 +1,262 @@ -.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 0 .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; + z-index: 1; + 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 { + 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; - float: left; + & + .choicebox__vote { + margin-left: 1.5rem; + } +} +.choicebox__countxt { + display: none; + margin-top: .5rem; + .choicebox--active & { + display: block; + @media (min-width: $breakpoint-responsive) { + display: none; + } + } } -.nombre_vote span{ - display: flex; - align-items: center; + + + +// -- 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; + } + } } -// TODO intricate selectors -.nombre_vote p { - font-weight: normal; - font-size: 16px; + +.choicebox__tooltiplist { + & + .choicebox__tooltiplist { + padding-left: 3rem; + } + ul { + max-height: 15rem; + overflow: scroll; + } } -.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__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; + } + } } 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; } +