From 28276a984f9fde66647f2c5d1f929fdccf35edbc Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Tue, 3 Sep 2024 08:48:31 +0200 Subject: [PATCH] design, libreevent page partially done --- components/scroll/scroll.css | 47 +++++++- components/scroll/scroll.js | 146 ++++++++++++------------ site/src/404.html | 11 ++ site/src/css/style.css | 15 +++ site/src/projects/libreevent/index.html | 15 ++- 5 files changed, 158 insertions(+), 76 deletions(-) diff --git a/components/scroll/scroll.css b/components/scroll/scroll.css index b6f99a6..2e47f71 100644 --- a/components/scroll/scroll.css +++ b/components/scroll/scroll.css @@ -12,8 +12,53 @@ right: 5%; z-index: 7; width: 90%; + bottom: -200px; +} + +#scroll-indicator.show-scroll { + animation: pop-in 0.5s; bottom: 5%; - display: none; +} + +#scroll-indicator.hide-scroll { + animation: pop-out 0.5s; + bottom: -200px; +} + +@keyframes pop-in { + 0% { + bottom: -200px; + } + + 70% { + bottom: 6.5%; + } + + 80% { + bottom: 6%; + } + + 100% { + bottom: 5%; + } +} + +@keyframes pop-out { + 0% { + bottom: 5%; + } + + 25% { + bottom: 6.5% + } + + 35% { + bottom: 6%; + } + + 100% { + bottom: -200px; + } } .content { diff --git a/components/scroll/scroll.js b/components/scroll/scroll.js index c391a2b..ac6cd1d 100644 --- a/components/scroll/scroll.js +++ b/components/scroll/scroll.js @@ -1,82 +1,84 @@ window.scrollHint = ( maxScroll ) => { - $( () => { - let isShowing = false; - const el = document.getElementById( 'scroll-indicator' ); - if ( !el ) { - throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' ); - } - el.innerHTML = ` -
-
- Scroll to discover more - keyboard_double_arrow_down -
-
`; - - el.onclick = () => { - if ( window.scrollY === 0 ) { - window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } ); - } else if ( window.scrollY % window.innerHeight === 0 ) { - window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } ); - } else { - window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } ); - } - $( '#scroll-indicator' ).fadeOut( 300 ); - try { - clearTimeout( scrollCorrectionTimeout ); - } catch ( _err ) {}; - isShowing = false; - timeout = setTimeout( () => { showHint() }, 2500 ); + let isShowing = false; + const el = document.getElementById( 'scroll-indicator' ); + if ( !el ) { + throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' ); + } + el.innerHTML = ` +
+
+ Scroll to discover more + keyboard_double_arrow_down +
+
`; + + el.onclick = () => { + if ( window.scrollY === 0 ) { + window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } ); + } else if ( window.scrollY % window.innerHeight === 0 ) { + window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } ); + } else { + window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } ); } + el.classList.remove( 'show-scroll' ); + el.classList.add( 'hide-scroll' ); + try { + clearTimeout( scrollCorrectionTimeout ); + } catch ( _err ) {}; + isShowing = false; + timeout = setTimeout( () => { showHint() }, 2500 ); + } - document.onscrollend = () => { - scrollCorrectionTimeout = setTimeout( () => { - scrollCorrection(); - }, 1000 ); - timeout = setTimeout( () => { - showHint(); - }, 2500 ); - } - document.onscroll = () => { - try { - clearTimeout( timeout ); - } catch ( _e ) {} - try { - clearTimeout( scrollCorrectionTimeout ); - } catch ( _err ) {}; - if ( isShowing ) { - isShowing = false; - $( '#scroll-indicator' ).fadeOut( 300 ); - } - }; - - window.onresize = () => { + document.onscrollend = () => { + scrollCorrectionTimeout = setTimeout( () => { scrollCorrection(); - showHint(); - } - - let timeout = setTimeout( () => { + }, 1000 ); + timeout = setTimeout( () => { showHint(); }, 2500 ); - - let scrollCorrectionTimeout = 0; - - const showHint = () => { - if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) { - $( '#scroll-indicator' ).fadeIn( 300 ); - isShowing = true; - } else { - $( '#scroll-indicator' ).fadeOut( 300 ); - isShowing = false; - } - } - - const scrollCorrection = () => { - if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) { - window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } ); - } + } + document.onscroll = () => { + try { + clearTimeout( timeout ); + } catch ( _e ) {} + try { + clearTimeout( scrollCorrectionTimeout ); + } catch ( _err ) {}; + if ( isShowing ) { + isShowing = false; + el.classList.remove( 'show-scroll' ); + el.classList.add( 'hide-scroll' ); } + }; + window.onresize = () => { scrollCorrection(); - } ); + showHint(); + } + + let timeout = setTimeout( () => { + showHint(); + }, 2500 ); + + let scrollCorrectionTimeout = 0; + + const showHint = () => { + if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) { + el.classList.remove( 'hide-scroll' ); + el.classList.add( 'show-scroll' ); + isShowing = true; + } else { + el.classList.remove( 'show-scroll' ); + el.classList.add( 'hide-scroll' ); + isShowing = false; + } + } + + const scrollCorrection = () => { + if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) { + window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } ); + } + } + + scrollCorrection(); } \ No newline at end of file diff --git a/site/src/404.html b/site/src/404.html index 6afca9d..1314615 100644 --- a/site/src/404.html +++ b/site/src/404.html @@ -6,6 +6,16 @@ 404 - Page not found | janishutz.com + @@ -13,6 +23,7 @@

404

The page you are looking for was not found!

+ Home
diff --git a/site/src/css/style.css b/site/src/css/style.css index d9fdbcf..de02359 100644 --- a/site/src/css/style.css +++ b/site/src/css/style.css @@ -26,6 +26,10 @@ body { .content { width: 80%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .no-scroll { @@ -38,4 +42,15 @@ body { color: white; text-decoration: none; border-radius: 10px; + transition: all 0.5s; +} + +.button:hover { + border-radius: 5px; + background-color: rgb(2, 10, 27); +} + +.project-logo { + width: 40%; + border-radius: 30px; } \ No newline at end of file diff --git a/site/src/projects/libreevent/index.html b/site/src/projects/libreevent/index.html index 634a25d..4acf30b 100644 --- a/site/src/projects/libreevent/index.html +++ b/site/src/projects/libreevent/index.html @@ -38,12 +38,12 @@

Create Events with Ease

-

Using the libreevent's powerful admin panel

+

Using the libreǝvent's powerful admin panel

Docs

Create seat plans

-

libreevent's seat plan editor is designed to make this as easy as possible

+

libreǝvent's seat plan editor is designed to make this as easy as possible

Docs
@@ -59,13 +59,22 @@

Open Source Project

Free Software, developed by Janis Hutz & the community

- Learn more about libreevent + Learn more about libreǝvent
⮜
⮞
+
+ + +

libreǝvent

+

Free & Open Source Event Management & Ticketing Solution

+ + +
+