From 122060e9a5ed0d6123ccb86df46f79e9ba4e0c25 Mon Sep 17 00:00:00 2001
From: Jonathan Cremin <jonathan@crem.in>
Date: Mon, 24 Oct 2016 00:18:36 +0100
Subject: [PATCH] Restore smaller header on share page

---
 public/src/app.vue         | 25 +++++++++++++++++++++----
 public/src/store/index.js  |  1 +
 public/src/style/style.css | 16 +++++++++++++++-
 public/src/views/index.vue |  1 +
 public/src/views/share.vue |  3 ++-
 routes/index.js            |  1 +
 routes/share.js            |  1 +
 webpack.config.js          |  5 -----
 8 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/public/src/app.vue b/public/src/app.vue
index 9c4491b..fa62d00 100644
--- a/public/src/app.vue
+++ b/public/src/app.vue
@@ -1,8 +1,14 @@
 <template>
   <div id="app">
-    <h1 class="title has-text-centered header"><router-link to="/" exact>
-      match<span class="lighter">.audio</span>
-    </router-link></h1>
+    <div class="header" v-bind:class="{ 'share': $store.state.share }">
+      <div class="container">
+        <h1 class="title has-text-centered">
+          <router-link to="/" exact>
+            match<span class="lighter">.audio</span>
+          </router-link>
+        </h1>
+      </div>
+    </div>
     <div>
       <router-view></router-view>
     </div>
@@ -19,8 +25,10 @@ body {
   color: #445470;
   background: #fff;
 }
-h1 {
+.header {
   background: #FE4365;
+}
+h1 {
   padding: 25px 0;
 }
 h1 a {
@@ -29,6 +37,15 @@ h1 a {
 h1 a:hover {
   color: #ffacc5;
 }
+.share {
+  margin-bottom: 40px;
+}
+.share h1 {
+  text-align: left;
+  font-size: 1.5em;
+  line-height: 36px;
+  padding: 5px 0;
+}
 .title a:hover {
   border-bottom: none;
 }
diff --git a/public/src/store/index.js b/public/src/store/index.js
index bf862fe..812386d 100644
--- a/public/src/store/index.js
+++ b/public/src/store/index.js
@@ -10,6 +10,7 @@ const store = new Vuex.Store({
     recents: [],
     item: {},
     services: [],
+    share: true,
   },
 
   actions: {
diff --git a/public/src/style/style.css b/public/src/style/style.css
index f7d0d73..d041677 100644
--- a/public/src/style/style.css
+++ b/public/src/style/style.css
@@ -3,8 +3,10 @@ body {
   color: #445470;
   background: #fff;
 }
-h1 {
+.header {
   background: #FE4365;
+}
+h1 {
   padding: 25px 0;
 }
 h1 a {
@@ -13,6 +15,15 @@ h1 a {
 h1 a:hover {
   color: #ffacc5;
 }
+.share {
+  margin-bottom: 40px;
+}
+.share h1 {
+  text-align: left;
+  font-size: 1.5em;
+  line-height: 36px;
+  padding: 5px 0;
+}
 .title a:hover {
   border-bottom: none;
 }
@@ -75,6 +86,9 @@ p {
 .input:focus {
   border-color: #FE4365;
 }
+.search {
+  margin-bottom: 25vh;
+}
 form {
   margin-top: 25vh;
   margin-bottom: 20px;
diff --git a/public/src/views/index.vue b/public/src/views/index.vue
index a7bda41..5a401db 100644
--- a/public/src/views/index.vue
+++ b/public/src/views/index.vue
@@ -60,6 +60,7 @@ export default {
     // fetch the data when the view is created and the data is
     // already being observed
     this.fetch();
+    this.$store.state.share = false;
   },
   data() {
     return {
diff --git a/public/src/views/share.vue b/public/src/views/share.vue
index baa50a8..026c012 100644
--- a/public/src/views/share.vue
+++ b/public/src/views/share.vue
@@ -58,6 +58,7 @@ export default {
     this.interval = setInterval(() => {
       this.fetch();
     }, 1000);
+    this.$store.state.share = true;
   },
   watch: {
     // call again the method if the route changes
@@ -69,7 +70,7 @@ export default {
       const id = this.$route.params.id;
       if (item && item.externalId === id && (typeof window === 'undefined' || !item.matches.some(match => match.matching))) {
         this.item = this.$store.state.item;
-      } else {
+      } else if (id) {
         fetchItem(this.$route.params.service, this.$route.params.type, id).then((res) => {
           if(!res.body.matches.some(match => match.matching)) {
             clearInterval(this.interval);
diff --git a/routes/index.js b/routes/index.js
index fc06b49..beeb4d7 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -36,6 +36,7 @@ export default function* () {
     title: 'Share Music',
     shareUrl: `${this.request.origin}${url}`,
     image: `${this.request.origin}/assets/images/logo-512.png`,
+    share: false,
   };
 
   yield this.render('index', {
diff --git a/routes/share.js b/routes/share.js
index feb1b1f..afe1a8b 100644
--- a/routes/share.js
+++ b/routes/share.js
@@ -50,6 +50,7 @@ export default function* (serviceId, type, itemId, format) {
     const initialState = {
       item: share,
       services: services.map(service => service.id),
+      share: true,
     };
 
     const url = `/${serviceId}/${type}/${itemId}`;
diff --git a/webpack.config.js b/webpack.config.js
index ef997a0..27c735e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,11 +31,6 @@ module.exports = {
   },
   devtool: '#source-map',
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"',
-      },
-    }),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new CopyWebpackPlugin([{
       from: path.resolve(__dirname, './node_modules/bulma/css'),