artist mas lidno

frontend/app.js

@@ -12,7 +12,7 @@ app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $lo
 		controller: 'artistListCtrl',
 		resolve: {
 			artists: function(ArtistsService){
-				return ArtistsService.getAllArtists();
+				return ArtistsService.getAllArtistsWithAlbums();
 			}
 		}
 	})

frontend/css/styles.css

@@ -1,21 +1,3 @@
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('./fonts/sourcesanspro/sourcesanspro-light.woff') format('woff');
-}
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('./fonts/sourcesanspro/sourcesanspro.woff') format('woff');
-}
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('./fonts/sourcesanspro/sourcesanspro-bold.woff') format('woff');
-}
 
 body, html{
   padding: 0px;
@@ -25,13 +7,457 @@ body, html{
 }
 
 body{
-   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: #d9e0e7;
+  font-size: 12px;
+  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #707478;
+
+  /*font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   -webkit-font-smoothing: antialiased;
   line-height: 1.42857143;
-  color: #58666e;
+  color: #58666e;*/
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 500;
+    color: #242a30;
+}
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+    font-size: 60%;
+    font-weight: 300;
+    color: #7c7f83;
+}
+a {
+    transition: color 100ms ease-in-out;
+    -o-transition: color 100ms ease-in-out;
+    -ms-transition: color 100ms ease-in-out;
+    -moz-transition: color 100ms ease-in-out;
+    -webkit-transition: color 100ms ease-in-out;
+}
+a:focus {
+    outline: 0;
+}
+label {
+    color: #242a30;
+}
+.badge {
+    font-size: 75%;
+    line-height: 1.25;
+    font-weight: 600;
+}
+.label {
+    font-size: 75%;
+    font-weight: 600;
+}
+.badge.badge-square {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+.badge.badge-default, .label.label-default {
+    background: #b6c2c9;
+}
+.badge.badge-danger, .label.label-danger {
+    background: #ff5b57;
+}
+.badge.badge-warning, .label.label-warning {
+    background: #f59c1a;
+}
+.badge.badge-success, .label.label-success {
+    background: #00acac;
+}
+.badge.badge-info, .label.label-info {
+    background: #49b6d6;
+}
+.badge.badge-primary, .label.label-primary {
+    background: #348fe2;
+}
+.badge.badge-inverse, .label.label-inverse {
+    background: #2d353c;
+}
+
+.text-inverse {
+    color: #2d353c!important;
+}
+a.text-inverse:focus, a.text-inverse:hover {
+    color: #575d63!important;
+}
+.text-success {
+    color: #00acac!important;
+}
+a.text-success:focus, a.text-success:hover {
+    color: #33bdbd!important;
+}
+.text-info {
+    color: #49b6d6!important;
+}
+a.text-info:focus, a.text-info:hover {
+    color: #6dc5de!important;
+}
+.text-primary {
+    color: #348fe2!important;
+}
+a.text-primary:focus, a.text-primary:hover {
+    color: #5da5e8!important;
+}
+.text-warning {
+    color: #f59c1a!important;
+}
+a.text-warning:focus, a.text-warning:hover {
+    color: #f7b048!important;
+}
+.text-danger {
+    color: #ff5b57!important;
+}
+a.text-danger:focus, a.text-danger:hover {
+    color: #ff7c79!important;
+}
+.text-white {
+    color: #fff!important;
+}
+a.text-white:focus, a.text-white:hover {
+    color: #f0f3f4!important;
+}
+
+.btn.btn-default {
+    color: #fff;
+    background: #b6c2c9;
+    border-color: #b6c2c9;
+}
+.btn-default.active, .btn-default:active, .btn-default:focus, .btn-default:hover, .open .dropdown-toggle.btn-default {
+    background: #929ba1;
+    border-color: #929ba1;
+}
+.btn-group .btn.btn-default:not(.active)+.btn.btn-default, .input-group-btn .btn.btn-default:not(.active)+.btn.btn-default {
+    border-left-color: #929ba1;
+}
+.btn.btn-white {
+    font-weight: 400;
+    color: #333;
+    background: #fff;
+    border-color: #e2e7eb;
+}
+.btn.btn-white.btn-white-without-border {
+    border-color: #fff;
+}
+.btn.btn-white.btn-white-without-border.active, .btn.btn-white.btn-white-without-border.active:focus, .btn.btn-white.btn-white-without-border.active:hover {
+    border-color: #ddd;
+}
+.btn.btn-white.btn-white-without-border:focus, .btn.btn-white.btn-white-without-border:hover {
+    border-color: #eee;
+}
+.btn-white.active, .btn-white:active, .btn-white:focus, .btn-white:hover, .open .dropdown-toggle.btn-white {
+    background: #e2e7eb;
+    border-color: #d8dde1;
+}
+.btn-group .btn.btn-white:not(.active)+.btn.btn-white, .input-group-btn .btn.btn-white:not(.active)+.btn.btn-white {
+    border-left-color: #eee;
+}
+.btn.btn-inverse {
+    color: #fff;
+    background: #2d353c;
+    border-color: #2d353c;
+}
+.btn-inverse.active, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .open .dropdown-toggle.btn-inverse {
+    background: #242a30;
+    border-color: #242a30;
+}
+.btn-group .btn.btn-inverse:not(.active)+.btn.btn-inverse, .input-group-btn .btn.btn-inverse:not(.active)+.btn.btn-inverse {
+    border-left-color: #242a30;
+}
+.btn.btn-primary {
+    color: #fff;
+    background: #348fe2;
+    border-color: #348fe2;
+}
+.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
+    background: #2a72b5;
+    border-color: #2a72b5;
+}
+.btn-group .btn.btn-primary:not(.active)+.btn.btn-primary, .input-group-btn .btn.btn-primary:not(.active)+.btn.btn-primary {
+    border-left-color: #2a72b5;
+}
+.btn.btn-success {
+    color: #fff;
+    background: #00acac;
+    border-color: #00acac;
+}
+.btn.btn-success.active, .btn.btn-success:active, .btn.btn-success:focus, .btn.btn-success:hover, .open .dropdown-toggle.btn-success {
+    background: #008a8a;
+    border-color: #008a8a;
+}
+.btn-group .btn.btn-success:not(.active)+.btn.btn-success, .input-group-btn .btn.btn-success:not(.active)+.btn.btn-success {
+    border-left-color: #008a8a;
+}
+.btn.btn-warning {
+    color: #fff;
+    background: #f59c1a;
+    border-color: #f59c1a;
+}
+.btn-warning.active, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open .dropdown-toggle.btn-warning {
+    background: #c47d15;
+    border-color: #c47d15;
+}
+.btn-group .btn.btn-warning:not(.active)+.btn.btn-warning, .input-group-btn .btn.btn-warning:not(.active)+.btn.btn-warning {
+    border-left-color: #c47d15;
+}
+.btn.btn-danger {
+    color: #fff;
+    background: #ff5b57;
+    border-color: #ff5b57;
+}
+.btn-danger.active, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open .dropdown-toggle.btn-danger {
+    background: #cc4946;
+    border-color: #cc4946;
+}
+.btn-group .btn.btn-danger:not(.active)+.btn.btn-danger, .input-group-btn .btn.btn-danger:not(.active)+.btn.btn-danger {
+    border-left-color: #cc4946;
+}
+.btn.btn-info {
+    color: #fff;
+    background: #49b6d6;
+    border-color: #49b6d6;
+}
+.btn-info.active, .btn-info:active, .btn-info:focus, .btn-info:hover, .open .dropdown-toggle.btn-info {
+    background: #3a92ab;
+    border-color: #3a92ab;
+}
+.btn-group .btn.btn-info:not(.active)+.btn.btn-info, .input-group-btn .btn.btn-info:not(.active)+.btn.btn-info {
+    border-left-color: #3a92ab;
+}
+
+.panel {
+    background-color: #F8F8F8;
+    /*border-bottom: 1px solid rgba(0, 0, 0, 0.5);*/
+    box-shadow: none;
+}
+
+.panel.panel-no-rounded-corner .panel-body, .panel.panel-no-rounded-corner .panel-footer, .panel.panel-no-rounded-corner .panel-heading {
+    -webkit-border-radius: 0!important;
+    -moz-border-radius: 0!important;
+    border-radius: 0!important;
+}
+.panel-heading {
+    padding: 10px 15px;
+    border: none;
+}
+.panel-heading+.slimScrollDiv, .panel-heading+.table {
+    border-top: 1px solid #eee;
+}
+.panel-heading-btn {
+    float: right;
+}
+.panel-heading-btn>a {
+    margin-left: 8px;
+}
+.panel-heading .btn-group .btn {
+    margin-top: -7px;
+}
+.panel-heading .btn-group .btn.btn-sm {
+    margin-top: -5px;
+}
+.panel-heading .btn-group .btn.btn-xs {
+    margin-top: -1px;
+}
+.panel-heading .label.pull-left, .panel-heading .label.pull-right {
+    line-height: 15px;
+}
+.panel-heading .progress.pull-left, .panel-heading .progress.pull-right {
+    width: 40%;
+    min-width: 120px;
+}
+.panel-heading+.alert {
+    margin-bottom: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+.panel-with-tabs .panel-heading {
+    background: #c1ccd1!important;
+    color: #333!important;
+}
+.panel-heading .nav-tabs {
+    margin-top: -10px;
+    margin-right: -15px;
+}
+.panel-heading .nav-tabs>li>a {
+    padding: 10px 15px;
+    line-height: 20px;
+}
+.panel-title {
+    line-height: 20px;
+    font-size: 12px;
+}
+.panel-title .accordion-toggle {
+    margin: -10px -15px;
+    padding: 10px 15px;
+}
+.panel-title .accordion-toggle.accordion-toggle-styled .fa:before {
+    content: '\f056'}
+.panel-title .accordion-toggle.accordion-toggle-styled.collapsed .fa:before {
+    content: '\f055'}
+.panel-title .pull-right {
+    line-height: 20px;
+}
+.panel-toolbar {
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    padding: 10px 15px;
+    background: #fff;
+}
+.panel-toolbar+.form-control {
+    margin: -1px 0 0;
+    border-right: none;
+    border-left: none;
+}
+.panel-group .panel {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.form-control+.panel-footer {
+    border-top: none;
+}
+.panel-body {
+    padding: 15px;
+}
+.panel-body.no-border {
+    border: none!important;
+}
+.panel-body.no-padding, .panel-body.panel-form, .panel-body.panel-full-width, .panel-body.panel-table {
+    padding: 0!important;
+}
+.panel-body.with-table>.table {
+    border: 0;
+    margin: 0;
+}
+.panel-body.with-table>.table tr:last-child td, .panel-body.with-table>.table tr:last-child th {
+    border-bottom: 0;
+}
+.panel-default>.panel-heading+.panel-collapse .panel-body {
+    border-top: 1px solid #eee;
+}
+.panel-footer {
+    background: #fff;
+    border-top: 1px solid #eee;
+}
+.panel .tab-content {
+    -webkit-border-radius: 0 0 3px 3px;
+    -moz-border-radius: 0 0 3px 3px;
+    border-radius: 0 0 3px 3px;
+}
+.panel-default>.panel-heading {
+    background: #fafafa;
+}
+.panel-danger>.panel-heading, .panel-info>.panel-heading, .panel-inverse>.panel-heading, .panel-primary>.panel-heading, .panel-success>.panel-heading, .panel-warning>.panel-heading {
+    color: #fff;
+}
+.panel-inverse>.panel-heading {
+    background: #242a30;
+}
+.panel-success>.panel-heading {
+    background: #008a8a;
+}
+.panel-warning>.panel-heading {
+    background: #c47d15;
+}
+.panel-danger>.panel-heading {
+    background: #cc4946;
+}
+.panel-primary>.panel-heading {
+    background: #2a72b5;
+}
+.panel-info>.panel-heading {
+    background: #3a92ab;
+}
+.panel.panel-expand {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    overflow: hidden;
+    z-index: 1080;
+}
+.panel-expand .height-full, .panel-expand .height-lg, .panel-expand .height-md, .panel-expand .height-sm, .panel-expand .height-xs {
+    height: 100%!important;
+}
+
+.alert.song-list{
+    margin-top: -10px;
+}
+.alert {
+    border: none;
+    border-radius: 0px!important;
+}
+.alert.alert-success {
+    background: #66C6C4;
+    color: #00ACAB;
+}
+.alert.alert-info {
+    background: #93cfe5;
+    color: #029BC4;
+}
+.alert.alert-danger {
+    background: #f8b2b2;
+    color: #C43D3D;
+}
+.alert.alert-warning {
+    background: #ffead0;
+    color: #E5A055;
+}
+
+.alert.alert-inverse{
+  background-color: #2D353C;
+  color: white;
+}
+
+.alert.alert-default{
+  background-color: #B6C2C9;
+  color: #97A2A8;
+}
+
+.note {
+    margin-bottom: 20px;
+    padding: 15px;
+    border-left: 3px solid;
+}
+.note.note-success {
+    border-color: #4a8564;
+    background: #b0ebca;
+    color: #3c763d;
+}
+.note.note-success h1, .note.note-success h2, .note.note-success h3, .note.note-success h4, .note.note-success h5, .note.note-success h6 {
+    color: #3c763d;
+}
+.note.note-danger {
+    border-color: #986e6e;
+    background: #fbd1d1;
+    color: #a94442;
+}
+.note.note-danger h1, .note.note-danger h2, .note.note-danger h3, .note.note-danger h4, .note.note-danger h5, .note.note-danger h6 {
+    color: #a94442;
+}
+.note.note-info {
+    border-color: #587c89;
+    background: #bee2ef;
+    color: #31708f;
+}
+.note.note-info h1, .note.note-info h2, .note.note-info h3, .note.note-info h4, .note.note-info h5, .note.note-info h6 {
+    color: #31708f;
+}
+.note.note-warning {
+    border-color: #9d9080;
+    background: #fff2e3;
+    color: #8a6d3b;
+}
+.note.note-warning h1, .note.note-warning h2, .note.note-warning h3, .note.note-warning h4, .note.note-warning h5, .note.note-warning h6 {
+    color: #8a6d3b;
 }
 
+/* CUSTOM */
 .navbar{
   border-radius: 0px!important;
   border-bottom: 1px solid black;
@@ -58,7 +484,7 @@ body{
     border: none;
     border-radius: 0;
     overflow-y: auto;
-    background-color: #4A5356;
+    background-color: #2D353C;
     bottom: 0;
     overflow-x: hidden;
     padding-bottom: 40px;
@@ -78,7 +504,7 @@ body{
   .side-nav li a:hover,
   .side-nav li a:focus {
       outline: none;
-      background-color: #656F72 !important;
+      background-color: #394149 !important;
       color: white;
   }
 }
@@ -112,6 +538,7 @@ body{
 .player-skin{
   background-color: #F8F8F8;
   border-color: #E7E7E7;
+  z-index: 3; 
 }
 
 .player-position{
@@ -134,6 +561,32 @@ body{
 
 .player-control :hover{
   cursor: pointer;
-  color: #35BDEB;
+  color: #00acac;
   font-size: 15px;
+}
+
+.small-cover{
+  width: 50px;
+}
+
+.bottom-small-space{
+  margin-bottom: 10px;
+}
+
+.fade {
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-transition: opacity .3s linear;
+    transition: opacity .3s linear;
+}
+.fade.in {
+    filter: alpha(opacity=100);
+}
+
+.pointer{
+  cursor: pointer;
+}
+
+.odd-row{
+  background: #CCD2D6;
 }

frontend/modules/artists/artistListCtrl.js

@@ -1,6 +1,11 @@
 app.controller('artistListCtrl', function($scope, $http, AudioService, artists){
-	$scope.artists=[];
-	
+	$scope.artists=artists;
+	$scope.showSongSection = false;
+
+	$scope.showSongs = function(name){
+		$scope.showSongSection = true;
+	}
+
 
 });
 

frontend/modules/artists/artists.html

@@ -1,14 +1,35 @@
-<div class="" ng-repeat="artist in artists">
-	<h3>{{artist.artist}}</h3>
-	<!-- <div class="media">
-		<div class="media-left">
-			<a href="#">
-				<img class="media-object" src="../../img/default_cover.png">
-			</a>
+<div ng-repeat="(key, value) in artists">
+	<div class="panel panel-inverse">
+		<div class="panel-heading">
+			<h4 class="panel-title">{{key}}</h4>
 		</div>
-		<div class="media-body">
-			<h4 class="media-heading">Album 1</h4>
-				...
+		<div class="panel-body">
+			<div ng-repeat="album in value">
+				<div class="media bottom-small-space pointer">
+					<div class="media-left">
+						<a href="#">
+							<img class="media-object small-cover" src="../../img/default_cover.png">
+						</a>
+					</div>
+					<div class="media-body">
+						<div class="row">
+							<div class="col-md-10" ng-click="showControls = ! showControls">
+								<h5 class="">{{album}}</h5>
+							</div>
+							<div class="col-md-2">
+								<div class="" ng-show="showControls">
+									<span class="player-control">
+				    					<i class="fa fa-play fa-fw"></i>
+				    					<i class="fa fa-random fa-fw"></i>
+				    					<i class="fa fa-plus fa-fw"></i>
+				    				</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
-	</div> -->
+	</div>
+	<hr>
 </div>

frontend/modules/artists/artistsService.js

@@ -5,6 +5,12 @@ app.factory("ArtistsService", function($http){
 				.then(function(response){
 					return response.data;
 				});
+        },
+        getAllArtistsWithAlbums: function(){
+            return $http.get('https://autismify.davidventura.com.ar/back/artists/albums')
+				.then(function(response){
+					return response.data;
+				});
         }
     };
 });

frontend/modules/main/main.html

@@ -1 +1,20 @@
-<h2>fdsafdsa</h2>
+<div class="" >
+	<h4>fdsafda</h4>
+	<div class="media">
+		<div class="media-left">
+			<a href="#">
+				<img class="media-object small-cover" src="../../img/default_cover.png">
+			</a>
+		</div>
+		<div class="media-body">
+			<h4 class="media-heading">Album 1</h4>
+				<span class="label label-default">Synth</span>
+				<span class="label label-danger">Pop</span>
+				<span class="label label-warning">Alternative</span>
+				<span class="label label-success">Electronic</span>
+				<span class="label label-info">Experimental</span>
+				<span class="label label-primary">Indie</span>
+				<span class="label label-inverse">Rock</span>
+		</div>
+	</div>
+</div>

frontend/modules/player/player.html

@@ -1,31 +1,33 @@
 <div ng-controller="playerCtrl">
 <div class="player-position">
 	<div class="navbar navbar-default player-skin">
-	    <div class="player-wrapper">
-	    	<div class="row">
-	    		<div class="col-md-3">
-	    			<span class="player-control">
-	    				<i class="fa fa-backward fa-fw"> </i>
-	    				<i class="fa fa-pause fa-fw"></i>
-	    				<i class="fa fa-stop fa-fw"  ng-click="stopSong()"></i>
-	    				<i class="fa fa-play fa-fw" ng-click="playSong()"></i>
-	    				<i class="fa fa-forward fa-fw"></i>
-	    			</span>
-	    			<span class="player-song-name">
-	    				song name 
-	    			</span>
-	    		</div>
-	    		<div class="col-md-6"></div>
-	    		<div class="col-md-3 text-right"> 
-	    			<span class="player-control">
-	    				<i class="fa fa-random fa-fw"> </i>
-	    				<i class="fa fa-repeat fa-fw"></i>
-	    				<i class="fa fa-volume-up fa-fw"> </i>
-	    				<i class="fa fa-heart-o fa-fw"></i>
-	    			</span>
-	    		</div>
-	    	</div>
-	    </div>
+		<div class="container-fluid">
+		    <div class="player-wrapper">
+		    	<div class="row">
+		    		<div class="col-md-3">
+		    			<span class="player-control">
+		    				<i class="fa fa-backward fa-fw"> </i>
+		    				<i class="fa fa-pause fa-fw"></i>
+		    				<i class="fa fa-stop fa-fw"  ng-click="stopSong()"></i>
+		    				<i class="fa fa-play fa-fw" ng-click="playSong()"></i>
+		    				<i class="fa fa-forward fa-fw"></i>
+		    			</span>
+		    			<span class="player-song-name">
+		    				song name 
+		    			</span>
+		    		</div>
+		    		<div class="col-md-6"></div>
+		    		<div class="col-md-3 text-right"> 
+		    			<span class="player-control">
+		    				<i class="fa fa-random fa-fw"> </i>
+		    				<i class="fa fa-repeat fa-fw"></i>
+		    				<i class="fa fa-volume-up fa-fw"> </i>
+		    				<i class="fa fa-heart-o fa-fw"></i>
+		    			</span>
+		    		</div>
+		    	</div>
+		    </div>
+		</div>
 	</div>
 </div>
 </div>