some progress on designing

notes.md

@@ -16,6 +16,7 @@
 - FUTURE: Add Admin profile (page to change account settings per person like changing pwd)
 - FUTURE: add multi-language support
 - FUTURE: Guest purchase
+- FUTURE: Colour for event banner background 
 - FUTURE: add webpack (or any other minifying tool) to project website to decrease file size (OPTIONAL)
 
 

src/webapp/main/src/App.vue

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

src/webapp/main/src/views/admin/HomeView.vue

@@ -35,9 +35,8 @@
         background-color: var( --accent-background );
         width: 40%;
         height: 30vh;
-        border-color: black;
+        border-color: var( --accent-background-hover ); 
-        margin: 0.02%;
+        border-style: solid;
-        border-style: inset;
         color: var( --secondary-color );
         text-decoration: none;
         border-width: 2px;

src/webapp/main/src/views/purchasing/OrderView.vue

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

src/webapp/main/src/views/purchasing/TicketsDetailsView.vue

@@ -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="container">
             <div class="main">
-            <p>{{ event.description }}</p>
+                <p v-html="event.description" style="margin: 0;"></p>
             </div>
-        <aside>
+            <div class="aside">
-            <p>{{ event.location }}</p>
+                <h3>{{ event.location }}</h3>
                 <p>{{ new Date( event.date ).toLocaleString() }}</p>
-        </aside>
+                <router-link to="/tickets/order" class="ticket-button">Order tickets</router-link>
-        <router-link to="/tickets/order">Order tickets</router-link>
+            </div>
+        </div>
     </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;
+        display: block;
-        left: 10px;
+        height: 20vh;
-        top: calc( 87px + 2.5vh );
+        width: 20vh;
-        height: 40vh;
+        margin-bottom: 5%;
     }
 
     .back-button {
@@ -63,10 +67,94 @@
         width: fit-content;
         height: fit-content;
         text-decoration: none;
+        position: fixed;
+        left: 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>
 
 <script>