Skip to content

Commit

Permalink
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
kinson committed Jun 20, 2021
1 parent 40ef2ee commit cc3b642
Show file tree
Hide file tree
Showing 12 changed files with 138 additions and 118 deletions.
1 change: 0 additions & 1 deletion assets/css/app.css
Expand Up @@ -12,7 +12,6 @@ Influenced by: https://sproutsocial.com/
.mega-menu {
display: none;
left: 0;
position: absolute;
text-align: left;
width: 100%;
}
Expand Down
42 changes: 2 additions & 40 deletions assets/js/app.js
Expand Up @@ -33,43 +33,5 @@ liveSocket.connect()
// >> liveSocket.enableLatencySim(1000)
window.liveSocket = liveSocket

// 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')
}
}

const darkModeToggle = document.getElementById("dark-mode-toggle")

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)
import "./dark-mode"
import "./menu-toggle"
40 changes: 40 additions & 0 deletions assets/js/dark-mode.js
@@ -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)
6 changes: 6 additions & 0 deletions assets/js/menu-toggle.js
@@ -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');
})
3 changes: 3 additions & 0 deletions assets/tailwind.config.js
Expand Up @@ -78,6 +78,9 @@ module.exports = {
dark: theme('colors.brand-purple-200')
}
}),
transitionProperty: {
'margin': 'margin'
},
typography: (theme) => ({
DEFAULT: {
css: {
Expand Down
27 changes: 27 additions & 0 deletions lib/school_house_web/templates/layout/_dark_mode_toggle.html.leex
@@ -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 lib/school_house_web/templates/layout/_header.html.leex
@@ -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>
14 changes: 7 additions & 7 deletions lib/school_house_web/templates/layout/_lesson_menu.html.leex
@@ -1,10 +1,10 @@
<input type="checkbox" value="selected" id="toggle-one" class="toggle-input">
<label for="toggle-one" class="block cursor-pointer py-6 px-4 lg:p-6 text-sm lg:text-base font-bold">Lessons</label>
<div class="border-t-4 border-brand-purple-800 p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-nav dark:bg-nav-dark">
<div class="container mx-auto w-full flex flex-wrap justify-left mx-2 text-primary dark:text-primary-dark">
<div class="border-t-4 border-brand-purple-800 pt-6 px-6 md:p-6 mega-menu md:absolute mb-6 md:mb-16 md:shadow-xl bg-nav dark:bg-nav-dark">
<div class="container mx-auto w-full flex flex-wrap justify-left text-primary dark:text-primary-dark">

<!-- First column -->
<ul class="px-4 w-full sm:w-1/4 lg:w-1/5 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<ul class="px-4 w-full md:w-1/4 lg:w-1/5 border-gray-600 border-b md:border-r lg:border-b-0 pb-6 pt-0 md:pt-6 lg:pt-3">
<!-- Basics -->
<li>
<p class="font-bold text-xl text-primary dark:text-primary-dark mb-2"><%= gettext("Basics") %></p>
Expand Down Expand Up @@ -90,7 +90,7 @@
</ul>

<!-- Second column -->
<ul class="px-4 w-full sm:w-1/4 lg:w-1/5 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<ul class="px-4 w-full md:w-1/4 lg:w-1/5 border-gray-600 border-b md:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<!-- Intermediate -->
<li>
<p class="font-bold text-xl text-primary dark:text-primary-dark mb-2"><%= gettext("Intermediate") %></p>
Expand Down Expand Up @@ -172,7 +172,7 @@
</ul>

<!-- Third column -->
<ul class="px-4 w-full sm:w-1/4 lg:w-1/5 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<ul class="px-4 w-full md:w-1/4 lg:w-1/5 border-gray-600 border-b md:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<!-- Testing -->
<li>
<p class="font-bold text-xl text-primary dark:text-primary-dark mb-2"><%= gettext("Testing") %></p>
Expand Down Expand Up @@ -230,7 +230,7 @@
</ul>

<!-- Fourth column -->
<ul class="px-4 w-full sm:w-1/4 lg:w-1/5 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<ul class="px-4 w-full md:w-1/4 lg:w-1/5 border-gray-600 border-b md:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<!-- Ecto -->
<li>
<p class="font-bold text-xl text-primary dark:text-primary-dark mb-2"><%= gettext("Ecto") %></p>
Expand Down Expand Up @@ -292,7 +292,7 @@
</ul>

<!-- Fifth column -->
<ul class="px-4 w-full sm:w-1/4 lg:w-1/5 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<ul class="px-4 w-full md:w-1/4 lg:w-1/5 border-gray-600 border-b md:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<!-- Miscellaneous -->
<li>
<p class="font-bold text-xl text-primary dark:text-primary-dark mb-2"><%= gettext("Miscellaneous") %></p>
Expand Down
2 changes: 1 addition & 1 deletion lib/school_house_web/templates/lesson/lesson.html.eex
@@ -1,5 +1,5 @@
<section class="container w-3/4 mb-6 items-center prose dark:prose-dark">
<div class="pt-6 pb-6">
<div class="pt-16 md:pt-6 pb-6">
<span class="text-6xl font-bold"><%= @lesson.title %></span>
</div>

Expand Down
2 changes: 1 addition & 1 deletion lib/school_house_web/templates/page/index.html.eex
@@ -1,5 +1,5 @@
<section class="text-primary dark:text-primary-dark body-font">
<div class="container px-5 py-24 mx-auto">
<div class="container px-5 py-20 md:py-24 mx-auto">
<div class="items-center text-center">
<p class="mb-6 text-4xl font-extrabold tracking-tight leading-8 text-purple dark:text-purple-dark sm:text-4xl">
Welcome to Elixir School!
Expand Down

0 comments on commit cc3b642

Please sign in to comment.