From 22a620594bc410fe5fdc0999fe366d50c45fa81d Mon Sep 17 00:00:00 2001 From: Adrian Gaudebert Date: Tue, 31 Oct 2017 22:05:05 +0000 Subject: [PATCH] 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 | 55 +++++++++++++++++ css/style.css | 156 ++++++++++++++++++------------------------------ index.html | 22 +++---- js/main.js | 42 ++++++++----- 4 files changed, 149 insertions(+), 126 deletions(-) create mode 100644 css/spinner.css diff --git a/css/spinner.css b/css/spinner.css new file mode 100644 index 0000000..d9fbaa4 --- /dev/null +++ b/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); + } +} diff --git a/css/style.css b/css/style.css index efe4d1b..46d9cc5 100644 --- a/css/style.css +++ b/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 { - background-color: #CB4D59; - background-image: none; +.btn, +.btn:hover, +.btn:focus { + background-color: #18AE90; border: 0; - border-bottom: 3px solid #8B121E; - border-radius: 0; + border-bottom: 0.3rem solid #017F66; + border-right: 0.2rem solid #079478; + border-radius: 0 0.2rem 0 0.3rem; color: #FEFDFD; cursor: pointer; - display: inline-block; - font-size: 14px; - font-weight: 400; - line-height: 1.42857; - outline: none; - padding: 5px 20px; + height: 100%; 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 { - background: #18AE90; - border-bottom: 3px solid #017F66; - padding: 10px 30px; +.btn:active { + border: none; + border-radius: 0; + 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: 30px; + width: 100%; } -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 { - list-style-type: none; +.sounds div { + display: table; + height: 10rem; } -.sounds ul li { - display: inline-block; - height: 43px; - line-height: 43px; - margin: 1em; - position: relative; - width: 320px; -} -.sounds ul li button { - overflow: hidden; - text-overflow: ellipsis; - width: 100%; +.sounds div label { + cursor: pointer; + display: table-cell; + padding: 0 0.5rem; + vertical-align: middle; } - -/* Spinner */ -/* Source: http://tobiasahlin.com/spinkit/ */ -.spinner { - margin: 100px auto; - width: 50px; - height: 40px; - text-align: center; - font-size: 10px; +@media (min-width: 36rem) { + .sounds { + grid-gap: 2rem; + grid-template-columns: repeat(3, 10rem); + width: 34rem; + } } - -.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; +@media (min-width: 48rem) { + .sounds { + grid-gap: 2rem; + grid-template-columns: repeat(4, 10rem); + width: 46rem; + } } - -.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); - } +@media (min-width: 60rem) { + .sounds { + grid-gap: 2rem; + grid-template-columns: repeat(5, 10rem); + width: 58rem; + } } diff --git a/index.html b/index.html index 57c6ea5..e076774 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ + @@ -21,9 +22,8 @@
-

Ghetto Blastr

@@ -38,17 +38,13 @@
-
    - -
+
diff --git a/js/main.js b/js/main.js index 648bc39..39ecb79 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,10 @@ (function () { Vue.component('ghetto-sound', { - template: '', + template: '
' + + '' + + '' + + '
', props: { asset: Object, }, @@ -45,24 +48,31 @@ Vue.component('ghetto-sound', { }, }); +var app = new Vue({ + el: '#soundboard', + data: { + title: '', + ready: false, + assets: [], + }, + methods: { + stopAllPlayingSounds: function () { + // Find all sounds currently playing and stop them. + this.$refs.sound.forEach(function (item) { + if (item.playing) { + item.stop(); + } + }); + }, + }, +}); + // 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, - methods: { - stopAllPlayingSounds: function () { - // Find all sounds currently playing and stop them. - this.$refs.sound.forEach(function (item) { - if (item.playing) { - item.stop(); - } - }); - }, - } - }); + app.$data.ready = true; + app.$data.title = source.title; + app.$data.assets = source.assets; }); })();