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

@@ -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>

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'">
<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 ) {

View File

@@ -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' );
}
} );

View File

@@ -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>

View File

@@ -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 {