Spa

README.md

@@ -1,21 +1,29 @@
-# sentimony
+# sentimony-vue
 
 _Web development of Sentimony Records site_
 
 ### Used
 
-[Jekyll](https://jekyllrb.com) - static site generator based on [Ruby](https://www.ruby-lang.org)
-
 [VueJS](https://vuejs.org) - modern javascript framework
 
+[Firebase](https://firebase.google.com) - realtime database by [Google](https://developers.google.com)
+
+[Jekyll](https://jekyllrb.com) - static site generator based on [Ruby](https://www.ruby-lang.org)
+
 [Gulp](http://gulpjs.com) - task runner based on [NodeJS](https://nodejs.org)
 
 [Webpack](https://webpack.github.io) - module bundler based on [NodeJS](https://nodejs.org)
 
 [Coriolan UI](https://coriolan-ui.github.io) - [Sass](http://sass-lang.com) mixins pack
 
+<!-- [Disqus](https://disqus.com) - comments -->
+
 [Netlify](https://www.netlify.com) - automatic deploy & free hosting platform
 
+### Content
+
+[https://sentimony-db.firebaseio.com/.json](https://sentimony-db.firebaseio.com/.json)
+
 ### Run
 
 `npm i`

_components/About/about.vue

@@ -2,50 +2,50 @@
   <div class="about">
     <div class="about__wrapper">
       <p><img class="about__logo" src="/assets/img/svg-icons/sentimony-records-logo.svg" alt="Sentimony Records Logo SVG"></p>
-      <p>Sentimony Records is an independent record label started in Kyiv, Ukraine during the autumn 2006 by Ihor Orlovskyi also known as <a href='/artist/irukanji'>Irukanji</a>.</p>
+      <p>Sentimony Records is an independent record label started in Kyiv, Ukraine during the autumn 2006 by Ihor Orlovskyi also known as <router-link to="/artist/irukanji/">Irukanji</router-link>.</p>
       <p>{{ aboutDescription }}</p>
     </div>
   </div>
 </template>
 
 <script>
-  module.exports = {
-    data: function () {
-      return {
-        aboutDescription: "The main label's mission is to contribute the growth of the psychedelic chillout and trance scenes."
-      }
+module.exports = {
+  data: function () {
+    return {
+      aboutDescription: "The main label's mission is to contribute the growth of the psychedelic chillout and trance scenes."
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss?outputStyle=compressed">
-  .about {
-    background-color: rgba(#000,.5);
-    position: relative;
+.about {
+  background-color: rgba(#000,.5);
+  position: relative;
 
-    &__logo {
-      display: block;
-      width: 60px;
-      height: auto;
-      margin: 0 auto;
-    }
+  &__logo {
+    display: block;
+    width: 60px;
+    height: auto;
+    margin: 0 auto;
+  }
 
-    &__wrapper {
-      max-width: 460px;
-      margin: 0 auto;
-      padding: 5em 10px;
-      box-sizing: border-box;
+  &__wrapper {
+    max-width: 460px;
+    margin: 0 auto;
+    padding: 5em 10px;
+    box-sizing: border-box;
 
-      p {
+    p {
 
-        a {
-          color: #ff595e;
+      a {
+        color: #ff595e;
 
-          &:hover {
-            color: red;
-          }
+        &:hover {
+          color: red;
         }
       }
     }
   }
+}
 </style>

_components/ArtistPage/artist-page.vue

@@ -1,40 +1,135 @@
 <template>
   <div class="artist-page">
+
     <div class="page-artist">
       <svg-triangle></svg-triangle>
       <div class="page-artist__wrapper">
 
-        <div class="page-artist__photo">
-          <a class="page-artist__photo-link" :href="'https://content.sentimony.com/assets/img/artists/large/' + $route.params.slug + '.jpg'">
-            <img class="page-artist__photo-img lazyload"
-              :src="'https://content.sentimony.com/assets/img/artists/small/' + $route.params.slug + '.jpg'"
-              :data-srcset="'https://content.sentimony.com/assets/img/artists/medium/' + $route.params.slug + '.jpg 1x, https://content.sentimony.com/assets/img/artists/medium-retina/' + $route.params.slug + '.jpg 2x'"
-              :alt="$route.params.slug + ' Medium Thumbnail'"
-            >
-          </a>
+        <div class="page-artist__media">
+          <div class="page-artist__photo">
+            <a v-if="artist.photo" class="page-artist__photo-link" :href="'https://content.sentimony.com/assets/img/artists/large/' + artist.slug + '.jpg'">
+              <img class="page-artist__photo-img"
+                :src="'https://content.sentimony.com/assets/img/artists/small/' + artist.slug + '.jpg'"
+                :srcset="'https://content.sentimony.com/assets/img/artists/medium/' + artist.slug + '.jpg 1x, https://content.sentimony.com/assets/img/artists/medium-retina/' + artist.slug + '.jpg 2x'"
+                :alt="artist.title + ' Medium Thumbnail'"
+              >
+            </a>
+            <div v-else class="page-artist__photo-coming">Photo<br>coming soon</div>
+          </div>
+          <div class="page-artist__info">
+            <div v-if="artist.style" class="page-artist__small-info">
+              <div class="page-artist__style">{{ artist.style }}</div>
+            </div>
+            <h1 v-if="artist.title" class="page-artist__title">{{ artist.title }}</h1>
+            <div v-if="artist.name" class="page-artist__small-info">Name: {{ artist.name }}</div>
+            <div v-if="artist.location" class="page-artist__small-info">Location: {{ artist.location }}</div>
+          </div>
         </div>
 
-        <div class="page-artist__info">
-          <h1 class="page-artist__title">{{ $route.params.slug }}</h1>
+        <div class="page-artist__player-tabs">
+          <vue-tabs>
+            <v-tab v-if="artist.youtube_id" title="YouTube" icon="icon-youtube">
+              <div class="iframe-holder">
+                <div class="iframe-holder__ratio">
+                  <iframe
+                    class="iframe-holder__iframe"
+                    :src="'https://www.youtube.com/embed/videoseries?list=' + artist.youtube_id"
+                    :title="artist.title + ' YouTube Iframe'"
+                  ></iframe>
+                </div>
+              </div>
+            </v-tab>
+            <v-tab v-if="artist.soundcloud_id" title="SoundCloud" icon="icon-soundcloud">
+              <iframe
+                :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/' + artist.soundcloud_id + '&amp;color=00aabb&amp;hide_related=true&amp;show_comments=true&amp;show_user=false&amp;sharing=false&amp;show_bpm=true'"
+                :title="artist.title + ' SoundCloud Iframe'"
+                style="width:100%;height:500px;border:none;display:block"
+              ></iframe>
+            </v-tab>
+            <v-tab v-if="artist.facebook" title="Facebook" icon="icon-facebook">
+              <!-- TODO: What is appId ??? -->
+              <iframe
+                class="facebook-widget facebook-widget--size-s"
+                :src="'https://www.facebook.com/plugins/page.php?href=' + artist.facebook + '%2F&tabs&width=287&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=197035617008842'"
+                :title="artist.title + ' Facebook Mobile Iframe'"
+                scrolling="no"
+                frameborder="0"
+                allowTransparency="true"
+              ></iframe>
+              <iframe
+                class="facebook-widget facebook-widget--size-m"
+                :src="'https://www.facebook.com/plugins/page.php?href=' + artist.facebook + '%2F&tabs&width=500&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=197035617008842'"
+                :title="artist.title + ' Facebook Desktop Iframe'"
+                scrolling="no"
+                frameborder="0"
+                allowTransparency="true"
+              ></iframe>
+            </v-tab>
+            <v-tab v-if="artist.discogs" title="Discography" icon="icon-discogs">
+              <a :href="artist.discogs" target="_blank" rel="noopener" style="display:flex;align-items:center">
+                <img src="/assets/img/svg-icons/discogs.svg" style="width:20px;margin-right:.4em">
+                <span>Discogs</span>
+              </a>
+            </v-tab>
+          </vue-tabs>
         </div>
 
       </div>
     </div>
+
+    <!-- <div class="page-artist-content">
+      <div class="page-artist-content__wrapper">
+        <disqus-comments></disqus-comments>
+      </div>
+    </div> -->
+
   </div>
 </template>
 
 <script>
-  var SvgTriangle = require('./svg-triangle.vue');
+var SvgTriangle = require('./svg-triangle.vue');
+var {VueTabs, VTab} = require('vue-nav-tabs/dist/vue-tabs.min.js');
+// var DisqusComments = require('./disqus-comments.vue');
 
-  module.exports = {
-    components: {
-      'svg-triangle': SvgTriangle
+module.exports = {
+  components: {
+    'svg-triangle': SvgTriangle,
+    'vue-tabs': VueTabs,
+    'v-tab': VTab,
+    // 'disqus-comments': DisqusComments
+  },
+  data: function () {
+    return {
+      artist: [
+        {
+          slug: null,
+          title: null
+        }
+      ]
     }
-  };
+  },
+  created: function () {
+    this.fetchData();
+  },
+  watch: {
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData: function () {
+      var self = this;
+      var id = this.$route.params.slug;
+      this.axios.get('https://sentimony-db.firebaseio.com/artists/' + id + '.json').then(function (response) {
+        self.artist = response.data;
+        console.log('firebase: ARTIST ' + id + ' catched');
+      }).catch(function (error) {
+        console.log(error);
+      });
+    }
+  }
+}
 </script>
 
 <style lang="scss?outputStyle=compressed">
-  .artist-page {
-    // display: none;
-  }
+.artist-page {
+}
 </style>