From 6fc288219d168e72ada9e9d6b53ea4c19981e8ca Mon Sep 17 00:00:00 2001
From: Kylart <garnier@et.esiea.fr>
Date: Tue, 11 Jul 2017 10:47:14 +0200
Subject: [PATCH] Seasons seem ok

---
 css/app.styl      |   7 +-
 pages/seasons.vue | 247 ++++++++++++++++++++++------------------------
 2 files changed, 124 insertions(+), 130 deletions(-)

diff --git a/css/app.styl b/css/app.styl
index 7f873a6..c01e071 100644
--- a/css/app.styl
+++ b/css/app.styl
@@ -49,4 +49,9 @@ $inputColor := #7f90ab
 //  background-color: $inputColor
 
 #title a.list__tile
-  height: 60px
\ No newline at end of file
+  height: 60px
+
+
+div.tabs__items
+  border-width: 0
+  border-style: none
\ No newline at end of file
diff --git a/pages/seasons.vue b/pages/seasons.vue
index bbd6945..56b3cfe 100644
--- a/pages/seasons.vue
+++ b/pages/seasons.vue
@@ -1,11 +1,10 @@
 <template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
-  <v-container fluid>
+  <div style="min-height: 95vh">
     <loader v-if="!season[1].items"></loader>
 
-    <v-container fluid v-else>
-      <v-row class="form-container">
-        <v-col md1 xs0></v-col>
-        <v-col md3 xs12 class="season-container">
+    <v-container fluid v-else style="padding: 20px 0 0">
+      <v-layout row wrap justify-center class="form-container">
+        <v-flex sm3 xs8 class="season-container">
           <v-select
               v-bind:items="seasonChoices"
               v-model="$store.state.season"
@@ -13,139 +12,139 @@
               dark
               item-text="name"
               item-value="value"/>
-        </v-col>
-        <v-col md3 xs12 class="year-container">
+        </v-flex>
+        <v-flex offset-sm1 sm3 xs8 class="year-container">
           <v-text-field name="input-year"
                         type="number" min="2010"
                         label="Year"
                         v-model="$store.state.year"
                         dark>
           </v-text-field>
-        </v-col>
-        <v-col md4 xs12 class="refresh-button">
+        </v-flex>
+        <v-flex offset-sm1 sm2 xs8 class="refresh-button">
           <v-btn secondary block dark @click.native="refreshSeason()">Refresh</v-btn>
-        </v-col>
-        <v-col md1 xs0></v-col>
-      </v-row>
+        </v-flex>
+      </v-layout>
 
-      <v-tabs id="tabs" grow>
-        <v-tab-item v-for="i in 3"
-                    :href="'#' + i"
-                    :key="i"
-                    slot="activators">
-          {{ season[i].name }}
-        </v-tab-item>
-        <v-tab-content v-for="i in 3"
-                       v-bind:id="`${i}`"
-                       :key="i"
-                       slot="content">
-          <v-card>
-            <v-text-field class="query"
-                          v-model="query"
-                          label="Search entry" dark>
-            </v-text-field>
-            <v-row class="elems">
-              <transition-group name="list">
-                <v-col md6 xs12 v-for="item in computedSeason[i].items"
-                       style="display: inline-block"
-                       :key="item.key">
-                <v-row class="elem elevation-3" v-ripple="true">
+      <v-tabs id="tabs" dark fixed centered>
+        <v-tabs-bar slot="activators" class="mablue">
+          <v-tabs-slider class="primary"></v-tabs-slider>
+          <v-tabs-item v-for="i in 3"
+                       :href="'#' + i"
+                       :key="i">
+            {{ season[i].name }}
+          </v-tabs-item>
+        </v-tabs-bar>
+        <v-tabs-content v-for="i in 3"
+                        v-bind:id="`${i}`"
+                        :key="i">
+          <v-text-field class="query"
+                        v-model="query"
+                        label="Search entry" dark>
+          </v-text-field>
+          <v-layout row wrap class="elems">
+            <transition-group name="list">
+              <v-flex md6 xs12 v-for="item in computedSeason[i].items"
+                      style="display: inline-block"
+                      :key="item.key">
+                <v-layout row wrap class="elem elevation-3" v-ripple="true">
                   <!-- Header of elem -->
-                  <v-col xs12 v-tooltip:bottom="{ html: item.title }">
+                  <v-flex xs12 v-tooltip:bottom="{ html: item.title }">
                     <h6 class="title ellipsis">
                       {{ item.title }}
                     </h6>
-                  </v-col>
-                  <v-col xs9 v-tooltip:bottom="{ html: item.genres.join(' ') }">
+                  </v-flex>
+                  <v-flex xs8 v-tooltip:bottom="{ html: item.genres.join(' ') }">
                     <p class="genres ellipsis">{{ item.genres.join(' ') }}</p>
-                  </v-col>
-                  <v-col xs3 v-tooltip:bottom="{ html: item.fromType }">
+                  </v-flex>
+                  <v-flex xs3 v-tooltip:bottom="{ html: item.fromType }">
                     <p class="from-type ellipsis">
                       {{ item.fromType }}
                     </p>
-                  </v-col>
+                  </v-flex>
+                  <v-flex xs1></v-flex>
                   <!-- Picture of elem -->
-                  <v-col xs4 class="image-container">
-                    <div class="image">
-                      <img :src="item.picture" height="220" max-width="170"/>
-                    </div>
-                  </v-col>
-                  <v-col xs8 class="bottom-right">
-                    <v-row>
-                      <v-col xs12 class="synopsis">
-                        {{ reduced(item.synopsis) }}
-                      </v-col>
-                      <v-col xs7 class="date">{{ getDate(item.releaseDate) }}</v-col>
-                      <v-col xs5 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-col>
-                      <v-col xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-col>
-                      <v-col xs4 class="dropdown-container">
-                        <v-menu transition="v-slide-x-transition">
-                          <v-btn flat dark slot="activator">
-                            More
-                          </v-btn>
-                          <v-list>
-                            <v-list-item>
-                              <v-list-tile v-on:click.native="openModal(item.title, item.synopsis)">
-                                <v-list-tile-action>
-                                  <v-icon>more</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>
-                                  Check synopsis
-                                </v-list-tile-title>
-                              </v-list-tile>
-                            </v-list-item>
-                            <v-list-item>
-                              <v-list-tile>
-                                <v-list-tile-action>
-                                  <v-icon>info_outline</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>Information</v-list-tile-title>
-                              </v-list-tile>
-                            </v-list-item>
-                            <v-list-item>
-                              <v-list-tile @click.native="showChoices(item.title)">
-                                <v-list-tile-action>
-                                  <v-icon>add_box</v-icon>
-                                </v-list-tile-action>
-                                <v-list-tile-title>
-                                  Add to
-                                </v-list-tile-title>
-                              </v-list-tile>
-                            </v-list-item>
-                          </v-list>
-                        </v-menu>
-                      </v-col>
-                    </v-row>
-                  </v-col>
-                </v-row>
-              </v-col>
-              </transition-group>
-            </v-row>
-          </v-card>
-        </v-tab-content>
+                  <v-flex xs4 class="image-container">
+                    <img :src="item.picture" class="image"/>
+                  </v-flex>
+                  <v-flex xs8 class="bottom-right">
+                    <v-layout wrap justify-space-between align-center>
+                      <v-flex xs12>
+                        <div class="synopsis">
+                          {{ reduced(item.synopsis) }}
+                        </div>
+                      </v-flex>
+                      <v-flex xs12>
+                        <v-layout wrap justify-space-between>
+                          <v-flex xs3 class="date">{{ getDate(item.releaseDate) }}</v-flex>
+                          <v-flex xs4 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-flex>
+                        </v-layout>
+                        <v-layout wrap justify-space-between>
+                          <v-flex xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-flex>
+                          <v-flex xs4 class="dropdown-container">
+                            <v-menu open-on-hover
+                                    transition="slide-x-transition">
+                              <v-btn flat dark slot="activator">
+                                More
+                              </v-btn>
+                              <v-list>
+                                <v-list-tile v-on:click.native="openModal(item.title, item.synopsis)">
+                                  <v-list-tile-action>
+                                    <v-icon>more</v-icon>
+                                  </v-list-tile-action>
+                                  <v-list-tile-title>
+                                    Check synopsis
+                                  </v-list-tile-title>
+                                </v-list-tile>
+                                <v-list-tile>
+                                  <v-list-tile-action>
+                                    <v-icon>info_outline</v-icon>
+                                  </v-list-tile-action>
+                                  <v-list-tile-title>Information</v-list-tile-title>
+                                </v-list-tile>
+                                <v-list-tile @click.native="showChoices(item.title)">
+                                  <v-list-tile-action>
+                                    <v-icon>add_box</v-icon>
+                                  </v-list-tile-action>
+                                  <v-list-tile-title>
+                                    Add to
+                                  </v-list-tile-title>
+                                </v-list-tile>
+                              </v-list>
+                            </v-menu>
+                          </v-flex>
+                        </v-layout>
+                      </v-flex>
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
+              </v-flex>
+            </transition-group>
+          </v-layout>
+        </v-tabs-content>
       </v-tabs>
       <div class="text-xs-center modal-container">
         <v-dialog v-model="modal" width="70%">
           <v-card class="secondary white--text">
             <v-card-text class="white--text">
-              <h2 class="title">{{ modalTitle }}</h2>
+              <h2 class="headline white--text">{{ modalTitle }}</h2>
             </v-card-text>
-            <v-card-text class="subheading white--text">
+            <v-card-text class="text white--text">
               {{ modalText }}
             </v-card-text>
-            <v-card-row actions>
+            <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn primary dark
+              <v-btn class="blue--text darken-1" flat
                      style="width: 100px"
                      v-on:click.native="modal = false">Thanks!
               </v-btn>
-            </v-card-row>
+            </v-card-actions>
           </v-card>
         </v-dialog>
       </div>
       <choice-window :entry="choiceTitle"></choice-window>
     </v-container>
-  </v-container>
+  </div>
 </template>
 
 <script>
@@ -260,29 +259,12 @@
     margin: 0;
   }
 
-    /* ----------- FORM ---------- */
-  .form-container
+  .text
   {
-    padding-top: 1.5%;
-    padding-left: 50px;
-    padding-right: 0;
-  }
-
-  .year-container
-  {
-    padding-left: 2.5%;
-  }
-
-  .season-container
-  {
-    padding-right: 1.5%;
-  }
-
-  .refresh-button
-  {
-    padding-top: 1%;
-    padding-left: 6%;
-    padding-right: 3%;
+    text-align: justify;
+    text-align-last: center;
+    padding: 20px;
+    font-size: 16px;
   }
 
   .query
@@ -344,17 +326,19 @@
   .image-container
   {
     padding: 0;
+    max-height: 220px;
   }
 
   .image
   {
-    height: 220px;
-    max-width: 170px;
+    max-height: 220px;
+    max-width: 100%;
   }
 
   .bottom-right
   {
     position: relative;
+    display: flex;
   }
 
   .synopsis
@@ -362,7 +346,12 @@
     padding-left: 15px;
     padding-right: 15px;
     text-align: justify;
-    min-height: 130px;
+    display: block;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    overflow: hidden;
+    height: 7.5em;
+    line-height: 1.5em;
   }
 
   .date