From 5ef1c284d013cad4baa5bb5d4fc1a3e40d291196 Mon Sep 17 00:00:00 2001
From: sharpshark28 <sharpshark28@gmail.com>
Date: Sun, 21 May 2017 16:17:45 -0500
Subject: [PATCH] Spells page fully functional

---
 src/App.vue                  |   8 +-
 src/components/Spell.vue     | 146 ++++++++++++++++++++++++-----------
 src/components/Spelllist.vue |   2 -
 3 files changed, 107 insertions(+), 49 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f250163..9c1de6d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="q-app">
-    <q-layout>
+    <q-layout class="bg-light">
       <nav-header-primary
         slot="header"
         class="toolbar dark"
@@ -73,3 +73,9 @@ export default {
   }
 }
 </script>
+
+
+<style lang="stylus">
+  .toolbar > .q-picker-textfield
+    margin: 0 .75em
+</style>
diff --git a/src/components/Spell.vue b/src/components/Spell.vue
index bf64b68..cb41800 100644
--- a/src/components/Spell.vue
+++ b/src/components/Spell.vue
@@ -1,49 +1,68 @@
 <template>
-  <div>
-    <h1>
-      {{spell.name}}
-      <span class="label circular bg-primary text-white">
-        {{level}}
-      </span>
-    </h1>
-    <ol class="list no-border">
-      <li class="item">
-        <i class="item-primary">accessibility</i>
-        <div class="item-content">
-          {{classes}}
-        </div>
-      </li>
-      <li class="item">
-        <i class="item-primary">group_work</i>
-        <div class="item-content">
-          {{spell.components.raw}}
-        </div>
-      </li>
-      <li class="item">
-        <i class="item-primary">school</i>
-        <div class="item-content">
-          {{spell.school}}
-        </div>
-      </li>
-      <li class="item">
-        <i class="item-primary">hourglass_full</i>
-        <div class="item-content">
-          {{spell.duration}}
-        </div>
-      </li>
-      <li class="item">
-        <i class="item-primary">av_timer</i>
-        <div class="item-content">
-          {{spell.casting_time}}
-        </div>
-      </li>
-      <li class="item">
-        <i class="item-primary">short_text</i>
-        <div class="item-content">
-          {{spell.description}}
-        </div>
-      </li>
-    </ol>
+  <div class="page-spell">
+    <router-link
+      tag="button"
+      to="/"
+      class="page-back-small primary shadow-1"
+    >
+      <i>arrow_back</i>
+      Back
+    </router-link>
+
+    <router-link
+      tag="button"
+      to="/"
+      class="page-back-big primary circular big shadow-2"
+    >
+      <i>arrow_back</i>
+    </router-link>
+
+    <div class="card bg-white">
+      <div class="card-title bg-pink text-white">
+        {{spell.name}}
+        <span class="label bg-white text-pink">
+          Level {{level}}
+        </span>
+      </div>
+      <ol class="list no-border">
+        <li class="item">
+          <i class="item-primary">short_text</i>
+          <div class="item-content">
+            {{spell.description}}
+          </div>
+        </li>
+        <li class="item">
+          <i class="item-primary">accessibility</i>
+          <div class="item-content">
+            {{classes}}
+          </div>
+        </li>
+        <li class="item">
+          <i class="item-primary">group_work</i>
+          <div class="item-content">
+            {{spell.components.raw}}
+          </div>
+        </li>
+        <li class="item">
+          <i class="item-primary">school</i>
+          <div class="item-content">
+            {{spell.school}}
+          </div>
+        </li>
+        <li class="item">
+          <i class="item-primary">hourglass_full</i>
+          <div class="item-content">
+            {{spell.duration}}
+          </div>
+        </li>
+        <li class="item">
+          <i class="item-primary">av_timer</i>
+          <div class="item-content">
+            {{spell.casting_time}}
+          </div>
+        </li>
+      </ol>
+    </div>
   </div>
 </template>
 
@@ -69,5 +88,40 @@ export default {
 }
 </script>
 
-<style>
+<style scoped lang="stylus">
+  .page-spell
+    width: 100%
+    height: 100%
+    position: relative
+    padding: 1rem
+  .page-back-small
+    margin-bottom: 1rem
+  .page-back-big
+    display: none
+  .card
+    margin: 0 auto
+    max-width: 40rem
+  .card-title .label
+    margin-left: .5em
+  .list
+    padding-left: 16px
+  .item
+    height: auto
+    .item-primary
+      margin: 12px 0
+    .item-content
+      margin-left: 50px
+  @media screen and (min-height: 800px)
+    .card
+      position: relative
+      top: 50%
+      transform: translateY(-50%)
+    .page-back-big
+      display: block
+      position: absolute
+      top: 1rem
+      left: 1rem
+      z-index: 1
+    .page-back-small
+      display: none
 </style>
diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index fe65cf2..aa60718 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -69,8 +69,6 @@ export default {
 </script>
 
 <style lang="stylus">
-  .toolbar > .q-picker-textfield
-    margin: 0 .75em
   .list.striped .item:nth-child(2n).checked
     background: #fff9c4
   .list.striped .item:nth-child(2n+1).checked