styling, first start page template

This commit is contained in:
2023-09-27 16:08:39 +02:00
parent b3bfa36c77
commit 7e4b04570e
16 changed files with 62 additions and 101 deletions

View File

@@ -18,8 +18,10 @@
<a href="/account">Account</a> | <a href="/account">Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button> <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav> </nav>
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo"> <div class="content">
<h1>Welcome to libreevent!</h1> <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
<p>No start page has been configured yet! Please configure one either by using the configurator in the settings or by uploading your own HTML page to the correct folder as detailed <a href="https://libreevent.janishutz.com/docs/admin-panel/pages">here</a></p> <h1>Welcome to libreevent!</h1>
<p>No start page has been configured yet! Please configure one either by using the configurator in the settings or by uploading your own HTML page to the correct folder as detailed <a href="https://libreevent.janishutz.com/docs/admin-panel/pages">here</a></p>
</div>
</body> </body>
</html> </html>

View File

@@ -92,3 +92,10 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.content {
width: 98%;
display: flex;
flex-direction: column;
align-items: center;
}

View File

@@ -18,8 +18,10 @@
<a href="/account">Account</a> | <a href="/account">Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button> <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav> </nav>
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo"> <div class="content">
<h1>Welcome to {{ pageName }}!</h1> <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
<p>{{ data.description }}</p> <h1>Welcome to {{ pageName }}!</h1>
<p>{{ data.description }}</p>
</div>
</body> </body>
</html> </html>

View File

@@ -18,8 +18,10 @@
<a href="/account">Account</a> | <a href="/account">Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button> <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav> </nav>
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo"> <div class="content">
<h1>Welcome to {{ pageName }}!</h1> <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
<p>{{ data.description }}</p> <h1>Welcome to {{ pageName }}!</h1>
<p>{{ data.description }}</p>
</div>
</body> </body>
</html> </html>

View File

@@ -18,8 +18,10 @@
<a href="/account">Account</a> | <a href="/account">Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button> <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav> </nav>
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo"> <div class="content">
<h1>Welcome to {{ pageName }}!</h1> <img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
<p>{{ data.description }}</p> <h1>Welcome to {{ pageName }}!</h1>
<p>{{ data.description }}</p>
</div>
</body> </body>
</html> </html>

View File

@@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="/supportFiles/style.css">
<link rel="stylesheet" href="/startPage/mainStyle">
<script defer src="/startPage/helperFunction"></script>
<title>{{ pageName }} :: Home</title>
</head>
<body>
<nav>
<a class="home">Home</a> |
<a href="/tickets">Tickets</a> |
<a href="/cart">Cart</a> |
<a href="/account">Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav>
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
<h1>Welcome to {{ pageName }}!</h1>
<p>{{ data.description }}</p>
</body>
</html>

View File

@@ -1 +0,0 @@
{"subtitle":"this is a test","description":"this is a test description"}

View File

@@ -1,31 +0,0 @@
{
"subtitle": {
"id": "subtitle",
"type": "text",
"display": "Subtitle",
"can-be-empty": false
},
"description": {
"id": "description",
"type": "textarea",
"display": "Description",
"textarea-settings": {
"cols": 50,
"rows": 5,
"max-length": 0,
"min-length": 100
},
"can-be-empty": false
},
"banner": {
"id": "banner",
"type": "image",
"display": "Banner",
"image-settings": {
"upload-name": "homeBanner",
"accept-filetype": "image/jpeg",
"height": 200,
"width": 350
}
}
}

View File

@@ -505,12 +505,10 @@
} }
</script> </script>
<!-- TODO: Optimize as well -->
<style scoped> <style scoped>
.parent { .parent {
height: 80vh; height: 80vh;
width: 70vw; width: 90vw;
top: 90px; top: 90px;
left: 5vw; left: 5vw;
position: absolute; position: absolute;
@@ -525,22 +523,6 @@
cursor: default; cursor: default;
} }
.properties {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
background-color: var( --accent-background );
color: var( --secondary-color );
width: 20vw;
height: 90vh;
top: 7.5vh;
right: 0.5vw;
overflow: scroll;
}
.content-parent { .content-parent {
width: 400vw; width: 400vw;
height: 400vw; height: 400vw;
@@ -560,4 +542,10 @@
.toolbar button:disabled { .toolbar button:disabled {
cursor: default; cursor: default;
} }
@media only screen and (min-width: 999px) {
.parent {
width: 70vw;
}
}
</style> </style>

View File

@@ -18,7 +18,7 @@
<router-link to="/admin/events/view" class="ticket" @click="setActiveTicket( event.eventID );" v-if="new Date( event.date ).getTime() > currentDate || timeframe.name === 'Drafts'"> <router-link to="/admin/events/view" class="ticket" @click="setActiveTicket( event.eventID );" v-if="new Date( event.date ).getTime() > currentDate || timeframe.name === 'Drafts'">
<div class="ticket-name"> <div class="ticket-name">
<h3>{{ event.name }}</h3> <h3>{{ event.name }}</h3>
<p>{{ event.description }}</p> <p>{{ event.shortDescription }}</p>
<b>{{ event.date }}</b> <b>{{ event.date }}</b>
</div> </div>
<!-- <img :src="event.logo" alt="event logo" class="ticket-logo"> --> <!-- <img :src="event.logo" alt="event logo" class="ticket-logo"> -->
@@ -124,6 +124,11 @@
this.eventList.drafts[ 'content' ] = dat[ 'drafts' ] ?? {}; this.eventList.drafts[ 'content' ] = dat[ 'drafts' ] ?? {};
let sortable = []; let sortable = [];
for ( let event in this.events ) { for ( let event in this.events ) {
if ( this.events[ event ][ 'description' ].length > 200 ) {
this.events[ event ][ 'shortDescription' ] = this.events[ event ][ 'description' ].slice( 0, 200 ) + '...';
} else {
this.events[ event ][ 'shortDescription' ] = this.events[ event ][ 'description' ];
}
sortable.push( [ this.events[ event ][ 'eventID' ], new Date( this.events[ event ][ 'date' ] ).getTime() ] ); sortable.push( [ this.events[ event ][ 'eventID' ], new Date( this.events[ event ][ 'date' ] ).getTime() ] );
} }
sortable.sort( function( a, b ) { sortable.sort( function( a, b ) {

View File

@@ -16,7 +16,7 @@
<img :src="event.logo" alt="event logo" class="ticket-logo"> <img :src="event.logo" alt="event logo" class="ticket-logo">
<div class="ticket-name"> <div class="ticket-name">
<h3>{{ event.name }}</h3> <h3>{{ event.name }}</h3>
<p v-html="event.description"></p> <p v-html="event.shortDescription"></p>
</div> </div>
<div class="ticket-info"> <div class="ticket-info">
<p>Free seats: {{ event.free }} / {{ event.totalSeats }}</p> <p>Free seats: {{ event.free }} / {{ event.totalSeats }}</p>
@@ -112,6 +112,11 @@
res.json().then( dat => { res.json().then( dat => {
this.events = dat ?? {}; this.events = dat ?? {};
for ( let event in dat ) { for ( let event in dat ) {
if ( this.events[ event ][ 'description' ].length > 200 ) {
this.events[ event ][ 'shortDescription' ] = this.events[ event ][ 'description' ].slice( 0, 200 ) + '...';
} else {
this.events[ event ][ 'shortDescription' ] = this.events[ event ][ 'description' ];
}
this.events[ event ][ 'logo' ] = new URL( location.protocol + '//' + location.hostname + ':' + location.port + '/eventAssets/' + this.events[ event ].eventID + 'Logo.jpg' ); this.events[ event ][ 'logo' ] = new URL( location.protocol + '//' + location.hostname + ':' + location.port + '/eventAssets/' + this.events[ event ].eventID + 'Logo.jpg' );
} }
} ); } );

View File

@@ -16,7 +16,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="main"> <div class="main">
<p v-html="event.description" style="margin: 0;"></p> <p v-for="line in event.description.split( '\n' )">{{ line }}</p>
</div> </div>
<div class="aside"> <div class="aside">
<h3>{{ event.location }}</h3> <h3>{{ event.location }}</h3>

View File

@@ -206,25 +206,20 @@
} }
.login { .login {
background-color: green;
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} }
.login-app { .login-app {
background-color: var( --background-color ); background-color: var( --background-color );
width: 90%; margin-top: 0;
height: 90%; width: 100%;
padding: 10% 5%; height: 100%;
padding: 5% 5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50px;
} }
.button { .button {
@@ -241,10 +236,20 @@
} }
@media only screen and (min-width: 999px) { @media only screen and (min-width: 999px) {
.login {
background-color: green;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.login-app { .login-app {
width: 50vw; width: 50vw;
height: min-content; height: min-content;
padding: 5% 5%; border-radius: 50px;
} }
.field { .field {