janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 05:14:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

progress on website (new nav menu)

Browse Source
This commit is contained in:
Janis Hutz
2023-03-24 21:03:26 +01:00
parent 69e95fe967
commit 2814b0ca18
8 changed files with 157 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/dist/about/index.html vendored
View File

@@ -4,13 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About :: myevent</title>
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/home.css"> <link rel="stylesheet" href="/css/home.css">
<meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that.">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script> <script defer src="/js/index.js"></script>
<title>About :: myevent</title>
<meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that.">
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
@@ -18,6 +18,8 @@
<h1>About myevent</h1> <h1>About myevent</h1>
<footer>Learn more about the project!</footer> <footer>Learn more about the project!</footer>
</div> </div>
<div class="content"></div> <div class="content">
<h3>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.</h3>
</div>
</body> </body>
</html> </html>

BIN
website/dist/assets/up.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 B

1
website/dist/assets/up.svg vendored Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path fill="#FFFFFF" d="M450 896V370L202 618l-42-42 320-320 320 320-42 42-248-248v526h-60Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 185 B

151
website/dist/css/navstyle.css vendored
View File

@@ -10,61 +10,66 @@
/* /*
Default rules that are set for mobile interfaces 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 { .nav-container {
width: 100%; width: 100%;
height: 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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; flex-direction: column;
width: 100%; }
.menuActive {
overflow: hidden;
}
/* Logo image and logo link (aka logo-container)*/
.logo-container-small {
margin-left: 5%;
margin-right: auto;
} }
.logo { .logo {
display: block; display: block;
width: auto; width: 60vw;
height: 100%; height: auto;
margin: 0;
} }
.logo-small {
display: block;
width: auto;
height: 12vh;
margin: 0;
}
.listtoggle { .listtoggle {
text-decoration: none; text-decoration: none;
color: black; color: rgb(168, 212, 253);
font-size: 5vh; font-size: 5vh;
margin-right: 7%;
cursor: pointer; 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 */ /* This is the list actually containing the menu items */
.nav-list { .nav-list {
@@ -78,62 +83,38 @@
.navitem { .navitem {
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
color: black; color: rgb(107, 107, 107);;
font-size: 1.4rem;
width: fit-content;
padding: 2%;
}
.inactive {
transition: 1s;
color: white;
font-size: 1.3rem; font-size: 1.3rem;
padding-top: 2%;
padding-bottom: 2%;
width: 100%;
} }
/*
.navitem:hover {
background-color: rgba(184, 214, 240, 1);
}*/
.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) { @media only screen and (min-width: 999px) {
/* Top navigation bar container */
.nav-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; flex-direction: row;
} }
.mobile-wrapper { .logo {
width: fit-content; width: auto;
margin-left: 3%; height: 70vh;
} margin-left: 10%;
.navitem {
font-size: 0.9rem;
width: fit-content;
padding: 1%;
padding-left: 2%;
padding-right: 2%
} }
} }

38
website/dist/css/style.css vendored
View File

@@ -17,7 +17,7 @@ html, body {
} }
body { body {
background-color: rgb(133, 191, 245); background-color: rgb(168, 212, 253);
} }
@@ -35,10 +35,10 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 90%; width: 90%;
padding: 2%; padding: 4%;
margin: 3%; margin: 3%;
margin-bottom: 0%; margin-bottom: 0%;
border-radius: 50px 50px 0px 0px; border-radius: 50px;
} }
/* /*
@@ -48,7 +48,6 @@ body {
width: 90%; width: 90%;
padding: 2%; padding: 2%;
margin: 3%; margin: 3%;
background-color: rgba(142, 156, 237, 0.644);
border-radius: 0px 0px 50px 50px; border-radius: 0px 0px 50px 50px;
margin-top: 0; margin-top: 0;
} }
@@ -73,15 +72,36 @@ body {
} }
#nav { #nav {
position: relative; position: sticky;
z-index: 1; 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) { @media only screen and (min-width: 999px) {
#nav {
height: 15vh;
}
.content, .title-wrapper { .content, .title-wrapper {
width: 70%; width: 70%;

28
website/dist/index.html vendored
View File

@@ -8,15 +8,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that."> <meta name="description" content="Looking for a free and open source event management solution you can host yourself? myevent is a project that does exactly that.">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="/js/index.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
<div id="backToTop" onclick="backToTop();"></div>
<div class="title-wrapper"> <div class="title-wrapper">
<h1>myevent</h1> <h1>myevent</h1>
<footer>Free & Open Source self-hosted event management solution</footer> <footer>Free & Open Source self-hosted event management solution</footer>
@@ -60,5 +58,29 @@
</div> </div>
</div> </div>
<div id="footer"></div> <div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let btn = document.getElementById( 'backToTop' );
$( document ).ready( function () {
$( '#nav' ).load( '/nav.html' );
} );
function backToTop () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
window.scrollTo( { top: 0, behavior: 'smooth' } );
}
}
window.onscroll = function () {
if ( document.body.scrollTop > 500 || document.documentElement.scrollTop > 500 ) {
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
} else {
btn.style.opacity = '0';
btn.style.cursor = 'default';
}
};
</script>
</body> </body>
</html> </html>

4
website/dist/js/index.js vendored
View File

@@ -7,7 +7,3 @@
* *
* *
*/ */
$( document ).ready( function () {
$( '#nav' ).load( '/nav.html' );
} );

71
website/dist/nav.html vendored
View File

@@ -8,59 +8,42 @@
<link rel="stylesheet" href="/css/navstyle.css"> <link rel="stylesheet" href="/css/navstyle.css">
</head> </head>
<body> <body>
<div class="nav-container">
<div class="mobile-wrapper">
<a class="logo-container" href="/"><img class="logo" src="/assets/logo.png" alt="impress-logo"></a>
<div class="toggle-wrapper">
<a class="listtoggle" onclick="toggleList()">&#9776</a>
</div>
</div>
<div class="nav-wrapper"> <div class="nav-wrapper">
<div class="nav-menu"> <div class="nav-container">
<img class="logo" src="/assets/logo.png" alt="logo">
<div class="nav-list"> <div class="nav-list">
<a class="navitem" id="docs" href="/docs">Documentation</a> <a class="navitem inactive" id="home" href="/">Home</a>
<a class="navitem" id="download" href="/download">Download</a> <a class="navitem inactive" id="docs" href="/docs">Documentation</a>
<a class="navitem" id="about" href="/about">About</a> <a class="navitem inactive" id="download" href="/download">Download</a>
<a class="navitem" id="gh" href="https://github.com/simplePCBuilding/myevent">GitHub</a> <a class="navitem inactive" id="about" href="/about">About</a>
</div> <a class="navitem inactive" id="gh" href="https://github.com/simplePCBuilding/myevent">GitHub</a>
</div> </div>
</div> </div>
</div> </div>
<a class="logo-container-small" href="/"><img class="logo-small" src="/assets/logo.png" alt="logo"></a>
<a class="listtoggle" onclick="toggleMenu();">&#9776</a>
<script> <script>
let menuOpen = false;
$( document ).ready( function () { $( document ).ready( function () {
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) != '' ) { if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
$( '#' + window.location.pathname.slice( 1, window.location.pathname.length - 1 ) ).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200 ); $( '.nav-wrapper' ).hide( 700 );
}; } else {
$('.navitem' ).mouseenter( function () { $( '.nav-wrapper' ).css( 'display', 'none' );
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) == this.id ) {} else {
$( this ).stop();
$( this ).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200 );
};
});
$( '.navitem' ).mouseleave( function () {
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) == this.id ) {} else {
$( this ).stop();
$( this ).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 600 );
};
} );
} );
let previous = 1;
function toggleList() {
$( '.nav-menu' ).slideToggle( 300 );
$( '.listtoggle' ).toggleClass( 'active' );
} }
if ( location.pathname === '/' ) {
window.addEventListener( 'resize', function( event ) { $( '#home' ).removeClass( 'inactive' );
if ( $( window ).width() > 999 ) { } else {
$( '.nav-menu' ).slideDown(); $( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
previous = 1; }
} else if ( $( window ).width() < 999 && previous == 1 ) { sessionStorage.setItem( 'menuOpen', 'false' );
$( '.nav-menu' ).slideUp(); } );
$( '.listtoggle' ).removeClass( 'active' ); function toggleMenu () {
previous = 0; menuOpen = !menuOpen;
$( '.nav-wrapper' ).toggle( 600 );
$( '.logo-small' ).toggle( 600 );
$( 'body' ).toggleClass( 'menuActive' );
sessionStorage.setItem( 'menuOpen', String( menuOpen ) );
}; };
}, true);
</script> </script>
</body> </body>
</html> </html>