mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 05:14:23 +00:00
styling, first start page template
This commit is contained in:
@@ -18,8 +18,10 @@
|
||||
<a href="/account">Account</a> |
|
||||
<button onclick="changeTheme();" id="themeSelector">☽</button>
|
||||
</nav>
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<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 class="content">
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<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>
|
||||
</html>
|
||||
@@ -92,3 +92,10 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -18,8 +18,10 @@
|
||||
<a href="/account">Account</a> |
|
||||
<button onclick="changeTheme();" id="themeSelector">☽</button>
|
||||
</nav>
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
<div class="content">
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,10 @@
|
||||
<a href="/account">Account</a> |
|
||||
<button onclick="changeTheme();" id="themeSelector">☽</button>
|
||||
</nav>
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
<div class="content">
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,10 @@
|
||||
<a href="/account">Account</a> |
|
||||
<button onclick="changeTheme();" id="themeSelector">☽</button>
|
||||
</nav>
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
<div class="content">
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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">☽</button>
|
||||
</nav>
|
||||
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
|
||||
<h1>Welcome to {{ pageName }}!</h1>
|
||||
<p>{{ data.description }}</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
{"subtitle":"this is a test","description":"this is a test description"}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -505,12 +505,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- TODO: Optimize as well -->
|
||||
|
||||
<style scoped>
|
||||
.parent {
|
||||
height: 80vh;
|
||||
width: 70vw;
|
||||
width: 90vw;
|
||||
top: 90px;
|
||||
left: 5vw;
|
||||
position: absolute;
|
||||
@@ -525,22 +523,6 @@
|
||||
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 {
|
||||
width: 400vw;
|
||||
height: 400vw;
|
||||
@@ -560,4 +542,10 @@
|
||||
.toolbar button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
.parent {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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'">
|
||||
<div class="ticket-name">
|
||||
<h3>{{ event.name }}</h3>
|
||||
<p>{{ event.description }}</p>
|
||||
<p>{{ event.shortDescription }}</p>
|
||||
<b>{{ event.date }}</b>
|
||||
</div>
|
||||
<!-- <img :src="event.logo" alt="event logo" class="ticket-logo"> -->
|
||||
@@ -124,6 +124,11 @@
|
||||
this.eventList.drafts[ 'content' ] = dat[ 'drafts' ] ?? {};
|
||||
let sortable = [];
|
||||
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.sort( function( a, b ) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<img :src="event.logo" alt="event logo" class="ticket-logo">
|
||||
<div class="ticket-name">
|
||||
<h3>{{ event.name }}</h3>
|
||||
<p v-html="event.description"></p>
|
||||
<p v-html="event.shortDescription"></p>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<p>Free seats: {{ event.free }} / {{ event.totalSeats }}</p>
|
||||
@@ -112,6 +112,11 @@
|
||||
res.json().then( dat => {
|
||||
this.events = 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' );
|
||||
}
|
||||
} );
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="container">
|
||||
<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 class="aside">
|
||||
<h3>{{ event.location }}</h3>
|
||||
|
||||
@@ -206,25 +206,20 @@
|
||||
}
|
||||
|
||||
.login {
|
||||
background-color: green;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-app {
|
||||
background-color: var( --background-color );
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
padding: 10% 5%;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5% 5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -241,10 +236,20 @@
|
||||
}
|
||||
|
||||
@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 {
|
||||
width: 50vw;
|
||||
height: min-content;
|
||||
padding: 5% 5%;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.field {
|
||||
|
||||
Reference in New Issue
Block a user