From 0e81539ca13319dc0f561c8f2a9e8be44795cfb8 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Fri, 11 Aug 2017 15:32:31 -0700
Subject: [PATCH] Fix a few issues on mobile

---
 src/js/components/Modal.vue        | 30 +++++++++++++++++-------------
 src/js/components/ScheduleBox.vue  |  1 -
 src/js/components/ScheduleList.vue |  4 ++--
 src/js/components/ScheduleRow.vue  | 16 ++++++++++------
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/js/components/Modal.vue b/src/js/components/Modal.vue
index 97f54a2..d572b3b 100644
--- a/src/js/components/Modal.vue
+++ b/src/js/components/Modal.vue
@@ -2,30 +2,34 @@
     <transition name="modal">
         <div class="modal is-active" v-portal>
             <div class="modal-background" @click="$emit('close')"></div>
-            <div class="modal-inner-transition">
-                <slot></slot>
-            </div>
+            <slot></slot>
             <button class="modal-close is-large" @click="$emit('close')"></button>
         </div>
     </transition>
 </template>
 
-<style>
+<style lang="scss">
 .modal-enter-active, .modal-leave-active {
-    transition: all 0.15s ease;
+    &, &>.modal-content, &>.modal-card {
+        transition: all 0.15s ease;
+    }
 }
 
 .modal-enter, .modal-leave-active {
     opacity: 0;
-}
 
-.modal-enter-active .modal-inner-transition, .modal-leave-active .modal-inner-transition {
-    transition: all 0.15s ease;
-}
-
-.modal-enter .modal-inner-transition, .modal-leave-active .modal-inner-transition {
-    -webkit-transform: scale(0.98);
-    transform: scale(0.98);
+    &>.modal-content, &>.modal-card {
+        &.tilt-left-slight {
+            -webkit-transform: rotate(-1.0deg) scale(0.98);
+            transform: rotate(-1.0deg) scale(0.98);
+        }
+        &.tilt-right-slight {
+            -webkit-transform: rotate(1.0deg) scale(0.98);
+            transform: rotate(1.0deg) scale(0.98);
+        }
+        -webkit-transform: scale(0.98);
+        transform: scale(0.98);
+    }
 }
 </style>
 
diff --git a/src/js/components/ScheduleBox.vue b/src/js/components/ScheduleBox.vue
index 76a6b54..0c7d1ef 100644
--- a/src/js/components/ScheduleBox.vue
+++ b/src/js/components/ScheduleBox.vue
@@ -38,7 +38,6 @@
         <Modal v-if="isOpen" @close="isOpen = false" class="font-splatoon2">
             <div class="modal-card schedule-box tilt-left-slight" :class="cssClass">
                 <header class="modal-card-head">
-
                     <GameModeHeader :gameMode="gameMode"></GameModeHeader>
                 </header>
                 <section class="modal-card-body">
diff --git a/src/js/components/ScheduleList.vue b/src/js/components/ScheduleList.vue
index e14a54c..9dfb71f 100644
--- a/src/js/components/ScheduleList.vue
+++ b/src/js/components/ScheduleList.vue
@@ -11,7 +11,7 @@
         </div>
         <template v-if="!onlyFirst">
             <div v-if="second">
-                <div class="is-size-5 title-squid font-splatoon1">
+                <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
                     Next
                 </div>
 
@@ -19,7 +19,7 @@
             </div>
 
             <div v-if="others && others.length">
-                <div class="is-size-5 title-squid font-splatoon1">
+                <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
                     Future
                 </div>
 
diff --git a/src/js/components/ScheduleRow.vue b/src/js/components/ScheduleRow.vue
index 45ce065..f87460b 100644
--- a/src/js/components/ScheduleRow.vue
+++ b/src/js/components/ScheduleRow.vue
@@ -5,12 +5,16 @@
                 <div class="level-item title-color is-size-5">{{ schedule.rule.name }}</div>
             </div>
             <div class="level-right">
-                <div class="level-item">
-                    <template v-if="schedule.start_time > now">
-                        in {{ schedule.start_time - now | duration }},
-                    </template>
-                    {{ schedule.start_time | time }} &ndash;
-                    {{ schedule.end_time | time }}
+                <div class="level-item has-text-right">
+                    <div>
+                        <template v-if="schedule.start_time > now">
+                            in {{ schedule.start_time - now | duration }}<span class="is-hidden-mobile">,&nbsp;</span>
+                        </template>
+                        <div class="is-size-7">
+                            {{ schedule.start_time | time }} &ndash;
+                            {{ schedule.end_time | time }}
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>