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 { header {
margin: 0.5em; background: #281c3d;
text-align: center; text-align: center;
padding: 1rem 0 2rem 0;
} }
header h1 { header h1 {
font-size: 3em; font-size: 3rem;
margin: 0;
} }
header h2 { header h2 {
color: #9c9c9c;
text-transform: capitalize; 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: 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; color: #FEFDFD;
cursor: pointer; cursor: pointer;
display: inline-block; height: 100%;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
outline: none;
padding: 5px 20px;
position: relative; position: relative;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
-moz-user-select: none; -moz-user-select: none;
-webkit-appearance: 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; background: url('../img/play.svg') no-repeat center center;
font-size: 1em; display: block;
height: 30px; height: 30px;
bottom: 0.3rem;
left: 0; left: 0;
position: absolute; 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; background: url('../img/stop.svg') no-repeat center center;
} }
button:active {
top:3px;
border-bottom: 0;
}
.sounds { .sounds {
display: grid;
grid-template-columns: repeat(2, 10rem);
grid-gap: 2rem 1rem;
margin: 2rem auto;
text-align: center; 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;
font-size: 10px;
} }
@media (min-width: 48rem) {
.spinner > div { .sounds {
background-color: #dbdbdb; grid-gap: 2rem;
height: 100%; grid-template-columns: repeat(4, 10rem);
width: 6px; width: 46rem;
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: 60rem) {
.spinner .rect2 { .sounds {
-webkit-animation-delay: -1.1s; grid-gap: 2rem;
animation-delay: -1.1s; grid-template-columns: repeat(5, 10rem);
} width: 58rem;
}
.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

@ -13,6 +13,7 @@
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/spinner.css">
</head> </head>
<body> <body>
@ -21,9 +22,8 @@
<![endif]--> <![endif]-->
<div id="soundboard"> <div id="soundboard">
<header> <header>
<h1>Ghetto Blastr</h1>
<template> <template>
<h2>{{ title }}</h2> <h1>{{ title }} Ghetto Blastr</h1>
</template> </template>
</header> </header>
@ -38,17 +38,13 @@
</section> </section>
<section class="sounds" v-else> <section class="sounds" v-else>
<ul> <template v-for="asset in assets">
<template v-for="asset in assets"> <ghetto-sound
<li> v-bind:asset="asset"
<ghetto-sound v-on:ghetto-playsound="stopAllPlayingSounds"
v-bind:asset="asset" ref="sound"
v-on:ghetto-playsound="stopAllPlayingSounds" ></ghetto-sound>
ref="sound" </template>
></ghetto-sound>
</li>
</template>
</ul>
</section> </section>
</div> </div>

View File

@ -1,7 +1,10 @@
(function () { (function () {
Vue.component('ghetto-sound', { 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: { props: {
asset: Object, 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. // This is a the request to get the main JSON file that drives the website.
// Only load the view when that file is downloaded. // Only load the view when that file is downloaded.
GHETTO_SOURCE_REQUEST.then(function (source) { GHETTO_SOURCE_REQUEST.then(function (source) {
var data = Object.assign({}, source, { ready: true }); app.$data.ready = true;
var app = new Vue({ app.$data.title = source.title;
el: '#soundboard', app.$data.assets = source.assets;
data: data,
methods: {
stopAllPlayingSounds: function () {
// Find all sounds currently playing and stop them.
this.$refs.sound.forEach(function (item) {
if (item.playing) {
item.stop();
}
});
},
}
});
}); });
})(); })();