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:
commit
cc8e9eb8b2
|
|
@ -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