mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 04:58:01 +01:00
Just some styling
This commit is contained in:
nelsonlaquet
parent
ab3f15b5bf
commit
9c9aeabf30
28 changed files with 2102 additions and 62 deletions
58
app/controllers/Api/Web/DashboardController.php
Normal file
58
app/controllers/Api/Web/DashboardController.php
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<?php
|
||||
|
||||
namespace Api\Web;
|
||||
|
||||
use Commands\DeleteTrackCommand;
|
||||
use Commands\EditTrackCommand;
|
||||
use Commands\UploadTrackCommand;
|
||||
use Cover;
|
||||
use Entities\Image;
|
||||
use Entities\Track;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Input;
|
||||
use Illuminate\Support\Facades\Response;
|
||||
|
||||
class DashboardController extends \ApiControllerBase {
|
||||
public function getIndex() {
|
||||
$query = Track::summary()->with(['genre', 'user', 'cover'])->whereNotNull('published_at')->orderBy('published_at', 'desc')->take(15);
|
||||
if (!Auth::check() || !Auth::user()->can_see_explicit_content)
|
||||
$query->whereIsExplicit(false);
|
||||
|
||||
$tracks = [];
|
||||
|
||||
foreach ($query->get() as $track) {
|
||||
$tracks[] = [
|
||||
'id' => $track->id,
|
||||
'title' => $track->title,
|
||||
'user' => [
|
||||
'id' => $track->user->id,
|
||||
'name' => $track->user->display_name,
|
||||
'url' => $track->user->url
|
||||
],
|
||||
'url' => $track->url,
|
||||
'slug' => $track->slug,
|
||||
'is_vocal' => $track->is_vocal,
|
||||
'is_explicit' => $track->is_explicit,
|
||||
'is_downloadable' => $track->is_downloadable,
|
||||
'is_published' => $track->isPublished(),
|
||||
'published_at' => $track->published_at,
|
||||
'duration' => $track->duration,
|
||||
'genre' => [
|
||||
'id' => $track->genre->id,
|
||||
'slug' => $track->genre->slug,
|
||||
'name' => $track->genre->name
|
||||
],
|
||||
'track_type_id' => $track->track_type_id,
|
||||
'covers' => [
|
||||
'thumbnail' => $track->getCoverUrl(Image::THUMBNAIL),
|
||||
'small' => $track->getCoverUrl(Image::SMALL),
|
||||
'normal' => $track->getCoverUrl(Image::NORMAL)
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
return Response::json([
|
||||
'recent_tracks' => $tracks,
|
||||
'popular_tracks' => $tracks], 200);
|
||||
}
|
||||
}
|
||||
|
|
@ -26,8 +26,49 @@
|
|||
return $this->execute(new EditTrackCommand($id, Input::all()));
|
||||
}
|
||||
|
||||
public function getRecent() {
|
||||
$query = Track::summary()->with(['genre', 'user', 'cover'])->whereNotNull('published_at')->orderBy('published_at', 'desc')->take(15);
|
||||
if (!Auth::check() || !Auth::user()->can_see_explicit_content)
|
||||
$query->whereIsExplicit(false);
|
||||
|
||||
$tracks = [];
|
||||
|
||||
foreach ($query->get() as $track) {
|
||||
$tracks[] = [
|
||||
'id' => $track->id,
|
||||
'title' => $track->title,
|
||||
'user' => [
|
||||
'id' => $track->user->id,
|
||||
'name' => $track->user->display_name,
|
||||
'url' => $track->user->url
|
||||
],
|
||||
'url' => $track->url,
|
||||
'slug' => $track->slug,
|
||||
'is_vocal' => $track->is_vocal,
|
||||
'is_explicit' => $track->is_explicit,
|
||||
'is_downloadable' => $track->is_downloadable,
|
||||
'is_published' => $track->isPublished(),
|
||||
'published_at' => $track->published_at,
|
||||
'duration' => $track->duration,
|
||||
'genre' => [
|
||||
'id' => $track->genre->id,
|
||||
'slug' => $track->genre->slug,
|
||||
'name' => $track->genre->name
|
||||
],
|
||||
'track_type_id' => $track->track_type_id,
|
||||
'covers' => [
|
||||
'thumbnail' => $track->getCoverUrl(Image::THUMBNAIL),
|
||||
'small' => $track->getCoverUrl(Image::SMALL),
|
||||
'normal' => $track->getCoverUrl(Image::NORMAL)
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
return Response::json($tracks, 200);
|
||||
}
|
||||
|
||||
public function getOwned() {
|
||||
$query = Track::summary()->whereNull('deleted_at')->where('user_id', \Auth::user()->id);
|
||||
$query = Track::summary()->where('user_id', \Auth::user()->id);
|
||||
|
||||
if (Input::has('published')) {
|
||||
$published = \Input::get('published');
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
new FileAsset('scripts/base/jquery-ui.js'),
|
||||
new FileAsset('scripts/base/jquery.colorbox.js'),
|
||||
new FileAsset('scripts/base/underscore.js'),
|
||||
new FileAsset('scripts/base/moment.js'),
|
||||
new FileAsset('scripts/base/angular.js'),
|
||||
new FileAsset('scripts/base/ui-bootstrap-tpls-0.4.0.js'),
|
||||
new FileAsset('scripts/base/angular-ui-sortable.js'),
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
use External;
|
||||
use getid3_writetags;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Illuminate\Support\Facades\URL;
|
||||
use Illuminate\Support\Str;
|
||||
use Whoops\Example\Exception;
|
||||
use Traits\SlugTrait;
|
||||
|
|
@ -53,6 +54,10 @@
|
|||
return date('Y', strtotime($this->release_date));
|
||||
}
|
||||
|
||||
public function getUrlAttribute() {
|
||||
return URL::to('/tracks/' . $this->id . '/' . $this->slug);
|
||||
}
|
||||
|
||||
public function getReleaseDate() {
|
||||
if($this->attributes['released_at'] !== NULL)
|
||||
return $this->attributes['released_at'];
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
use Illuminate\Auth\UserInterface;
|
||||
use Illuminate\Auth\Reminders\RemindableInterface;
|
||||
use Illuminate\Support\Facades\URL;
|
||||
use Illuminate\Support\Str;
|
||||
use Ratchet\Wamp\Exception;
|
||||
|
||||
class User extends \Eloquent implements UserInterface, RemindableInterface {
|
||||
|
|
@ -17,6 +18,10 @@
|
|||
return $this->belongsTo('Entities\Image');
|
||||
}
|
||||
|
||||
public function getUrlAttribute() {
|
||||
return URL::to('/' . $this->slug);
|
||||
}
|
||||
|
||||
public function getAuthIdentifier() {
|
||||
return $this->getKey();
|
||||
}
|
||||
|
|
@ -29,6 +34,11 @@
|
|||
return $this->email;
|
||||
}
|
||||
|
||||
public function setDisplayName($value) {
|
||||
$this->attributes['display_name'] = $value;
|
||||
$this->attributes['slug'] = Str::slug($value);
|
||||
}
|
||||
|
||||
public function getAvatarUrl($type = Image::NORMAL) {
|
||||
if (!$this->uses_gravatar)
|
||||
return $this->avatar->getUrl();
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
|
||||
*/
|
||||
|
||||
Route::get('/dashboard', 'TracksController@getIndex');
|
||||
Route::get('/tracks', 'TracksController@getIndex');
|
||||
Route::get('/tracks/popular', 'TracksController@getIndex');
|
||||
Route::get('/tracks/random', 'TracksController@getIndex');
|
||||
|
|
@ -38,6 +39,10 @@
|
|||
|
||||
Route::get('/playlists/show/{id}', 'Api\Web\PlaylistsController@getShow');
|
||||
|
||||
Route::get('/tracks/recent', 'Api\Web\TracksController@getRecent');
|
||||
|
||||
Route::get('/dashboard', 'Api\Web\DashboardController@getIndex');
|
||||
|
||||
Route::group(['before' => 'auth|csrf'], function() {
|
||||
Route::post('/tracks/upload', 'Api\Web\TracksController@postUpload');
|
||||
Route::post('/tracks/delete/{id}', 'Api\Web\TracksController@postDelete');
|
||||
|
|
|
|||
|
|
@ -29,6 +29,12 @@
|
|||
<section class="sidebar" ng-controller="sidebar">
|
||||
<nav>
|
||||
<ul>
|
||||
@if (Auth::check())
|
||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard</a></li>
|
||||
@else
|
||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Home</a></li>
|
||||
@endif
|
||||
<li><a href="/tracks">Now Playing</a></li>
|
||||
<li><h3>Discover</h3></li>
|
||||
<li ng-class="{selected: $state.includes('tracks')}"><a href="/tracks">Music <i class="icon-music"></i></a></li>
|
||||
<li ng-class="{selected: $state.includes('albums')}"><a href="/albums">Albums <i class="icon-music"></i></a></li>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@
|
|||
@yield('styles')
|
||||
</head>
|
||||
<body ng-app="ponyfm" ng-controller="application" uploader>
|
||||
<div class="background-color"></div>
|
||||
<div class="background-two"></div>
|
||||
<div class="background-one"></div>
|
||||
@yield('content')
|
||||
|
||||
@yield('scripts')
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/images/octavia.png
Normal file
BIN
public/images/octavia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
public/images/vinyl.png
Normal file
BIN
public/images/vinyl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
|
|
@ -63,20 +63,8 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
|
|||
|
||||
state.state 'tracks',
|
||||
url: '/tracks'
|
||||
templateUrl: '/templates/tracks/_layout.html'
|
||||
abstract: true
|
||||
|
||||
state.state 'tracks.list',
|
||||
url: ''
|
||||
templateUrl: '/templates/tracks/index.html'
|
||||
|
||||
state.state 'tracks.random',
|
||||
url: '/random'
|
||||
templateUrl: '/templates/tracks/index.html'
|
||||
|
||||
state.state 'tracks.popular',
|
||||
url: '/popular'
|
||||
templateUrl: '/templates/tracks/index.html'
|
||||
controller: 'tracks'
|
||||
|
||||
# Albums
|
||||
|
||||
|
|
@ -124,6 +112,12 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
|
|||
|
||||
# Hompage
|
||||
|
||||
if window.pfm.auth.isLogged
|
||||
state.state 'home',
|
||||
url: '/'
|
||||
templateUrl: '/templates/dashboard.html'
|
||||
controller: 'dashboard'
|
||||
else
|
||||
state.state 'home',
|
||||
url: '/'
|
||||
templateUrl: '/templates/home/index.html'
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ angular.module('ponyfm').controller "account-playlists", [
|
|||
$scope.playlists.splice _.indexOf($scope.playlists, (p) -> p.id == playlist.id), 1
|
||||
|
||||
$scope.$on 'playlist-updated', (e, playlist) ->
|
||||
console.log playlist
|
||||
index = _.indexOf($scope.playlists, (p) -> p.id == playlist.id)
|
||||
content = $scope.playlists[index]
|
||||
_.each playlist, (value, name) -> content[name] = value
|
||||
|
|
|
|||
14
public/scripts/app/controllers/dashboard.coffee
Normal file
14
public/scripts/app/controllers/dashboard.coffee
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
angular.module('ponyfm').controller "dashboard", [
|
||||
'$scope'
|
||||
($scope) ->
|
||||
$scope.recentTracks = null
|
||||
$scope.popularTracks = null
|
||||
|
||||
$scope.refresh = () ->
|
||||
$.getJSON('/api/web/dashboard')
|
||||
.done (res) -> $scope.$apply ->
|
||||
$scope.recentTracks = res.recent_tracks
|
||||
$scope.popularTracks = res.popular_tracks
|
||||
|
||||
$scope.refresh()
|
||||
]
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
angular.module('ponyfm').controller "sidebar", [
|
||||
'$scope', '$dialog', 'playlists'
|
||||
($scope, $dialog, playlists) ->
|
||||
|
||||
$scope.playlists = playlists.pinnedPlaylists
|
||||
|
||||
$scope.createPlaylist = () ->
|
||||
|
|
|
|||
12
public/scripts/app/controllers/tracks.coffee
Normal file
12
public/scripts/app/controllers/tracks.coffee
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
angular.module('ponyfm').controller "tracks", [
|
||||
'$scope'
|
||||
($scope) ->
|
||||
$scope.recentTracks = null
|
||||
|
||||
$scope.refresh = () ->
|
||||
$.getJSON('/api/web/tracks/recent')
|
||||
.done (res) -> $scope.$apply ->
|
||||
$scope.recentTracks = res
|
||||
|
||||
$scope.refresh()
|
||||
]
|
||||
3
public/scripts/app/filters/moment-from-now.coffee
Normal file
3
public/scripts/app/filters/moment-from-now.coffee
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
angular.module('ponyfm').filter 'momentFromNow', () ->
|
||||
(input) ->
|
||||
moment(input).fromNow()
|
||||
1662
public/scripts/base/moment.js
Normal file
1662
public/scripts/base/moment.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -7,6 +7,12 @@ window.handleResize = () ->
|
|||
$this = $ this
|
||||
$this.height windowHeight - $this.offset().top
|
||||
|
||||
backgroundOne = $ '.background-one'
|
||||
backgroundTwo = $ '.background-two'
|
||||
|
||||
backgroundOne.css 'left', $('.site-content ').offset().left - backgroundOne.width()
|
||||
backgroundTwo.css 'left', $('.site-content').offset().left + $('.site-content').width()
|
||||
|
||||
window.alignVertically = (element) ->
|
||||
$element = $(element)
|
||||
$parent = $element.parent()
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
}
|
||||
|
||||
.account-settings-form {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
ul.playlists {
|
||||
|
|
|
|||
|
|
@ -6,3 +6,4 @@
|
|||
@import 'account-content';
|
||||
@import 'components';
|
||||
@import 'forms';
|
||||
@import 'tracks';
|
||||
|
|
@ -62,7 +62,8 @@ html .dropdown-menu {
|
|||
margin: 10px 0px;
|
||||
|
||||
> li {
|
||||
margin: 0px 5px;
|
||||
margin: 0px;
|
||||
margin-right: 5px;
|
||||
padding: 0px;
|
||||
float: left;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@
|
|||
padding: 3px;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 3px;
|
||||
font-size: 8pt;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,42 @@ html, body {
|
|||
}
|
||||
|
||||
html body {
|
||||
background: #2D2D2D;
|
||||
height: 100%;
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
background: url('http://mlpforums.com/public/style_images/mlp/bg1.png');
|
||||
}
|
||||
|
||||
.background-color {
|
||||
background: rgba(42, 42, 42, 1);
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
.background-one, .background-two {
|
||||
z-index: -4;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
height: 100%;
|
||||
width: 350px;
|
||||
position: fixed;
|
||||
background-size: 35%;
|
||||
}
|
||||
|
||||
html .background-one {
|
||||
background-image: url('/images/octavia.png');
|
||||
background-position: bottom right;
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
html .background-two {
|
||||
background-image: url('/images/vinyl.png');
|
||||
background-position: bottom left;
|
||||
opacity: .1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
|
|
@ -44,6 +77,7 @@ html body {
|
|||
|
||||
header {
|
||||
.clearfix();
|
||||
background: #222;
|
||||
|
||||
> div {
|
||||
max-width: 1200px;
|
||||
|
|
@ -75,7 +109,8 @@ header {
|
|||
.now-playing {
|
||||
.clearfix();
|
||||
margin-top: 5px;
|
||||
margin-left: 144px;
|
||||
padding-left: 5px;
|
||||
margin-left: 149px;
|
||||
background: #222;
|
||||
|
||||
.current-track {
|
||||
|
|
@ -90,6 +125,7 @@ header {
|
|||
}
|
||||
|
||||
.transport {
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
margin-left: 6px;
|
||||
height: 5px;
|
||||
|
|
@ -239,14 +275,13 @@ header {
|
|||
float: left;
|
||||
width: 148px;
|
||||
z-index: 2000;
|
||||
background: #2D2D2D;
|
||||
|
||||
nav {
|
||||
h3 {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
background: #222;
|
||||
line-height: normal;
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
|
|
@ -358,39 +393,50 @@ header {
|
|||
|
||||
.site-content {
|
||||
overflow: hidden;
|
||||
border: 2px solid #222;
|
||||
border: 5px solid #222;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
.box-sizing(border-box);
|
||||
|
||||
height: 100%;
|
||||
margin-left: 148px;
|
||||
|
||||
> div {
|
||||
.box-sizing(border-box);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 0px 15px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
h1 {
|
||||
padding: 5px 15px;
|
||||
color: #000;
|
||||
border-bottom: 2px solid #fd8500;
|
||||
margin-bottom: -2px;
|
||||
font-size: 12pt;
|
||||
margin: 0px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #747474;
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: normal;
|
||||
font-weight: normal;
|
||||
margin: 0px;
|
||||
padding: 5px 0px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 10pt;
|
||||
margin-top: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> div > .tabs {
|
||||
.clearfix();
|
||||
list-style: none;
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-bottom: 4px solid #ddd;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
|
|
@ -401,26 +447,26 @@ header {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 5px 15px;
|
||||
color: #9c9c9c;
|
||||
font-size: 12pt;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #747474;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
line-height: normal;
|
||||
font-weight: normal;
|
||||
padding: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid #fd8500;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
#gradient>.vertical(#ddd, #eee);
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
border-bottom: 2px solid orange;
|
||||
margin-bottom: -2px;
|
||||
border-bottom: 4px solid orange;
|
||||
margin-bottom: -4px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
81
public/styles/tracks.less
Normal file
81
public/styles/tracks.less
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@import 'base/bootstrap/bootstrap';
|
||||
@import 'mixins';
|
||||
|
||||
.dashboard {
|
||||
section {
|
||||
.box-sizing(border-box);
|
||||
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tracks-listing {
|
||||
overflow-y: auto;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
margin: 5px 0px;
|
||||
padding: 0px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
img {
|
||||
.img-polaroid();
|
||||
padding: 3px;
|
||||
padding: 0px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.icons {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
|
||||
a, span {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.icon-microphone-off {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 51px;
|
||||
line-height: normal;
|
||||
|
||||
.title {
|
||||
.ellipsis();
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
color: #777;
|
||||
font-size: 8pt;
|
||||
|
||||
a {
|
||||
color: fadeOut(@blue, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<li ng-repeat="track in tracks">
|
||||
<div>
|
||||
<span class="btn btn-small pull-left handle"><i class="icon-sort"></i></span>
|
||||
<a href="#" class="btn btn-small pull-right" ng-click="toggleTrack(track)" pfm-eat-click><i class="icon-remove"></i></a>
|
||||
<a href="#" class="btn btn-small pull-right btn-danger" ng-click="toggleTrack(track)" pfm-eat-click><i class="icon-remove"></i></a>
|
||||
<span>{{track.title}}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
53
public/templates/dashboard.html
Normal file
53
public/templates/dashboard.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<div class="dashboard">
|
||||
<section class="recent-tracks">
|
||||
<div>
|
||||
<h1>
|
||||
<a href="#"><i class="icon-music"></i> see more</a>
|
||||
The Newest Tunes
|
||||
</h1>
|
||||
<ul class="tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in recentTracks">
|
||||
<img ng-src="{{track.covers.thumbnail}}" />
|
||||
<div class="icons">
|
||||
<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
|
||||
<a href="#"><i class="icon-star-empty"></i></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="{{track.url}}" class="title">{{track.title}}</a>
|
||||
<span class="metadata">
|
||||
by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
|
||||
<a href="#">{{track.genre.name}}</a> /
|
||||
{{track.published_at.date | momentFromNow}}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="popular">
|
||||
<div>
|
||||
<h1>
|
||||
<a href="#"><i class="icon-star"></i> see more</a>
|
||||
What's Popular Today
|
||||
</h1>
|
||||
<ul class="tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in recentTracks">
|
||||
<img ng-src="{{track.covers.thumbnail}}" />
|
||||
<div class="icons">
|
||||
<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
|
||||
<a href="#"><i class="icon-star-empty"></i></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="{{track.url}}" class="title">{{track.title}}</a>
|
||||
<span class="metadata">
|
||||
by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
|
||||
<a href="#">{{track.genre.name}}</a> /
|
||||
{{track.published_at.date | momentFromNow}}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<div>
|
||||
<ul class="tabs">
|
||||
<li ng-class="{active: $state.includes('tracks.list')}"><a href="/tracks">Tracks</a></li>
|
||||
<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/tracks/popular">Popular</a></li>
|
||||
<li ng-class="{active: $state.includes('tracks.random')}"><a href="/tracks/random">Random</a></li>
|
||||
</ul>
|
||||
|
||||
<ui-view></ui-view>
|
||||
|
||||
<pre>
|
||||
$state = {{$state.current.name}}
|
||||
$stateParams = {{$stateParams}}
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -1 +1,52 @@
|
|||
<h1>tracks?</h1>
|
||||
<div class="dashboard">
|
||||
<section class="recent-tracks">
|
||||
<div>
|
||||
<h1>
|
||||
<a href="#"><i class="icon-music"></i> see more</a>
|
||||
The Newest Tunes
|
||||
</h1>
|
||||
<ul class="tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in recentTracks">
|
||||
<img ng-src="{{track.covers.thumbnail}}" />
|
||||
<div class="icons">
|
||||
<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
|
||||
<a href="#"><i class="icon-star-empty"></i></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="{{track.url}}" class="title">{{track.title}}</a>
|
||||
<span class="metadata">
|
||||
by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
|
||||
<a href="#">{{track.genre.name}}</a> /
|
||||
{{track.published_at.date | momentFromNow}}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="popular">
|
||||
<div>
|
||||
<h1>
|
||||
<a href="#"><i class="icon-star"></i> see more</a>
|
||||
What's Popular Today
|
||||
</h1>
|
||||
<ul class="tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in recentTracks">
|
||||
<img ng-src="{{track.covers.thumbnail}}" />
|
||||
<div class="icons">
|
||||
<span><i ng-class="{'icon-microphone-off': !track.is_vocal, 'icon-microphone': track.is_vocal}"></i></span>
|
||||
<a href="#"><i class="icon-star-empty"></i></a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="{{track.url}}" class="title">{{track.title}}</a>
|
||||
<span class="metadata">
|
||||
by: <a href="{{track.user.url}}">{{track.user.name}}</a> /
|
||||
<a href="#">{{track.genre.name}}</a> /
|
||||
{{track.published_at.date | momentFromNow}}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
Loading…
Reference in a new issue