From 2814b0ca1896086c8e38d2e8ad6fecd5165a3cda Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 24 Mar 2023 21:03:26 +0100 Subject: [PATCH] progress on website (new nav menu) --- website/dist/about/index.html | 8 +- website/dist/assets/up.png | Bin 0 -> 221 bytes website/dist/assets/up.svg | 1 + website/dist/css/navstyle.css | 153 +++++++++++++++------------------- website/dist/css/style.css | 38 +++++++-- website/dist/index.html | 28 ++++++- website/dist/js/index.js | 4 - website/dist/nav.html | 77 +++++++---------- 8 files changed, 157 insertions(+), 152 deletions(-) create mode 100644 website/dist/assets/up.png create mode 100644 website/dist/assets/up.svg diff --git a/website/dist/about/index.html b/website/dist/about/index.html index 02deb70..801d209 100644 --- a/website/dist/about/index.html +++ b/website/dist/about/index.html @@ -4,13 +4,13 @@ - About :: myevent - + About :: myevent + @@ -18,6 +18,8 @@

About myevent

-
+
+

myevent is a free and open source event management solution that you can host on your own hardware, if you want to. It is mainly written in node.js, but, as a webapp, uses also lots of HTML and CSS. For storing the customer / userdata, you may choose between using MySQL and a JSON based custom database, such that this project may be used in more cases. Whilst it is recommended to use MySQL with this project, using the JSON based database can be an easy to set up alternative if you are not serving that many customers.

+
\ No newline at end of file diff --git a/website/dist/assets/up.png b/website/dist/assets/up.png new file mode 100644 index 0000000000000000000000000000000000000000..96ab0831b2f5713f1e5b5f83eeac64494c2176e8 GIT binary patch literal 221 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpUtC7v#hAsNoeSBiOWe0_1@?snt#@si()0`GBy^x`462%2%ihSMa-hJ_6QppwxSzR{>v!tM0!F|1Z z_M?llDz>P}t?fi&YR<@z&-LmtQ+1mywAi<^G1rTMA+71F-dp!KT|oCTc)I$ztaD0e F0s!p3SHu7S literal 0 HcmV?d00001 diff --git a/website/dist/assets/up.svg b/website/dist/assets/up.svg new file mode 100644 index 0000000..d7896c6 --- /dev/null +++ b/website/dist/assets/up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/dist/css/navstyle.css b/website/dist/css/navstyle.css index 7fed4b6..85cec9b 100644 --- a/website/dist/css/navstyle.css +++ b/website/dist/css/navstyle.css @@ -10,61 +10,66 @@ /* Default rules that are set for mobile interfaces */ +.nav-wrapper { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + position: fixed; + display: block; + z-index: 2; + width: 100%; + top: 0; + bottom: 0; + left: 1; + right: 1; +} + .nav-container { width: 100%; height: 100%; - background-color: blue; -} - -.toggle-wrapper { - display: inline-flex; - height: 100%; - width: 80%; - align-items: center; - justify-content: flex-end; -} - - -/* Logo image and logo link (aka logo-container)*/ -.logo-container { - margin: 0.5%; - height: 80%; - display: inline-block; - width: fit-content; -} - -.mobile-wrapper { display: flex; justify-content: center; align-items: center; - height: 100%; - width: 100%; + flex-direction: column; +} + +.menuActive { + overflow: hidden; +} + + + +/* Logo image and logo link (aka logo-container)*/ +.logo-container-small { + margin-left: 5%; + margin-right: auto; } .logo { display: block; - width: auto; - height: 100%; + width: 60vw; + height: auto; + margin: 0; } +.logo-small { + display: block; + width: auto; + height: 12vh; + margin: 0; +} + + .listtoggle { text-decoration: none; - color: black; + color: rgb(168, 212, 253); font-size: 5vh; - margin-right: 7%; cursor: pointer; + margin-right: 5%; + position: relative; + z-index: 3; } -.active { - color: rgba(184, 214, 240, 1); -} - -/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */ -.nav-menu { - background-color: rgba(245, 245, 245, 0.9); - display: none; - width: 100%; -} /* This is the list actually containing the menu items */ .nav-list { @@ -78,62 +83,38 @@ .navitem { text-decoration: none; text-align: center; - color: black; - font-size: 1.3rem; - padding-top: 2%; - padding-bottom: 2%; - width: 100%; + color: rgb(107, 107, 107);; + font-size: 1.4rem; + width: fit-content; + padding: 2%; } -/* -.navitem:hover { - background-color: rgba(184, 214, 240, 1); -}*/ +.inactive { + transition: 1s; + color: white; + font-size: 1.3rem; +} + +.inactive:hover { + font-size: 1.6rem; + color: rgb(107, 107, 107); + transition: 0.4s; +} + +/* ~ --> all next & + --> next */ +.shaded { + color: rgb(107, 107, 107); + transition: 0.3s; +} -/* - Media queries to optimise for desktop -*/ @media only screen and (min-width: 999px) { - /* Top navigation bar container */ .nav-container { - display: flex; - justify-content: center; - align-items: center; - } - - /* div containing the nav-menu unordered list */ - .nav-wrapper { - height: 100%; - width: 80%; - margin: auto; - display: inline-flex; - align-items: center; - justify-content: center; - } - - .listtoggle, .toggle-wrapper { - display: none; - } - - .nav-menu { - display: flex; - background-color: rgba(0, 0, 0, 0); - } - - .nav-list { flex-direction: row; } - .mobile-wrapper { - width: fit-content; - margin-left: 3%; - } - - .navitem { - font-size: 0.9rem; - width: fit-content; - padding: 1%; - padding-left: 2%; - padding-right: 2% + .logo { + width: auto; + height: 70vh; + margin-left: 10%; } } diff --git a/website/dist/css/style.css b/website/dist/css/style.css index 145dc14..3e435dd 100644 --- a/website/dist/css/style.css +++ b/website/dist/css/style.css @@ -17,7 +17,7 @@ html, body { } body { - background-color: rgb(133, 191, 245); + background-color: rgb(168, 212, 253); } @@ -35,10 +35,10 @@ body { align-items: center; justify-content: center; width: 90%; - padding: 2%; + padding: 4%; margin: 3%; margin-bottom: 0%; - border-radius: 50px 50px 0px 0px; + border-radius: 50px; } /* @@ -48,7 +48,6 @@ body { width: 90%; padding: 2%; margin: 3%; - background-color: rgba(142, 156, 237, 0.644); border-radius: 0px 0px 50px 50px; margin-top: 0; } @@ -73,15 +72,36 @@ body { } #nav { - position: relative; + position: sticky; z-index: 1; - height: 25vh; + height: 15vh; + width: 100%; + background-color: white; + display: flex; + justify-content: flex-end; + align-items: center; +} + +#backToTop { + border-radius: 500px; + border-width: 1px; + background-color: rgb(34, 72, 143); + background-image: url('/assets/up.svg'); + background-size: cover; + width: calc(30px + 0.5vw); + height: calc(30px + 0.5vw); + padding: 0.2%; + float: right; + color: white; + position: fixed; + top: 90%; + left: 93%; + opacity: 0; + cursor: default; + transition: 0.5s } @media only screen and (min-width: 999px) { - #nav { - height: 15vh; - } .content, .title-wrapper { width: 70%; diff --git a/website/dist/index.html b/website/dist/index.html index aa80de8..3826f6e 100644 --- a/website/dist/index.html +++ b/website/dist/index.html @@ -8,15 +8,13 @@ - - - +

myevent

Free & Open Source self-hosted event management solution
@@ -60,5 +58,29 @@
+ + + \ No newline at end of file diff --git a/website/dist/js/index.js b/website/dist/js/index.js index f51026e..f15bb7c 100644 --- a/website/dist/js/index.js +++ b/website/dist/js/index.js @@ -7,7 +7,3 @@ * * */ - -$( document ).ready( function () { - $( '#nav' ).load( '/nav.html' ); -} ); \ No newline at end of file diff --git a/website/dist/nav.html b/website/dist/nav.html index 4454853..b4d4cf0 100644 --- a/website/dist/nav.html +++ b/website/dist/nav.html @@ -8,59 +8,42 @@ -
-
- -
- ☰ -
-
-
-
-
- Documentation - Download - About - GitHub -
+
+
+ +
+ Home + Documentation + Download + About + GitHub
+ logo + ☰ \ No newline at end of file