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
This commit is contained in:
Adrian 2017-11-05 12:05:33 +01:00
commit cc8e9eb8b2
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;
}
.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;
}
}

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