From c2115fb5eb448f31e16a4570442ee88409fef675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20P=C3=ADsa=C5=99?= <adampisar@Adam-MacBook-Air.local>
Date: Tue, 9 Feb 2021 21:05:01 +0100
Subject: [PATCH] card

---
 public/style.css |   5 ++
 src/App.vue      | 144 +++++++++++++++++++++++++----------------------
 2 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/public/style.css b/public/style.css
index e69de29..2bcee63 100644
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,5 @@
+.card {
+    width: 20rem;
+    top: 50px;
+    left: 225px;
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 9df318b..e118ade 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,81 +3,91 @@
     <h1 style="text-align: center;">Letenka</h1>
     <div class="wrapper">
       <div class="col">
-        <h2>Parametry letu</h2>
-        <div>
-          <p>Typ letenky:
-            <select v-model="travelType">
-              <option value="" disabled>vyberte jednu možnost</option>
-              <option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option>
-            </select>
-          </p>
-        </div>
-        <div>
-          <p>Destinace:
-            <select v-model="locationType">
-              <option value="" disabled>vyberte jednu možnost</option>
-              <option v-for="(option, index) in locationTypes" :key="index" :value="option">{{ option.text }}</option>
-            </select>
-          </p>
-        </div>
-        <div>
-          <p>Třída: 
-            <select v-on:change="chosenSeats = []" v-model="classType">
-              <option value="" disabled>vyberte jednu možnost</option>
-              <option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option>
-            </select>
-          </p>
-        </div>
-        <div>
-          <p>
-            <v-date-picker v-model="departureDate" :min-date="new Date()" value="" />
-          </p>
-        </div>
-        <div>
-          <p>
-            <label for="inputPersonCount">Počet cestujcích</label>
-            <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
-          </p>
-        </div>
-        <div class="seatWrap">
-          <div class="seat" v-for="(seat, index) in seats" :key="index">
-            <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">{{ seat }}</div>
-            <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
-              {{ seat }}
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-title">Parametry letu</h4>
+            <div>
+              <p>Typ letenky:
+                <select v-model="travelType">
+                  <option value="" disabled>vyberte jednu možnost</option>
+                  <option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option>
+                </select>
+              </p>
+            </div>
+            <div>
+              <p>Destinace:
+                <select v-model="locationType">
+                  <option value="" disabled>vyberte jednu možnost</option>
+                  <option v-for="(option, index) in locationTypes" :key="index" :value="option">{{ option.text }}</option>
+                </select>
+              </p>
+            </div>
+            <div>
+              <p>Třída: 
+                <select v-on:change="chosenSeats = []" v-model="classType">
+                  <option value="" disabled>vyberte jednu možnost</option>
+                  <option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option>
+                </select>
+              </p>
+            </div>
+            <div>
+              <p>
+                Datum odletu: 
+                <v-date-picker v-model="departureDate" :min-date="new Date()" value="" />
+              </p>
+            </div>
+            <div>
+              <p>
+                <label for="inputPersonCount">Počet cestujcích</label>
+                <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
+              </p>
             </div>
-            <div v-else class="disabled">
-              {{ seat }}
+            <div class="seatWrap">
+              <div class="seat" v-for="(seat, index) in seats" :key="index">
+                <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">{{ seat }}</div>
+                <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+                  {{ seat }}
+                </div>
+                <div v-else class="disabled">
+                  {{ seat }}
+                </div>
+              </div>
             </div>
+            <button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button>
+          </div>
           </div>
         </div>
-        <button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button>
         
-      </div>
-      <div class="col">
-        <h2>Objednavka</h2>
-        <p v-if="travelType">
-          Typ cesty: <span style="text-transform: lowercase;">{{ travelType.text }}</span> 
-        </p>
+        
 
-        <p v-if="locationType">
-          Destinace: <span style="text-transform: lowercase;">{{ locationType.text }}</span>
-        </p>
+      <div class="col">
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-title">Objednavka</h4>
+            <p v-if="travelType">
+              Typ cesty: <span style="text-transform: lowercase;">{{ travelType.text }}</span> 
+            </p>
 
-        <p v-if="classType">
-          Třída: <span style="text-transform: lowercase;">{{ classType.text }}</span>
-        </p>
-        <p>
-          Datum odletu: 
-          {{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }}
-        </p>
-        <p>
-          Počet cestujcích: {{ personCount }}
-        </p>
+            <p v-if="locationType">
+              Destinace: <span style="text-transform: lowercase;">{{ locationType.text }}</span>
+            </p>
 
-        <div v-if="chosenSeats.length">
-          Vybraná místa:
-          <div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div>
-        </div>
+            <p v-if="classType">
+              Třída: <span style="text-transform: lowercase;">{{ classType.text }}</span>
+            </p>
+            <p>
+              Datum odletu: 
+              {{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }}
+            </p>
+            <p>
+              Počet cestujcích: {{ personCount }}
+            </p>
+            <div v-if="chosenSeats.length">
+              Vybraná místa:
+              <div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div>
+            </div>
+          </div>
+        </div>     
       </div>
     </div>
   </div>