android app almost done, start designing

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

@@ -64,7 +64,7 @@
     }
 
     .cart-list {
-        width: 50%;
+        width: 90%;
     }
     
     ul {
@@ -89,6 +89,12 @@
     .tickets-table {
         margin-left: 3%;
     }
+
+    @media only screen and (min-width: 999px) {
+        .cart-list {
+            width: 50%;
+        }
+    }
 </style>
 
 <script>

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

@@ -14,6 +14,7 @@
             <ul>
                 <li v-for="event in orderedEvents">
                     <router-link to="/tickets/details" class="ticket" @click="setActiveTicket( event.eventID );">
+                        <img :src="event.logo" alt="event logo" class="ticket-logo">
                         <div class="ticket-name">
                             <h3>{{ event.name }}</h3>
                             <p>{{ event.description }}</p>
@@ -23,7 +24,6 @@
                             <p>{{ event.locationName }}, {{ event.dateString }}</p>
                             <h4>Starting at {{ event.currency }} {{ event.startingPrice }}</h4>
                         </div>
-                        <img :src="event.logo" alt="event logo" class="ticket-logo">
                     </router-link>
                 </li>
             </ul>
@@ -52,6 +52,7 @@
     .ticket {
         display: flex;
         align-items: center;
+        flex-shrink: 0;
         justify-content: center;
         text-decoration: none;
         color: var( --primary-color );
@@ -61,6 +62,14 @@
         border-style: solid;
         padding: 10px;
         transition: 0.4s;
+        flex-direction: column;
+    }
+
+    .ticket-logo {
+        height: 20vh;
+        width: auto;
+        min-width: 20vh;
+        margin-right: 3%;
     }
 
     .ticket:hover {
@@ -68,20 +77,38 @@
         transition: 0.4s;
     }
 
-    .ticket-logo {
-        height: 20vh;
-        width: auto;
-        margin-left: auto;
-    }
-
     .ticket-name {
-        margin-right: auto;
-        max-width: 35%;
+        text-align: center;
     }
 
     .ticket-info {
-        margin-left: auto;
-        margin-right: auto
+        text-align: center;
+    }
+
+    @media only screen and (min-width: 999px) {
+
+        .ticket {
+            flex-direction: row;
+        }
+
+        .ticket-logo {
+            height: 20vh;
+            width: auto;
+            min-width: 20vh;
+            margin-left: 3%;
+        }
+
+        .ticket-name {
+            flex-shrink: 0;
+            margin-right: 3%;
+            width: 40%;
+            text-align: justify;
+        }
+
+        .ticket-info {
+            margin-right: auto;
+            text-align: justify;
+        }   
     }
 </style>
 

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

@@ -14,59 +14,31 @@
             <div v-if="!isAuthenticated" class="wrapper-buttons">
                 <router-link to="/login" class="option-button" @click="setRedirect()">Log in with an existing account</router-link><br>
                 <router-link to="/signup" class="option-button" @click="setRedirect()">Create new account</router-link><br>
-                <router-link to="/guest" v-if="!settings.accountRequired" class="option-button" @click="setRedirect()">Purchase as guest</router-link>
+                <!-- <router-link to="/guest" v-if="!settings.accountRequired" class="option-button" @click="setRedirect()">Purchase as guest</router-link> -->
             </div>
             <div v-else class="wrapper">
-                <div class="data">
-                    <h2>Purchase</h2>
-                    <p>Ready to buy? Please once again check that all the right items are in your cart.</p>
-                    <!--<h2>Billing</h2>
-                    <table class="billing-info-table">
-                        <tr v-if="settings.requiresAddress">
-                            <td>Street and house number</td>
-                            <td><input type="text" name="street" id="street" v-bind="userData.street" placeholder="Street"> <input type="text" name="houseNumber" id="houseNumber" v-bind="userData.houseNumber" placeholder="House number"></td>
-                        </tr>
-                        <tr v-if="settings.requiresAddress">
-                            <td>Zip Code and City</td>
-                            <td><input type="text" name="zip" id="zip" v-bind="userData.zip" placeholder="Zip Code"> <input type="text" name="city" id="city" v-bind="userData.city" placeholder="City"></td>
-                        </tr>
-                        <tr v-if="settings.requiresAddress">
-                            <td>Country</td>
-                            <td><input type="text" name="country" id="country" v-bind="userData.zip" placeholder="Country"></td>
-                        </tr>
-                        <tr v-if="settings.requiresAge">
-                            <td>Birth date</td>
-                            <td><input type="date" name="bday" id="bday" v-bind="userData.bday"></td>
-                        </tr>
-                    </table>
-
-                    <div v-if="settings.requiresSpecialToken">
-                        TODO: FUTURE: Implement
-                    </div> -->
-                    <button id="buy-button" @click="preparePayment();">Buy now</button>
-                </div>
-                <div class="cart">
-                    <div class="cart-list">
-                        <h2>Order summary</h2>
-                        <h3>Your tickets</h3>
-                        <div v-for="event in cart">
-                            <h3>{{ event.displayName }}</h3>
-                            <table class="tickets-table">
-                                <tr v-for="ticket in event.tickets">
-                                    <td>
-                                        <h4 class="price"><div style="display: inline;" v-if="ticket.count">{{ ticket.count }}x</div> {{ ticket.displayName }}: </h4>
-                                    </td>
-                                    <td>
-                                        {{ backend.currency }} {{ ticket.price }}
-                                    </td>
-                                </tr>
-                            </table>
-                        </div>
-                        <div class="tool-wrapper wrapper-loggedIn">
-                            <h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
-                        </div>
+                <p>Ready to buy? Please once again check that all the right items are in your cart.</p>
+                <div class="cart-list">
+                    <h2>Order summary</h2>
+                    <h3>Your tickets</h3>
+                    <div v-for="event in cart">
+                        <h3>{{ event.displayName }}</h3>
+                        <table class="tickets-table">
+                            <tr v-for="ticket in event.tickets">
+                                <td>
+                                    <h4 class="price"><div style="display: inline;" v-if="ticket.count">{{ ticket.count }}x</div> {{ ticket.displayName }}: </h4>
+                                </td>
+                                <td>
+                                    {{ backend.currency }} {{ ticket.price }}
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="tool-wrapper wrapper-loggedIn">
+                        <h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
                     </div>
                 </div>
+                <button id="buy-button" @click="preparePayment();">Buy now</button>
             </div>
         </div>
         <div v-else>
@@ -111,10 +83,6 @@
     .purchase-app {
         text-align: justify;
         width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-grow: 1;
     }
 
     
@@ -124,36 +92,20 @@
         border-radius: 20px;
         padding: 6% 7%;
         display: block;
-        width: 100%;
+        width: 60%;
         text-align: center;
         margin: 0.5%;
         color: var( --primary-color );
         text-decoration: none;
-    }
-
-    .data {
-        grid-area: main;
-        display: flex;
-        justify-content: justify;
-        align-items: center;
-        flex-direction: column;
-        flex-grow: 1;
-    }    
+    }  
     
     .option-button:hover {
         background-color: var( --hover-color );
         color: var( --secondary-color )
     }
-    
-    .cart {
-        grid-area: sidebar;
-        background-color: var( --accent-background );
-        color: var( --secondary-color );
-        overflow: scroll;
-    }
 
     .wrapper-buttons {
-        width: 40%;
+        width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
@@ -163,25 +115,15 @@
 
     .wrapper {
         width: 100%;
-        display: grid;
-        height: 100%;
-        grid-template-areas:
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar'
-        'main main main sidebar';
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
     .cart-list {
         width: 100%;
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
     }