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:
parent
4aeede8765
commit
22a620594b
55
css/spinner.css
Normal file
55
css/spinner.css
Normal 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);
|
||||
}
|
||||
}
|
||||
158
css/style.css
158
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
@media (min-width: 36rem) {
|
||||
.sounds {
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: repeat(3, 10rem);
|
||||
width: 34rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
.sounds {
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: repeat(4, 10rem);
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 60rem) {
|
||||
.sounds {
|
||||
grid-gap: 2rem;
|
||||
grid-template-columns: repeat(5, 10rem);
|
||||
width: 58rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
24
js/main.js
24
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;
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user