From 5058d223383b27f06c46ee92191f14abea647e16 Mon Sep 17 00:00:00 2001
From: Kylart <garnier@et.esiea.fr>
Date: Mon, 10 Jul 2017 21:52:22 +0200
Subject: [PATCH] Default layout set up and infoModal updated to 0.13 (need
 design tho)

---
 components/infoModal.vue | 121 +++++++-------
 layouts/default.vue      | 335 +++++++++++++++++++++++++--------------
 nuxt.config.js           |   3 +-
 package.json             |   2 +-
 store/index.js           |   6 +-
 5 files changed, 279 insertions(+), 188 deletions(-)

diff --git a/components/infoModal.vue b/components/infoModal.vue
index 20f7a4b..2557f75 100644
--- a/components/infoModal.vue
+++ b/components/infoModal.vue
@@ -1,56 +1,51 @@
 <template>
-  <div class="modals text-xs-center">
-    <v-dialog v-model="searchShow" width="650" scrollable>
+  <div>
+    <v-dialog v-model="searchShow" width="650" lazy absolute>
       <v-btn icon slot="activator">
         <v-icon>search</v-icon>
       </v-btn>
       <v-card class="secondary">
-        <v-card-row>
-          <v-card-title>Which anime are you looking for?</v-card-title>
-        </v-card-row>
-        <v-card-row>
+          <v-card-title class="headline">Which anime are you looking for?</v-card-title>
           <v-card-text>
-            <v-row>
-              <v-col xs7 offset-xs2>
+            <v-layout wrap justify-center>
+              <v-flex xs6>
                 <v-text-field
                     name="search-name"
                     label="Anime name"
                     v-model="searchTerm"
                     dark
                 ></v-text-field>
-              </v-col>
-              <v-col xs12>
-                <v-row>
+              </v-flex>
+              <v-flex xs12>
+                <v-layout row wrap justify-center>
                   <template v-if="results.length"
                             v-for="item in results">
-                    <v-col xs3 class="elem"
+                    <v-flex xs3 class="elem"
                            @click.native="search(item.name)">
-                      <v-row class="elem-content elevation-3"
-                             @click.all="search(item.name)"
-                             v-ripple>
-                        <v-col xs12>
+                      <v-layout wrap justify-center
+                                class="elem-content elevation-3"
+                                @click.all="search(item.name)"
+                                ripple>
+                        <v-flex xs8>
                           <img :src="item.image_url" height="140" class="elem-picture">
-                        </v-col>
-                        <v-col xs12 class="elem-name">{{ item.name }}</v-col>
-                      </v-row>
-                    </v-col>
+                        </v-flex>
+                        <v-flex xs10 class="elem-name">{{ item.name }}</v-flex>
+                      </v-layout>
+                    </v-flex>
                   </template>
-                </v-row>
-              </v-col>
-            </v-row>
+                </v-layout>
+              </v-flex>
+            </v-layout>
           </v-card-text>
-        </v-card-row>
-        <v-card-row actions>
+        <v-card-actions>
+          <v-spacer></v-spacer>
           <v-btn class="blue--text darken-1 close-button" flat @click.native="searchShow = false">Close</v-btn>
-        </v-card-row>
+        </v-card-actions>
       </v-card>
     </v-dialog>
-    <v-dialog width="800" v-model="resultShow" persistent scrollable>
+    <v-dialog width="800" v-model="resultShow" persistent lazy absolute>
       <v-card class="secondary">
-        <v-card-row>
-          <v-card-title primary-title>Result for «{{ searchTerm }}»</v-card-title>
-        </v-card-row>
-        <v-card-row>
+          <v-card-title class="headline">Result for «{{ searchTerm }}»</v-card-title>
           <v-card-text>
             <h4 v-if="error">{{ error }}</h4>
             <div v-else-if="loading">
@@ -58,43 +53,43 @@
               <h5 class="loading-text">Info should be displayed in a few seconds</h5>
             </div>
             <v-card v-else class="secondary">
-              <v-card-row>
-                <v-row>
-                  <v-col xs9>
+              <v-card-content>
+                <v-layout row wrap>
+                  <v-flex xs9>
                     <v-card-title class="info-title">{{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }} [{{ info.type }}]</v-card-title>
-                  </v-col>
-                  <v-col xs3>
+                  </v-flex>
+                  <v-flex xs3>
                     <v-card-title>{{ info.statistics.score.value }} ({{ info.statistics.score.count }})</v-card-title>
-                  </v-col>
-                </v-row>
-              </v-card-row>
-              <v-card-row>
-                <v-card-column class="info-pic-container">
+                  </v-flex>
+                </v-layout>
+              </v-card-content>
+              <v-layout row wrap>
+                <v-flex xs3 class="info-pic-container">
                   <img :src="info.image" class="info-pic"/>
-                </v-card-column>
-                <v-card-column class="info-synopsis-container">
+                </v-flex>
+                <v-flex xs9 class="info-synopsis-container">
                   <p class="info-synopsis">{{ info.synopsis }}</p>
-                </v-card-column>
-              </v-card-row>
-              <v-card-row class="top-info">
-                <v-row>
-                  <v-col xs9 class="info-text">{{ info.genres.join(', ') }}</v-col>
-                  <v-col xs3 class="info-text">{{ info.episodes }} {{ episodeLabel }}</v-col>
-                </v-row>
-              </v-card-row>
-              <v-card-row class="bottom-info">
-                <v-row>
-                  <v-col xs5 class="info-text">{{ info.studios.join(', ') }}</v-col>
-                  <v-col xs4 class="info-text">{{ info.classification }}</v-col>
-                  <v-col xs3 class="info-text">{{ info.status }} ({{ info.aired.split(' ')[2] }})</v-col>
-                </v-row>
-              </v-card-row>
+                </v-flex>
+              </v-layout>
+              <v-card-content class="top-info">
+                <v-layout>
+                  <v-flex xs9 class="info-text">{{ info.genres.join(', ') }}</v-flex>
+                  <v-flex xs3 class="info-text">{{ info.episodes }} {{ episodeLabel }}</v-flex>
+                </v-layout>
+              </v-card-content>
+              <v-card-content class="bottom-info">
+                <v-layout>
+                  <v-flex xs5 class="info-text">{{ info.studios.join(', ') }}</v-flex>
+                  <v-flex xs4 class="info-text">{{ info.classification }}</v-flex>
+                  <v-flex xs3 class="info-text">{{ info.status }} ({{ info.aired.split(' ')[2] }})</v-flex>
+                </v-layout>
+              </v-card-content>
             </v-card>
           </v-card-text>
-        </v-card-row>
-        <v-card-row actions>
+        <v-card-actions>
+          <v-spacer></v-spacer>
           <v-btn class="blue--text darken-1 close-button" flat @click.native="closeResults()">Thanks!</v-btn>
-        </v-card-row>
+        </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
@@ -184,6 +179,7 @@
 <style scoped>
   .loading-text
   {
+    text-align: center;
     position: relative;
     color: rgba(255, 255, 255, 0.8);
   }
@@ -211,6 +207,7 @@
   .elem-name
   {
     font-size: 16px;
+    text-align: center;
   }
 
   .elem-picture
@@ -236,7 +233,7 @@
 
   .info-pic
   {
-    max-width: 200px;
+    max-width: 100%;
     max-height: 400px;
   }
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 3423844..9746d33 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,107 +1,186 @@
 <template xmlns:v-bind="http://www.w3.org/1999/xhtml">
-  <v-app id="app"
-         class="grey lighten-1"
-         top-toolbar left-sidebar>
-    <div style="height: 64px;"><!-- Spacer --></div>
-    <v-toolbar class="dragable" fixed>
-      <v-toolbar-side-icon class="non-dragable" v-bind:style="title" @click.native.stop="sidebar = !sidebar"/>
-      <v-toolbar-logo class="text-xs-right title">
-        <div style="width: 100%;">
-          <div class="title-text">かわニメ</div>
-          <settings></settings>
-          <div class="modals text-xs-center">
-            <v-btn icon
-                   class="open-in-browser"
-                   v-tooltip:left="{ html: 'Open KawAnime in your browser' }"
-                   @click.native="$store.dispatch('openInBrowser')">
-              <v-icon>open_in_new</v-icon>
-            </v-btn>
-          </div>
-          <info-modal></info-modal>
-        </div>
-      </v-toolbar-logo>
+  <v-app dark>
+    <v-system-bar dark
+                  lights-out
+                  status
+                  v-if="!browser">
+      <v-spacer></v-spacer>
+      <v-icon class="window-icon">remove</v-icon>
+      <v-icon class="window-icon">check_box_outline_blank</v-icon>
+      <v-icon class="window-icon">close</v-icon>
+    </v-system-bar>
+
+    <v-navigation-drawer class="pb-0"
+                         persistent
+                         enable-resize-watcher
+                         v-model="drawer"
+    >
+      <v-list>
+        <template v-for="item in itemGroup">
+          <v-list-group v-if="item.items"
+                        :value="item.active"
+                        :key="item.title">
+            <v-list-tile slot="item" class="ripple" ripple>
+              <v-list-tile-action>
+                <v-icon>{{ item.action }}</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-title>
+                {{ item.title }}
+              </v-list-tile-title>
+              <v-list-tile-action>
+                <v-icon>
+                  keyboard_arrow_down
+                </v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-list-tile v-for="subItem in item.items"
+                         :value="subItem.active"
+                         class="ripple"
+                         ripple
+                         key="subItem.title">
+              <v-list-tile-action>
+                <v-icon>{{ subItem.action }}</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-divider></v-divider>
+          </v-list-group>
+          <v-subheader v-else-if="item.header">{{ item.header }}</v-subheader>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-toolbar dark class="primary">
+      <v-toolbar-side-icon @click.native="drawer = !drawer"></v-toolbar-side-icon>
+      <v-toolbar-title class="white--text title">かわニメ</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <info-modal></info-modal>
+      <v-btn icon
+             class="open-in-browser"
+             v-tooltip:left="{ html: 'Open KawAnime in your browser' }"
+             @click.native="openInBrowser()">
+        <v-icon>open_in_new</v-icon>
+      </v-btn>
+      <v-btn icon>
+        <v-icon>settings</v-icon>
+      </v-btn>
     </v-toolbar>
+
     <main>
-      <v-sidebar v-model="sidebar" height="100vh" style="width: 260px" drawer class="sidebar">
-        <div class="sidebar-title-container">
-          <nuxt-link to="/">
-            <img src="~static/images/icon2.png" height="70"/>
-          </nuxt-link>
-
-          <h1 class="title" v-bind:style="sidebarTitle">
-            <strong>かわニメ - </strong>
-            <a href="#">v0.4.1</a>
-          </h1>
-
-          <div class="links">
-            <a href="https://github.com/Kylart/KawAnime" target="_blank" class="link">
-              <img src="~static/images/github-icon.png" height="25"/>
-            </a>
-            <a href="#" class="link">
-              <img src="~static/images/twitter-icon.png" height="25"/>
-            </a>
-            <a href="#" class="link">
-              <img src="~static/images/fb-icon.png" height="25"/>
-            </a>
-            <a href="#" class="link">
-              <img src="~static/images/mail-icon.png" height="25"/>
-            </a>
-          </div>
-        </div>
-        <v-list dense>
-          <template v-for="item in itemGroup">
-            <v-list-group v-if="item.items">
-              <v-list-item slot="item">
-                <v-list-tile ripple>
-                  <v-list-tile-action>
-                    <v-icon>{{ item.action }}</v-icon>
-                  </v-list-tile-action>
-                  <v-list-tile-title v-text="item.title"></v-list-tile-title>
-                  <v-list-tile-action>
-                    <v-icon>keyboard_arrow_down</v-icon>
-                  </v-list-tile-action>
-                </v-list-tile>
-              </v-list-item>
-              <v-list-item v-for="subItem in item.items" :key="subItem.href">
-                <v-list-tile ripple router nuxt v-bind:href="subItem.href">
-                  <v-list-tile-action>
-                    <v-icon>{{ subItem.action }}</v-icon>
-                  </v-list-tile-action>
-                  <v-list-tile-title v-text="subItem.title"></v-list-tile-title>
-                </v-list-tile>
-              </v-list-item>
-            </v-list-group>
-            <v-subheader v-else-if="item.header" v-text="item.header"></v-subheader>
-            <v-divider v-else-if="item.divider" light/>
-            <v-list-item v-else>
-              <v-list-tile ripple>
-                <v-list-tile-title v-text="item.title"/>
-              </v-list-tile>
-            </v-list-item>
-          </template>
-        </v-list>
-      </v-sidebar>
-      <v-content class="content secondary page">
-        <nuxt/>
-        <!-- Displayed if an error occurred -->
-        <v-snackbar
-            :timeout="5000"
-            :top="true"
-            :bottom="false"
-            :right="false"
-            :left="false"
-            v-model="$store.state.infoSnackbar.show"
-        >
-          {{ $store.state.infoSnackbar.text }}
-          <v-btn flat class="pink--text" @click.native="$store.state.infoSnackbar.show = false">Close</v-btn>
-        </v-snackbar>
-      </v-content>
+      <v-container fluid>
+        <h1>Hello</h1>
+      </v-container>
     </main>
-
     <v-footer class="grey darken-4">
-      <div class="text-xs-right">© 2016 - {{ (new Date()).getYear() + 1900 }} Kylart</div>
+      <v-spacer></v-spacer>
+      <div class="white--text">&copy; 2016 - 2017 Kylart</div>
     </v-footer>
   </v-app>
+  <!--<v-app id="app"-->
+         <!--class="grey lighten-1"-->
+         <!--top-toolbar left-sidebar>-->
+    <!--<div style="height: 64px;">&lt;!&ndash; Spacer &ndash;&gt;</div>-->
+    <!--<v-toolbar class="dragable" fixed>-->
+      <!--<v-toolbar-side-icon class="non-dragable" v-bind:style="title" @click.native.stop="sidebar = !sidebar"/>-->
+      <!--<v-toolbar-logo class="text-xs-right title">-->
+        <!--<div style="width: 100%;">-->
+          <!--<div class="title-text">かわニメ</div>-->
+          <!--<settings></settings>-->
+          <!--<div class="modals text-xs-center">-->
+            <!--<v-btn icon-->
+                   <!--class="open-in-browser"-->
+                   <!--v-tooltip:left="{ html: 'Open KawAnime in your browser' }"-->
+                   <!--@click.native="$store.dispatch('openInBrowser')">-->
+              <!--<v-icon>open_in_new</v-icon>-->
+            <!--</v-btn>-->
+          <!--</div>-->
+          <!--<info-modal></info-modal>-->
+        <!--</div>-->
+      <!--</v-toolbar-logo>-->
+    <!--</v-toolbar>-->
+    <!--<main>-->
+      <!--<v-sidebar v-model="sidebar" height="100vh" style="width: 260px" drawer class="sidebar">-->
+        <!--<div class="sidebar-title-container">-->
+          <!--<nuxt-link to="/">-->
+            <!--<img src="~static/images/icon2.png" height="70"/>-->
+          <!--</nuxt-link>-->
+
+          <!--<h1 class="title" v-bind:style="sidebarTitle">-->
+            <!--<strong>かわニメ - </strong>-->
+            <!--<a href="#">v0.4.1</a>-->
+          <!--</h1>-->
+
+          <!--<div class="links">-->
+            <!--<a href="https://github.com/Kylart/KawAnime" target="_blank" class="link">-->
+              <!--<img src="~static/images/github-icon.png" height="25"/>-->
+            <!--</a>-->
+            <!--<a href="#" class="link">-->
+              <!--<img src="~static/images/twitter-icon.png" height="25"/>-->
+            <!--</a>-->
+            <!--<a href="#" class="link">-->
+              <!--<img src="~static/images/fb-icon.png" height="25"/>-->
+            <!--</a>-->
+            <!--<a href="#" class="link">-->
+              <!--<img src="~static/images/mail-icon.png" height="25"/>-->
+            <!--</a>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<v-list dense>-->
+          <!--<template v-for="item in itemGroup">-->
+            <!--<v-list-group v-if="item.items">-->
+              <!--<v-list-item slot="item">-->
+                <!--<v-list-tile ripple>-->
+                  <!--<v-list-tile-action>-->
+                    <!--<v-icon>{{ item.action }}</v-icon>-->
+                  <!--</v-list-tile-action>-->
+                  <!--<v-list-tile-title v-text="item.title"></v-list-tile-title>-->
+                  <!--<v-list-tile-action>-->
+                    <!--<v-icon>keyboard_arrow_down</v-icon>-->
+                  <!--</v-list-tile-action>-->
+                <!--</v-list-tile>-->
+              <!--</v-list-item>-->
+              <!--<v-list-item v-for="subItem in item.items" :key="subItem.href">-->
+                <!--<v-list-tile ripple router nuxt v-bind:href="subItem.href">-->
+                  <!--<v-list-tile-action>-->
+                    <!--<v-icon>{{ subItem.action }}</v-icon>-->
+                  <!--</v-list-tile-action>-->
+                  <!--<v-list-tile-title v-text="subItem.title"></v-list-tile-title>-->
+                <!--</v-list-tile>-->
+              <!--</v-list-item>-->
+            <!--</v-list-group>-->
+            <!--<v-subheader v-else-if="item.header" v-text="item.header"></v-subheader>-->
+            <!--<v-divider v-else-if="item.divider" light/>-->
+            <!--<v-list-item v-else>-->
+              <!--<v-list-tile ripple>-->
+                <!--<v-list-tile-title v-text="item.title"/>-->
+              <!--</v-list-tile>-->
+            <!--</v-list-item>-->
+          <!--</template>-->
+        <!--</v-list>-->
+      <!--</v-sidebar>-->
+      <!--<v-content class="content secondary page">-->
+        <!--<nuxt/>-->
+        <!--&lt;!&ndash; Displayed if an error occurred &ndash;&gt;-->
+        <!--<v-snackbar-->
+            <!--:timeout="5000"-->
+            <!--:top="true"-->
+            <!--:bottom="false"-->
+            <!--:right="false"-->
+            <!--:left="false"-->
+            <!--v-model="$store.state.infoSnackbar.show"-->
+        <!--&gt;-->
+          <!--{{ $store.state.infoSnackbar.text }}-->
+          <!--<v-btn flat class="pink&#45;&#45;text" @click.native="$store.state.infoSnackbar.show = false">Close</v-btn>-->
+        <!--</v-snackbar>-->
+      <!--</v-content>-->
+    <!--</main>-->
+
+    <!--<v-footer class="grey darken-4">-->
+      <!--<div class="text-xs-right">© 2016 - {{ (new Date()).getYear() + 1900 }} Kylart</div>-->
+    <!--</v-footer>-->
+  <!--</v-app>-->
 </template>
 
 <script>
@@ -112,55 +191,63 @@
     data () {
       return {
         searchModal: false,
-        sidebar: false,
+        drawer: false,
+        browser: false,
         itemGroup: [
           {header: 'Core'},
           {
             title: 'Downloading',
             action: 'file_download',
+            active: true,
             items: [
               {
                 title: 'Downloader',
                 action: 'file_download',
+                active: false,
                 href: '/downloader'
               },
               {
                 title: 'Latest releases',
                 action: 'access_time',
+                active: true,
                 href: '/'
               }
             ]
-          },
-          {
+          }, {
             title: 'News',
             action: 'info_outline',
+            active: false,
             items: [
               {
                 title: 'Seasons',
                 action: 'hourglass_empty',
+                active: false,
                 href: '/seasons'
               },
               {
                 title: 'News',
                 action: 'more',
+                active: false,
                 href: '/news'
               }
             ]
           },
-          {divider: true},
           {header: 'Local'},
           {
             title: 'Anime related',
+            active: false,
             action: 'folder_open',
             items: [
               {
                 title: 'Animes',
                 action: 'tv',
+                active: false,
                 href: '/localPage'
               },
               {
                 title: 'Watch list',
                 action: 'sort_by_alpha',
+                active: false,
                 href: '/watchList'
               }
             ]
@@ -185,31 +272,51 @@
       infoModal
     },
     computed: {
-      title: function () {
+      title () {
         if (this.sidebar) {
           return {
             marginLeft: '270px'
           }
         }
       },
-      searchInput: function () {
+      searchInput () {
         return this.$store.state.searchInput
+      },
+      openInBrowser () {
+        this.browser = true
+        this.$store.dispatch('openInBrowser')
       }
     }
   }
 </script>
 
 <style scoped>
-  /*noinspection ALL*/
+  .ripple
+  {
+    position: relative;
+  }
+
+  .window-icon
+  {
+    cursor: pointer;
+  }
+
+  .title
+  {
+    overflow: auto;
+    padding-left: 20px;
+    font-family: "Hiragino Mincho Pro", serif;
+    font-size: 30px !important;
+  }
+
   .with.top-toolbar main > .content
   {
     padding: 0;
   }
 
-  /*noinspection CssUnusedSymbol*/
-  .sidebar .list--group__container .list__tile--active .list__tile__title,
-  .sidebar .list__tile--active:first-child .icon,
-  .sidebar .list--group__header--active:first-child .list__tile__action:first-child .icon
+  .navigation-drawer .list--group__container .list__tile--active .list__tile__title,
+  .navigation-drawer .list__tile--active:first-child .icon,
+  .navigation-drawer .list--group__header--active:first-child .list__tile__action:first-child .icon
   {
     color: #ff9800 !important;
   }
@@ -222,18 +329,6 @@
     background-size: 75%;
   }
 
-  .title
-  {
-    overflow: auto;
-    padding-left: 20px;
-    font-family: "Hiragino Mincho Pro", serif;
-  }
-
-  .title-text
-  {
-    text-align: left;
-    float: left;
-  }
 
   .modals
   {
diff --git a/nuxt.config.js b/nuxt.config.js
index 8adde23..2c0831a 100755
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -25,8 +25,7 @@ module.exports = {
     ],
     link: [
       {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
-      {rel: 'stylesheet', href: 'http://fonts.googleapis.com/css?family=Roboto'},
-      {rel: 'stylesheet', href: 'http://fonts.googleapis.com/icon?family=Material+Icons'}
+      {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'}
     ]
   }
 }
diff --git a/package.json b/package.json
index 9542d64..258ab61 100755
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "nyaapi": "^1.2.2",
     "play-sound": "^1.1.1",
     "url-parse": "^1.1.8",
-    "vuetify": "^0.11.1"
+    "vuetify": "^0.13.1"
   },
   "devDependencies": {
     "ava": "^0.19.1",
diff --git a/store/index.js b/store/index.js
index b8f8077..85ce203 100644
--- a/store/index.js
+++ b/store/index.js
@@ -230,9 +230,9 @@ const store = new Vuex.Store({
         const {data} = await axios.get('getConfig.json')
         commit('init', data.config)
 
-        dispatch('releasesInit').catch(err => { void (err) })
-        dispatch('seasonsInit').catch(err => { void (err) })
-        dispatch('newsInit').catch(err => { void (err) })
+        // dispatch('releasesInit').catch(err => { void (err) })
+        // dispatch('seasonsInit').catch(err => { void (err) })
+        // dispatch('newsInit').catch(err => { void (err) })
         dispatch('localInit').catch(err => { void (err) })
         dispatch('listInit').catch(err => { void (err) })
         dispatch('getHistory').catch(err => { void (err) })