Merge branch 'components/vote-choice' into 'styles'

Finalisation composant de vote

See merge request framasoft/framadate/funky-framadate-front!10

src/app/vote-choice/vote-choice.component.html

@@ -1,14 +1,31 @@
-<div class="choicebox choicebox--active">
+<div class="choicebox"><!-- add .choicebox--active to most voted -->
-    <div class="choicebox__time">
+
+    <div class="choicebox__subject">
+
+        <!-- TEXT CASE --><!--
+        <p class="choicebox__txt">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
+        </p>
+        --><!-- TEXT CASE -->
+
+        <!-- IMG CASE --><!--
+        <img class="choicebox__img" src="https://picsum.photos/200" alt="">
+        --><!-- IMG CASE -->
+
+        <!-- DATE CASE  -->
         <div class="choicebox__date" *ngIf="choice.date">
             {{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
         </div>
         <div class="choicebox__hour">
             08:00
         </div>
+        <!-- DATE CASE -->
+
     </div>
+
     <div class="choicebox__actions">
         <!-- show only the yes check if the config is set to simpleAnswer -->
+        <!-- add .choicebox__btn--active to selected <button> -->
         <button class="choicebox__btn choicebox__btn--yes" type="button">
             <img src="../../assets/img/check.svg" (click)="setAnswserTo('yes')" alt="">
         </button>
@@ -19,6 +36,7 @@
             <img src="../../assets/img/croix.svg" (click)="setAnswserTo('no')" alt="" *ngIf="!choice.simpleAnswer">
         </button>
     </div>
+
     <div class="choicebox__count">
         <button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes">
             <div class="choicebox__vote">

src/app/vote-choice/vote-choice.component.scss

@@ -18,6 +18,7 @@ $btn-size              : 5rem;
 $btn-margin-x          : 1rem;
 $btn-margin-y          : 1.5rem;
 $btn-wrap-size         : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
+$img-maxheight         : 12rem;
 $breakpoint-responsive : 640px; // à définir
 
 
@@ -28,6 +29,7 @@ $breakpoint-responsive : 640px; // à définir
 .choicebox {
     position: relative;
     min-width: 32rem;
+    min-height: 16rem;
     padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
     border-left: $box-border-width solid transparent;
     background-color: $white;
@@ -41,27 +43,27 @@ $breakpoint-responsive : 640px; // à définir
         display: flex;
         align-items: center;
         justify-content: space-between;
+        min-height: auto;
     }
 
 }
 
+.choicebox__subject {
+    margin-bottom: 3rem;
+    padding-right: $btn-wrap-size;
+    @media (min-width: $breakpoint-responsive) {
+        margin-bottom: 0;
+        padding-right: 0;
+    }
+}
+
 
 
 // -- 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;
-    }
-}
-
 .choicebox__date {
+    font-size: 1.8rem;
     margin-bottom: .5rem;
     white-space: nowrap;
     text-transform: capitalize;
@@ -78,6 +80,26 @@ $breakpoint-responsive : 640px; // à définir
 
 
 
+// -- IMG
+// ----------------------------
+
+.choicebox__img {
+    max-width: 100%;
+    max-height: $img-maxheight;
+}
+
+
+
+// -- TXT
+// ----------------------------
+
+.choicebox__txt {
+    margin: 0;
+    font-size: 1.8rem;
+}
+
+
+
 // -- VOTE BTNS
 // ----------------------------
 
@@ -96,6 +118,7 @@ $breakpoint-responsive : 640px; // à définir
         max-width: none;
         flex-flow: row nowrap;
         transform: none;
+        margin: 0 1.5rem;
     }
 }
 
@@ -107,6 +130,7 @@ $breakpoint-responsive : 640px; // à définir
     justify-content: center;
     margin: $btn-margin-y $btn-margin-x;
     border: .1rem solid $primary_color;
+    background-color: transparent;
     border-radius: 50%;
 
     @media (min-width: $breakpoint-responsive) {
@@ -145,6 +169,7 @@ $breakpoint-responsive : 640px; // à définir
     position: relative;
     padding-right: $btn-wrap-size;
     @media (min-width: $breakpoint-responsive) {
+        flex-shrink: 0;
         text-align: right;
         padding-right: 0;
     }
@@ -154,6 +179,7 @@ $breakpoint-responsive : 640px; // à définir
     border: 0;
     padding: 0;
     line-height: normal;
+    background-color: transparent;
     @media (min-width: $breakpoint-responsive) {
         padding: 1.5rem;
         &:focus,
@@ -240,8 +266,8 @@ $breakpoint-responsive : 640px; // à définir
         padding-left: 3rem;
     }
     ul {
-        max-height: 15rem;
+        max-height: 11rem;
-        overflow: scroll;
+        overflow: auto;
     }
 }