Merge branch 'development' of Halftone/halftone into master
This commit is contained in:
Gregory Ballantine
Gogs
commit
d071bdeba6
@ -19,4 +19,16 @@ class Album extends Eloquent {
|
||||
return $this->hasMany('Fieldprotocol\Music\Song');
|
||||
}
|
||||
|
||||
public function links() {
|
||||
return $this->hasMany('Fieldprotocol\Music\StoreLink', 'album_id');
|
||||
}
|
||||
|
||||
public function releaseDate() {
|
||||
return date('F j, Y', strtotime($this->release_date));
|
||||
}
|
||||
|
||||
public function releaseYear() {
|
||||
return date('Y', strtotime($this->release_date));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
20
app/Fieldprotocol/Music/StoreLink.php
Normal file
20
app/Fieldprotocol/Music/StoreLink.php
Normal file
@ -0,0 +1,20 @@
|
||||
<?php
|
||||
|
||||
namespace Fieldprotocol\Music;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model as Eloquent;
|
||||
|
||||
class StoreLink extends Eloquent {
|
||||
|
||||
protected $table = 'store_links';
|
||||
|
||||
protected $fillable = [
|
||||
'link_name',
|
||||
'link_ref',
|
||||
];
|
||||
|
||||
public function album() {
|
||||
return $this->belongsTo('Fieldprotocol\Music\Album', 'album_id');
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,9 +1,15 @@
|
||||
<?php
|
||||
|
||||
// Home view(s)
|
||||
require 'routes/index.php';
|
||||
require 'routes/about.php';
|
||||
require 'routes/contact.php';
|
||||
require 'routes/home.php';
|
||||
require 'routes/music.php';
|
||||
require 'routes/shows.php';
|
||||
// Main view routes
|
||||
require 'routes/pages/index.php';
|
||||
require 'routes/pages/about.php';
|
||||
require 'routes/pages/contact.php';
|
||||
require 'routes/pages/home.php';
|
||||
require 'routes/pages/music.php';
|
||||
require 'routes/pages/shows.php';
|
||||
|
||||
// API routes
|
||||
require 'routes/apiv1/music.php';
|
||||
|
||||
// Errors
|
||||
require 'routes/errors/404.php';
|
||||
|
||||
38
app/routes/apiv1/music.php
Normal file
38
app/routes/apiv1/music.php
Normal file
@ -0,0 +1,38 @@
|
||||
<?php
|
||||
|
||||
// retrieve album info
|
||||
$app->get('/apiv1/music/album-info/:albumid', function($albumid) use($app) {
|
||||
|
||||
if (!ctype_digit($albumid)) {
|
||||
echo 'Don\'t do that';
|
||||
return;
|
||||
}
|
||||
|
||||
$album = $app->album->where('id', $albumid)->first();
|
||||
|
||||
if ($album) {
|
||||
echo json_encode($album);
|
||||
} else {
|
||||
$app->notFound();
|
||||
}
|
||||
|
||||
})->name('apiv1.music.album-info');
|
||||
|
||||
// retrieve an album's songs
|
||||
$app->get('/apiv1/music/album-songs/:albumid', function($albumid) use($app) {
|
||||
|
||||
if (!ctype_digit($albumid)) {
|
||||
echo 'Don\'t do that';
|
||||
return;
|
||||
}
|
||||
|
||||
$album = $app->album->where('id', $albumid)->first();
|
||||
|
||||
if ($album) {
|
||||
$json = ['songs' => $album->songs];
|
||||
echo json_encode($json);
|
||||
} else {
|
||||
$app->notFound();
|
||||
}
|
||||
|
||||
})->name('apiv1.music.album-songs');
|
||||
5
app/routes/errors/404.php
Normal file
5
app/routes/errors/404.php
Normal file
@ -0,0 +1,5 @@
|
||||
<?php
|
||||
|
||||
$app->notFound(function() use ($app) {
|
||||
$app->render('errors/404.twig');
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
<?php
|
||||
|
||||
$app->get('/music', function() use($app) {
|
||||
|
||||
$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
|
||||
$songs = $albums[0]->songs;
|
||||
|
||||
$app->render('music.twig', [
|
||||
'albums' => $albums,
|
||||
'songs' => $songs,
|
||||
]);
|
||||
|
||||
})->name('music');
|
||||
@ -2,6 +2,6 @@
|
||||
|
||||
$app->get('/about', function() use($app) {
|
||||
|
||||
$app->render('about.twig');
|
||||
$app->render('pages/about.twig');
|
||||
|
||||
})->name('about');
|
||||
@ -2,6 +2,6 @@
|
||||
|
||||
$app->get('/contact', function() use($app) {
|
||||
|
||||
$app->render('contact.twig');
|
||||
$app->render('pages/contact.twig');
|
||||
|
||||
})->name('contact');
|
||||
@ -2,6 +2,6 @@
|
||||
|
||||
$app->get('/home', function() use($app) {
|
||||
|
||||
$app->render('home.twig');
|
||||
$app->render('pages/home.twig');
|
||||
|
||||
})->name('home');
|
||||
16
app/routes/pages/music.php
Executable file
16
app/routes/pages/music.php
Executable file
@ -0,0 +1,16 @@
|
||||
<?php
|
||||
|
||||
// music page
|
||||
$app->get('/music', function() use($app) {
|
||||
|
||||
$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
|
||||
$songs = $albums[0]->songs;
|
||||
$links = $albums[0]->links;
|
||||
|
||||
$app->render('pages/music.twig', [
|
||||
'albums' => $albums,
|
||||
'songs' => $songs,
|
||||
'links' => $links,
|
||||
]);
|
||||
|
||||
})->name('music');
|
||||
@ -10,7 +10,7 @@ $app->get('/shows', function() use($app) {
|
||||
$show->time = date('H:i', strtotime($show->datetime));
|
||||
}
|
||||
|
||||
$app->render('shows.twig', [
|
||||
$app->render('pages/shows.twig', [
|
||||
'shows' => $shows,
|
||||
]);
|
||||
|
||||
13
app/views/errors/404.twig
Normal file
13
app/views/errors/404.twig
Normal file
@ -0,0 +1,13 @@
|
||||
{% extends 'templates/default.twig' %}
|
||||
|
||||
{% block title %}404 Error{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Error information section -->
|
||||
<section id="error-section" class="row">
|
||||
<div class="col-xs-12 card hover-box shadow-1">
|
||||
<h4>404 Error</h4>
|
||||
<p>The URL you were looking for doesn't exist. Perhaps you'd like to start over at the <a href="{{ urlFor('home') }}">home page</a>?</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@ -1,7 +1,6 @@
|
||||
{% extends 'templates/default.twig' %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script type="text/javascript" src="/js/modules/music-player.js"></script>
|
||||
<script type="text/javascript" src="/js/music.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
@ -21,12 +20,21 @@
|
||||
<!-- left album stuff -->
|
||||
<article class="col-sm-5 col-xs-12">
|
||||
<div class="thumbnail shadow-1">
|
||||
<img class="image-responsive" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
|
||||
<img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
|
||||
<div class="caption">
|
||||
<h3>{{ albums[0].title }}</h3>
|
||||
<h3 id="album-title">{{ albums[0].title }}</h3>
|
||||
<h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
|
||||
{% if albums[0].description %}
|
||||
<hr />
|
||||
<p>{{ albums[0].description }}</p>
|
||||
<p id="album-description">{{ albums[0].description }}</p>
|
||||
{% endif %}
|
||||
{% if links %}
|
||||
<hr />
|
||||
<ul style="padding-left:20px">
|
||||
{% for link in links %}
|
||||
<li>Buy on <a href="{{ link.link_ref }}">{{ link.link_name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -35,6 +43,7 @@
|
||||
<!-- right album stuff -->
|
||||
<div class="col-sm-7 col-xs-12">
|
||||
<article id="music-player-card" class="card">
|
||||
<h4 id="track-title">{{ songs[0].title }}</h4>
|
||||
<audio id="music-player" controls>
|
||||
<source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
|
||||
<source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
|
||||
@ -44,7 +53,7 @@
|
||||
<article class="card">
|
||||
<ul class="now-playing-list">
|
||||
{% for song in songs %}
|
||||
<li class="music-track" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
|
||||
<li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
|
||||
<span>{{ song.track_order }}. {{ song.title }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@ -57,11 +66,15 @@
|
||||
<section class="row">
|
||||
{% for album in albums %}
|
||||
<!-- album details -->
|
||||
<div class="music-album col-sm-3 col-xs-6">
|
||||
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
|
||||
<div class="thumbnail shadow-1">
|
||||
<img src="{{ album.album_art }}" alt="{{ album.title }}">
|
||||
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
|
||||
<div class="caption">
|
||||
<h5>{{ album.title }}</h5>
|
||||
<h5>{{ album.title }} ({{ album.releaseYear }})</h5>
|
||||
{% if album.description %}
|
||||
<hr />
|
||||
<p id="album-description">{{ album.description|length > 50 ? album.description[:50] ~ '...' : album.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,28 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<title>{% block title %}{% endblock %} | Halftone</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<meta charset="utf-8" />
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<title>{% block title %}{% endblock %} | Halftone</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css" media="screen,projection"/>
|
||||
{% block stylesheets %}{% endblock %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
{% block stylesheets %}{% endblock %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="/js/main.js"></script>
|
||||
{% block javascripts %}{% endblock %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.min.js"></script>
|
||||
<script type="text/javascript" src="/js/main.js"></script>
|
||||
{% block javascripts %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<div class="container">
|
||||
{% include 'templates/partials/header.twig' %}
|
||||
<div id="wrapper">
|
||||
<div class="container">
|
||||
{% include 'templates/partials/header.twig' %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'templates/partials/footer.twig' %}
|
||||
{% include 'templates/partials/footer.twig' %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
#about-header
|
||||
margin-bottom: 25px
|
||||
padding-bottom: 15px
|
||||
background: white
|
||||
|
||||
img
|
||||
+position(absolute, 0 null null 0)
|
||||
+size(100% 480px)
|
||||
/*+filter(blur(2px))
|
||||
|
||||
.about-band
|
||||
margin-top: 405px
|
||||
|
||||
h2
|
||||
margin-bottom: 20px
|
||||
color: white
|
||||
|
||||
p
|
||||
color: $text-color
|
||||
margin-bottom: 25px
|
||||
padding-bottom: 15px
|
||||
background: white
|
||||
|
||||
img
|
||||
+position(absolute, 0 null null 0)
|
||||
+size(100% 480px)
|
||||
/*+filter(blur(2px))
|
||||
|
||||
.about-band
|
||||
margin-top: 405px
|
||||
|
||||
h2
|
||||
margin-bottom: 20px
|
||||
color: white
|
||||
|
||||
p
|
||||
color: $text-color
|
||||
|
||||
#about-content
|
||||
section
|
||||
a
|
||||
display: block
|
||||
+position(absolute, 0 null null 15px)
|
||||
+calc(width, "100% - 30px")
|
||||
+calc(height, "100% - 20px")
|
||||
border-radius: 5px
|
||||
text-decoration: none
|
||||
+transition(all, 300ms ease-in)
|
||||
|
||||
h3,
|
||||
h4,
|
||||
p
|
||||
color: $text-color
|
||||
|
||||
&:hover
|
||||
a
|
||||
background: rgba(#000, .15)
|
||||
|
||||
hr
|
||||
border-color: #bbb
|
||||
section
|
||||
a
|
||||
display: block
|
||||
+position(absolute, 0 null null 15px)
|
||||
+calc(width, "100% - 30px")
|
||||
+calc(height, "100% - 20px")
|
||||
border-radius: 5px
|
||||
text-decoration: none
|
||||
+transition(all, 300ms ease-in)
|
||||
|
||||
h3,
|
||||
h4,
|
||||
p
|
||||
color: $text-color
|
||||
|
||||
&:hover
|
||||
a
|
||||
background: rgba(#000, .15)
|
||||
|
||||
hr
|
||||
border-color: #bbb
|
||||
|
||||
@ -1,42 +1,39 @@
|
||||
#contact-header
|
||||
margin-top: -20px
|
||||
text-align: center
|
||||
margin-top: -20px
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
color: white
|
||||
font:
|
||||
size: 34px
|
||||
weight: bold
|
||||
h1
|
||||
color: white
|
||||
font:
|
||||
size: 34px
|
||||
weight: bold
|
||||
|
||||
#contact-info
|
||||
.card
|
||||
max-width: 680px
|
||||
margin-top: 15px
|
||||
padding:
|
||||
top: 20px
|
||||
bottom: 20px
|
||||
background: #f0f0f0
|
||||
.card
|
||||
max-width: 680px
|
||||
margin-top: 15px
|
||||
padding:
|
||||
top: 20px
|
||||
bottom: 20px
|
||||
background: #f0f0f0
|
||||
|
||||
hr
|
||||
border-color: #666
|
||||
a,
|
||||
p,
|
||||
h3
|
||||
text-align: center
|
||||
font-size: 20px
|
||||
|
||||
a,
|
||||
p,
|
||||
h3
|
||||
text-align: center
|
||||
font-size: 20px
|
||||
p
|
||||
padding: 5px
|
||||
color: #212121
|
||||
|
||||
p
|
||||
padding: 5px
|
||||
color: #212121
|
||||
a
|
||||
color: darkred
|
||||
text-decoration: none
|
||||
+transition(color 200ms ease-in-out)
|
||||
|
||||
a
|
||||
color: darkred
|
||||
text-decoration: none
|
||||
+transition(color 200ms ease-in-out)
|
||||
&:hover
|
||||
color: red
|
||||
|
||||
&:hover
|
||||
color: red
|
||||
|
||||
h3
|
||||
margin-bottom: 15px
|
||||
h3
|
||||
margin-bottom: 15px
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
#featured
|
||||
height: auto
|
||||
margin: 0 auto 20px
|
||||
padding: 5px
|
||||
background: none
|
||||
|
||||
.hover-box
|
||||
+transition(all, 200ms)
|
||||
height: auto
|
||||
margin: 0 auto 20px
|
||||
padding: 5px
|
||||
background: none
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
|
||||
.hover-box
|
||||
+transition(all, 200ms)
|
||||
|
||||
div
|
||||
margin-bottom: 25px
|
||||
&:hover
|
||||
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
|
||||
|
||||
a
|
||||
display: block
|
||||
width: 100%
|
||||
//max-width: 500px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
div
|
||||
margin-bottom: 25px
|
||||
|
||||
a
|
||||
display: block
|
||||
width: 100%
|
||||
//max-width: 500px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
img
|
||||
width: 100%
|
||||
|
||||
img
|
||||
width: 100%
|
||||
|
||||
#wrapper-home
|
||||
display: block
|
||||
min-height: 300px
|
||||
padding: 0
|
||||
|
||||
.content
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
.actions
|
||||
#mailing-list
|
||||
p
|
||||
margin-bottom: 7px
|
||||
text-align: center
|
||||
display: block
|
||||
min-height: 300px
|
||||
padding: 0
|
||||
|
||||
.content
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
.actions
|
||||
#mailing-list
|
||||
p
|
||||
margin-bottom: 7px
|
||||
text-align: center
|
||||
|
||||
@ -1,49 +1,77 @@
|
||||
#music-header
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
color: white
|
||||
font:
|
||||
size: 34px
|
||||
weight: bold
|
||||
text-align: center
|
||||
|
||||
//#music-player-card
|
||||
h1
|
||||
color: white
|
||||
font:
|
||||
size: 34px
|
||||
weight: bold
|
||||
|
||||
#music-list-section
|
||||
.music-list
|
||||
position: relative
|
||||
+transition(background, 200ms)
|
||||
.music-list
|
||||
position: relative
|
||||
+transition(background, 200ms)
|
||||
|
||||
&:hover
|
||||
cursor: pointer
|
||||
background: #f0f0f0
|
||||
&:hover
|
||||
cursor: pointer
|
||||
background: #f0f0f0
|
||||
|
||||
.music-list-header
|
||||
margin: 10px 0
|
||||
.music-list-header
|
||||
margin: 10px 0
|
||||
|
||||
.now-playing-list,
|
||||
.music-list ol
|
||||
margin-left: 15px
|
||||
margin-right: 15px
|
||||
color: $text-color
|
||||
+margin(10px 15px null 10px)
|
||||
color: $text-color
|
||||
|
||||
li
|
||||
+transition(background, 200ms)
|
||||
li
|
||||
+transition(background, 200ms)
|
||||
|
||||
&:hover
|
||||
background: #f0f0f0
|
||||
&:hover
|
||||
background: #f0f0f0
|
||||
cursor: pointer
|
||||
|
||||
a
|
||||
color: $main-color
|
||||
a
|
||||
color: $main-color
|
||||
|
||||
&.selected
|
||||
background: #e0e0e0
|
||||
&.selected
|
||||
background: #e0e0e0
|
||||
|
||||
li,
|
||||
a
|
||||
display: block
|
||||
+size(100% 100%)
|
||||
padding: 8px 5px
|
||||
color: $text-color
|
||||
text-decoration: none
|
||||
+transition(color, 200ms)
|
||||
a
|
||||
color: $main-color
|
||||
|
||||
li,
|
||||
a
|
||||
display: block
|
||||
+size(100% 100%)
|
||||
padding: 8px 5px
|
||||
color: $text-color
|
||||
text-decoration: none
|
||||
+transition(color, 200ms)
|
||||
|
||||
#music-player
|
||||
width: 100%
|
||||
|
||||
#track-title
|
||||
+padding(null 10px null 10px)
|
||||
|
||||
.album-art
|
||||
width: 100%
|
||||
|
||||
.music-album
|
||||
&.selected
|
||||
.thumbnail
|
||||
background: #e0e0e0
|
||||
|
||||
a
|
||||
color: $main-color
|
||||
|
||||
.thumbnail
|
||||
+transition(background, 200ms)
|
||||
|
||||
&:hover
|
||||
background: #f0f0f0
|
||||
cursor: pointer
|
||||
|
||||
a
|
||||
color: $main-color
|
||||
|
||||
@ -1,38 +1,37 @@
|
||||
.shows-header
|
||||
margin:
|
||||
top: -20px
|
||||
bottom: 20px
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
color: #fff
|
||||
font:
|
||||
size: 26px
|
||||
weight: bold
|
||||
margin:
|
||||
top: -20px
|
||||
bottom: 20px
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
color: #fff
|
||||
font:
|
||||
size: 26px
|
||||
weight: bold
|
||||
|
||||
#shows-table
|
||||
margin-top: 20px
|
||||
margin-top: 20px
|
||||
|
||||
tr
|
||||
border-bottom: 1px solid rgba(#999, .4)
|
||||
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
|
||||
td
|
||||
vertical-align: middle
|
||||
border: none
|
||||
|
||||
p,
|
||||
a
|
||||
font-size: 18px
|
||||
color: white
|
||||
|
||||
a
|
||||
font-weight: 600
|
||||
text-decoration: underline
|
||||
+transition(all, 200ms ease-in)
|
||||
|
||||
&:hover
|
||||
color: $main-color
|
||||
|
||||
tr
|
||||
border-bottom: 1px solid rgba(#999, .4)
|
||||
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
|
||||
td
|
||||
vertical-align: middle
|
||||
border: none
|
||||
|
||||
p,
|
||||
a
|
||||
font-size: 18px
|
||||
color: white
|
||||
|
||||
a
|
||||
font-weight: 600
|
||||
text-decoration: underline
|
||||
+transition(all, 200ms ease-in)
|
||||
|
||||
&:hover
|
||||
color: $main-color
|
||||
|
||||
@ -1,41 +1,44 @@
|
||||
*
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
font-family: "Open Sans", sans-serif
|
||||
font-size: 14px
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
font-family: "Open Sans", sans-serif
|
||||
font-size: 14px
|
||||
|
||||
html
|
||||
width: 100%
|
||||
+calc(height, "100% - 200px")
|
||||
width: 100%
|
||||
+calc(height, "100% - 200px")
|
||||
|
||||
body
|
||||
+size(100% auto)
|
||||
height: 100%
|
||||
+size(100% auto)
|
||||
height: 100%
|
||||
|
||||
#wrapper
|
||||
+size(100% auto)
|
||||
min-height: 100%
|
||||
margin-bottom: 200px
|
||||
padding-bottom: 50px
|
||||
background: url(/img/bg2.jpg) no-repeat center center fixed
|
||||
+background-size(cover)
|
||||
+size(100% auto)
|
||||
min-height: 100%
|
||||
margin-bottom: 200px
|
||||
padding-bottom: 50px
|
||||
background: url(/img/bg2.jpg) no-repeat center center fixed
|
||||
+background-size(cover)
|
||||
|
||||
#header
|
||||
display: block
|
||||
padding: -10px 0
|
||||
text-align: center
|
||||
display: block
|
||||
padding: -10px 0
|
||||
text-align: center
|
||||
|
||||
hr
|
||||
border-color: #ccc
|
||||
|
||||
|
||||
/* Box shadow styles used for material design
|
||||
.shadow-0
|
||||
border: 1px solid #eee
|
||||
border: 1px solid #eee
|
||||
.shadow-1
|
||||
box-shadow: 0 2px 10px 0 rgba(#000, 0.16), 0 2px 5px 0 rgba(#000, 0.26)
|
||||
box-shadow: 0 2px 10px 0 rgba(#000, 0.16), 0 2px 5px 0 rgba(#000, 0.26)
|
||||
.shadow-2
|
||||
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
|
||||
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
|
||||
.shadow-3
|
||||
box-shadow: 0 17px 50px 0 rgba(#000, 0.19), 0 12px 15px 0 rgba(#000, 0.24)
|
||||
box-shadow: 0 17px 50px 0 rgba(#000, 0.19), 0 12px 15px 0 rgba(#000, 0.24)
|
||||
.shadow-4
|
||||
box-shadow: 0 25px 55px 0 rgba(#000, 0.21), 0 16px 28px 0 rgba(#000, 0.22)
|
||||
box-shadow: 0 25px 55px 0 rgba(#000, 0.21), 0 16px 28px 0 rgba(#000, 0.22)
|
||||
.shadow-5
|
||||
box-shadow: 0 40px 77px 0 rgba(#000, 0.22), 0 27px 24px 0 rgba(#000, 0.2)
|
||||
box-shadow: 0 40px 77px 0 rgba(#000, 0.22), 0 27px 24px 0 rgba(#000, 0.2)
|
||||
|
||||
@ -1,52 +1,52 @@
|
||||
.card
|
||||
display: block
|
||||
height: auto
|
||||
margin-bottom: 15px
|
||||
padding: 15px 10px
|
||||
background: white
|
||||
display: block
|
||||
height: auto
|
||||
margin-bottom: 15px
|
||||
padding: 15px 10px
|
||||
background: white
|
||||
|
||||
&.hover-box
|
||||
+transition(box-shadow, 200ms)
|
||||
&.hover-box
|
||||
+transition(box-shadow, 200ms)
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
|
||||
|
||||
.underline
|
||||
text-decoration: underline
|
||||
|
||||
input[type=text]
|
||||
background: none
|
||||
border: none
|
||||
outline: none
|
||||
|
||||
.input-group
|
||||
position: relative
|
||||
display: block
|
||||
width: 100%
|
||||
margin: 20px auto 10px
|
||||
|
||||
input
|
||||
display: inline-block
|
||||
width: 100%
|
||||
padding: 10px 0
|
||||
border-bottom: solid 2px $main-color
|
||||
color: rgb(25, 25, 25)
|
||||
font-size: 16px
|
||||
|
||||
&:focus, &:active
|
||||
outline: none
|
||||
|
||||
label
|
||||
+position(absolute, 50% null null 0)
|
||||
+transform(translateY(-50%))
|
||||
font-style: italic
|
||||
font-size: 16px
|
||||
color: #999
|
||||
pointer-events: none
|
||||
+transition(all, 200ms ease-out 0s)
|
||||
|
||||
input:focus + label,
|
||||
input.has-value + label
|
||||
top: -5px
|
||||
font-size: 12px
|
||||
color: $main-color
|
||||
&:hover
|
||||
box-shadow: 0 6px 20px 0 rgba(#000, 0.19), 0 8px 17px 0 rgba(#000, 0.2)
|
||||
|
||||
.underline
|
||||
text-decoration: underline
|
||||
|
||||
input[type=text]
|
||||
background: none
|
||||
border: none
|
||||
outline: none
|
||||
|
||||
.input-group
|
||||
position: relative
|
||||
display: block
|
||||
width: 100%
|
||||
margin: 20px auto 10px
|
||||
|
||||
input
|
||||
display: inline-block
|
||||
width: 100%
|
||||
padding: 10px 0
|
||||
border-bottom: solid 2px $main-color
|
||||
color: rgb(25, 25, 25)
|
||||
font-size: 16px
|
||||
|
||||
&:focus, &:active
|
||||
outline: none
|
||||
|
||||
label
|
||||
+position(absolute, 50% null null 0)
|
||||
+transform(translateY(-50%))
|
||||
font-style: italic
|
||||
font-size: 16px
|
||||
color: #999
|
||||
pointer-events: none
|
||||
+transition(all, 200ms ease-out 0s)
|
||||
|
||||
input:focus + label,
|
||||
input.has-value + label
|
||||
top: -5px
|
||||
font-size: 12px
|
||||
color: $main-color
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
#footer
|
||||
+position(fixed, null null 0 0)
|
||||
width: 100%
|
||||
background: white
|
||||
margin: 0
|
||||
padding: 10px 15px
|
||||
z-index: -9999999
|
||||
|
||||
.column-info
|
||||
text-align: center
|
||||
|
||||
p
|
||||
font:
|
||||
size: 18px
|
||||
weight: bold
|
||||
text-decoration: underline
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: $text-color
|
||||
+transition(all, 200ms)
|
||||
|
||||
&:hover
|
||||
color: $main-color
|
||||
|
||||
.copyright
|
||||
p
|
||||
color: $text-color
|
||||
text-align: center
|
||||
|
||||
hr
|
||||
border-color: #bbb
|
||||
+position(fixed, null null 0 0)
|
||||
width: 100%
|
||||
background: white
|
||||
margin: 0
|
||||
padding: 10px 15px
|
||||
z-index: -9999999
|
||||
|
||||
.mailing-list
|
||||
p
|
||||
color: $text-color
|
||||
.column-info
|
||||
text-align: center
|
||||
|
||||
p
|
||||
font:
|
||||
size: 18px
|
||||
weight: bold
|
||||
text-decoration: underline
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: $text-color
|
||||
+transition(all, 200ms)
|
||||
|
||||
&:hover
|
||||
color: $main-color
|
||||
|
||||
.copyright
|
||||
p
|
||||
color: $text-color
|
||||
text-align: center
|
||||
|
||||
hr
|
||||
border-color: #bbb
|
||||
|
||||
.mailing-list
|
||||
p
|
||||
color: $text-color
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#header
|
||||
.band-logo
|
||||
width: 100%
|
||||
max-width: 600px
|
||||
.band-logo
|
||||
width: 100%
|
||||
max-width: 600px
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
.full-width
|
||||
width: 100%
|
||||
width: 100%
|
||||
|
||||
File diff suppressed because one or more lines are too long
BIN
public/img/albums/halftone.jpeg
Normal file
BIN
public/img/albums/halftone.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@ -1,7 +1,158 @@
|
||||
var player = '';
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#music-player').musicPlayer({
|
||||
'audio': '#music-player',
|
||||
'volume': .5,
|
||||
'startTime': 0
|
||||
})
|
||||
});
|
||||
player = $('#music-player').get(0);
|
||||
|
||||
// set the player's volume to 0.5 by default
|
||||
player.volume = 0.5;
|
||||
|
||||
// on music track click
|
||||
$('.now-playing-list').on('click', '.music-track', function() {
|
||||
// change selected track
|
||||
changeSelectedTrack(this);
|
||||
});
|
||||
|
||||
// on album art click
|
||||
$('.music-album').on('click', '.thumbnail', function() {
|
||||
// change selected album
|
||||
changeSelectedAlbum(this);
|
||||
});
|
||||
|
||||
// on track end
|
||||
$(player).on('ended', function() {
|
||||
// find selected track
|
||||
changeSelectedTrack($('.music-track.selected').next().get(0));
|
||||
});
|
||||
});
|
||||
|
||||
function changeSelectedAlbum(albumElem) {
|
||||
var oldSelected = $('.music-album.selected');
|
||||
var newSelected = $(albumElem).parent();
|
||||
|
||||
if (oldSelected.data('albumid') != newSelected.data('albumid')) {
|
||||
// remove selected class from the old element and add it to the new one
|
||||
oldSelected.removeClass('selected');
|
||||
newSelected.addClass('selected');
|
||||
|
||||
// change album info
|
||||
getAlbumInfo(albumElem);
|
||||
// change available songs
|
||||
getAlbumSongs(albumElem);
|
||||
}
|
||||
}
|
||||
|
||||
function getAlbumInfo(albumElem) {
|
||||
albumElem = $(albumElem).parent();
|
||||
|
||||
$.get('/apiv1/music/album-info/' + albumElem.data('albumid'), function(data) {
|
||||
var json = $.parseJSON(data);
|
||||
|
||||
// change album artwork
|
||||
$('#album-artwork').attr('src', json.album_art);
|
||||
// change album title
|
||||
$('#album-title').text(json.title);
|
||||
// change album release date
|
||||
$('#album-release span').text(formatReleaseDate(json.release_date));
|
||||
// change album description
|
||||
$('#album-description').text(json.description);
|
||||
});
|
||||
}
|
||||
|
||||
function formatReleaseDate(d) {
|
||||
var monthNames = [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June", "July",
|
||||
"August", "September", "October",
|
||||
"November", "December"
|
||||
];
|
||||
|
||||
var date = new Date(d);
|
||||
var day = date.getDate();
|
||||
var monthIndex = date.getMonth();
|
||||
var year = date.getFullYear();
|
||||
|
||||
return monthNames[monthIndex] + ' ' + day + ', ' + year;
|
||||
}
|
||||
|
||||
function getAlbumSongs(albumElem) {
|
||||
albumElem = $(albumElem).parent();
|
||||
|
||||
$.get('/apiv1/music/album-songs/' + albumElem.data('albumid'), function(data) {
|
||||
var json = $.parseJSON(data);
|
||||
var playlist = $('.now-playing-list');
|
||||
playlist.empty();
|
||||
|
||||
for (var i = 0; i < json.songs.length; i++) {
|
||||
var song = json.songs[i];
|
||||
|
||||
var songElem = $('<li></li>')
|
||||
.addClass('music-track')
|
||||
.attr('data-trackid', song.id)
|
||||
.attr('data-title', song.title)
|
||||
.attr('data-album', song.album_id)
|
||||
.attr('data-order', song.track_order)
|
||||
.attr('data-path', song.audio_file);
|
||||
|
||||
if (i === 0) {
|
||||
songElem.addClass('selected');
|
||||
}
|
||||
|
||||
songElem.html('<span>' + song.track_order + '. ' + song.title + '</span>');
|
||||
|
||||
playlist.append(songElem);
|
||||
}
|
||||
|
||||
changeAudioSources(playlist.find('.selected'), false);
|
||||
});
|
||||
}
|
||||
|
||||
function changeSelectedTrack(trackElem) {
|
||||
var oldSelected = $('.now-playing-list .music-track.selected');
|
||||
var newSelected = $(trackElem);
|
||||
|
||||
if (oldSelected.data('trackid') != newSelected.data('trackid')) {
|
||||
// remove selected class from the old element and add it to the new one
|
||||
oldSelected.removeClass('selected');
|
||||
newSelected.addClass('selected');
|
||||
|
||||
// now change the audio sources
|
||||
changeAudioSources(trackElem, true);
|
||||
}
|
||||
}
|
||||
|
||||
function changeAudioSources(trackElem, autoplay) {
|
||||
trackElem = $(trackElem);
|
||||
var playerSources = $('#music-player source');
|
||||
|
||||
if (autoplay === null) {
|
||||
autoplay = false;
|
||||
}
|
||||
|
||||
// retrieve audio file path from selected element
|
||||
var audioFilePath = trackElem.data('path');
|
||||
|
||||
// loop through the audio player source elements
|
||||
playerSources.each(function() {
|
||||
// jQuery-ize the element
|
||||
source = $(this);
|
||||
|
||||
if (source.attr('type') == 'audio/ogg') {
|
||||
// OGG source file
|
||||
source.attr('src', audioFilePath + '.ogg');
|
||||
} else if (source.attr('type') == 'audio/mpeg') {
|
||||
// MP3 source file
|
||||
source.attr('src', audioFilePath + '.mp3');
|
||||
}
|
||||
});
|
||||
|
||||
// change track title
|
||||
$('#track-title').text(trackElem.data('title'));
|
||||
|
||||
// reload music player
|
||||
player.load();
|
||||
|
||||
if (autoplay) {
|
||||
// start playing new song
|
||||
player.play();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user