Homepage, google analytics, basic responsiveness

This commit is contained in:
nelsonlaquet 2013-08-30 21:46:28 -05:00
parent 18e41d2af4
commit c2f482e8a8
14 changed files with 337 additions and 101 deletions

View file

@ -57,6 +57,7 @@
new FileAsset('scripts/base/angular-ui-sortable.js'),
new FileAsset('scripts/base/angular-ui-date.js'),
new FileAsset('scripts/base/angular-ui-router.js'),
new FileAsset('scripts/base/angularytics.js'),
new AssetCollection([
new GlobAsset('scripts/shared/*.coffee'),
new GlobAsset('scripts/shared/*.js'),

View file

@ -68,22 +68,17 @@
->groupBy('id')
->orderBy('plays', 'desc')
->take(20);
return $query->get(['*', DB::raw('count(*) as plays')]);
$results = [];
foreach($query->get(['*', DB::raw('count(*) as plays')]) as $track) {
$results[] = self::mapPublicTrackSummary($track);
}
return $results;
});
$results = [];
$i = 0;
foreach($tracks as $track) {
if ($i < $count) {
$results[] = self::mapPublicTrackSummary($track);
$i++;
} else {
break;
}
}
return $results;
return $tracks;
}
public static function mapPublicTrackShow($track) {

View file

@ -54,8 +54,8 @@
</li>
@if (Auth::check())
<li ng-class="{selected: stateIncludes('account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
<li ng-class="{selected: stateIncludes('favourites')}"><a href="/account/favourites/tracks">Favourites <i class="icon-star"></i></a></li>
<li ng-class="{selected: stateIncludes('account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
@endif
<li ng-class="{selected: isActive('/about')}"><a href="/about">About <i class="icon-info"></i></a></li>
@ -103,6 +103,20 @@
};
</script>
<script>
{{-- Google Analytics --}}
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29463256-1']);
_gaq.push(['_setDomainName', 'pony.fm']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{{ Assets::scriptIncludes() }}
<script src="http://platform.tumblr.com/v1/share.js"></script>

View file

@ -1,10 +1,18 @@
window.pfm.preloaders = {}
module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'pasvaz.bindonce']
module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'pasvaz.bindonce', 'angularytics']
module.run [
'Angularytics',
(analyitcs) ->
analyitcs.init()
]
module.config [
'$locationProvider', '$stateProvider', '$dialogProvider'
(location, state, $dialogProvider) ->
'$locationProvider', '$stateProvider', '$dialogProvider', 'AngularyticsProvider'
(location, state, $dialogProvider, analytics) ->
analytics.setEventHandlers ['Google']
# Upload
@ -178,6 +186,7 @@ module.config [
state.state 'home',
url: '/'
templateUrl: '/templates/home/index.html'
controller: 'home'
# Final catch-all for aritsts
state.state 'content.artist',

View file

@ -0,0 +1,15 @@
window.pfm.preloaders['home'] = [
'dashboard'
(dashboard) -> dashboard.refresh(true)
]
angular.module('ponyfm').controller "home", [
'$scope', 'dashboard'
($scope, dashboard) ->
$scope.recentTracks = null
$scope.popularTracks = null
dashboard.refresh().done (res) ->
$scope.recentTracks = res.recent_tracks
$scope.popularTracks = res.popular_tracks
]

122
public/scripts/base/angularytics.js vendored Normal file
View file

@ -0,0 +1,122 @@
(function () {
angular.module('angularytics', []).provider('Angularytics', function () {
var eventHandlersNames = ['Google'];
this.setEventHandlers = function (handlers) {
if (angular.isString(handlers)) {
handlers = [handlers];
}
eventHandlersNames = [];
angular.forEach(handlers, function (handler) {
eventHandlersNames.push(capitalizeHandler(handler));
});
};
var capitalizeHandler = function (handler) {
return handler.charAt(0).toUpperCase() + handler.substring(1);
};
var pageChangeEvent = '$locationChangeSuccess';
this.setPageChangeEvent = function (newPageChangeEvent) {
pageChangeEvent = newPageChangeEvent;
};
this.$get = [
'$injector',
'$rootScope',
'$location',
function ($injector, $rootScope, $location) {
var eventHandlers = [];
angular.forEach(eventHandlersNames, function (handler) {
eventHandlers.push($injector.get('Angularytics' + handler + 'Handler'));
});
var forEachHandlerDo = function (action) {
angular.forEach(eventHandlers, function (handler) {
action(handler);
});
};
$rootScope.$on(pageChangeEvent, function () {
forEachHandlerDo(function (handler) {
var url = $location.path();
if (url) {
handler.trackPageView(url);
}
});
});
var service = {};
service.init = function () {
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
forEachHandlerDo(function (handler) {
if (category && action) {
handler.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
}
});
};
return service;
}
];
});
}());
(function () {
angular.module('angularytics').factory('AngularyticsConsoleHandler', [
'$log',
function ($log) {
var service = {};
service.trackPageView = function (url) {
$log.log('URL visited', url);
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
$log.log('Event tracked', category, action, opt_label, opt_value, opt_noninteraction);
};
return service;
}
]);
}());
(function () {
angular.module('angularytics').factory('AngularyticsGoogleHandler', [
'$log',
function ($log) {
var service = {};
service.trackPageView = function (url) {
_gaq.push([
'_set',
'page',
url
]);
_gaq.push([
'_trackPageview',
url
]);
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
_gaq.push([
'_trackEvent',
category,
action,
opt_label,
opt_value,
opt_noninteraction
]);
};
return service;
}
]).factory('AngularyticsGoogleUniversalHandler', function () {
var service = {};
service.trackPageView = function (url) {
ga('set', 'page', url);
ga('send', 'pageview', url);
};
service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
ga('send', 'event', category, action, opt_label, opt_value, { 'nonInteraction': opt_noninteraction });
};
return service;
});
}());
(function () {
angular.module('angularytics').filter('trackEvent', [
'Angularytics',
function (Angularytics) {
return function (entry, category, action, opt_label, opt_value, opt_noninteraction) {
Angularytics.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
return entry;
};
}
]);
}());

View file

@ -1,6 +1,7 @@
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
@import 'base/bootstrap/bootstrap';
@import 'base/bootstrap/responsive';
@import 'base/font-awesome/font-awesome';
@import 'variables';
@import 'mixins';

View file

@ -24,6 +24,24 @@ a {
}
}
.about-page {
h2 {
margin: 0px;
margin-bottom: 5px;
font-size: 13pt;
color: #C2889C;
line-height: normal;
overflow: hidden;
font-weight: normal;
}
}
.welcome {
padding: 5px;
margin-bottom: 10px;
background: lighten(@pfm-purple, 30%);
}
.revealable {
font-size: 10pt;
color: #222;

View file

@ -2,6 +2,37 @@
@import-once 'mixins';
@import-once 'variables';
@media (max-width: 1300px) and (min-width: 720px) {
html {
.albums-listing, .playlists-listing, .artist-listing {
&.two-columns li {
width: auto;
float: none;
}
li {
width: 33.33333%;
}
}
}
}
@media (max-width: 720px) {
html {
.albums-listing, .playlists-listing, .artist-listing {
&.two-columns li {
width: auto;
float: none;
}
li {
width: auto;
float: none;
}
}
}
}
.albums-listing, .playlists-listing, .artist-listing {
margin: 0px;
padding: 0px;
@ -180,6 +211,46 @@
@icon-size: 42px;
@media (max-width: 1300px) and (min-width: 720px) {
html {
.tracks-listing {
&.four-columns li {
width: 33.333%;
}
&.three-columns li {
width: 50%;
}
&.two-columns li {
width: auto;
float: none;
}
}
}
}
@media (max-width: 720px) {
html {
.tracks-listing {
&.four-columns li {
width: auto;
float: none;
}
&.three-columns li {
width: auto;
float: none;
}
&.two-columns li {
width: auto;
float: none;
}
}
}
}
.tracks-listing.four-columns {
li {
float: left;

View file

@ -174,8 +174,12 @@ header {
}
}
li.uploader {
a {
li.none {
span {
display: block;
padding: 5px 25px;
color: #555;
font-style: italic;
}
}
}

View file

@ -1,16 +1,18 @@
<ul class="artist-listing stretch-to-bottom">
<li ng-repeat="artist in artists" bindonce>
<a href="{{artist.url}}">
<img class="image" bo-src="artist.avatars.small" />
<span class="info">
<span class="title" bo-text="artist.name"></span>
<span class="published">
joined <span bo-text="artist.created_at.date | momentFromNow"></span>
<div class="stretch-to-bottom">
<ul class="artist-listing">
<li ng-repeat="artist in artists" bindonce>
<a href="{{artist.url}}">
<img class="image" bo-src="artist.avatars.small" />
<span class="info">
<span class="title" bo-text="artist.name"></span>
<span class="published">
joined <span bo-text="artist.created_at.date | momentFromNow"></span>
</span>
</span>
</span>
</a>
</li>
<li ng-show="!artists.length" class="empty">
No artists found...
</li>
</ul>
</a>
</li>
<li ng-show="!artists.length" class="empty">
No artists found...
</li>
</ul>
</div>

View file

@ -1,5 +1,5 @@
<div class="dashboard">
<section class="recent-tracks stretch-to-bottom">
<div class="dashboard stretch-to-bottom">
<section class="recent-tracks">
<div>
<h1>
<a href="/tracks"><i class="icon-music"></i> see more</a>
@ -9,7 +9,7 @@
</div>
</section>
<section class="popular-tracks stretch-to-bottom">
<section class="popular-tracks">
<div>
<h1>
What's Popular Today

View file

@ -1,37 +1,33 @@
<div>
<h1>Pony.fm BETA 2 Preview</h1>
<div class="stretch-to-bottom">
<div class="welcome">
<h1>Welcome to Pony.fm</h1>
<p>The pony fan music site. By a brony, for bronies.</p>
<p>
We provide a comprehensive set of free tools to host, distribute, and catalogue your music, integrated with a rich community experience for artists and listeners alike.
</p>
<p>
Features include <strong>unlimited downloads</strong>, <strong>unlimited uploads</strong>, <strong>lossless uploads</strong> and much more! Click <a href="/about">here</a> to get all of our features!
</p>
</div>
<p>
Welcome to Pony.fm's BETA 2 preview! If you were looking for the functional website, head on over to <a href="http://pony.fm" target="_blank">Pony.fm</a>.
</p>
<div class="dashboard">
<section class="recent-tracks">
<div>
<h1>
<a href="/tracks"><i class="icon-music"></i> see more</a>
The Newest Tunes
</h1>
<pfm-tracks-list tracks="recentTracks" class="two-columns"></pfm-tracks-list>
</div>
</section>
<p>
This is an early look at the next Pony.fm release. <a href="http://pony.fm" target="_blank">Pony.fm</a> is a music hosting website
for Bronies - and you can learn more about it <a href="http://pony.fm/about" target="_blank">here</a>.
</p>
<p>
This web application is under <strong>heavy development</strong>. While you are free to browse around, please note
that although the track and user data on this site is a copy of Pony.fm - all data will be <strong>erased</strong> when
the preview ends, or whenever we feel like. As such, please do not use this application for hosting your new music.
</p>
<p>
At this time, many features are notably missing - such as:
</p>
<ul>
<li>Mobile friendly design</li>
<li>Artist following</li>
<li>Notifications</li>
<li>Public playlists</li>
<li>Music Downloads</li>
</ul>
<p>
And more. The layout and design is also subject to change in the future.
</p>
<p>
However, we welcome any and all feedback - so if you have a suggestion or bug report, you can hop on over to
<a href="http://mlpforums.com/forum/62-ponyfm/" target="_blank">Pony.fm's Forum</a>.
</p>
<p>We hope you enjoy taking a look at the future of Pony.fm as much as we did building it!</p>
<section class="popular-tracks">
<div>
<h1>
What's Popular Today
</h1>
<pfm-tracks-list tracks="popularTracks" class="two-columns"></pfm-tracks-list>
</div>
</section>
</div>
</div>

View file

@ -1,37 +1,25 @@
<div>
<div class="about-page">
<h1>What exactly <em>is</em> Pony.fm, anyway?</h1>
<div class="stretch-to-bottom">
<div class="row-fluid">
<div class="span12 columns">
<p>Some <em>My Little Pony: Friendship is Magic</em> fans - typically referred to as &quot;bronies&quot; are the musical type, and show their appreciation for the show by pouring their talent into <strong>fan music</strong>.
<p>The brony fan music community is diverse, spanning genres from symphonic metal to trance and everything in between. But most importantly, the community creates music.</p>
<p>A <em>lot</em> of music.</p>
<p>All this music has to go somewhere. YouTube, SoundCloud, and Bandcamp are popular outlets that many brony musicians use to host their tunes. But no mainstream sites are specifically designed for our fandom&#39;s needs, and they&#39;re not particularly helpful if, as a listener, you&#39;re looking for pony fan music.</p>
<p>That&#39;s where Pony.fm comes in. <strong>Pony.fm is a community, hosting service, and music database rolled into one, with a generous dash of pony on top.</strong></p>
</div>
</div>
<p>Some <em>My Little Pony: Friendship is Magic</em> fans - typically referred to as &quot;bronies&quot; are the musical type, and show their appreciation for the show by pouring their talent into <strong>fan music</strong>.
<p>The brony fan music community is diverse, spanning genres from symphonic metal to trance and everything in between. But most importantly, the community creates music.</p>
<p>A <em>lot</em> of music.</p>
<p>All this music has to go somewhere. YouTube, SoundCloud, and Bandcamp are popular outlets that many brony musicians use to host their tunes. But no mainstream sites are specifically designed for our fandom&#39;s needs, and they&#39;re not particularly helpful if, as a listener, you&#39;re looking for pony fan music.</p>
<p>That&#39;s where Pony.fm comes in. <strong>Pony.fm is a community, hosting service, and music database rolled into one, with a generous dash of pony on top.</strong></p>
<div class="row-fluid">
<div class="span12">
<h2>So it&#39;s SoundCloud with ponies?</h2>
<p>Eenope!</p>
<p>Pony.fm is an original project. Although it takes inspiration from a number of well-known services for the general public, Pony.fm is not specifically modeled after any one of them. As a fan site itself, Pony.fm is an experience all its own.</p>
<p>Simply put, <strong>&quot;Pony.fm is Pony.fm.&quot;</strong></p>
<h2>So it&#39;s SoundCloud with ponies?</h2>
<p>Eenope!</p>
<p>Pony.fm is an original project. Although it takes inspiration from a number of well-known services for the general public, Pony.fm is not specifically modeled after any one of them. As a fan site itself, Pony.fm is an experience all its own.</p>
<p>Simply put, <strong>&quot;Pony.fm is Pony.fm.&quot;</strong></p>
<h2>What makes Pony.fm special?</h2>
<p>Pony.fm is a service created by a brony, for bronies. Every inch of the Pony.fm experience is crafted with ponies and bronies in mind. Some of the features necessarily resemble what you may find on other sites - lossless uploads, for example - but some features are specific to the pony fan music community.</p>
<p>Created as a service for the fandom, Pony.fm aims to be the one-stop shop for all things pony music, for artists and listeners alike.</p>
</div>
</div>
<h2>What makes Pony.fm special?</h2>
<p>Pony.fm is a service created by a brony, for bronies. Every inch of the Pony.fm experience is crafted with ponies and bronies in mind. Some of the features necessarily resemble what you may find on other sites - lossless uploads, for example - but some features are specific to the pony fan music community.</p>
<p>Created as a service for the fandom, Pony.fm aims to be the one-stop shop for all things pony music, for artists and listeners alike.</p>
<div class="row-fluid">
<div class="span12">
<h2>What does MLP Forums have to do with Pony.fm?</h2>
<p>MLP Forums and Pony.fm share an owner, and each encompasses a different segment of the global <em>My Little Pony: Friendship is Magic</em> community. Put together, both sites are able to offer a richer &quot;supercommunity&quot; experience than either site could offer on its own.</p>
<h2>What does MLP Forums have to do with Pony.fm?</h2>
<p>MLP Forums and Pony.fm share an owner, and each encompasses a different segment of the global <em>My Little Pony: Friendship is Magic</em> community. Put together, both sites are able to offer a richer &quot;supercommunity&quot; experience than either site could offer on its own.</p>
<h2>Who is behind Pony.fm?</h2>
<p>Pony.fm is built and owned by Feld0, a pony-loving teenager who heard the call of code. Recognizing the need for a true pony-specific music hosting site, and realizing that MLP Forums provided him with the resources he needed to make it happen, he created a blank text file and started pumping code into his computer.</p>
</div>
</div>
<h2>Who is behind Pony.fm?</h2>
<p>Pony.fm is built and owned by Feld0, a pony-loving teenager who heard the call of code. Recognizing the need for a true pony-specific music hosting site, and realizing that MLP Forums provided him with the resources he needed to make it happen, he created a blank text file and started pumping code into his computer.</p>
</div>
</div>