Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Improve Responsiveness (#65)
* Make the Nav Into a Collapsable Menu for Smaller Viewports Updated the nav element to be a collapsable menu when the viewport is small (as in mobile, tablet, etc), so that users can still access all of the menu bar links from smaller screens. * more support for dark mode * fix the lesson menu responsiveness * separate out js logic into separate files * better html formatting * update responsiveness on other pages * a few more spacing tweaks
- Loading branch information
Showing
12 changed files
with
138 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
const darkModeToggle = document.getElementById("dark-mode-toggle") | ||
|
||
// set up dark mode toggle | ||
function setDarkMode(on) { | ||
if (on) { | ||
darkModeToggle.checked = true | ||
document.documentElement.classList.add('dark') | ||
localStorage.theme = 'dark' | ||
document.getElementById('sun-icon').classList.add('hidden') | ||
document.getElementById('moon-icon').classList.remove('hidden') | ||
} else { | ||
darkModeToggle.checked = false | ||
document.documentElement.classList.remove('dark') | ||
localStorage.theme = 'light' | ||
document.getElementById('moon-icon').classList.add('hidden') | ||
document.getElementById('sun-icon').classList.remove('hidden') | ||
} | ||
} | ||
|
||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | ||
setDarkMode(true) | ||
} else { | ||
setDarkMode(false) | ||
} | ||
|
||
darkModeToggle.addEventListener('click', function (ev) { | ||
if (ev.target.checked) { | ||
setDarkMode(true) | ||
} else { | ||
setDarkMode(false) | ||
} | ||
}) | ||
|
||
// remove preload class after the page laods so the styles | ||
// will transition smoothly when switching between dark and | ||
// light mode. Without the preload class, the transition will | ||
// happen on page load if dark mode is enabled | ||
setTimeout(() => { | ||
document.body.classList.remove('preload') | ||
}, 200) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
const menuToggleButton = document.getElementById("menu-toggle-button"); | ||
|
||
menuToggleButton.addEventListener('click', function(ev) { | ||
const nav = document.getElementById('nav'); | ||
nav.classList.toggle('-ml-64'); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
lib/school_house_web/templates/layout/_dark_mode_toggle.html.leex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<label for="dark-mode-toggle" class="flex items-center cursor-pointer"> | ||
<div class="relative"> | ||
<input type="checkbox" id="dark-mode-toggle" class="sr-only"> | ||
<div class="block bg-gray-600 w-14 h-8 rounded-full"> | ||
</div> | ||
<div class="dot absolute left-1 top-1 bg-body dark:bg-purple-dark w-6 h-6 rounded-full flex items-center justify-center transition-all"> | ||
<svg id="moon-icon" viewBox="0 0 97 158" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="2" class="h-4 ml-1 text-white"> | ||
<path d="M18,0.5 C39.6771764,0.5 59.3021764,9.28641179 73.5078823,23.4921177 C87.7135882,37.6978236 96.5,57.3228236 96.5,79 C96.5,100.677176 87.7135882,120.302176 73.5078823,134.507882 C59.3021764,148.713588 39.6771764,157.5 18,157.5 C12.5891637,157.5 7.30617797,156.952622 2.20396947,155.909667 C19.0949556,151.484612 33.7935641,141.64268 44.331072,128.351675 C55.0804392,114.793451 61.5,97.6464258 61.5,79 C61.5,60.3535766 55.0804409,43.2065533 44.3310574,29.6483015 C33.7928623,16.3564226 19.093019,6.51402742 2.20435475,2.0894815 C7.30689791,1.047303 12.5895324,0.5 18,0.5 Z"></path> | ||
</svg> | ||
<svg id="sun-icon" viewBox="0 0 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="currentColor" class="h-4 text-black"> | ||
<g id="Group-2" transform="translate(80.000000, 79.000000) rotate(-4.000000) translate(-80.000000, -79.000000) translate(1.000000, -0.000000)"> | ||
<circle id="Oval" cx="79" cy="79" r="22.5"></circle> | ||
<g id="Group" stroke-linecap="square" stroke-width="5" stroke="currentColor"> | ||
<line x1="111.085701" y1="51.5309469" x2="139.247251" y2="27.5243795" id="Line"></line> | ||
<line x1="121.11157" y1="82.2644628" x2="158" y2="85.2024793" id="Line"></line> | ||
<line x1="104.160729" y1="137.400592" x2="132.783944" y2="112.93236" id="Line" transform="translate(118.472337, 125.166476) rotate(90.000000) translate(-118.472337, -125.166476) "></line> | ||
<line x1="75.7355372" y1="121.11157" x2="72.7975207" y2="158" id="Line"></line> | ||
<line x1="18.7527491" y1="130.475621" x2="46.9142993" y2="106.469053" id="Line" transform="translate(32.833524, 118.472337) rotate(180.000000) translate(-32.833524, -118.472337) "></line> | ||
<line x1="36.8884298" y1="75.7355372" x2="0" y2="72.7975207" id="Line"></line> | ||
<line x1="25.2160557" y1="45.0676403" x2="53.8392707" y2="20.5994081" id="Line" transform="translate(39.527663, 32.833524) rotate(270.000000) translate(-39.527663, -32.833524) "></line> | ||
<line x1="82.2644628" y1="36.8884298" x2="85.2024793" y2="0" id="Line"></line> | ||
</g> | ||
</g> | ||
</svg> | ||
</div> | ||
</div> | ||
</label> |
105 changes: 44 additions & 61 deletions
105
lib/school_house_web/templates/layout/_header.html.leex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,63 +1,46 @@ | ||
<nav id="nav" class="relative bg-nav dark:bg-nav-dark border-b-4 border-brand-purple-800 text-primary dark:text-primary-dark z-10"> | ||
<div class="container mx-auto flex justify-between"> | ||
<%= link(to: Routes.page_path(@conn, :index, current_locale()), class: "flex title-font font-medium items-center text-heavy dark:text-heavy-dark mb-4 md:mb-0") do %> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 p-2 text-brand-white rounded-full bg-purple rounded-full" viewBox="0 0 24 24"> | ||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> | ||
</svg> | ||
<span class="ml-3 text-2xl font-extrabold text-primary dark:text-primary-dark tracking-tight">Elixir School</span> | ||
<% end %> | ||
<ul class="flex"> | ||
<li class="hover:bg-purple hover:text-white"> | ||
<%= link(gettext("Why Elixir?"), to: Routes.page_path(@conn, :why, current_locale()), class: "relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold") %> | ||
</li> | ||
<li class="toggleable hover:bg-purple hover:text-white"> | ||
<%= render("_lesson_menu.html", conn: @conn) %> | ||
</li> | ||
<li class="hover:bg-purple hover:text-white"> | ||
<%= link("Blog", to: Routes.post_path(@conn, :index), class: "relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold") %> | ||
</li> | ||
<li class="hover:bg-purple hover:text-white"> | ||
<a href="#" class="relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold">Get Involved</a> | ||
</li> | ||
<li class="hover:bg-purple hover:text-white text-brand-red-500 inline-flex items-center"> | ||
<a class="relative inline-flex items-center py-6 lg:p-6 text-sm lg:text-base font-bold">Support | ||
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> | ||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /> | ||
</svg> | ||
</a> | ||
</li> | ||
<li class="inline-flex items-center justify-center px-2"> | ||
<label for="dark-mode-toggle" class="flex items-center cursor-pointer"> | ||
<div class="relative"> | ||
<input type="checkbox" id="dark-mode-toggle" class="sr-only"> | ||
<div class="block bg-gray-600 w-14 h-8 rounded-full"> | ||
</div> | ||
<div class="dot absolute left-1 top-1 bg-body dark:bg-purple-dark w-6 h-6 rounded-full flex items-center justify-center transition-all"> | ||
<svg id="moon-icon" viewBox="0 0 97 158" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-width="2" class="h-4 ml-1 text-white"> | ||
<path d="M18,0.5 C39.6771764,0.5 59.3021764,9.28641179 73.5078823,23.4921177 C87.7135882,37.6978236 96.5,57.3228236 96.5,79 C96.5,100.677176 87.7135882,120.302176 73.5078823,134.507882 C59.3021764,148.713588 39.6771764,157.5 18,157.5 C12.5891637,157.5 7.30617797,156.952622 2.20396947,155.909667 C19.0949556,151.484612 33.7935641,141.64268 44.331072,128.351675 C55.0804392,114.793451 61.5,97.6464258 61.5,79 C61.5,60.3535766 55.0804409,43.2065533 44.3310574,29.6483015 C33.7928623,16.3564226 19.093019,6.51402742 2.20435475,2.0894815 C7.30689791,1.047303 12.5895324,0.5 18,0.5 Z"></path> | ||
<div class="flex flex-row fixed md:relative h-full md:h-auto z-10 md:w-full"> | ||
<nav id="nav" class="w-64 md:w-full relative bg-nav dark:bg-nav-dark md:border-b-4 border-brand-purple-800 text-primary dark:text-primary-dark shadow-md transition-margin duration-300 overflow-y-scroll md:overflow-y-visible -ml-64 md:ml-0"> | ||
<div class="container mx-auto flex flex-col md:flex-row justify-between"> | ||
<%= link(to: Routes.page_path(@conn, :index, current_locale()), class: "flex title-font font-medium items-center text-heavy dark:text-heavy-dark mb-4 md:mb-0 mx-auto md:mx-2 mt-6 md:mt-0") do %> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 md:w-7 md:h-7 lg:h-10 lg:w-10 p-2 text-brand-white rounded-full bg-purple" viewBox="0 0 24 24"> | ||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> | ||
</svg> | ||
<span class="ml-3 text-2xl font-extrabold text-primary dark:text-primary-dark tracking-tight">Elixir School</span> | ||
<% end %> | ||
<div class="w-full md:w-auto mx-auto md:ml-auto md:mr-0 flex flex-col-reverse md:flex-row"> | ||
<ul class="flex flex-col md:flex-row md:items-center"> | ||
<li class="hover:bg-purple hover:text-white px-4 md:px-0"> | ||
<%= link(gettext("Why Elixir?"), to: Routes.page_path(@conn, :why, current_locale()), class: "relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold") %> | ||
</li> | ||
<li class="toggleable hover:bg-purple hover:text-white px-4 md:px-0"> | ||
<%= render("_lesson_menu.html", conn: @conn) %> | ||
</li> | ||
<li class="hover:bg-purple hover:text-white px-4 md:px-0"> | ||
<%= link("Blog", to: Routes.post_path(@conn, :index), class: "relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold") %> | ||
</li> | ||
<li class="hover:bg-purple hover:text-white px-4 md:px-0"> | ||
<a href="#" class="relative block py-6 px-4 lg:p-6 text-sm md:text-center lg:text-base font-bold">Get Involved</a> | ||
</li> | ||
<li class="hover:bg-purple hover:text-white px-4 text-brand-red-500 inline-flex items-center"> | ||
<a class="relative inline-flex items-center py-6 px-4 md:px-2 lg:p-6 text-sm md:text-center lg:text-base font-bold">Support | ||
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> | ||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /> | ||
</svg> | ||
<svg id="sun-icon" viewBox="0 0 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="currentColor" class="h-4 text-black"> | ||
<g id="Group-2" transform="translate(80.000000, 79.000000) rotate(-4.000000) translate(-80.000000, -79.000000) translate(1.000000, -0.000000)"> | ||
<circle id="Oval" cx="79" cy="79" r="22.5"></circle> | ||
<g id="Group" stroke-linecap="square" stroke-width="5" stroke="currentColor"> | ||
<line x1="111.085701" y1="51.5309469" x2="139.247251" y2="27.5243795" id="Line"></line> | ||
<line x1="121.11157" y1="82.2644628" x2="158" y2="85.2024793" id="Line"></line> | ||
<line x1="104.160729" y1="137.400592" x2="132.783944" y2="112.93236" id="Line" transform="translate(118.472337, 125.166476) rotate(90.000000) translate(-118.472337, -125.166476) "></line> | ||
<line x1="75.7355372" y1="121.11157" x2="72.7975207" y2="158" id="Line"></line> | ||
<line x1="18.7527491" y1="130.475621" x2="46.9142993" y2="106.469053" id="Line" transform="translate(32.833524, 118.472337) rotate(180.000000) translate(-32.833524, -118.472337) "></line> | ||
<line x1="36.8884298" y1="75.7355372" x2="0" y2="72.7975207" id="Line"></line> | ||
<line x1="25.2160557" y1="45.0676403" x2="53.8392707" y2="20.5994081" id="Line" transform="translate(39.527663, 32.833524) rotate(270.000000) translate(-39.527663, -32.833524) "></line> | ||
<line x1="82.2644628" y1="36.8884298" x2="85.2024793" y2="0" id="Line"></line> | ||
</g> | ||
</g> | ||
</svg> | ||
</div> | ||
</div> | ||
</label> | ||
</li> | ||
<li class="inline-flex items-center justify-center ml-4"> | ||
<%= render("_locale_menu.html", conn: @conn) %> | ||
</li> | ||
</ul> | ||
</a> | ||
</li> | ||
</ul> | ||
<ul class="flex flex-row items-center justify-center py-4 md:py-0"> | ||
<li class="inline-flex items-center md:justify-center px-4 md:px-2"> | ||
<%= render("_dark_mode_toggle.html", conn: @conn) %> | ||
</li> | ||
<li class="inline-flex items-center md:justify-center px-4 md:ml-2"> | ||
<%= render("_locale_menu.html", conn: @conn) %> | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</nav> | ||
<div id="menu-toggle-button" class="md:hidden w-8 h-8 mt-4 ml-4 text-primary dark:text-primary-dark cursor-pointer"> | ||
<svg fill="currentColor" class="px-2 py-1 bg-nav dark:bg-nav-dark shadow-md rounded-md" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg> | ||
</div> | ||
</nav> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.