Merge pull request #1 from rbs333/selected-episode

Selected episode

src/app/app.component.css

@@ -0,0 +1,14 @@
+.rootContainer {
+	font-family: 'Roboto', sans-serif;
+}
+.title {
+	font-size: 1.5rem;
+}
+.slogan {
+	font-size: .75rem;
+}
+.titleBox {
+	display: inline-block;
+	padding-right: 20px;
+	border-right: 2px solid white;
+}

src/app/app.component.html

@@ -1,2 +1,11 @@
-<app-episodes></app-episodes>
+<div class="rootContainer">
+	<mat-card class="header">
+		<div class="titleBox">
+			<span class="title">Hot Cakes & Hot Takes</span><br/>
+			<span class="slogan">The premier post-pancake podcast</span>
+		</div>
+	</mat-card>
+	<app-episodes></app-episodes>
+</div>
+
 

src/app/episodes/episode.ts

@@ -4,4 +4,5 @@ export class Episode {
 	title: string;
 	summary: string;
 	img: string;
+	audio: string;
 }

src/app/episodes/episodes.component.css

@@ -1,23 +1,54 @@
 .episodeViewContainer {
 	display: grid;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: 0 1fr;
 	grid-template-rows: auto;
 	grid-template-areas: "audioPanel episodes";
-	grid-column-gap: 1em;
+	transition: 0.5s;
 }
 
 .audioPanel {
 	grid-area: audioPanel;
+	background-color: white;
+	color: black;
+	max-width: 300px;
+	padding: .625em;
+	overflow-x: hidden;
+	width: 0px;
+	transition: 0.7s;
+}
+
+.closeBtn {
+	float: right;
+}
+
+audio {
+	margin-top: 10px;
+	float: bottom;
 }
 
 .episodes {
 	grid-area: episodes;
 	display: inline-flex;
 	flex-wrap: wrap;
+	justify-content: space-around;
+	background-color: white;
 }
 
 .episodeCard {
 	display: inline-block;
-	margin: .5em;
-	max-width: 7em;
-}
+	margin: .625em;
+	width: 35%;
+	max-width: 12em;
+}
+
+.episodeCard:Hover {
+	background-color: lightyellow;
+	color: black;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side 
+navigation */
+#main {
+    transition: margin-left .5s;
+    padding: 20px;
+}

src/app/episodes/episodes.component.html

@@ -1,16 +1,19 @@
-<div class="episodeViewContainer">
-	<div class="audioPanel">
-		<h2> I am the audio player </h2>
-	</div>
-	<div class="episodes">
-		<mat-card class="episodeCard" *ngFor="let episode of episodes">
+<div id="episodeViewContainer" class="episodeViewContainer">
+	<mat-card id="audioPanel" class="audioPanel">
+		<button class="closeBtn" (click)="close()">X</button>
+		<div class="title"> {{selectedEpisode.title}} </div><br/>
+		<div class="description"> {{selectedEpisode.summary}}</div><br/>
+		<audio controls src="{{selectedEpisode.audio}}" type="audio/mpeg"></audio>
+	</mat-card>
+	<mat-card class="episodes">
+		<mat-card class="episodeCard" *ngFor="let episode of episodes" (click)="setSelected(episode)">
 			<mat-card-header>
-				<mat-card-subtitle> {{episode.number}} </mat-card-subtitle>
+				<!-- <mat-card-subtitle> {{episode.number}} </mat-card-subtitle> -->
 			</mat-card-header>
 			<img mat-card-image src="{{episode.img}}">
 			<mat-card-footer> 
-				<mat-card-title> {{episode.title}} </mat-card-title>
+				<mat-card-title> {{episode.number}} </mat-card-title>
 			</mat-card-footer>
 		</mat-card>
-	</div>
+	</mat-card>
 </div>

src/app/episodes/episodes.component.ts

@@ -10,10 +10,27 @@ import { Episode } from './episode';
 export class EpisodesComponent implements OnInit {
 
   episodes = EPISODES; 
+  selected = false;
+  selectedEpisode = new Episode();
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  close() {
+    this.selected = false;
+    document.getElementById("audioPanel").style.width = "0";
+    document.getElementById("episodeViewContainer").style.gridTemplateColumns = "0 1fr";
+    // document.getElementById("main").style.marginLeft = "0";
+  }
+
+  setSelected(episode: Episode) {
+    this.selected = true;
+  	this.selectedEpisode = episode;
+    document.getElementById("episodeViewContainer").style.gridTemplateColumns = "auto 1fr";
+    document.getElementById("audioPanel").style.width = "300px";
+    // document.getElementById("episodeViewContainer").style.marginLeft = "300px";
+    // document.getElementById("audioPanel").style.right = "0px";
+  }
 }

src/app/episodes/mock-episodes.ts

@@ -1,12 +1,21 @@
 import { Episode } from './episode';
 
 export const EPISODES: Episode[] = [
-	{number: '001', title: '2017 Year in Review', summary: 'In this episode we introduce the show and talk all things 2017', img: '../../assets/images/003.jpg'},
-	{number: '002', title: 'What Makes A Good Concert?', summary: 'We', img: '../../assets/images/003.jpg'},
-	{number: '003', title: 'College Expectations vs. Reality', summary: 'We', img: '../../assets/images/003.jpg'},
-	{number: '004', title: 'Waste', summary: 'We', img: '../../assets/images/003.jpg'},
-	{number: '005', title: 'Values of Genre', summary: 'We', img: '../../assets/images/003.jpg'},
-	{number: '006', title: 'Millennial Life', summary: 'We', img: '../../assets/images/003.jpg'},
-	{number: '007', title: 'Cant Remember', summary: 'We', img: '../../assets/images/007.png'},
-	{number: '008', title: 'Values of Genre', summary: 'We', img: '../../assets/images/008.jpg'}
+	{number: '001', title: '2017 Year in Review', 
+	summary: 'Tyler and Robert breakdown all things 2017. Favorite movies, books, TV, feelings in addition to analysis on the state of the world and tons of other great stuff that they would love to talk about', 
+	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/002.mp3'},
+	{number: '002', title: 'What Makes A Good Concert?', summary: 'We', 
+	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/002.mp3'},
+	{number: '003', title: 'College Expectations vs. Reality', summary: 'We', 
+	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/003.mp3'},
+	{number: '004', title: 'Waste', summary: 'We', img: '../../assets/images/003.jpg',
+	audio: '../../assets/mp3/004.mp3'},
+	{number: '005', title: 'Values of Genre', summary: 'We', img: '../../assets/images/003.jpg',
+	audio: '../../assets/mp3/005.mp3'},
+	{number: '006', title: 'Millennial Life', summary: 'We', img: '../../assets/images/003.jpg', 
+	audio: '../../assets/mp3/006.mp3'},
+	{number: '007', title: 'Cant Remember', summary: 'We', img: '../../assets/images/007.png', 
+	audio: '../../assets/mp3/007.mp3'},
+	{number: '008', title: 'Values of Genre', summary: 'We', img: '../../assets/images/008.jpg', 
+	audio: '../../assets/mp3/008.mp3'}
 ] 

src/app/home-page/home-page.component.html

@@ -1,3 +1,6 @@
-<p>
-  home-page works!
-</p>
+<div class="homePageContainer">
+	<mat-card class="homePageCard">
+	  Hot Cakes & Hot Takes
+	</mat-card>
+</div>
+

src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>