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

This commit changes the way the UI is displayed. Buttons are bigger and square, with the status icon at the bottom. It makes use of CSS grids to show all buttons nicely aligned. It also makes the UI squishy, showing more columns the wider the screen (up to 5 columns).

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