mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
styling, first start page template
This commit is contained in:
@@ -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