Working Audio panel transition

rbs333 · Jun 30, 2018 · a9f05c6 · a9f05c6
1 parent 8e8fdb3
commit a9f05c6
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 22 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,3 +1,6 @@
+.rootContainer {
+	font-family: 'Roboto', sans-serif;
+}
 .title {
 	font-size: 1.5rem;
 }

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,11 @@
-<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 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>
-</mat-card>
-<app-episodes></app-episodes>
+
 
diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css
@@ -1,15 +1,20 @@
 .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 {
@@ -26,16 +31,24 @@ audio {
 	display: inline-flex;
 	flex-wrap: wrap;
 	justify-content: space-around;
+	background-color: white;
 }
 
 .episodeCard {
 	display: inline-block;
 	margin: .625em;
-	width: 40%;
-	max-width: 10em;
+	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;
+}
diff --git a/src/app/episodes/episodes.component.html b/src/app/episodes/episodes.component.html
@@ -1,12 +1,11 @@
-<div class="episodeViewContainer">
-	<div class="audioPanel" *ngIf="selected">
-		<br/>
+<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>
-	</div>
-	<div class="episodes">
+	</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> -->
@@ -16,5 +15,5 @@
 				<mat-card-title> {{episode.number}} </mat-card-title>
 			</mat-card-footer>
 		</mat-card>
-	</div>
+	</mat-card>
 </div>
diff --git a/src/app/episodes/episodes.component.ts b/src/app/episodes/episodes.component.ts
@@ -20,11 +20,17 @@ export class EpisodesComponent implements OnInit {
 
   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";
   }
-
 }
diff --git a/src/app/home-page/home-page.component.html b/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>
+
diff --git a/src/index.html b/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>