mirror of
https://github.com/janishutz/libreevent.git
synced 2025-11-25 13:24:24 +00:00
some progress on designing
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
|
||||
<template>
|
||||
<nav>
|
||||
<p class="beta">LIBREEVENT BETA! Performance and functionality are expected to change and bugs may appear</p>
|
||||
<!-- <p class="beta">LIBREEVENT BETA! Although this is a very late beta, bugs may still appear</p> -->
|
||||
<a href="/">Home</a> |
|
||||
<router-link to="/tickets">Tickets</router-link> |
|
||||
<router-link to="/cart">Cart</router-link> |
|
||||
@@ -31,6 +31,10 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var( --background-color );
|
||||
}
|
||||
|
||||
:root, :root.light {
|
||||
--primary-color: #2c3e50;
|
||||
--accent-background: rgb(30, 30, 82);
|
||||
@@ -42,45 +46,42 @@
|
||||
--accent-background-hover: rgb(124, 140, 236);
|
||||
--overlay-color: rgba(0, 0, 0, 0.7);
|
||||
--inactive-color: rgb(100, 100, 100);
|
||||
--highlight-backdrop: rgb(143, 134, 192);
|
||||
--hint-color: rgb(174, 210, 221);
|
||||
--PI: 3.14159265358979;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--primary-color: white;
|
||||
--accent-background: rgb(56, 56, 112);
|
||||
--accent-background: rgb(20, 20, 116);
|
||||
--secondary-color: white;
|
||||
--background-color: rgb(32, 32, 32);
|
||||
--popup-color: rgb(58, 58, 58);
|
||||
--accent-color: #42b983;
|
||||
--hover-color: rgb(83, 83, 83);
|
||||
--accent-background-hover: #4380a8;
|
||||
--accent-background-hover: rgb(124, 140, 236);
|
||||
--overlay-color: rgba(104, 104, 104, 0.575);
|
||||
--inactive-color: rgb(190, 190, 190);
|
||||
--highlight-backdrop: rgb(85, 63, 207);
|
||||
--hint-color: rgb(88, 91, 110);
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
:root {
|
||||
--primary-color: white;
|
||||
--accent-background: rgb(56, 56, 112);
|
||||
--accent-background: rgb(20, 20, 116);
|
||||
--secondary-color: white;
|
||||
--background-color: rgb(32, 32, 32);
|
||||
--popup-color: rgb(58, 58, 58);
|
||||
--accent-color: #42b983;
|
||||
--hover-color: rgb(83, 83, 83);
|
||||
--accent-background-hover: #4380a8;
|
||||
--accent-background-hover: rgb(124, 140, 236);
|
||||
--overlay-color: rgba(104, 104, 104, 0.575);
|
||||
--inactive-color: rgb(190, 190, 190);
|
||||
--highlight-backdrop: rgb(85, 63, 207);
|
||||
--hint-color: rgb(88, 91, 110);
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var( --highlight-backdrop );
|
||||
background-color: #7c8cec;
|
||||
color: var( --secondary-color );
|
||||
}
|
||||
|
||||
|
||||
@@ -35,9 +35,8 @@
|
||||
background-color: var( --accent-background );
|
||||
width: 40%;
|
||||
height: 30vh;
|
||||
border-color: black;
|
||||
margin: 0.02%;
|
||||
border-style: inset;
|
||||
border-color: var( --accent-background-hover );
|
||||
border-style: solid;
|
||||
color: var( --secondary-color );
|
||||
text-decoration: none;
|
||||
border-width: 2px;
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<img :src="event.logo" alt="event logo" class="ticket-logo">
|
||||
<div class="ticket-name">
|
||||
<h3>{{ event.name }}</h3>
|
||||
<p>{{ event.description }}</p>
|
||||
<p v-html="event.description"></p>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<p>Free seats: {{ event.free }} / {{ event.totalSeats }}</p>
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
.ticket-logo {
|
||||
height: 20vh;
|
||||
width: auto;
|
||||
width: 20vh;
|
||||
min-width: 20vh;
|
||||
margin-right: 3%;
|
||||
}
|
||||
@@ -84,13 +84,6 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.ticket-logo {
|
||||
height: 20vh;
|
||||
width: auto;
|
||||
min-width: 20vh;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.ticket-name {
|
||||
flex-shrink: 0;
|
||||
margin-right: 3%;
|
||||
|
||||
@@ -9,19 +9,21 @@
|
||||
|
||||
<template>
|
||||
<div class="details">
|
||||
<div class="top-container" :style="`background-image: url( ${ event.banner } ); background-repeat: no-repeat; background-size: cover;`">
|
||||
<div class="top-container" :style="`background-image: url( ${ event.banner } ); background-repeat: no-repeat; background-size: cover; background-position: center;`">
|
||||
<img :src="event.logo" alt="Event Logo" class="event-logo">
|
||||
<h1 class="eventTitle">{{ event.name }}</h1>
|
||||
<router-link to="/tickets" class="back-button"><span class="material-symbols-outlined" style="font-size: 100%;">arrow_back</span></router-link>
|
||||
</div>
|
||||
<div class="main">
|
||||
<p>{{ event.description }}</p>
|
||||
<div class="container">
|
||||
<div class="main">
|
||||
<p v-html="event.description" style="margin: 0;"></p>
|
||||
</div>
|
||||
<div class="aside">
|
||||
<h3>{{ event.location }}</h3>
|
||||
<p>{{ new Date( event.date ).toLocaleString() }}</p>
|
||||
<router-link to="/tickets/order" class="ticket-button">Order tickets</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<aside>
|
||||
<p>{{ event.location }}</p>
|
||||
<p>{{ new Date( event.date ).toLocaleString() }}</p>
|
||||
</aside>
|
||||
<router-link to="/tickets/order">Order tickets</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -35,7 +37,9 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 200%;
|
||||
margin-bottom: 2.5%;
|
||||
}
|
||||
|
||||
.eventTitle {
|
||||
@@ -46,10 +50,10 @@
|
||||
}
|
||||
|
||||
.event-logo {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc( 87px + 2.5vh );
|
||||
height: 40vh;
|
||||
display: block;
|
||||
height: 20vh;
|
||||
width: 20vh;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
@@ -65,7 +69,91 @@
|
||||
text-decoration: none;
|
||||
position: fixed;
|
||||
left: 2vh;
|
||||
top: 2vh;
|
||||
top: calc( 87px + 1vh );
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.aside {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: gray;
|
||||
padding-bottom: 2%;
|
||||
margin-top: 2.5%;
|
||||
}
|
||||
|
||||
.ticket-button {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 5%;
|
||||
width: fit-content;
|
||||
background-color: var( --accent-color );
|
||||
color: var( --secondary-color );
|
||||
transition: all 1s;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.ticket-button:hover {
|
||||
background-color: var( --accent-background-hover );
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
.aside {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: flex-start !important;
|
||||
margin: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.event-logo {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: calc( 87px + 2.5vh );
|
||||
height: 40vh;
|
||||
width: 40vh;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
height: 45vh;
|
||||
flex-direction: row;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: fixed;
|
||||
left: 2vh;
|
||||
top: 2vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user