Applied layout fixes and style updates

rbs333 · Jul 3, 2018 · 3f1b799 · 3f1b799
1 parent 45daaac
commit 3f1b799
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 21 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -3,8 +3,15 @@
 	width: 100%;
 }
 
-.header mat-card {
+.header {
+	position: relative;
+	top: -.625rem;
+	left: -.625rem;
+	display: block;
+	padding: 10px;
 	width: 100%;
+	background-color: black;
+	color: white;
 }
 
 .title {

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,10 +1,10 @@
-<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>
 

diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css
@@ -2,10 +2,13 @@
 	position: fixed;
 	width: 100%;
 	top: 100%;
-	z-index: 50;
+	left: 0;
+	z-index: 100;
 	text-align: center;
-	transform: translateY(100%);
 	transition: transform .6s ease;
+	padding: 10px;
+	background-color: black;
+	color: white;
 }
 
 .closeBtn {
@@ -14,33 +17,35 @@
 }
 
 .episodes {
-	display: flex;
+	display: inline-flex;
+	flex-direction: column;
 	flex-wrap: wrap;
-	justify-content: space-around;
 	background-color: white;
 }
 
 .episodeCard {
-	display: inline-block;
+	width: auto;
+	max-width: none;
 	margin: .625rem;
-	width: 35%;
-	max-width: 12em;
 }
 
+
 .episodeCard:Hover {
 	background-color: lightyellow;
 	color: black;
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (min-width: 500px) {
 	.episodes {
-		display: inline-flex;
-		flex-direction: column;
+		display: flex;
+		flex-direction: row;
 		flex-wrap: wrap;
+		justify-content: space-around;
+
 	}
-
 	.episodeCard {
-		width: auto;
-		max-width: none;
+		display: inline-block;
+		width: 35%;
+		max-width: 12em;
 	}
 }
diff --git a/src/app/episodes/episodes.component.html b/src/app/episodes/episodes.component.html
@@ -1,15 +1,15 @@
-<mat-card id="audioPanel" class="audioPanel">
+<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>
-</mat-card>
-<mat-card class="episodes">
+</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>
+</div>
 
diff --git a/src/app/episodes/episodes.component.ts b/src/app/episodes/episodes.component.ts
@@ -27,5 +27,8 @@ export class EpisodesComponent implements OnInit {
     this.selected = true;
   	this.selectedEpisode = episode;
     document.getElementById('audioPanel').style.transform = "translateY(-100%)";
+    var width = document.getElementById('rootContainer').clientWidth;
+    console.log(width);
+    document.getElementById('audioPanel').style.width = width + "px";
   }
 }