From 1d2871ae997285305cf74036bab354e472028c2f Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Tue, 14 Jul 2020 15:56:25 +0200
Subject: [PATCH] :lipstick: (app) better responsive design

---
 src/App.vue                      |  2 +-
 src/components/DevSession.vue    |  1 +
 src/components/IntervalInput.vue | 20 +++++++++++++++++---
 src/components/ZoneMusic.vue     |  3 +++
 src/hooks/useInterval.ts         | 17 ++---------------
 src/styles/app.scss              |  4 ++++
 src/views/Home.vue               | 17 +++++++++++++++++
 7 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a049fb5..fb62c45 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,6 @@
 }
 
 svg {
-  margin: 1rem;
+  margin: 0.1rem;
 }
 </style>
diff --git a/src/components/DevSession.vue b/src/components/DevSession.vue
index 41115a9..36ef5cb 100644
--- a/src/components/DevSession.vue
+++ b/src/components/DevSession.vue
@@ -64,6 +64,7 @@ export default defineComponent({
 .dev-session {
   h2 {
     font-size: 24pt;
+    margin-bottom: 0;
   }
 
   input {
diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
index 538aa6a..64d5169 100644
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
 import { useInterval } from '../hooks/useInterval'
 
 export default defineComponent({
@@ -48,8 +48,22 @@ export default defineComponent({
   props: {
     editable: { type: Boolean, required: true }
   },
-  setup() {
-    const { minus, plus, label } = useInterval()
+  setup(props) {
+    const { interval, minInterval, minus, plus } = useInterval()
+
+    const label = computed(() => {
+      if (interval.value > 1) {
+        return props.editable
+          ? `${interval.value} minutes`
+          : `${interval.value} minute session`
+      }
+
+      if (interval.value === minInterval) {
+        return props.editable ? '30 seconds' : '30 second session'
+      }
+
+      return `${interval.value} minute`
+    })
 
     return {
       minus,
diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue
index 4a4f062..0c5b1bd 100644
--- a/src/components/ZoneMusic.vue
+++ b/src/components/ZoneMusic.vue
@@ -65,6 +65,9 @@ label[data-pm-holder] {
     }
   }
 }
+.pm-field {
+  margin-bottom: 0;
+}
 .disabled {
   color: desaturate($color, 70%);
 }
diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts
index f72e2f0..9c45c91 100644
--- a/src/hooks/useInterval.ts
+++ b/src/hooks/useInterval.ts
@@ -1,7 +1,6 @@
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
-import { computed } from '@vue/composition-api'
 
 const MIN_INTERVAL = 0.5
 
@@ -19,22 +18,10 @@ export const useInterval = () => {
     setInterval(Math.floor(interval.value + 1))
   }
 
-  const label = computed(() => {
-    if (interval.value > 1) {
-      return `${interval.value} minutes`
-    }
-
-    if (interval.value === MIN_INTERVAL) {
-      return '30 seconds'
-    }
-
-    return `${interval.value} minute`
-  })
-
   return {
     interval,
+    minInterval: MIN_INTERVAL,
     minus,
-    plus,
-    label
+    plus
   }
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index c9ef52e..366ff66 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -45,3 +45,7 @@ button {
     margin: 0.5rem;
   }
 }
+
+a {
+  color: white;
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4133fa7..8886044 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -76,6 +76,15 @@
       @play="start"
       @pause="pause"
     />
+    <footer>
+      chill with
+      <a
+        href="https://www.youtube.com/watch?v=5qap5aO4i9A"
+        target="_blank"
+        rel="noopener noreferrer"
+        >chilled cow</a
+      >
+    </footer>
   </div>
 </template>
 
@@ -120,6 +129,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables';
+
 .home {
   display: flex;
   flex: 1;
@@ -144,4 +155,10 @@ export default defineComponent({
 .music {
   margin: 1rem 0;
 }
+
+footer {
+  justify-self: flex-end;
+  font-family: $serif-font-family;
+  font-style: italic;
+}
 </style>