Merge branch '1-better-ui-mobile-desktop' into 'master'

Fix #1 - Rearrange UI for mobile and desktop screens.

Closes #1

See merge request adngdb/ghettoblastr!1

css/spinner.css

@@ -0,0 +1,55 @@
+/* Spinner */
+/* Source: http://tobiasahlin.com/spinkit/ */
+
+.spinner {
+  margin: 100px auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #dbdbdb;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}

css/style.css

@@ -21,133 +21,95 @@ body {
 }
 
 header {
-    margin: 0.5em;
+    background: #281c3d;
     text-align: center;
+    padding: 1rem 0 2rem 0;
 }
 header h1 {
-    font-size: 3em;
+    font-size: 3rem;
+    margin: 0;
 }
 header h2 {
+    color: #9c9c9c;
     text-transform: capitalize;
-    color: #6f6f6f;
 }
 
-button, button:hover, button:focus {
+.btn,
-    background-color: #CB4D59;
+.btn:hover,
-    background-image: none;
+.btn:focus {
+    background-color: #18AE90;
     border: 0;
-    border-bottom: 3px solid #8B121E;
+    border-bottom: 0.3rem solid #017F66;
-    border-radius: 0;
+    border-right: 0.2rem solid #079478;
+    border-radius: 0 0.2rem 0 0.3rem;
     color: #FEFDFD;
     cursor: pointer;
-    display: inline-block;
+    height: 100%;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 1.42857;
-    outline: none;
-    padding: 5px 20px;
     position: relative;
-    text-decoration: none;
-    vertical-align: top;
-    white-space: nowrap;
     -moz-user-select: none;
     -webkit-appearance: none;
 }
-button.play, button.play:hover, button.play:focus {
+.btn:active {
-    background: #18AE90;
+    border: none;
-    border-bottom: 3px solid #017F66;
+    border-radius: 0;
-    padding: 10px 30px;
+    top: 0.3rem;
+    left: 0.2rem;
+    height: 97%;
 }
-button.play:before {
+
-    content: "";
+.audio-btn .status-icon {
     background: url('../img/play.svg') no-repeat center center;
-    font-size: 1em;
+    display: block;
     height: 30px;
+    bottom: 0.3rem;
     left: 0;
     position: absolute;
-    top: 5px;
+    width: 100%;
-    width: 30px;
 }
-button.play.playing:before {
+.audio-btn:active .status-icon {
+    bottom: 0;
+}
+.audio-btn .status-icon.playing {
     background: url('../img/stop.svg') no-repeat center center;
 }
-button:active {
-    top:3px;
-    border-bottom: 0;
-}
 
 .sounds {
+    display: grid;
+    grid-template-columns: repeat(2, 10rem);
+    grid-gap: 2rem 1rem;
+    margin: 2rem auto;
     text-align: center;
+    width: 21rem;
 }
-.sounds ul {
+.sounds div {
-    list-style-type: none;
+    display: table;
+    height: 10rem;
 }
-.sounds ul li {
+.sounds div label {
-    display: inline-block;
+    cursor: pointer;
-    height: 43px;
+    display: table-cell;
-    line-height: 43px;
+    padding: 0 0.5rem;
-    margin: 1em;
+    vertical-align: middle;
-    position: relative;
-    width: 320px;
-}
-.sounds ul li button {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
 }
 
-
+@media (min-width: 36rem) {
-/* Spinner */
+    .sounds {
-/* Source: http://tobiasahlin.com/spinkit/ */
+        grid-gap: 2rem;
-.spinner {
+        grid-template-columns: repeat(3, 10rem);
-  margin: 100px auto;
+        width: 34rem;
-  width: 50px;
+    }
-  height: 40px;
+}
-  text-align: center;
+@media (min-width: 48rem) {
-  font-size: 10px;
+    .sounds {
-}
+        grid-gap: 2rem;
-
+        grid-template-columns: repeat(4, 10rem);
-.spinner > div {
+        width: 46rem;
-  background-color: #dbdbdb;
+    }
-  height: 100%;
+}
-  width: 6px;
+@media (min-width: 60rem) {
-  display: inline-block;
+    .sounds {
-
+        grid-gap: 2rem;
-  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        grid-template-columns: repeat(5, 10rem);
-  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        width: 58rem;
-}
-
-.spinner .rect2 {
-  -webkit-animation-delay: -1.1s;
-  animation-delay: -1.1s;
-}
-
-.spinner .rect3 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-.spinner .rect4 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-
-.spinner .rect5 {
-  -webkit-animation-delay: -0.8s;
-  animation-delay: -0.8s;
-}
-
-@-webkit-keyframes sk-stretchdelay {
-  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
-  20% { -webkit-transform: scaleY(1.0) }
-}
-
-@keyframes sk-stretchdelay {
-  0%, 40%, 100% {
-    transform: scaleY(0.4);
-    -webkit-transform: scaleY(0.4);
-  }  20% {
-    transform: scaleY(1.0);
-    -webkit-transform: scaleY(1.0);
     }
 }

index.html

@@ -13,6 +13,7 @@
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/main.css">
         <link rel="stylesheet" href="css/style.css">
+        <link rel="stylesheet" href="css/spinner.css">
     </head>
 
     <body>
@@ -21,9 +22,8 @@
         <![endif]-->
         <div id="soundboard">
             <header>
-                <h1>Ghetto Blastr</h1>
                 <template>
-                    <h2>{{ title }}</h2>
+                    <h1>{{ title }} Ghetto Blastr</h1>
                 </template>
             </header>
 
@@ -38,17 +38,13 @@
             </section>
 
             <section class="sounds" v-else>
-                <ul>
                 <template v-for="asset in assets">
-                        <li>
                     <ghetto-sound
                         v-bind:asset="asset"
                         v-on:ghetto-playsound="stopAllPlayingSounds"
                         ref="sound"
                     ></ghetto-sound>
-                        </li>
                 </template>
-                </ul>
             </section>
         </div>
 

js/main.js

@@ -1,7 +1,10 @@
 (function () {
 
 Vue.component('ghetto-sound', {
-    template: '<button v-bind:class="[\'play\', { playing: playing }]" v-on:click="click">{{ asset.name }}</button>',
+    template: `<div class="btn audio-btn" v-on:click="click">
+        <label>{{ asset.name }}</label>
+        <span v-bind:class="[\'status-icon\', { playing: playing }]"></span>
+    </div>`,
     props: {
         asset: Object,
     },
@@ -45,13 +48,13 @@ Vue.component('ghetto-sound', {
     },
 });
 
-// This is a the request to get the main JSON file that drives the website.
-// Only load the view when that file is downloaded.
-GHETTO_SOURCE_REQUEST.then(function (source) {
-    var data = Object.assign({}, source, { ready: true });
 var app = new Vue({
     el: '#soundboard',
-        data: data,
+    data: {
+        title: '',
+        ready: false,
+        assets: [],
+    },
     methods: {
         stopAllPlayingSounds: function () {
             // Find all sounds currently playing and stop them.
@@ -61,8 +64,15 @@ GHETTO_SOURCE_REQUEST.then(function (source) {
                 }
             });
         },
-        }
+    },
 });
+
+// This is a the request to get the main JSON file that drives the website.
+// Only load the view when that file is downloaded.
+GHETTO_SOURCE_REQUEST.then(function (source) {
+    app.$data.ready = true;
+    app.$data.title = source.title;
+    app.$data.assets = source.assets;
 });
 
 })();