From c9f0114a09718c9b6f039416280649223e59af44 Mon Sep 17 00:00:00 2001
From: Kylart <Kylart.dev@gmail.com>
Date: Wed, 1 Nov 2017 03:14:08 +0100
Subject: [PATCH] Restrained scrollbar to actual content

---
 assets/App.vue          |   8 ++-
 assets/stylus/main.styl |   3 ++
 components/_index.js    |   1 +
 components/kFooter.vue  |   5 ++
 pages/downloader.vue    |  11 +++--
 pages/localPage.vue     |   1 +
 pages/news.vue          |   7 ++-
 pages/releases.vue      |   3 +-
 pages/seasons.vue       |   1 +
 pages/watchList.vue     | 105 +++++++++++++++++++++-------------------
 10 files changed, 83 insertions(+), 62 deletions(-)
 create mode 100644 components/kFooter.vue

diff --git a/assets/App.vue b/assets/App.vue
index 639cb33..65f1cbb 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -65,10 +65,6 @@
       v-model='$store.state.infoSnackbar.show'
     ) {{ $store.state.infoSnackbar.text }}
       v-btn.pink--text(flat, @click='$store.state.infoSnackbar.show = false') Close
-
-    v-footer.grey.darken-4.pr-2(app)
-      v-spacer
-      .white--text © 2016 - 2017 Kylart
 </template>
 
 <script>
@@ -177,8 +173,10 @@
 
 <style lang="stylus" scoped>
   .m
+    overflow-y scroll
+    max-height calc(100vh - (48px + 24px))
     min-width 100%
-    padding-top calc(48px + 24px)
+    margin-top calc(48px + 24px)
 
   .wb
     padding-right 0
diff --git a/assets/stylus/main.styl b/assets/stylus/main.styl
index c82050c..5cfa55e 100644
--- a/assets/stylus/main.styl
+++ b/assets/stylus/main.styl
@@ -61,6 +61,9 @@
 /**
   Custom rules which will be applied globally, allows overriding
  */
+html
+  overflow hidden
+
 .ellipsis
   overflow hidden
   text-overflow ellipsis
diff --git a/components/_index.js b/components/_index.js
index c1483a2..6d2ee00 100644
--- a/components/_index.js
+++ b/components/_index.js
@@ -8,3 +8,4 @@ export { default as News } from './news.vue'
 export { default as Settings } from './settings.vue'
 export { default as MagnetsModal } from './magnetsModal.vue'
 export { default as Logs } from './logs.vue'
+export { default as KFooter } from './kFooter.vue'
diff --git a/components/kFooter.vue b/components/kFooter.vue
new file mode 100644
index 0000000..55142fd
--- /dev/null
+++ b/components/kFooter.vue
@@ -0,0 +1,5 @@
+<template lang="pug">
+  v-footer.grey.darken-4.pr-2(app)
+    v-spacer
+    .white--text © 2016 - 2017 Kylart
+</template>
diff --git a/pages/downloader.vue b/pages/downloader.vue
index 7c3e9c2..1b46f9b 100644
--- a/pages/downloader.vue
+++ b/pages/downloader.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
-  v-container#downloader.container(fluid, fill-height)
+  v-container#downloader.container.pa-0(fluid)
     .cute-char.left-pic
     .cute-char.right-pic
-    v-layout(row, wrap, justify-center, align-center)
+    v-layout.form(row, wrap, justify-center, align-center)
       v-flex.form-container(xs8)
         v-layout(row, wrap, justify-center)
           v-flex(xs9)
@@ -56,6 +56,8 @@
               v-if='!$store.state.downloader.form.loading'
             ) Download!
             v-btn(dark, block, color='secondary', loading, v-else)
+
+    k-footer
 </template>
 
 <script>
@@ -134,9 +136,12 @@
     background-size cover
     background-repeat no-repeat
 
+  .form
+    height calc(100vh - (48px + 24px))
+
   .cute-char
     position absolute
-    bottom 0
+    bottom 36px
     height 45%
 
   .right-pic
diff --git a/pages/localPage.vue b/pages/localPage.vue
index 491021f..dbdd4e4 100644
--- a/pages/localPage.vue
+++ b/pages/localPage.vue
@@ -95,6 +95,7 @@
             | &nbsp;or&nbsp;
             router-link.cyan--text(to='/') here!
     choice-window(:entry='choiceTitle')
+    k-footer
 </template>
 
 <script>
diff --git a/pages/news.vue b/pages/news.vue
index 38a283a..ac6a9ef 100644
--- a/pages/news.vue
+++ b/pages/news.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
-  v-container(fluid).pa-0
-    loader(v-if="!news.length")
+  div
+    v-container(fluid v-if='!news.length')
+      loader
 
     v-container(fluid v-else)
       v-layout(row wrap).news-container
@@ -9,6 +10,8 @@
             v-icon(large) refresh
         v-flex(xs12).pr-3
           news(v-for="item in news", :item="item", :key="item.title")
+
+    k-footer
 </template>
 
 <script>
diff --git a/pages/releases.vue b/pages/releases.vue
index 45feed8..1804760 100644
--- a/pages/releases.vue
+++ b/pages/releases.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-container#container.container.pa-0(fluid, grid-list-xs)
+  v-container#container.pa-0(fluid, grid-list-xs)
     transition(name='fade', v-if='releases.length')
       v-layout(row, wrap, justify-center, style='margin: 0 1% 0 1%;')
         v-flex.time-container(md4, sm4, xs8)
@@ -84,6 +84,7 @@
           v-spacer
           v-btn.blue--text.darken-1(flat, @click='modal = false') Thanks!
     choice-window(:entry='choiceTitle')
+    k-footer
 </template>
 
 <script>
diff --git a/pages/seasons.vue b/pages/seasons.vue
index ca61d43..5cebd3b 100644
--- a/pages/seasons.vue
+++ b/pages/seasons.vue
@@ -91,6 +91,7 @@
           v-btn.blue--text.darken-1(flat, style='width: 100px', v-on:click.native='modal = false')
             | Thanks!
     choice-window(:entry='choiceTitle')
+    k-footer
 </template>
 
 <script>
diff --git a/pages/watchList.vue b/pages/watchList.vue
index ec62c9d..38ac97a 100644
--- a/pages/watchList.vue
+++ b/pages/watchList.vue
@@ -9,58 +9,58 @@
             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-card(style='background-color: #303030')
-            v-layout.list-container(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-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'
+                )
+          k-footer
 </template>
 
 <script>
@@ -256,6 +256,9 @@
   span
     width 100%
 
+  list-container
+    background-color #303030
+
   .elem-number
     margin 10px 0 0 0
     font-size 18px