Added some styling & fixed a couple of api errors
This commit is contained in:
parent
a7531e1c31
commit
319104dee8
@ -3,13 +3,15 @@ import { Routes, RouterModule } from '@angular/router';
|
||||
import { HomeComponent } from './components/home/home.component';
|
||||
import { ArtistsComponent } from './components/artists/artists.component';
|
||||
import { AlbumsComponent } from './components/albums/albums.component';
|
||||
import { SongComponent } from './components/song/song.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: HomeComponent },
|
||||
{ path: 'artists/:id', component: ArtistsComponent },
|
||||
{ path: 'artists', component: ArtistsComponent },
|
||||
{ path: 'albums/:id', component: AlbumsComponent },
|
||||
{ path: 'albums', component: AlbumsComponent }
|
||||
{ path: 'albums', component: AlbumsComponent },
|
||||
{ path: 'songs', component: SongComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -1,5 +1,46 @@
|
||||
<app-nav></app-nav>
|
||||
<div [ngClass]="this.navToggled ? 'd-flex toggled' : 'd-flex'" id="wrapper">
|
||||
<div class="bg-light border-right" id="sidebar-wrapper">
|
||||
<div class="sidebar-heading d-flex justify-content-between"><img src="./assets/icon.png" />Cassettea</div>
|
||||
<!-- Nav buttons -->
|
||||
<div class="list-group list-group-flush">
|
||||
<a routerLink="" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
|
||||
Explore
|
||||
<fa-icon [icon]="faGlobeEurope" [fixedWidth]="true"></fa-icon>
|
||||
</a>
|
||||
<a routerLink="songs" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
|
||||
Songs
|
||||
<fa-icon [icon]="faMusic" [fixedWidth]="true"></fa-icon>
|
||||
</a>
|
||||
<a routerLink="albums" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
|
||||
Albums
|
||||
<fa-icon [icon]="faCompactDisc" [fixedWidth]="true"></fa-icon>
|
||||
</a>
|
||||
<a routerLink="artists" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
|
||||
Artists
|
||||
<fa-icon [icon]="faUsers" [fixedWidth]="true"></fa-icon>
|
||||
</a>
|
||||
<a routerLink="settings" class="list-group-item list-group-item-action bg-light d-flex justify-content-between align-items-center">
|
||||
Settings
|
||||
<fa-icon [icon]="faCog" [fixedWidth]="true"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page-content">
|
||||
<!-- Sidenav toggle -->
|
||||
<nav class="navbar navbar-light bg-light justify-content-between border-bottom">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="toggleNav();">
|
||||
<fa-icon [icon]="this.navToggled ? faChevronLeft : faChevronRight" [fixedWidth]="true"></fa-icon>
|
||||
</button>
|
||||
<span class="navbar-brand">Route name here</span>
|
||||
<form class="form-inline" id="navbar-search">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<app-controls></app-controls>
|
||||
<!-- Router output -->
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Music controls -->
|
||||
<app-controls class="d-flex"></app-controls>
|
||||
@ -0,0 +1,69 @@
|
||||
// Main
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
app-controls {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#wrapper {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
#sidebar-wrapper {
|
||||
min-height: inherit;
|
||||
margin-left: -15rem;
|
||||
-webkit-transition: margin .25s ease-out;
|
||||
-moz-transition: margin .25s ease-out;
|
||||
-o-transition: margin .25s ease-out;
|
||||
transition: margin .25s ease-out;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .sidebar-heading {
|
||||
padding: 0.875rem 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.sidebar-heading > img {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .list-group {
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Page content
|
||||
#page-content {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
#navbar-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#navbar-search {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#page-content {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
margin-left: -15rem;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,33 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { faGlobeEurope, faMusic, faCompactDisc, faUsers, faCog, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent {
|
||||
export class AppComponent implements OnInit {
|
||||
title = 'Cassettea';
|
||||
}
|
||||
navToggled;
|
||||
|
||||
// FontAwesome
|
||||
faGlobeEurope = faGlobeEurope;
|
||||
faMusic = faMusic;
|
||||
faCompactDisc = faCompactDisc;
|
||||
faUsers = faUsers;
|
||||
faCog = faCog;
|
||||
faChevronLeft = faChevronLeft;
|
||||
faChevronRight = faChevronRight;
|
||||
|
||||
|
||||
constructor() {
|
||||
this.navToggled = false;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
toggleNav() {
|
||||
this.navToggled = (this.navToggled) ? false : true;
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,6 @@ import { HomeComponent } from './components/home/home.component';
|
||||
import { SongComponent } from './components/song/song.component';
|
||||
import { ArtistsComponent } from './components/artists/artists.component';
|
||||
import { AlbumsComponent } from './components/albums/albums.component';
|
||||
import { NavComponent } from './components/nav/nav.component';
|
||||
import { ControlsComponent } from './components/controls/controls.component';
|
||||
|
||||
@NgModule({
|
||||
@ -20,7 +19,6 @@ import { ControlsComponent } from './components/controls/controls.component';
|
||||
SongComponent,
|
||||
ArtistsComponent,
|
||||
AlbumsComponent,
|
||||
NavComponent,
|
||||
ControlsComponent
|
||||
],
|
||||
imports: [
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
<div class="container">
|
||||
<div class="navbar navbar-light bg-light border-top controls-wrapper">
|
||||
|
||||
<div *ngIf="( currentSong | async ) as song" class="songInfo">
|
||||
<span *ngIf="( currentSong | async ) as song" class="songInfo">
|
||||
{{ song.name }}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<div class="buttons">
|
||||
<span class="buttons">
|
||||
<fa-icon (click)="audio.isCurrentlyPlaying ? audio.pause() : audio.play()" [icon]="audio.isCurrentlyPlaying ? faPause : faPlay"></fa-icon>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<div class="time">
|
||||
<span class="time">
|
||||
<input type="range" class="form-control-range" id="song-range">
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="volume">
|
||||
|
||||
</div>
|
||||
<span class="volume">
|
||||
<fa-icon [icon]="faMusic" [fixedWidth]="true"></fa-icon>
|
||||
<input type="range" class="form-control-range" id="volume-range">
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
.controls-wrapper {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.form-control-range {
|
||||
display: inline;
|
||||
}
|
||||
// #song-range {
|
||||
// width: 50%;
|
||||
// }
|
||||
// #volume-range {
|
||||
// width: 20%;
|
||||
// }
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPlay, faPause, faVolumeMute, faVolumeDown, faVolumeUp } from '@fortawesome/free-solid-svg-icons';
|
||||
import { AudioService } from 'src/app/services/audio.service';
|
||||
import { Song } from '../../classes/entities';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
@ -14,6 +14,9 @@ export class ControlsComponent implements OnInit {
|
||||
// ? Fontawesome imports
|
||||
faPlay = faPlay;
|
||||
faPause = faPause;
|
||||
faVolumeMute = faVolumeMute;
|
||||
faVolumeDown = faVolumeDown;
|
||||
faVolumeUp = faVolumeUp;
|
||||
|
||||
currentSong: Promise<Song>;
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
<div [ngClass]="this.navToggled ? 'd-flex toggled' : 'd-flex'" id="wrapper">
|
||||
<div class="bg-light border-right" id="sidebar-wrapper">
|
||||
<div class="sidebar-heading">Cassettea</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light">Explore</a>
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light">Songs</a>
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light">Albums</a>
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light">Artists</a>
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="navbar-toggler" (click)="toggleNav();"><span class="navbar-toggler-icon"></span></button>
|
||||
</div>
|
||||
<script>
|
||||
$("#menu-toggle").click(function(e) {
|
||||
e.preventDefault();
|
||||
$("#wrapper").toggleClass("toggled");
|
||||
});
|
||||
</script>
|
||||
@ -1,36 +0,0 @@
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
min-height: 100vh;
|
||||
margin-left: -15rem;
|
||||
-webkit-transition: margin .25s ease-out;
|
||||
-moz-transition: margin .25s ease-out;
|
||||
-o-transition: margin .25s ease-out;
|
||||
transition: margin .25s ease-out;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .sidebar-heading {
|
||||
padding: 0.875rem 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#sidebar-wrapper .list-group {
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
margin-left: -15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NavComponent } from './nav.component';
|
||||
|
||||
describe('NavComponent', () => {
|
||||
let component: NavComponent;
|
||||
let fixture: ComponentFixture<NavComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NavComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,22 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav',
|
||||
templateUrl: './nav.component.html',
|
||||
styleUrls: ['./nav.component.scss']
|
||||
})
|
||||
export class NavComponent implements OnInit {
|
||||
navToggled;
|
||||
|
||||
constructor() {
|
||||
this.navToggled = false;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
toggleNav() {
|
||||
this.navToggled = (this.navToggled) ? false : true;
|
||||
}
|
||||
|
||||
}
|
||||
@ -21,8 +21,7 @@ export class EntityService {
|
||||
const result = [];
|
||||
|
||||
// For every entity in the api data.
|
||||
data.data.result.forEach(element => {
|
||||
|
||||
data.data.result.forEach((element: { type: any; }) => {
|
||||
// If the type is...
|
||||
switch (element.type) {
|
||||
// ... a song, add a song entity to the result array.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user