From f3de52791a9e75cc9f7631bb6e29eee1f4a08814 Mon Sep 17 00:00:00 2001 From: Robert Date: Sat, 30 Jun 2018 13:53:07 -0400 Subject: [PATCH 1/5] Layout refactor in progress --- src/app/episodes/episodes.component.css | 31 +++++++++--------------- src/app/episodes/episodes.component.html | 6 ++--- src/app/episodes/episodes.component.ts | 7 ------ 3 files changed, 13 insertions(+), 31 deletions(-) diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css index 5a1631b..4106e70 100644 --- a/src/app/episodes/episodes.component.css +++ b/src/app/episodes/episodes.component.css @@ -1,20 +1,20 @@ + .episodeViewContainer { + position: relative; display: grid; - grid-template-columns: 0 1fr; - grid-template-rows: auto; - grid-template-areas: "audioPanel episodes"; - transition: 0.5s; + grid-template-rows: 1fr; + grid-template-areas: "mainRow"; + overflow: hidden; } .audioPanel { - grid-area: audioPanel; - background-color: white; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; color: black; - max-width: 300px; padding: .625em; - overflow-x: hidden; - width: 0px; - transition: 0.7s; } .closeBtn { @@ -22,12 +22,10 @@ } audio { - margin-top: 10px; - float: bottom; } .episodes { - grid-area: episodes; + grid-area: mainRow; display: inline-flex; flex-wrap: wrap; justify-content: space-around; @@ -45,10 +43,3 @@ audio { 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 index 59899d2..64f6536 100644 --- a/src/app/episodes/episodes.component.html +++ b/src/app/episodes/episodes.component.html @@ -1,15 +1,13 @@
-
{{selectedEpisode.title}}

+
I am the audio{{selectedEpisode.title}}

{{selectedEpisode.summary}}

 - - - + {{episode.number}} diff --git a/src/app/episodes/episodes.component.ts b/src/app/episodes/episodes.component.ts index b10e03d..f4c4506 100644 --- a/src/app/episodes/episodes.component.ts +++ b/src/app/episodes/episodes.component.ts @@ -20,17 +20,10 @@ 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"; } } From 13f9068c02654b34259a14b628cfb90dc76dbdb3 Mon Sep 17 00:00:00 2001 From: Robert Date: Sat, 30 Jun 2018 20:42:36 -0400 Subject: [PATCH 2/5] Position is terrible for somethings --- src/app/app.component.css | 13 +++++++++++++ src/app/app.component.html | 18 +++++++++--------- src/app/episodes/episodes.component.css | 10 ++-------- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index 2116680..ab48ab7 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,6 +1,19 @@ .rootContainer { font-family: 'Roboto', sans-serif; } + +.header { +} + +.header mat-card { + width: 100%; +} +body { + display: block; + margin: 0; + width: 100%; +} + .title { font-size: 1.5rem; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 5cc4d36..3a2cbde 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,11 +1,11 @@ -
- -
- Hot Cakes & Hot Takes
- The premier post-pancake podcast -
- - -
+ + +
+ Hot Cakes & Hot Takes
+ The premier post-pancake podcast +
+ + + diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css index 4106e70..1b38dcf 100644 --- a/src/app/episodes/episodes.component.css +++ b/src/app/episodes/episodes.component.css @@ -1,20 +1,15 @@ .episodeViewContainer { position: relative; - display: grid; - grid-template-rows: 1fr; - grid-template-areas: "mainRow"; + display: block; overflow: hidden; } .audioPanel { position: absolute; - top: 0; - left: 0; + z-index: 50; width: 100%; height: 100%; - color: black; - padding: .625em; } .closeBtn { @@ -25,7 +20,6 @@ audio { } .episodes { - grid-area: mainRow; display: inline-flex; flex-wrap: wrap; justify-content: space-around; From e55a1bca320a2fb1c52c9bc33f92519341517f36 Mon Sep 17 00:00:00 2001 From: Robert Date: Sun, 1 Jul 2018 15:55:12 -0400 Subject: [PATCH 3/5] Working push left to right --- src/app/episodes/episodes.component.css | 14 +++++++--- src/app/episodes/episodes.component.html | 34 +++++++++++++----------- src/app/episodes/episodes.component.ts | 2 ++ 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css index 1b38dcf..4f094ba 100644 --- a/src/app/episodes/episodes.component.css +++ b/src/app/episodes/episodes.component.css @@ -1,15 +1,21 @@ +.wrapper { + overflow: hidden; +} .episodeViewContainer { - position: relative; display: block; - overflow: hidden; + position: relative; + top: 0; + left: 0; + transform: translateX(0); + transition: transform .6s ease; } .audioPanel { position: absolute; - z-index: 50; - width: 100%; + width: 300px; height: 100%; + transform: translateX(-100%); } .closeBtn { diff --git a/src/app/episodes/episodes.component.html b/src/app/episodes/episodes.component.html index 64f6536..101e29c 100644 --- a/src/app/episodes/episodes.component.html +++ b/src/app/episodes/episodes.component.html @@ -1,17 +1,19 @@ -
- - -
I am the audio{{selectedEpisode.title}}

-
{{selectedEpisode.summary}}

- - - - - - - - {{episode.number}} - +
+
+ + +
I am the audio{{selectedEpisode.title}}

+
{{selectedEpisode.summary}}

+ - -
\ No newline at end of file + + + + + + {{episode.number}} + + + +
+
diff --git a/src/app/episodes/episodes.component.ts b/src/app/episodes/episodes.component.ts index f4c4506..ed8a328 100644 --- a/src/app/episodes/episodes.component.ts +++ b/src/app/episodes/episodes.component.ts @@ -20,10 +20,12 @@ export class EpisodesComponent implements OnInit { close() { this.selected = false; + document.getElementById('episodeViewContainer').style.transform = "translateX(0)"; } setSelected(episode: Episode) { this.selected = true; this.selectedEpisode = episode; + document.getElementById('episodeViewContainer').style.transform = "translateX(348px)"; } } From 45daaacd40521c141ff193762228eaf32ae0d1eb Mon Sep 17 00:00:00 2001 From: Robert Date: Sun, 1 Jul 2018 17:37:41 -0400 Subject: [PATCH 4/5] Working vertical audio transformation and small view screen --- src/app/app.component.css | 16 +++------ src/app/app.component.html | 17 +++++---- src/app/episodes/episodes.component.css | 45 ++++++++++++------------ src/app/episodes/episodes.component.html | 34 ++++++++---------- src/app/episodes/episodes.component.ts | 4 +-- src/index.html | 1 - 6 files changed, 54 insertions(+), 63 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index ab48ab7..cd7b065 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,18 +1,11 @@ .rootContainer { font-family: 'Roboto', sans-serif; -} - -.header { + width: 100%; } .header mat-card { width: 100%; } -body { - display: block; - margin: 0; - width: 100%; -} .title { font-size: 1.5rem; @@ -20,8 +13,7 @@ body { .slogan { font-size: .75rem; } + .titleBox { - display: inline-block; - padding-right: 20px; - border-right: 2px solid white; -} \ No newline at end of file + text-align: center; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 3a2cbde..1434a52 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,11 +1,14 @@ +
+ +
+ Hot Cakes & Hot Takes
+ The premier post-pancake podcast +
+ + +
+ - -
- Hot Cakes & Hot Takes
- The premier post-pancake podcast -
- - diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css index 4f094ba..d1f06af 100644 --- a/src/app/episodes/episodes.component.css +++ b/src/app/episodes/episodes.component.css @@ -1,32 +1,20 @@ -.wrapper { - overflow: hidden; -} - -.episodeViewContainer { - display: block; - position: relative; - top: 0; - left: 0; - transform: translateX(0); - transition: transform .6s ease; -} - .audioPanel { - position: absolute; - width: 300px; - height: 100%; - transform: translateX(-100%); + position: fixed; + width: 100%; + top: 100%; + z-index: 50; + text-align: center; + transform: translateY(100%); + transition: transform .6s ease; } .closeBtn { float: right; -} - -audio { + margin: 10px; } .episodes { - display: inline-flex; + display: flex; flex-wrap: wrap; justify-content: space-around; background-color: white; @@ -34,7 +22,7 @@ audio { .episodeCard { display: inline-block; - margin: .625em; + margin: .625rem; width: 35%; max-width: 12em; } @@ -43,3 +31,16 @@ audio { background-color: lightyellow; color: black; } + +@media only screen and (max-width: 500px) { + .episodes { + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + } + + .episodeCard { + width: auto; + max-width: none; + } +} \ No newline at end of file diff --git a/src/app/episodes/episodes.component.html b/src/app/episodes/episodes.component.html index 101e29c..697f8c2 100644 --- a/src/app/episodes/episodes.component.html +++ b/src/app/episodes/episodes.component.html @@ -1,19 +1,15 @@ -
-
- - -
I am the audio{{selectedEpisode.title}}

-
{{selectedEpisode.summary}}

- - - - - - - - {{episode.number}} - - - -
-
+ + +
{{selectedEpisode.title}}

+ + + + + + + + {{episode.number}} + + + + diff --git a/src/app/episodes/episodes.component.ts b/src/app/episodes/episodes.component.ts index ed8a328..c0a6467 100644 --- a/src/app/episodes/episodes.component.ts +++ b/src/app/episodes/episodes.component.ts @@ -20,12 +20,12 @@ export class EpisodesComponent implements OnInit { close() { this.selected = false; - document.getElementById('episodeViewContainer').style.transform = "translateX(0)"; + document.getElementById('audioPanel').style.transform = "translateY(0)"; } setSelected(episode: Episode) { this.selected = true; this.selectedEpisode = episode; - document.getElementById('episodeViewContainer').style.transform = "translateX(348px)"; + document.getElementById('audioPanel').style.transform = "translateY(-100%)"; } } diff --git a/src/index.html b/src/index.html index d575b4f..ff5c238 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,6 @@ HotCakesHotTakes - From 3f1b799030fbd9701309e384b7c50476900f5a9f Mon Sep 17 00:00:00 2001 From: Robert Date: Mon, 2 Jul 2018 22:33:16 -0400 Subject: [PATCH 5/5] Applied layout fixes and style updates --- src/app/app.component.css | 9 ++++++- src/app/app.component.html | 6 ++--- src/app/episodes/episodes.component.css | 31 ++++++++++++++---------- src/app/episodes/episodes.component.html | 8 +++--- src/app/episodes/episodes.component.ts | 3 +++ 5 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index cd7b065..59c2773 100644 --- 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 index 1434a52..8437b46 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,10 @@ -
- +
+
Hot Cakes & Hot Takes
The premier post-pancake podcast
- +
diff --git a/src/app/episodes/episodes.component.css b/src/app/episodes/episodes.component.css index d1f06af..c276547 100644 --- 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; } } \ No newline at end of file diff --git a/src/app/episodes/episodes.component.html b/src/app/episodes/episodes.component.html index 697f8c2..569ca17 100644 --- a/src/app/episodes/episodes.component.html +++ b/src/app/episodes/episodes.component.html @@ -1,9 +1,9 @@ - +
{{selectedEpisode.title}}

- - +
+
@@ -11,5 +11,5 @@ {{episode.number}} - +
diff --git a/src/app/episodes/episodes.component.ts b/src/app/episodes/episodes.component.ts index c0a6467..a7461dc 100644 --- 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"; } }