Restore smaller header on share page

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;
 }

public/src/store/index.js

@@ -10,6 +10,7 @@ const store = new Vuex.Store({
     recents: [],
     item: {},
     services: [],
+    share: true,
   },
 
   actions: {

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;

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 {

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);