Merge pull request #2 from rbs333/transiiton-from-bottom

Transition from bottom

src/app/app.component.css

@@ -1,14 +1,26 @@
 .rootContainer {
 	font-family: 'Roboto', sans-serif;
+	width: 100%;
 }
+
+.header {
+	position: relative;
+	top: -.625rem;
+	left: -.625rem;
+	display: block;
+	padding: 10px;
+	width: 100%;
+	background-color: black;
+	color: white;
+}
+
 .title {
 	font-size: 1.5rem;
 }
 .slogan {
 	font-size: .75rem;
 }
+
 .titleBox {
-	display: inline-block;
-	padding-right: 20px;
-	border-right: 2px solid white;
-}
+	text-align: center;
+}

src/app/app.component.html

@@ -1,11 +1,14 @@
-<div class="rootContainer">
-	<mat-card class="header">
+<div id="rootContainer" class="rootContainer">
+	<div 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>
+	</div>
 	<app-episodes></app-episodes>
 </div>
 
 
+
+
+

src/app/episodes/episodes.component.css

@@ -1,54 +1,51 @@
-.episodeViewContainer {
-	display: grid;
-	grid-template-columns: 0 1fr;
-	grid-template-rows: auto;
-	grid-template-areas: "audioPanel episodes";
-	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;
+	position: fixed;
+	width: 100%;
+	top: 100%;
+	left: 0;
+	z-index: 100;
+	text-align: center;
+	transition: transform .6s ease;
+	padding: 10px;
+	background-color: black;
+	color: white;
 }
 
 .closeBtn {
 	float: right;
-}
-
-audio {
-	margin-top: 10px;
-	float: bottom;
+	margin: 10px;
 }
 
 .episodes {
-	grid-area: episodes;
 	display: inline-flex;
+	flex-direction: column;
 	flex-wrap: wrap;
-	justify-content: space-around;
 	background-color: white;
 }
 
 .episodeCard {
-	display: inline-block;
-	margin: .625em;
-	width: 35%;
-	max-width: 12em;
+	width: auto;
+	max-width: none;
+	margin: .625rem;
 }
 
+
 .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;
-}
+@media only screen and (min-width: 500px) {
+	.episodes {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-around;
+
+	}
+	.episodeCard {
+		display: inline-block;
+		width: 35%;
+		max-width: 12em;
+	}
+}

src/app/episodes/episodes.component.html

@@ -1,19 +1,15 @@
-<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 id="audioPanel" class="audioPanel">
+	<button class="closeBtn" (click)="close()">X</button>
+	<div class="title">{{selectedEpisode.title}} </div><br/>
+	<audio controls src="{{selectedEpisode.audio}}" type="audio/mpeg"></audio>
+</div>
+<div id="episodes" class="episodes">
+	<mat-card class="episodeCard" *ngFor="let episode of episodes" (click)="setSelected(episode)">
+		<mat-card-header></mat-card-header>
+		<img mat-card-image src="{{episode.img}}">
+		<mat-card-footer> 
+			<mat-card-title> {{episode.number}} </mat-card-title>
+		</mat-card-footer>
 	</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-header>
-			<img mat-card-image src="{{episode.img}}">
-			<mat-card-footer> 
-				<mat-card-title> {{episode.number}} </mat-card-title>
-			</mat-card-footer>
-		</mat-card>
-	</mat-card>
-</div>
+</div>
+

src/app/episodes/episodes.component.ts

@@ -20,17 +20,15 @@ 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";
+    document.getElementById('audioPanel').style.transform = "translateY(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";
+    document.getElementById('audioPanel').style.transform = "translateY(-100%)";
+    var width = document.getElementById('rootContainer').clientWidth;
+    console.log(width);
+    document.getElementById('audioPanel').style.width = width + "px";
   }
 }

src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>HotCakesHotTakes</title>
   <base href="/">
-
   <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">