mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 05:14:23 +00:00
progress on website (new nav menu)
This commit is contained in:
8
website/dist/about/index.html
vendored
8
website/dist/about/index.html
vendored
@@ -4,13 +4,13 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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/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/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></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>
|
||||
<body>
|
||||
<div id="nav"></div>
|
||||
@@ -18,6 +18,8 @@
|
||||
<h1>About myevent</h1>
|
||||
<footer>Learn more about the project!</footer>
|
||||
</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>
|
||||
</html>
|
||||
BIN
website/dist/assets/up.png
vendored
Normal file
BIN
website/dist/assets/up.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 B |
1
website/dist/assets/up.svg
vendored
Normal file
1
website/dist/assets/up.svg
vendored
Normal 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>
|
||||
|
After Width: | Height: | Size: 185 B |
153
website/dist/css/navstyle.css
vendored
153
website/dist/css/navstyle.css
vendored
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
38
website/dist/css/style.css
vendored
38
website/dist/css/style.css
vendored
@@ -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%;
|
||||
|
||||
28
website/dist/index.html
vendored
28
website/dist/index.html
vendored
@@ -8,15 +8,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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.">
|
||||
<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">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="nav"></div>
|
||||
<div id="backToTop" onclick="backToTop();"></div>
|
||||
<div class="title-wrapper">
|
||||
<h1>myevent</h1>
|
||||
<footer>Free & Open Source self-hosted event management solution</footer>
|
||||
@@ -60,5 +58,29 @@
|
||||
</div>
|
||||
</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>
|
||||
</html>
|
||||
4
website/dist/js/index.js
vendored
4
website/dist/js/index.js
vendored
@@ -7,7 +7,3 @@
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
$( document ).ready( function () {
|
||||
$( '#nav' ).load( '/nav.html' );
|
||||
} );
|
||||
77
website/dist/nav.html
vendored
77
website/dist/nav.html
vendored
@@ -8,59 +8,42 @@
|
||||
<link rel="stylesheet" href="/css/navstyle.css">
|
||||
</head>
|
||||
<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()">☰</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-menu">
|
||||
<div class="nav-list">
|
||||
<a class="navitem" id="docs" href="/docs">Documentation</a>
|
||||
<a class="navitem" id="download" href="/download">Download</a>
|
||||
<a class="navitem" id="about" href="/about">About</a>
|
||||
<a class="navitem" id="gh" href="https://github.com/simplePCBuilding/myevent">GitHub</a>
|
||||
</div>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-container">
|
||||
<img class="logo" src="/assets/logo.png" alt="logo">
|
||||
<div class="nav-list">
|
||||
<a class="navitem inactive" id="home" href="/">Home</a>
|
||||
<a class="navitem inactive" id="docs" href="/docs">Documentation</a>
|
||||
<a class="navitem inactive" id="download" href="/download">Download</a>
|
||||
<a class="navitem inactive" id="about" href="/about">About</a>
|
||||
<a class="navitem inactive" id="gh" href="https://github.com/simplePCBuilding/myevent">GitHub</a>
|
||||
</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();">☰</a>
|
||||
<script>
|
||||
let menuOpen = false;
|
||||
$( document ).ready( function () {
|
||||
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) != '' ) {
|
||||
$( '#' + 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 );
|
||||
};
|
||||
$('.navitem' ).mouseenter( function () {
|
||||
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 );
|
||||
};
|
||||
} );
|
||||
if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
|
||||
$( '.nav-wrapper' ).hide( 700 );
|
||||
} else {
|
||||
$( '.nav-wrapper' ).css( 'display', 'none' );
|
||||
}
|
||||
if ( location.pathname === '/' ) {
|
||||
$( '#home' ).removeClass( 'inactive' );
|
||||
} else {
|
||||
$( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
|
||||
}
|
||||
sessionStorage.setItem( 'menuOpen', 'false' );
|
||||
} );
|
||||
|
||||
let previous = 1;
|
||||
function toggleList() {
|
||||
$( '.nav-menu' ).slideToggle( 300 );
|
||||
$( '.listtoggle' ).toggleClass( 'active' );
|
||||
}
|
||||
|
||||
window.addEventListener( 'resize', function( event ) {
|
||||
if ( $( window ).width() > 999 ) {
|
||||
$( '.nav-menu' ).slideDown();
|
||||
previous = 1;
|
||||
} else if ( $( window ).width() < 999 && previous == 1 ) {
|
||||
$( '.nav-menu' ).slideUp();
|
||||
$( '.listtoggle' ).removeClass( 'active' );
|
||||
previous = 0;
|
||||
};
|
||||
}, true);
|
||||
function toggleMenu () {
|
||||
menuOpen = !menuOpen;
|
||||
$( '.nav-wrapper' ).toggle( 600 );
|
||||
$( '.logo-small' ).toggle( 600 );
|
||||
$( 'body' ).toggleClass( 'menuActive' );
|
||||
sessionStorage.setItem( 'menuOpen', String( menuOpen ) );
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user