From 1fa228db54dd628f23352073f38f985fcca77e7e Mon Sep 17 00:00:00 2001 From: Justus Hebenstreit Date: Thu, 24 Jan 2019 18:52:20 +0000 Subject: [PATCH 1/6] Mobile Navbar Media queries are added and specific css changes are made (e.g. new flexbox layout and image size). A new meta tag that specifies the viewport and JS code for responsiveness is added. --- _includes/page/header.html | 3 ++ _includes/page/links.html | 4 ++- _sass/_header.scss | 66 +++++++++++++++++++++++++++++++++++++- _sass/_layout.scss | 6 ++++ assets/js/init.js | 18 +++++++++-- 5 files changed, 93 insertions(+), 4 deletions(-) diff --git a/_includes/page/header.html b/_includes/page/header.html index abebeaf..551ecde 100644 --- a/_includes/page/header.html +++ b/_includes/page/header.html @@ -5,6 +5,9 @@ TEDxWarwick +
{% include components/cta.html %} diff --git a/_includes/page/links.html b/_includes/page/links.html index 2da42f7..2f79ab7 100644 --- a/_includes/page/links.html +++ b/_includes/page/links.html @@ -3,7 +3,8 @@ Metadata {% endcomment %} - + + {%- comment %} @@ -34,6 +35,7 @@ {%- comment %} Site resources {% endcomment %} + diff --git a/_sass/_header.scss b/_sass/_header.scss index 096f873..07f387b 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -8,10 +8,23 @@ header { transition: hover-transition(border-bottom), hover-transition(box-shadow); + + @media (max-width: 960px){ + & { + height: inherit; + } + } + .container { height: 100%; display: flex; flex-direction: row; + + @media (max-width: 960px){ + & { + flex-direction: column; + } + } } .brand { @@ -28,6 +41,32 @@ header { // MS Edge doesn't like unbounded SVG images. // This value was derived empirically using Chrome 69. max-width: 501px; + + @media (max-width: 960px){ + & { + height: 38px; + margin: 12px 0px; + } + } + + } + } + + button { + border: transparent; + font-size: 22px; + position: absolute; + right: 30px; + top: 18px; + padding: 0px; + display: none; + cursor: pointer; + background-color: transparent; + + @media (max-width: 960px){ + & { + display: block; + } } } @@ -36,8 +75,16 @@ header { display: flex; flex-direction: column; margin-left: 2em; + + @media (max-width: 960px){ + & { + margin-left: 0px; + display: none; + } + } } + .cta { flex: 1; text-align: right; @@ -47,6 +94,10 @@ header { flex-direction: column; justify-content: center; padding-right: 1rem; + + @media (max-width: 960px){ + text-align: left; + } } nav { @@ -54,10 +105,23 @@ header { text-align: right; + @media (max-width: 960px){ + & { + text-align: left; + margin-left: 0em; + } + } + ul { display: flex; flex-direction: row; justify-content: flex-end; + + @media (max-width: 960px){ + & { + flex-direction: column; + } + } } li { @@ -141,4 +205,4 @@ header { padding-right: 0; } } -} +} \ No newline at end of file diff --git a/_sass/_layout.scss b/_sass/_layout.scss index b5f4121..d96429e 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -32,3 +32,9 @@ main { footer { margin-top: 5em; } + +@media (max-width: 960px){ + .container { + width: 100%; + } +} \ No newline at end of file diff --git a/assets/js/init.js b/assets/js/init.js index 81bc08e..e9307d3 100644 --- a/assets/js/init.js +++ b/assets/js/init.js @@ -72,6 +72,10 @@ const x = { const threshold = document.querySelector('header .cta').clientHeight; const content = document.getElementById('content'); const padding = header.offsetHeight - threshold; + const toggler = document.getElementById('navbar-toggler'); + const nav = document.getElementsByClassName('nav')[0]; + + console.log(nav); x.extend({ headerOverlap: threshold }); @@ -80,7 +84,7 @@ const x = { let wasSmallHeader = false; window.addEventListener('scroll', e => { - smallHeader = window.scrollY >= threshold; + smallHeader = window.scrollY >= threshold && window.outerWidth > 960; if (!ticking) { window.requestAnimationFrame(() => { @@ -104,6 +108,16 @@ const x = { ticking = true; } }); + + // Hide and Show Mobile Navbar Dropdown + toggler.addEventListener('click', () => { + if (nav.style.display == 'none') { + nav.style.display = 'block'; + } else { + nav.style.display = 'none'; + } + }) + }, ], -}; +}; \ No newline at end of file From 88ea9cc2fa146d355b02f5c43794abb88a0324a5 Mon Sep 17 00:00:00 2001 From: Justus Hebenstreit Date: Fri, 25 Jan 2019 18:31:58 +0000 Subject: [PATCH 2/6] Events Page Mobile Friendly Turnt flex-direction from row to column and specified size for .text and img in relation with the .card container. --- _sass/_event.scss | 11 +++++++++++ _sass/_home.scss | 4 ++++ _sass/_layout.scss | 4 ++++ _sass/_text.scss | 12 ++++++++++++ assets/js/init.js | 4 ---- 5 files changed, 31 insertions(+), 4 deletions(-) diff --git a/_sass/_event.scss b/_sass/_event.scss index 8960f34..320d561 100644 --- a/_sass/_event.scss +++ b/_sass/_event.scss @@ -24,6 +24,17 @@ img { flex: 0 0 ($card-height * (1920 / 1080)); } + + @media (max-width: 960px){ + & { + flex-direction: column; + height: 100%; + } + img { + flex: auto; + } + + } } .speakers { diff --git a/_sass/_home.scss b/_sass/_home.scss index c2be58d..7801e87 100644 --- a/_sass/_home.scss +++ b/_sass/_home.scss @@ -42,5 +42,9 @@ display: flex; flex-direction: column; justify-content: space-between; + + @media (max-width: 960px){ + padding: 0px 20px; + } } } diff --git a/_sass/_layout.scss b/_sass/_layout.scss index d96429e..ecf50d7 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -9,6 +9,10 @@ header, main, footer { .container { width: 960px; margin: 0 auto; + + @media (max-width: 960px){ + padding: 0px 20px; + } } section { diff --git a/_sass/_text.scss b/_sass/_text.scss index 86bfe5d..0bd3b31 100644 --- a/_sass/_text.scss +++ b/_sass/_text.scss @@ -49,6 +49,10 @@ p { letter-spacing: rem(-0.5); margin: line-steps(4) 0; font-weight: 300; + + @media (max-width: 960px){ + font-size: rem(40) + } } @mixin h3 { @@ -59,6 +63,10 @@ p { letter-spacing: 0; margin: line-steps(4) 0; font-weight: 400; + + @media (max-width: 960px){ + font-size: rem(30) + } } @mixin h4 { @@ -69,6 +77,10 @@ p { letter-spacing: rem(0.25); margin: line-steps(3) 0; font-weight: 400; + + @media (max-width: 960px){ + font-size: rem(30) + } } @mixin h5 { diff --git a/assets/js/init.js b/assets/js/init.js index e9307d3..86a0d9d 100644 --- a/assets/js/init.js +++ b/assets/js/init.js @@ -74,9 +74,6 @@ const x = { const padding = header.offsetHeight - threshold; const toggler = document.getElementById('navbar-toggler'); const nav = document.getElementsByClassName('nav')[0]; - - console.log(nav); - x.extend({ headerOverlap: threshold }); let ticking = false; @@ -117,7 +114,6 @@ const x = { nav.style.display = 'none'; } }) - }, ], }; \ No newline at end of file From bc6dad3232c1ae5c7e58b713bb75412f9ac67a6e Mon Sep 17 00:00:00 2001 From: Justus Hebenstreit Date: Sat, 26 Jan 2019 17:42:52 +0000 Subject: [PATCH 3/6] Partners Page Mobile Friendly Changed the partner logo's grid to flexbox and made adjustments to the width. --- _sass/_header.scss | 1 + _sass/_partners.scss | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/_sass/_header.scss b/_sass/_header.scss index 07f387b..5acde00 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -46,6 +46,7 @@ header { & { height: 38px; margin: 12px 0px; + max-width: initial; } } diff --git a/_sass/_partners.scss b/_sass/_partners.scss index baf0d1b..9579c88 100644 --- a/_sass/_partners.scss +++ b/_sass/_partners.scss @@ -4,7 +4,19 @@ img { width: auto; margin: 10px; + + @media (max-width: 960px){ + width: max-content; + } + } + + @media (max-width: 960px){ + display: flex; + flex-direction: row; + justify-content: center; + margin: 11px 0px; } + } .partners { @@ -13,6 +25,11 @@ grid-gap: 40px; justify-content: space-between; margin: 1rem 0; + + @media (max-width: 960px){ + display: flex; + flex-direction: column; + } } .partner-large { @@ -23,4 +40,4 @@ height: 9rem; margin: 0.25rem 0.5rem 0.25rem 0; } -} +} \ No newline at end of file From 7be0e9e21b146c92e51b713d896c6610d682b051 Mon Sep 17 00:00:00 2001 From: Justus Hebenstreit Date: Mon, 28 Jan 2019 20:29:55 +0000 Subject: [PATCH 4/6] Mobile Navbar Toggler Fixed + Events Page Mobile Friendly --- _sass/_event.scss | 10 ++++++++++ _sass/_text.scss | 2 +- assets/js/init.js | 13 ++++++++----- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/_sass/_event.scss b/_sass/_event.scss index 320d561..fee121c 100644 --- a/_sass/_event.scss +++ b/_sass/_event.scss @@ -11,6 +11,9 @@ @include elevate(8); } } + .container{ + padding: 0px 0px; + } } .card.event-card { @@ -43,4 +46,11 @@ grid-gap: 40px; justify-content: space-between; margin: 1rem 0; + + @media (max-width: 960px){ + & { + display: flex; + } + + } } diff --git a/_sass/_text.scss b/_sass/_text.scss index 0bd3b31..670edf9 100644 --- a/_sass/_text.scss +++ b/_sass/_text.scss @@ -51,7 +51,7 @@ p { font-weight: 300; @media (max-width: 960px){ - font-size: rem(40) + font-size: rem(35) } } diff --git a/assets/js/init.js b/assets/js/init.js index 86a0d9d..7ca0926 100644 --- a/assets/js/init.js +++ b/assets/js/init.js @@ -74,6 +74,7 @@ const x = { const padding = header.offsetHeight - threshold; const toggler = document.getElementById('navbar-toggler'); const nav = document.getElementsByClassName('nav')[0]; + x.extend({ headerOverlap: threshold }); let ticking = false; @@ -106,14 +107,16 @@ const x = { } }); - // Hide and Show Mobile Navbar Dropdown - toggler.addEventListener('click', () => { - if (nav.style.display == 'none') { - nav.style.display = 'block'; + // Toggle between display none and block for mobile navbar + toggler.addEventListener('click', () => { + if(nav.className == "nav"){ + nav.className = "nav-small"; } else { - nav.style.display = 'none'; + nav.className = "nav"; } }) + + }, ], }; \ No newline at end of file From aa74289c0151cc22fb05c471f32e05118ca24652 Mon Sep 17 00:00:00 2001 From: Justus Hebenstreit Date: Tue, 29 Jan 2019 14:39:25 +0000 Subject: [PATCH 5/6] Event Speaker Grid for Mobile Version Fixed --- _sass/_cards.scss | 4 ++++ _sass/_event.scss | 2 ++ 2 files changed, 6 insertions(+) diff --git a/_sass/_cards.scss b/_sass/_cards.scss index cf814a8..a515761 100644 --- a/_sass/_cards.scss +++ b/_sass/_cards.scss @@ -53,6 +53,10 @@ } } + @media (max-width: 960px){ + margin: 17px 0px; + } + // .content { // flex: 1; // position: relative; diff --git a/_sass/_event.scss b/_sass/_event.scss index fee121c..d8e4edb 100644 --- a/_sass/_event.scss +++ b/_sass/_event.scss @@ -50,6 +50,8 @@ @media (max-width: 960px){ & { display: flex; + flex-direction: column; + margin: 14px 0px; } } From 784bec8a0993f9215b7b42ae9d4fb3ac8a997c7b Mon Sep 17 00:00:00 2001 From: Justus Hebenstreit Date: Fri, 15 Feb 2019 14:08:26 +0000 Subject: [PATCH 6/6] Requested Changes --- _includes/page/header.html | 4 ++-- _includes/page/links.html | 1 - _sass/_cards.scss | 4 ++-- _sass/_event.scss | 10 +++++----- _sass/_header.scss | 19 ++++++++++--------- assets/js/init.js | 14 ++++++-------- 6 files changed, 25 insertions(+), 27 deletions(-) diff --git a/_includes/page/header.html b/_includes/page/header.html index 551ecde..e22d191 100644 --- a/_includes/page/header.html +++ b/_includes/page/header.html @@ -6,9 +6,9 @@
-
+