From 3f4804a87f943bb05894233b65b689baeed52e9f Mon Sep 17 00:00:00 2001
From: Kylart <Kylart.dev@gmail.com>
Date: Sun, 29 Apr 2018 21:12:35 +0200
Subject: [PATCH] Updated to vuetify 1.0

---
 assets/App.vue            |  43 ++++++------
 assets/stylus/global.styl |   3 +
 components/kFooter.vue    |   2 +-
 package.json              |   2 +-
 pages/malPage.vue         | 116 ++++++++++++++++-----------------
 pages/seasons.vue         | 133 +++++++++++++++++++-------------------
 pages/watchList.vue       | 114 ++++++++++++++++----------------
 7 files changed, 206 insertions(+), 207 deletions(-)

diff --git a/assets/App.vue b/assets/App.vue
index 692436a..d8be3d6 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -1,25 +1,35 @@
 <template lang="pug">
   v-app(dark)
     v-navigation-drawer.pb-0.main-drawer(app, fixed, temporary, v-model='$store.state.drawer')
-      v-list
+      v-list(dark)
         v-list-tile#title(to='/')
           v-list-tile-action
             img(src='~static/images/icon2.png', height='50')
           v-list-tile-title.title.white--text かわニメ
+
         template(v-for='item in itemGroup')
-          v-list-group(v-if='item.items', :key='item.title', :group="item.group")
-            v-list-tile.ripple(slot='item', ripple)
-              v-list-tile-action
-                v-icon {{ item.action }}
-              v-list-tile-title {{ item.title }}
-              v-list-tile-action
-                v-icon keyboard_arrow_down
-            v-list-tile.ripple(v-for='subItem in item.items', ripple, :to='subItem.href', :key='subItem.title', exact)
-              v-list-tile-action
-                v-icon {{ subItem.action }}
+          v-list-group(
+            v-if='item.items',
+            :group='item.group',
+            :prepend-icon='item.action',
+            no-action
+          )
+            v-list-tile(slot='activator', ripple)
               v-list-tile-content
-                v-list-tile-title {{ subItem.title }}
-            v-divider
+                v-list-tile-title {{ item.title }}
+            template(v-for='(subItem, i) in item.items')
+              v-list-tile(
+                :key='i',
+                :to='subItem.href',
+                :disabled='subItem.disabled',
+                ripple
+              )
+                v-list-tile-action
+                  v-icon {{ subItem.action }}
+                v-list-tile-content
+                  v-list-tile-title
+                    span {{ subItem.title }}
+
           v-subheader.white--text(v-else-if='item.header') {{ item.header }}
           v-divider(v-else-if='item.divider')
 
@@ -46,9 +56,7 @@
       settings
       logs
 
-    //- main.m
     v-content
-      //- v-content // Apparently required. Todo
       transition(name='page', mode='out-in')
         router-view
 
@@ -72,7 +80,6 @@
 </template>
 
 <script>
-  import axios from 'axios'
   import Meta from 'mixins/meta'
 
   export default {
@@ -91,7 +98,7 @@
 
       setInterval(async () => {
         try {
-          const {status} = await this.$axios.get('_isOnline')
+          const {status} = await this.$this.$axios.get('_isOnline')
 
           this.$store.commit('setConnected', status === 200)
         } catch (e) { void e }
@@ -189,7 +196,7 @@
         this.$store.commit('toggleDrawer')
       },
       actOnWindow (action) {
-        axios.get('/_win', {
+        this.$axios.get('/_win', {
           params: {
             action
           }
diff --git a/assets/stylus/global.styl b/assets/stylus/global.styl
index f8a8059..615ad87 100644
--- a/assets/stylus/global.styl
+++ b/assets/stylus/global.styl
@@ -42,6 +42,9 @@ table.table thead td:not(:nth-child(1)), table.table tbody td:not(:nth-child(1))
 .fill-height
   min-height calc(100vh - (48px + 24px)) !important
 
+.navigation-drawer .list
+  background initial
+
 .navigation-drawer .list__tile
   font-size 14px
 
diff --git a/components/kFooter.vue b/components/kFooter.vue
index 1650116..b82fdbf 100644
--- a/components/kFooter.vue
+++ b/components/kFooter.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-footer.grey.darken-4.pr-2(app)
+  v-footer.grey.darken-4.pr-2
     v-spacer
     .white--text © 2016 - {{ lastYear }} Kylart
 </template>
diff --git a/package.json b/package.json
index 6821cfb..7c6c79a 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "vue-markdown": "^2.2.4",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.13",
-    "vuetify": "^0.17.7",
+    "vuetify": "^1.0.15",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0",
     "webtorrent": "^0.98.24"
diff --git a/pages/malPage.vue b/pages/malPage.vue
index d0951cd..74654bd 100644
--- a/pages/malPage.vue
+++ b/pages/malPage.vue
@@ -1,61 +1,60 @@
 <template lang="pug">
-  v-container(fluid, fill-height, grid-list-xs)
-    v-card
-      v-layout.pa-2(row, wrap, justify-center)
-        v-flex.centered(xs12, sm2)
-          .headline.pl-4 MyAnimeList
-        v-flex.centered.pr-2(xs10, sm3, md3, offset-sm1)
-          v-select(
-            v-model='tagsFilter',
-            :items='customTags',
-            label='Tags',
-            persistent-hint,
-            hint='Looking for special tags?',
-            single-line,
-            clearable, dense, chips, tags
-          )
-        v-flex.centered.pl-2(xs8, sm3, md3, offset-md1)
-          v-text-field(
-            append-icon='search',
-            label='Search',
-            single-line,
-            v-model='search'
-          )
-        v-flex.centered.pt-3.pl-3(xs4, sm3, md2)
-          v-btn(@click.stop='showSearch()')
-            v-icon add
-            span Add
-          v-btn(icon, @click='refresh()')
-            v-icon(large) refresh
-      v-data-table(
-        no-data-text='No data available, did you register your account and set your MyAnimeList public? If yes, it is possible that the account you entered was wrong.',
-        no-results-text='Seems like you haven\'t watched this one ;)',
-        rows-per-page-text='Anime per page:',
-        :disable-initial-sort='true',
-        :loading='isLoading',
-        :headers='headers',
-        :items='lists',
-        :search='search',
-        :rows-per-page-items='rowsPerPage'
-      )
-        template(slot='items', slot-scope='props')
-          td.text-xs-center
-            img.entry-image(:src='props.item.image')
-          td.text-xs-left.entry-title
-            span.pl-3 {{ props.item.title }}
-          td.text-xs-center {{ props.item.score }}
-          td.text-xs-center {{ props.item.type }}
-          td.text-xs-center {{ props.item.progress }}
-          td.text-xs-center {{ props.item.status }}
-          td.text-xs-center.ellipsis.entry-tags
-            v-tooltip(top)
-              span(slot='activator') {{ props.item.tags }}
-              span {{ props.item.tags }}
-          td
-            v-btn.blue--text.darken-1(icon, flat, @click.stop='showForm(props.item.id)')
-              v-icon edit
-            v-btn.blue--text.darken-1(icon, flat, @click.stop='showInfo(props.item.title, props.item.link)')
-              v-icon info_outline
+  v-card.fill-height
+    v-layout.pa-2(row, wrap, justify-center)
+      v-flex.centered(xs12, sm2)
+        .headline.pl-4 MyAnimeList
+      v-flex.centered.pr-2(xs10, sm3, md3, offset-sm1)
+        v-select(
+          v-model='tagsFilter',
+          :items='customTags',
+          label='Tags',
+          persistent-hint,
+          hint='Looking for special tags?',
+          single-line,
+          clearable, dense, chips, tags
+        )
+      v-flex.centered.pl-2(xs8, sm3, md3, offset-md1)
+        v-text-field(
+          append-icon='search',
+          label='Search',
+          single-line,
+          v-model='search'
+        )
+      v-flex.centered.pt-3.pl-3(xs4, sm3, md2)
+        v-btn(@click.stop='showSearch()')
+          v-icon add
+          span Add
+        v-btn(icon, @click='refresh()')
+          v-icon(large) refresh
+    v-data-table(
+      no-data-text='No data available, did you register your account and set your MyAnimeList public? If yes, it is possible that the account you entered was wrong.',
+      no-results-text='Seems like you haven\'t watched this one ;)',
+      rows-per-page-text='Anime per page:',
+      :disable-initial-sort='true',
+      :loading='isLoading',
+      :headers='headers',
+      :items='lists',
+      :search='search',
+      :rows-per-page-items='rowsPerPage'
+    )
+      template(slot='items', slot-scope='props')
+        td.text-xs-center
+          img.entry-image(:src='props.item.image')
+        td.text-xs-left.entry-title
+          span.pl-3 {{ props.item.title }}
+        td.text-xs-center {{ props.item.score }}
+        td.text-xs-center {{ props.item.type }}
+        td.text-xs-center {{ props.item.progress }}
+        td.text-xs-center {{ props.item.status }}
+        td.text-xs-center.ellipsis.entry-tags
+          v-tooltip(top)
+            span(slot='activator') {{ props.item.tags }}
+            span {{ props.item.tags }}
+        td
+          v-btn.blue--text.darken-1(icon, flat, @click.stop='showForm(props.item.id)')
+            v-icon edit
+          v-btn.blue--text.darken-1(icon, flat, @click.stop='showInfo(props.item.title, props.item.link)')
+            v-icon info_outline
 </template>
 
 <script>
@@ -151,9 +150,6 @@
 </script>
 
 <style lang="stylus" scoped>
-  .container
-    display inline-block
-
   .centered
     display flex
     align-items center
diff --git a/pages/seasons.vue b/pages/seasons.vue
index 22c0212..d0bd313 100644
--- a/pages/seasons.vue
+++ b/pages/seasons.vue
@@ -15,74 +15,71 @@
           v-text-field(name='input-year', type='number', min='1917', label='Year', v-model='$store.state.seasons.year', dark)
         v-flex.refresh-button(offset-sm1, sm2, xs8)
           v-btn(color='secondary', block, dark, @click='refreshSeason()') Refresh
-      v-tabs#tabs(dark, fixed, centered)
-        v-tabs-bar.mablue
-          v-tabs-slider.primary
-          v-tabs-item(v-for='i in 5', :href="'#' + i", :key='i')
-            | {{ season[i].name }}
-        v-tabs-items
-          v-tabs-content(v-for='i in 5', lazy, :id='`${i}`', :key='i')
-            v-text-field.query(v-model='query', label='Search entry', dark)
-            v-layout.elems(row, wrap)
-              transition-group(name='list')
-                v-flex.pa-1(
-                  xl3, lg4, md6, xs12,
-                  v-for='item in computedSeason[i].items',
-                  style='display: inline-block',
-                  :key='item.key'
-                )
-                  v-layout.elem.elevation-3(row, wrap, v-ripple='true')
-                    // Header of elem
-                    v-flex(xs12)
-                      v-tooltip(top)
-                        h6.title.ellipsis.white--text(slot='activator') {{ item.title }}
-                        span {{ item.title }}
-                    v-flex(xs8)
-                      v-tooltip(top)
-                        p.genres.ellipsis(slot='activator') {{ item.genres.join(' ') }}
-                        span {{ item.genres.join(' ') }}
-                    v-flex(xs3)
-                      p.from-type.ellipsis {{ item.fromType }}
-                    v-flex(xs1)
-                    // Picture of elem
-                    v-flex.image-container(xs3, lg4)
-                      lazy-component
-                        img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
-                    v-flex.bottom-right(xs9, lg8)
-                      v-layout(wrap, justify-space-between, align-center)
-                        v-flex(xs12)
-                          .synopsis {{ item.synopsis }}
-                        v-flex.pl-2(xs12)
-                          v-layout(wrap, justify-space-between)
-                            v-flex.date(xs6) {{ getDate(item.releaseDate) }}
-                            v-flex.nb-ep(xs6) {{ episode(item) }}
-                          v-layout(wrap, justify-space-between)
-                            v-flex.producers(xs8)
-                              strong {{ item.producers.join(' ') }}
-                            v-flex.pb-1(xs4)
-                              v-menu(open-on-hover, transition='slide-x-transition')
-                                v-btn(flat, dark, slot='activator') More
-                                v-list.dark
-                                  v-list-tile(@click='openModal(item.title, item.synopsis)')
-                                    v-list-tile-action
-                                      v-icon more
-                                    v-list-tile-title Check synopsis
-                                  v-list-tile(@click='downloadAll(item.title)')
-                                    v-list-tile-action
-                                      v-icon file_download
-                                    v-list-tile-title Download all episodes
-                                  v-list-tile(@click="$store.dispatch('search/fromUrl', item)")
-                                    v-list-tile-action
-                                      v-icon info_outline
-                                    v-list-tile-title Information
-                                  v-list-tile(@click='showChoices(item.title)')
-                                    v-list-tile-action
-                                      v-icon add_box
-                                    v-list-tile-title Add to
-                                  v-list-tile(@click='showMal(item)')
-                                    v-list-tile-action
-                                      span.mal-icon
-                                    v-list-tile-title MyAnimeList
+      v-tabs#tabs(grow, slider-color='primary')
+        v-tab.mablue(v-for='i in 5', :href="'#' + i", :key='i')
+          | {{ season[i].name }}
+        v-tab-item(v-for='i in 5', lazy, :id='`${i}`', :key='i')
+          v-text-field.query(v-model='query', label='Search entry', dark)
+          v-layout.elems(row, wrap)
+            transition-group(name='list')
+              v-flex.pa-1(
+                xl3, lg4, md6, xs12,
+                v-for='item in computedSeason[i].items',
+                style='display: inline-block',
+                :key='item.key'
+              )
+                v-layout.elem.elevation-3(row, wrap, v-ripple='true')
+                  // Header of elem
+                  v-flex(xs12)
+                    v-tooltip(top)
+                      h6.title.ellipsis.white--text(slot='activator') {{ item.title }}
+                      span {{ item.title }}
+                  v-flex(xs8)
+                    v-tooltip(top)
+                      p.genres.ellipsis(slot='activator') {{ item.genres.join(' ') }}
+                      span {{ item.genres.join(' ') }}
+                  v-flex(xs3)
+                    p.from-type.ellipsis {{ item.fromType }}
+                  v-flex(xs1)
+                  // Picture of elem
+                  v-flex.image-container(xs3, lg4)
+                    lazy-component
+                      img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
+                  v-flex.bottom-right(xs9, lg8)
+                    v-layout(wrap, justify-space-between, align-center)
+                      v-flex(xs12)
+                        .synopsis {{ item.synopsis }}
+                      v-flex.pl-2(xs12)
+                        v-layout(wrap, justify-space-between)
+                          v-flex.date(xs6) {{ getDate(item.releaseDate) }}
+                          v-flex.nb-ep(xs6) {{ episode(item) }}
+                        v-layout(wrap, justify-space-between)
+                          v-flex.producers(xs8)
+                            strong {{ item.producers.join(' ') }}
+                          v-flex.pb-1(xs4)
+                            v-menu(open-on-hover, transition='slide-x-transition')
+                              v-btn(flat, dark, slot='activator') More
+                              v-list.dark
+                                v-list-tile(@click='openModal(item.title, item.synopsis)')
+                                  v-list-tile-action
+                                    v-icon more
+                                  v-list-tile-title Check synopsis
+                                v-list-tile(@click='downloadAll(item.title)')
+                                  v-list-tile-action
+                                    v-icon file_download
+                                  v-list-tile-title Download all episodes
+                                v-list-tile(@click="$store.dispatch('search/fromUrl', item)")
+                                  v-list-tile-action
+                                    v-icon info_outline
+                                  v-list-tile-title Information
+                                v-list-tile(@click='showChoices(item.title)')
+                                  v-list-tile-action
+                                    v-icon add_box
+                                  v-list-tile-title Add to
+                                v-list-tile(@click='showMal(item)')
+                                  v-list-tile-action
+                                    span.mal-icon
+                                  v-list-tile-title MyAnimeList
     v-dialog(v-model='modal', max-width='70%', @keydown.esc='modal = false')
       v-card
         v-card-title.headline {{ modalTitle }}
diff --git a/pages/watchList.vue b/pages/watchList.vue
index 7bfad8a..3b815a3 100644
--- a/pages/watchList.vue
+++ b/pages/watchList.vue
@@ -1,65 +1,61 @@
 <template lang="pug">
   v-container#watch-list.pa-0.mt-0(fluid, fill-height)
-    v-tabs#tabs(grow, icons)
-      v-tabs-bar.mablue
-        v-tabs-slider.primary
-        template(v-for='i in 5')
-          v-tabs-item(:href="'#tabs-' + i")
-            | {{ actionsList[i - 1].name }}
-            v-icon {{ actionsList[i - 1].icon }}
-      v-tabs-items
-        v-tabs-content(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
-          v-layout.list-container.pb-2(row, wrap)
-            v-flex(xs12)
-              v-layout.top-form(row, wrap, align-center, justify-center)
-                v-flex(md3, sm4, xs9)
-                  v-tooltip(bottom)
-                    v-btn(
-                      icon, flat,
-                      @click='selectAll(i)',
-                      slot='activator'
+    v-tabs#tabs(grow, icons-and-text, slider-color='primary')
+      template(v-for='i in 5')
+        v-tab.mablue(:href="'#tabs-' + i") {{ actionsList[i - 1].name }}
+          v-icon {{ actionsList[i - 1].icon }}
+      v-tab-item(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
+        v-layout.list-container.pb-2(row, wrap)
+          v-flex(xs12)
+            v-layout.top-form(row, wrap, align-center, justify-center)
+              v-flex(md3, sm4, xs9)
+                v-tooltip(bottom)
+                  v-btn(
+                    icon, flat,
+                    @click='selectAll(i)',
+                    slot='activator'
+                  )
+                    v-icon select_all
+                  span {{ selectLabel(i) }}
+                v-menu(open-on-hover, transition='slide-x-transition')
+                  v-btn(color='secondary', slot='activator') Move to
+                  v-list.dark
+                    v-list-tile(
+                      @click='moveTo(action.list, i)',
+                      v-for='action in actions(i)',
+                      :key='action.name'
                     )
-                      v-icon select_all
-                    span {{ selectLabel(i) }}
-                  v-menu(open-on-hover, transition='slide-x-transition')
-                    v-btn(color='secondary', slot='activator') Move to
-                    v-list.dark
-                      v-list-tile(
-                        @click='moveTo(action.list, i)',
-                        v-for='action in actions(i)',
-                        :key='action.name'
-                      )
-                        v-list-tile-action
-                          v-icon {{ action.icon }}
-                        v-list-tile-title {{ action.name }}
-                  v-tooltip(bottom)
-                    v-btn.red--text(
-                      @click='deleteSelected(i)',
-                      slot='activator',
-                      icon
-                    )
-                      v-icon delete_sweep
-                    span Delete all selected items from this list
-                v-flex(md2, sm2, xs3)
-                  p.elem-number
-                    | {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
-                v-flex(md3, sm1, hidden-xs-only)
-                v-flex(md2, sm3, xs4, @keyup.enter='addEntry(i)')
-                  v-text-field.entry-text(type='text', label='Add entry', v-model='entries[i]', dark)
-                v-flex(hidden-sm-and-up, xs1)
-                v-flex.add-button-container(md2, sm2, xs4)
-                  v-btn.add-button(dark, color='secondary', @click='addEntry(i)')
-                    | Add
-            transition-group(name='list')
-              template(v-for='item in lists[i - 1]')
-                list-entry(
-                  :item='item',
-                  :deleteEntry='deleteEntry',
-                  :key='item',
-                  :index='i',
-                  :select='select',
-                  :selected='selected'
-                )
+                      v-list-tile-action
+                        v-icon {{ action.icon }}
+                      v-list-tile-title {{ action.name }}
+                v-tooltip(bottom)
+                  v-btn.red--text(
+                    @click='deleteSelected(i)',
+                    slot='activator',
+                    icon
+                  )
+                    v-icon delete_sweep
+                  span Delete all selected items from this list
+              v-flex(md2, sm2, xs3)
+                p.elem-number
+                  | {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
+              v-flex(md3, sm1, hidden-xs-only)
+              v-flex(md2, sm3, xs4, @keyup.enter='addEntry(i)')
+                v-text-field.entry-text(type='text', label='Add entry', v-model='entries[i]', dark)
+              v-flex(hidden-sm-and-up, xs1)
+              v-flex.add-button-container(md2, sm2, xs4)
+                v-btn.add-button(dark, color='secondary', @click='addEntry(i)')
+                  | Add
+          transition-group(name='list')
+            template(v-for='item in lists[i - 1]')
+              list-entry(
+                :item='item',
+                :deleteEntry='deleteEntry',
+                :key='item',
+                :index='i',
+                :select='select',
+                :selected='selected'
+              )
 </template>
 
 <script>