DV8/GameExpo23
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/GameExpo23.git synced 2025-05-14 14:22:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Resize nav on screen size

Browse source
This commit is contained in:
Michał Gdula 2023-05-19 13:32:12 +01:00
parent b12de32a67
commit 85986048da
10 changed files with 146 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
DV8-Expo/website/static/gen/packed.css
View file

File diff suppressed because one or more lines are too long

9
DV8-Expo/website/static/gen/packed.js
View file

@ -1,3 +1,6 @@
const defaultTitle="DV8 Game Expo <span>2023</span>";const spacing=48;let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};function scrollFunction(){let nav=document.querySelector("nav");let scrollHeight=0;if(document.body.scrollTop>scrollHeight||document.documentElement.scrollTop>scrollHeight){nav.classList.add("scrolled");}else{nav.classList.remove("scrolled");}} const defaultTitle="DV8 Game Expo <span>2023</span>";let navSpacing=(3*16);let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};window.onresize=()=>{if(window.innerWidth>600){navSpacing=(3*16);}else{navSpacing=(6*16);}
function checkSection(){let navTitle=document.querySelector("nav > h1");let sections=document.querySelectorAll("section");if((window.pageYOffset+spacing)<sections[0].offsetTop){if(prevElement===null)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=null;setTimeout(()=>{navTitle.style.animation="";},200);} checkSection();}
sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if((window.pageYOffset+spacing)>=top&&window.pageYOffset<(bottom-spacing)){if(prevElement===section)return;navTitle.innerHTML=section.id;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;setTimeout(()=>{navTitle.style.animation="";},200);}});} function scrollFunction(){let nav=document.querySelector("nav");let scrollHeight=0;if(document.body.scrollTop>scrollHeight||document.documentElement.scrollTop>scrollHeight){nav.classList.add("scrolled");}else{nav.classList.remove("scrolled");}}
function checkSection(){let navTitle=document.querySelector(".title > p");let sections=document.querySelectorAll("section");if((window.pageYOffset+navSpacing)<sections[0].offsetTop){if(prevElement===null)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=null;setTimeout(()=>{navTitle.style.animation="";},200);}
sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if((window.pageYOffset+navSpacing)>=top&&window.pageYOffset<(bottom-navSpacing)){if(prevElement===section)return;navTitle.innerHTML=section.id.split("_").join(" ");navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;setTimeout(()=>{navTitle.style.animation="";},200);}});}
document.querySelectorAll("nav > ul > li > a").forEach((element)=>{element.onclick=()=>{let anchor=location.hash.split("#")[1].toString();let element=document.getElementById(anchor);if(element===null){window.scrollTo({top:0,behavior:"smooth"});}else{window.scrollTo({top:(element.offsetTop+navSpacing),behavior:"smooth"});}}});

37
DV8-Expo/website/static/js/nav.js
View file

@ -1,12 +1,23 @@
const defaultTitle = "DV8 Game Expo <span>2023</span>"; const defaultTitle = "DV8 Game Expo <span>2023</span>";
const spacing = 48; // The amount of pixels to offset the section by let navSpacing = (3 * 16); // The amount of pixels to offset the section by
let prevElement = null; let prevElement = null;
window.onscroll = () => { window.onscroll = () => {
scrollFunction(); scrollFunction();
checkSection(); checkSection();
}; };
window.onload = () => { scrollFunction() }; window.onload = () => {
scrollFunction()
};
window.onresize = () => {
if (window.innerWidth > 600) {
navSpacing = (3 * 16);
} else {
navSpacing = (6 * 16);
}
checkSection();
}
function scrollFunction() { function scrollFunction() {
let nav = document.querySelector("nav"); let nav = document.querySelector("nav");
@ -23,11 +34,11 @@ function scrollFunction() {
function checkSection() { function checkSection() {
// Get the nav and sections // Get the nav and sections
let navTitle = document.querySelector("nav > h1"); let navTitle = document.querySelector(".title > p");
let sections = document.querySelectorAll("section"); let sections = document.querySelectorAll("section");
// If we're at the top of the page, set the title to the default // If we're at the top of the page, set the title to the default
if ((window.pageYOffset + spacing) < sections[0].offsetTop) { if ((window.pageYOffset + navSpacing) < sections[0].offsetTop) {
// If we're already on the default title, don't do anything as it'll break the animation // If we're already on the default title, don't do anything as it'll break the animation
if (prevElement === null) return; if (prevElement === null) return;
@ -49,11 +60,11 @@ function checkSection() {
// If the section is on the screen is: // If the section is on the screen is:
// 1. The top of the section is above the top of the screen // 1. The top of the section is above the top of the screen
// 2. The bottom of the section is below the bottom of the screen // 2. The bottom of the section is below the bottom of the screen
if ((window.pageYOffset + spacing) >= top && window.pageYOffset < (bottom - spacing)) { if ((window.pageYOffset + navSpacing) >= top && window.pageYOffset < (bottom - navSpacing)) {
// If we're already on the section, don't do anything as it'll break the animation // If we're already on the section, don't do anything as it'll break the animation
if (prevElement === section) return; if (prevElement === section) return;
navTitle.innerHTML = section.id; navTitle.innerHTML = section.id.split("_").join(" ");
navTitle.style.animation = "title-change 0.2s ease-in-out"; navTitle.style.animation = "title-change 0.2s ease-in-out";
prevElement = section; prevElement = section;
@ -62,3 +73,17 @@ function checkSection() {
} }
}); });
} }
document.querySelectorAll("nav > ul > li > a").forEach((element) => {
element.onclick = () => {
let anchor = location.hash.split("#")[1].toString();
let element = document.getElementById(anchor);
if (element === null) {
window.scrollTo({ top: 0, behavior: "smooth" });
} else {
window.scrollTo({top: (element.offsetTop + navSpacing), behavior: "smooth"});
}
}
});

9
DV8-Expo/website/static/sass/animations.sass
View file

@ -16,3 +16,12 @@
100% 100%
transform: translateX(0) transform: translateX(0)
opacity: 1 opacity: 1
@media (max-width: 600px)
@keyframes title-change
0%
transform: translateY(-0.5rem)
opacity: 0
100%
transform: translateY(0)
opacity: 1

4
DV8-Expo/website/static/sass/header.sass
View file

@ -8,7 +8,7 @@ header
align-items: center align-items: center
text-align: center text-align: center
font-family: $main-font font-family: $main-font
color: $primary color: RGB($primary)
> h1 > h1
margin: 0 margin: 0
@ -16,7 +16,7 @@ header
> span > span
font-family: $monospace-font font-family: $monospace-font
color: $accent color: RGB($accent)
> p > p
margin: 0 margin: 0
font-size: 1.2rem font-size: 1.2rem

57
DV8-Expo/website/static/sass/nav.sass
View file

@ -16,9 +16,9 @@ nav
font-size: 1.1rem font-size: 1.1rem
white-space: nowrap white-space: nowrap
background: transparent color: RGB($secondary)
color: $primary
overflow: hidden
z-index: 100 z-index: 100
transition: color 0.1s ease-in-out transition: color 0.1s ease-in-out
@ -27,14 +27,24 @@ nav
position: absolute position: absolute
inset: 0 inset: 0
background: var(--nav) background: var(--nav)
transform: translateY(-100%) transform: translateY(-3rem)
transition: transform 0.2s ease-in-out transition: transform 0.2s ease-in-out
z-index: -1 z-index: -1
> span > span
width: 100% width: 100%
> a > ul
margin: 0
padding: 0
height: 3rem
list-style: none
display: flex
flex-direction: row
align-items: center
> li > a
margin: 0 0.75rem margin: 0 0.75rem
padding: 0.1rem 0.5rem padding: 0.1rem 0.5rem
text-decoration: none text-decoration: none
@ -42,24 +52,45 @@ nav
transition: color 0.1s ease-in-out transition: color 0.1s ease-in-out
&:hover &:hover
color: $accent color: RGB($accent)
> h1 > .title
font-size: inherit height: 3rem
text-decoration: none display: flex
color: $secondary flex-direction: row
align-items: center
justify-content: center
opacity: 0 opacity: 0
transition: opacity 0.1s ease-in-out transition: opacity 0.1s ease-in-out
> p
margin: auto
font-size: inherit
color: RGB($secondary)
> span > span
font-family: $monospace-font font-family: $monospace-font
color: $accent color: RGB($accent)
&.scrolled &.scrolled
color: $secondary > .title
> h1
opacity: 1 opacity: 1
&::before &::before
transform: translateY(0) transform: translateY(0)
@media (max-width: 600px)
nav
height: 6rem
top: -3rem
display: flex
flex-direction: column
justify-content: center
transition: top 0.2s ease-in-out
> .title > p
font-size: 1.3rem
&.scrolled
top: 0

32
DV8-Expo/website/static/sass/sections.sass
View file

@ -22,8 +22,8 @@ section
align-items: center align-items: center
&.fill &.fill
background-color: $secondary background-color: RGB($secondary)
color: $primary color: RGB($primary)
border-radius: $radius border-radius: $radius
div.games div.games
@ -42,16 +42,16 @@ div.games
div.login div.login
padding: 0.5rem padding: 0.5rem
background-color: $primary background-color: RGB($primary)
color: $secondary color: RGB($secondary)
border-radius: $radius border-radius: $radius
> p > p
margin: 0 0 0.5rem margin: 0 0 0.5rem
padding: 0.5rem padding: 0.5rem
background-color: $accent background-color: RGB($accent)
color: $primary color: RGB($primary)
border-radius: calc(calc(#{$radius} - 0.5rem) / 2) border-radius: calc(calc(#{$radius} - 0.5rem) / 2)
&:first-child &:first-child
@ -70,8 +70,8 @@ div.login
font-size: 1rem font-size: 1rem
font-family: $monospace-font font-family: $monospace-font
background-color: $secondary background-color: RGB($secondary)
color: $primary color: RGB($primary)
border-radius: calc(calc(#{$radius} - 0.5rem) / 2) 0 0 calc(#{$radius} - 0.5rem) border-radius: calc(calc(#{$radius} - 0.5rem) / 2) 0 0 calc(#{$radius} - 0.5rem)
border: none border: none
@ -85,8 +85,8 @@ div.login
font-size: 1rem font-size: 1rem
background-color: $primary-button background-color: RGB($primary-button)
color: $primary color: RGB($primary)
border-radius: 0 calc(calc(#{$radius} - 0.5rem) / 2) calc(#{$radius} - 0.5rem) 0 border-radius: 0 calc(calc(#{$radius} - 0.5rem) / 2) calc(#{$radius} - 0.5rem) 0
border: none border: none
@ -94,7 +94,7 @@ div.login
&:hover, &:focus-visible &:hover, &:focus-visible
outline: none outline: none
background-color: $secondary-button background-color: RGB($secondary-button)
.game-box .game-box
margin: 0 auto margin: 0 auto
@ -108,10 +108,10 @@ div.login
font-family: $main-font font-family: $main-font
background-color: $primary background-color: RGB($primary)
color: $secondary color: RGB($secondary)
border-radius: $radius border-radius: $radius
box-shadow: 0 0.2rem 1rem 0 $primary box-shadow: 0 0.2rem 1rem 0 RGB($primary)
overflow: hidden overflow: hidden
transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out
@ -153,8 +153,8 @@ div.login
font-size: 1rem font-size: 1rem
text-decoration: none text-decoration: none
background-color: $primary-button background-color: RGB($primary-button)
color: $primary color: RGB($primary)
border-radius: calc(calc(#{$radius} - 0.5rem) / 2) border-radius: calc(calc(#{$radius} - 0.5rem) / 2)
transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out

28
DV8-Expo/website/static/sass/styles.sass
View file

@ -16,11 +16,11 @@ $monospace-font: var(--monospace-font)
\:root \:root
--primary: #332f2f --primary: 51, 47, 47
--secondary: #d7cec9 --secondary: 214, 204, 199
--primary-button: #C0AB83 --primary-button: 191, 170, 130
--secondary-button: #DDD1C1 --secondary-button: 222, 209, 193
--accent: #c2a588 --accent: 194, 165, 136
--radius: 1rem --radius: 1rem
@ -39,8 +39,8 @@ $monospace-font: var(--monospace-font)
html html
font-family: $main-font font-family: $main-font
background-color: $secondary background-color: RGB($secondary)
color: $primary color: RGB($primary)
body body
margin: 0 margin: 0
@ -50,7 +50,7 @@ body
grid-template-rows: 1fr auto grid-template-rows: 1fr auto
.background .background
background-color: $primary background-color: RGB($primary)
position: absolute position: absolute
inset: 0 inset: 0
overflow: hidden overflow: hidden
@ -63,13 +63,13 @@ body
height: 110% height: 110%
object-fit: cover object-fit: cover
filter: blur(0.25rem) filter: blur(0.25rem)
opacity: 0.3 opacity: 0.2
&::after &::after
content: '' content: ''
position: absolute position: absolute
inset: 0 inset: 0
background-image: linear-gradient(to top, $secondary, transparent) background-image: linear-gradient(to top, RGB($secondary) 3%, transparent)
z-index: +1 z-index: +1
main main
@ -87,8 +87,8 @@ footer
justify-content: center justify-content: center
align-items: center align-items: center
background-color: $primary background-color: RGB($primary)
color: $secondary color: RGB($secondary)
z-index: 2 z-index: 2
@ -99,7 +99,7 @@ footer
font-family: $monospace-font font-family: $monospace-font
text-align: center text-align: center
color: $secondary color: RGB($secondary)
> a > a
margin: 0 margin: 0
@ -107,7 +107,7 @@ footer
font-size: inherit font-size: inherit
font-family: inherit font-family: inherit
color: $accent color: RGB($accent)
text-decoration: none text-decoration: none
cursor: pointer cursor: pointer

12
DV8-Expo/website/templates/base.html
View file

@ -23,12 +23,14 @@
</head> </head>
<body> <body>
<nav> <nav>
<h1>DV8 Game Expo <span>2023</span></h1> <div class="title"><p>DV8 Game Expo <span>2023</span></p></div>
<span><!-- This is a separator --></span> <span><!-- This is a separator --></span>
<a href="{{ url_for('website.index') }}#">Home</a> <ul>
<a href="{{ url_for('website.index') }}#About">About</a> <li><a href="{{ url_for('website.index') }}#">Home</a></li>
<a href="{{ url_for('website.index') }}#Games">Games</a> <li><a href="{{ url_for('website.index') }}#What_is_this?">About</a></li>
{% if current_user.is_authenticated %}<a href="{{ url_for('website.logout') }}">Logout</a>{% endif %} <li><a href="{{ url_for('website.index') }}#Student_Games">Games</a></li>
{% if current_user.is_authenticated %}<li><a href="{{ url_for('website.logout') }}">Logout</a></li>{% endif %}
</ul>
</nav> </nav>
<span class="background"> <span class="background">

14
DV8-Expo/website/templates/index.html
View file

@ -7,13 +7,13 @@
<i class="ph-bold ph-caret-double-down"></i> <i class="ph-bold ph-caret-double-down"></i>
</header> </header>
<section id="About"> <section id="What_is_this?">
<h2>About</h2> <h2>What is this?</h2>
<p>Tap to add text</p> <p>The DV8 Game Expo, is a showcase of the works and efforts of students from the past year. This includes Level 3 year 1 and year 2.</p>
</section> </section>
<section id="Games"> <section id="Student_Games">
<h2>Games</h2> <h2>Student Games</h2>
<p>Here are some games AAAA</p> <p>Here are some games AAAA</p>
<div class="games"> <div class="games">
@ -30,8 +30,8 @@
<div class="options"> <div class="options">
<a href="{{ url_for('website.g', game_id=game.id) }}" style="width: 100%">View</a> <a href="{{ url_for('website.g', game_id=game.id) }}" style="width: 100%">View</a>
{% if game.downloadLink %}<a href="{{ game.downloadLink }}" style="background-color: var(--secondary-button); width: 2.5rem"><i class="ph ph-download"></i></a>{% endif %} {% if game.downloadLink %}<a href="{{ game.downloadLink }}" style="background-color: rgb(var(--secondary-button)); width: 2.5rem"><i class="ph ph-download"></i></a>{% endif %}
<a href="#" style="background-color: var(--secondary-button); width: 2.5rem"><i class="ph ph-warning"></i></a> <a href="#" style="background-color: rgb(var(--secondary-button)); width: 2.5rem"><i class="ph ph-warning"></i></a>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}