Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve Responsiveness #65

Merged
merged 7 commits into from Jun 20, 2021
Merged

Improve Responsiveness #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
19b0fa2
Make the Nav Into a Collapsable Menu for Smaller Viewports
kinson Jun 13, 2021
7c36c81
more support for dark mode
kinson Jun 13, 2021
d36e066
fix the lesson menu responsiveness
kinson Jun 13, 2021
f56b880
separate out js logic into separate files
kinson Jun 13, 2021
2c9f374
better html formatting
kinson Jun 13, 2021
2b4fb48
update responsiveness on other pages
kinson Jun 14, 2021
e103de8
a few more spacing tweaks
kinson Jun 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion assets/css/app.css
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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