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).
This commit is contained in:
Adrian 2017-10-31 22:05:05 +00:00
parent 4aeede8765
commit 22a620594b
4 changed files with 149 additions and 126 deletions

55
css/spinner.css Normal file
View File

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

View File

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

View File

@ -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>
<template v-for="asset in assets">
<ghetto-sound
v-bind:asset="asset"
v-on:ghetto-playsound="stopAllPlayingSounds"
ref="sound"
></ghetto-sound>
</template>
</section>
</div>

View File

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