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

make admin panel mobile-compatible

Browse Source
This commit is contained in:
Janis Hutz
2023-06-21 19:23:46 +02:00
parent 30c1b0fa2e
commit 8fe3a9a003
3 changed files with 135 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/webapp/src/views/admin/AdminView.vue
View File

@@ -12,17 +12,20 @@
<div class="top-bar">
<h1>Admin panel</h1>
</div>
<button class="hideNav">&#9776</button>
<button class="hideNav navHidden" @click="navMenu( 'toggle' );">&#9776</button>
<nav class="side-nav">
<div class="side-nav-wrapper">
<img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
<router-link to="/admin" class="admin-menu">Home</router-link>
<router-link to="/admin/pages" class="admin-menu">Pages</router-link>
<router-link to="/admin/events" class="admin-menu">Events</router-link>
<router-link to="/admin/locations" class="admin-menu">Locations</router-link>
<router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
<router-link to="/admin/settings" class="admin-menu">Settings</router-link>
<router-link to="/admin" class="admin-menu" @click="navMenu( 'hide' )">Home</router-link>
<router-link to="/admin/pages" class="admin-menu" @click="navMenu( 'hide' )">Pages</router-link>
<router-link to="/admin/events" class="admin-menu" @click="navMenu( 'hide' )">Events</router-link>
<router-link to="/admin/locations" class="admin-menu" @click="navMenu( 'hide' )">Locations</router-link>
<router-link to="/admin/plugins" class="admin-menu" @click="navMenu( 'hide' )">Plugins</router-link>
<router-link to="/admin/settings" class="admin-menu" @click="navMenu( 'hide' )">Settings</router-link>
<button to="/admin/login" class="admin-menu" @click="logout()">Logout</button>
</div>
</nav>
<div class="backdrop" @click="navMenu( 'hide' )"></div>
<div class="main-view">
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'fade'" mode="out-in">
@@ -34,6 +37,102 @@
</template>
<style scoped>
.admin-wrapper {
display: block;
height: 100%;
}
.top-bar {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
}
.main-view {
grid-area: main;
height: 90vh;
width: 100vw;
min-height: 80vh;
overflow: scroll;
}
.backdrop {
width: 100vw;
height: 100vh;
z-index: 1;
display: none;
position: fixed;
top: 0;
left: 0;
background-color: rgba( 0, 0, 0, 0.7 );
}
.side-nav {
position: fixed;
display: none;
height: 100vh;
top: 0;
width: 30vw;
padding: 0;
margin: 0;
background-color: var( --accent-background );
z-index: 3;
}
.side-nav-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
overflow: scroll;
height: 100%;
}
.admin-menu {
padding: 4% 0%;
width: 100%;
background-color: rgba( 0, 0, 0, 0 );
color: var( --secondary-color );
cursor: pointer;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
transition: 1s;
font-size: 100%;
border-style: none;
}
nav a.router-link-exact-active {
background-color: var( --accent-background-hover );
}
.admin-menu:hover {
background-color: var( --accent-background-hover );
transition: 0.4s;
}
.hideNav {
border: none;
font-size: 300%;
color: var( --secondary-color );
width: fit-content;
background-color: rgba( 0, 0, 0, 0 );
position: fixed;
cursor: pointer;
top: 1vw;
left: 2vw;
z-index: 5;
}
.navHidden {
color: var( --primary-color );
}
@media only screen and (min-width: 1299px) {
.hideNav, .backdrop {
display: none;
}
.admin-wrapper {
display: grid;
grid-template-areas:
@@ -66,6 +165,7 @@
}
.side-nav {
position: initial;
grid-area: sidebar;
display: flex;
flex-direction: column;
@@ -100,20 +200,6 @@
background-color: var( --accent-background-hover );
transition: 0.4s;
}
.hideNav {
border: none;
font-size: 300%;
color: var( --secondary-color );
width: fit-content;
background-color: rgba( 0, 0, 0, 0 );
position: fixed;
}
@media only screen and (min-width: 1299px) {
.hideNav {
display: none;
}
}
</style>
@@ -144,6 +230,23 @@
this.$router.push( '/admin/login' );
} );
}
},
navMenu ( action ) {
if ( screen.width < 1300 ) {
if ( action === 'toggle' ) {
$( '.side-nav' ).toggle( 300 );
$( '.hideNav' ).toggleClass( 'navHidden' );
$( '.backdrop' ).toggle( 300 );
} else if ( action === 'show' ) {
$( '.backdrop' ).show( 300 );
$( '.side-nav' ).show( 300 );
$( '.hideNav' ).removeClass( 'navHidden' );
} else {
$( '.side-nav' ).hide( 300 );
$( '.backdrop' ).hide( 300 );
$( '.hideNav' ).addClass( 'navHidden' );
}
}
}
}
};

1
src/webapp/src/views/admin/events/EventsDetailsView.vue
View File

@@ -16,6 +16,7 @@
<option value="TestLocation">TestLocation</option>
</select><br>
<input v-model="event.date" class="small-text" type="date"><br>
<router-link to="/admin/ticketEditor">Edit ticket layout</router-link>
</div>
<div class="ticket-settings">
<h3>Ticket Settings</h3>

1
src/webapp/src/views/admin/events/TicketEditorView.vue
View File

@@ -1,6 +1,7 @@
<template>
<div id="ticketEditor">
<h1>Ticket Editor</h1>
<router-link to="/admin/events/view">Back to event settings</router-link>
<div id="editor">Loading editor...</div>
</div>
</template>