wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added mobile responsiveness to nav

Browse Source
This commit is contained in:
James Dinh 2023-01-15 01:16:08 -08:00
parent 3b95a02639
commit f14aa45ee2
3 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/general.css
View File

@ -88,14 +88,10 @@ html {
.nav-container .menu-btn:checked ~ .nav-menu {
max-height: 300px;
background-color: rgb(24, 24, 24);
background-color: rgba(24, 24, 24, 0.988);
transition: 0.5s;
}
.nav-container .menu-btn:not(:checked) ~ .nav-menu {
animation: slow-fade 1s ease;
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
@ -145,6 +141,9 @@ html {
#sign-up {
right: 50px !important;
}
.nav-container .menu-btn:not(:checked) ~ .nav-menu {
animation: slow-fade 1s ease;
}
}
nav {
@ -1478,11 +1477,42 @@ li .splide__pagination__page.is-active {
.button-close-modal {
display: block;
float: right;
color: white;
background-color: unset;
border: none;
cursor: pointer;
margin: 5px 10px 0 0;
margin-right: 5px;
display: block;
height: 2px;
position: relative;
width: 20px;
height: 20px;
padding: 15px 20px 10px 10px;
cursor: pointer;
}
.button-close-modal:before,
.button-close-modal:after {
background: rgb(200, 200, 200);
content: '';
display: block;
height: 2px;
position: absolute;
transition: all .2s ease-out;
width: 13px;
}
.button-close-modal:hover {
transform: scale(1.2);
filter: brightness(1.1);
transition: 0.3s;
}
.button-close-modal:before {
transform: rotate(-45deg);
}
.button-close-modal:after {
transform: rotate(45deg);
}
#modal-overlay {

22
index.html
View File

@ -87,7 +87,7 @@
<span id="timer">---</span></div>
</p>
</div>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<input class="menu-btn" onclick="CheckNavOpen()" type="checkbox" id="menu-btn"/>
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="nav-menu">
<li><a class="navlink" onclick="uncheck('menu-btn')" href="#event">Event</a></li>
@ -402,7 +402,7 @@
</div>
<div id="modal-overlay">
<div class="modal logistics-border" id="check-in">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header logistics">
<h2>Check In</h2>
</div>
@ -413,7 +413,7 @@
</div>
</div>
<div class="modal logistics-border" id="opening-ceremony">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header logistics">
<h2>Opening Ceremony</h2>
</div>
@ -428,7 +428,7 @@
</div>
</div>
<div class="modal hacking-border" id="hacking-starts">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header hacking">
<h2>Hacking starts</h2>
</div>
@ -447,7 +447,7 @@
</div>
</div>
<div class="modal food-border" id="lunch">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header food">
<h2>Lunch</h2>
</div>
@ -458,7 +458,7 @@
</div>
</div>
<div class="modal workshop-border" id="workshop1">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header workshop">
<h2>Web Dev Workshop</h2>
</div>
@ -469,7 +469,7 @@
</div>
</div>
<div class="modal workshop-border" id="workshop2">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header workshop">
<h2>[REDACTED] Workshop</h2>
</div>
@ -480,7 +480,7 @@
</div>
</div>
<div class="modal game-border" id="activity1">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header game">
<h2>Kahoot</h2>
</div>
@ -491,7 +491,7 @@
</div>
</div>
<div class="modal hacking-border" id="hacking-ends">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header hacking">
<h2>Hacking ends</h2>
</div>
@ -509,7 +509,7 @@
</div>
</div>
<div class="modal logistics-border" id="project-presentations">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header logistics">
<h2>Project Presentations</h2>
</div>
@ -529,7 +529,7 @@
</div>
</div>
<div class="modal logistics-border" id="judging">
<button class="button-close-modal">x</button>
<button class="button-close-modal"></button>
<div class="modal-header logistics">
<h2>Judging</h2>
</div>

25
js/general.js
View File

@ -411,6 +411,7 @@ function showModal(id) {
currentModal = id;
}
// Check if user clicks outside of modal
document.addEventListener(
"click",
function (event) {
@ -425,6 +426,30 @@ document.addEventListener(
false
);
var openNavClick = false;
var nav_is_open = false;
function CheckNavOpen() {
if (document.getElementById('menu-btn').checked == true) {
nav_is_open = true;
openNavClick = true;
}
}
// Check if user clicks outside of navbar menu
document.addEventListener(
"click",
function (event) {
// If user either clicks X button OR clicks outside the modal window, then close modal
if (!openNavClick && nav_is_open == true) {
if (event.target.matches(".menu-btn") || !event.target.closest(".nav-container")) {
uncheck('menu-btn');
nav_is_open = false;
}
}
openNavClick = false;
},
false
);
var splide = new Splide( '.splide', {
type : 'loop',
focus : 'center',