From 75e7a91dd29b3fbfb1392bf8cd81ebe4e469e43a Mon Sep 17 00:00:00 2001
From: Standa Platil <standaplatil@gmail.com>
Date: Mon, 15 Feb 2021 15:02:37 +0100
Subject: [PATCH] css + responzivita

---
 src/App.vue | 517 +++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 372 insertions(+), 145 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fe3ddc1..7f8df63 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,77 +1,146 @@
 <template>
-  <div id="app">
-    <h1>Letenka</h1>
-    <div class="wrapper">
-      <div class="col">
-        <h2>Parametry letu</h2>
-        <p>
-          <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>
-
-        <v-date-picker v-model="departureDate" :min-date="new Date()" />
-
-        <p>
-          <label for="inputPersonCount">Počet cestujících</label><br>
-          <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
-        </p>
-        
-        <p>
-          <label  for="inputClassType">Volba třídy</label><br>
-          <select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
-            <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 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:click="chosenSeats=[]">Odebrat všechna sedadla</button>
-
-      </div>
-
-
-      <div class="col">
-        <h2>Objednávka</h2>
-        <p v-if="travelType">
-            Typ cesty: 
-            <span style="text-transform: lowercase">
-              {{ travelType.text }}
-            </span>
-        </p>
-        <p>
-            Počet cestuijících: {{ personCount }}
-        </p>
-        <p v-if="classType">
-            Typ cesty: 
-            <span style="text-transform: lowercase">
-              {{ classType.text }}
-            </span>
-        </p>
-
-        <div v-if="chosenSeats.length > 0">
-          Vybraná místa:
-          <div class="seat" v-for="seat in chosenSeats" :key="seat">
-            {{ seat }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div id="app">
+			<header>
+				<h1>Letenka</h1>
+			</header>
+			<div class="wrapper">
+				<div class="colInput">
+					<h2 style="color: white; margin: 20px">Parametry letu</h2>
+					<div class="inputWindow">
+						<div class="col">
+
+							<div class="input">
+								<label for="travelType">Cesta</label>
+								<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>
+							</div>
+
+							<div class="input">
+								<label for="chosenDestination">Destinace</label>
+								<select v-model="chosenDestination">
+									<option value="" disabled>Vyberte jednu možnost</option>
+									<option v-for="(option, index) in destinations" :key="index" :value="option">{{ option }}</option>
+								</select>
+							</div>
+
+							<div class="input">
+								<div v-if="travelType.value =='O'">
+									<label for="inputDepartureDate">Označte datum odletu</label>
+									<v-date-picker v-model="departureDate" :min-date="new Date()" value="" />
+								</div>
+								<div v-else>
+									<label for="inputDepartureRangeDate">Označte datum doletu a příletu</label>
+									<v-date-picker v-model="departureRangeDate" :min-date="new Date()" is-range/>
+								</div>
+							</div>
+						</div>
+
+						<div class="col">
+							<div class="input">
+								<label for="inputPersonCount">Počet cestujících</label>
+								<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
+							</div>
+						
+							<div class="input">
+								<label  for="inputClassType">Volba třídy</label>
+								<select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
+									<option value="" disabled>Vyberte jednu možnost</option>
+									<option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option>
+								</select>
+							</div>
+
+							<div class="input">
+								<label for="seat">Zvolte si místa k sezení</label>
+								<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">
+										<img class="seatImg" src="./assets/seat-b.png" alt="">
+										{{ seat }}
+									</div>
+									<div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
+										<img class="seatImg" src="./assets/seat-b.png" alt="">
+										{{ seat }}
+									</div>
+									<div v-else class="disabled">
+										<img class="seatImg" src="./assets/seat-b.png" alt="">
+										{{ seat }}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+
+				<div class="colOrder">
+					<h2 style="margin: 20px">Objednávka</h2>
+					<div class="orderWindow">
+						<div class="col">
+							<table>
+								<tr>
+									<th><label for="travelType">Typ cesty: </label></th>
+									<td>
+										<span style="text-transform: lowercase">
+											{{ travelType.text }}
+										</span>
+									</td>
+								</tr>
+								<tr>
+									<th><label for="chosenDestination">Cílová destinace: </label></th>
+									<td>{{ chosenDestination }}</td>
+								</tr>
+								<tr v-if="travelType.value == 'O'">
+									<th><label for="departureDate">Datum odletu: </label></th>
+									<td>
+										{{departureDate.getDate() }}.{{ (departureDate.getMonth()) + 1 }}.{{ departureDate.getFullYear() }}
+									</td>
+								</tr>
+								<tr v-if="travelType.value == 'R'">
+									<th><label for="departureDate">Datum odletu: </label></th>
+									<td>
+										{{departureRangeDate.start.getDate() }}.{{ (departureRangeDate.start.getMonth()) + 1 }}.{{ departureRangeDate.start.getFullYear() }}
+									</td>
+								</tr>
+								<tr v-if="travelType.value == 'R'">
+									<th><label for="arrivalDate">Datum příletu: </label></th>
+									<td>{{departureRangeDate.end.getDate() }}.{{ (departureRangeDate.end.getMonth()) + 1 }}.{{ departureRangeDate.end.getFullYear() }}</td>
+								</tr>
+								<tr>
+									<th><label for="passengerCount">Počet cestuijících: </label></th>
+									<td>{{ personCount }}</td>
+								</tr>
+								<tr>
+									<th><label for="classType">Třída: </label></th>
+									<td>{{ classType.text }}</td>
+								</tr>
+								<tr>
+									<th><label for="chosenSeats">Vybraná místa: </label></th>
+									<td v-if="chosenSeats.length > 0">
+										<div class="seat" v-for="seat in chosenSeats" :key="seat">
+											{{ seat }}
+										</div>
+									</td>
+								</tr>
+							</table>
+						</div>
+							<div class="col">
+								<div class="cropped">
+									<img class="img" src="./assets/inside.jpg" alt="">
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			<footer>
+				<p>
+					© by Work-in-Progress design, 2021<br>
+					<a href="#">Privacy policy</a><br>
+					<a href="#">Contact us</a>
+				</p>
+				
+			</footer>
+	</div>
 </template>
 
 <script>
@@ -82,82 +151,240 @@ Vue.use(VCalendar, {});
 
 
 export default {
-  name: 'App',
-  data: function() {
-    return{
-      travelType: "",
-      travelTypes: [
-        { value: "R", text: "Zpáteční"},
-        { value: "O", text: "Jednosměrná"}
-      ],
-      personCount: 1,
-      classType: "",
-      classTypes: [
-        {value: "E", text: "Ekonomická"},
-        {value: "B", text: "Byznys"}
-      ],
-      seats: [
-        "B1", "B2", "B3",
-        "E1", "E2", "E3", "E4", "E5" 
-      ],
-      chosenSeats: [],
-      departureDate: new Date()
-    }
-  },
-  methods: {
-    addSeatClick: function(seat) {
-      if (this.chosenSeats.length < this.personCount) {
-        this.chosenSeats.push(seat);
-      }
-      else {
-        alert("Všichni cestující již sedí!")
-      }
-      
-    },
-    personCountChange() {
-      let diff = this.personCount - this.chosenSeats.length
-      if (diff < 0) {
-        for (let i = diff; i < 0 ; i++) {
-          this.chosenSeats.pop() 
-          
-        }
-      }
-    } 
-  }
+	name: 'App',
+	data: function() {
+		return{
+			travelType: "",
+			travelTypes: [
+				{ value: "R", text: "Zpáteční"},
+				{ value: "O", text: "Jednosměrná"}
+			],
+			personCount: 1,
+			classType: "",
+			classTypes: [
+				{value: "E", text: "Ekonomická"},
+				{value: "B", text: "Byznys"}
+			],
+			seats: [
+				"B1", "B2", "B3",
+				"E1", "E2", "E3", "E4", "E5" 
+			],
+			chosenSeats: [],
+			departureDate: new Date(),
+			departureRangeDate: {
+				start: new Date(),
+				end: new Date()
+			},
+			chosenDestination: "",
+			destinations: [
+				"Londýn", "New York", "Moskva"
+			]
+		}
+	},
+	methods: {
+		addSeatClick: function(seat) {
+			if (this.chosenSeats.length < this.personCount) {
+				this.chosenSeats.push(seat);
+			}
+			else {
+				alert("Všichni cestující již sedí!")
+			}
+			
+		},
+		personCountChange() {
+			let diff = this.personCount - this.chosenSeats.length
+			if (diff < 0) {
+				for (let i = diff; i < 0 ; i++) {
+					this.chosenSeats.pop() 
+					
+				}
+			}
+		} 
+	}
 }
 </script>
 
 <style>
-  .wrapper{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .seat{
-    display: inline-block;
-    width: 30px;
-    text-align: center;
-    margin: 2px;
-    border: 1px solid grey;
-  } 
-
-  .seat div:hover{
-    cursor: pointer;
-    background-color: lightgray;
-  }
-
-  .seat .disabled{
-    color: lightgray;
-  }
-
-  .seat .disabled:hover{
-    cursor: default;
-    background-color: transparent;
-  }
-
-  .seat .chosen{
-    background-color: lightgreen;
-  }
+	#app{
+		height: 100vh;
+	}
+
+	body{
+		margin: 0;
+		padding: 0;
+		font-family: Arial, Helvetica, sans-serif;
+		height: 100%;
+		font-size: 75%;
+	}
+
+	h1{
+		margin: 0;
+		padding: 15px 0;
+		padding-left: 15px;
+		font-size: 30px;
+	}
+
+	header{
+		color: white;
+		background-color: #003554;
+		height: 60px;
+	}
+
+
+	.wrapper{
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		height: calc(100% - (55px + 145px));
+	}
+
+	footer{
+		background-color: #003554;
+		height: 150px;
+	}
+
+	footer a, p{
+		color: white;
+		text-decoration: none;
+		text-decoration: underline;
+		padding: 25px;
+		margin: 0;
+	}
+
+	.colInput{
+		background-image: url("./assets/fly.jpg");
+	}
+
+	.col{
+		margin: 10px;
+	}
+
+	.inputWindow{
+		margin: 0 auto;
+		width: 85%;
+		background-color: whitesmoke;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		box-shadow: 5px 5px 10px, -1px -1px 10px;
+		
+	}
+
+	.orderWindow{
+		margin: 0 auto;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
+
+	.input{
+		margin-bottom: 5px;
+	}
+
+	.input label,select,div{
+		display: block;
+	}
+
+	.input label{
+		color: lightslategrey;
+	}
+
+	select{
+		width: 200px;
+		height: 30px;
+	}
+
+	.seatImg{
+		width: 50px;
+	}
+
+	.seat{
+		display: inline-block;
+		width: 30px;
+		text-align: center;
+		margin-left: 20px;
+		margin-right: 20px;
+
+	}
+
+	.seat div:hover{
+		cursor: pointer;
+		background-color: lightgray;
+	}
+
+	.seat .disabled{
+		color: lightgray;
+	}
+
+	.seat .disabled:hover{
+		cursor: default;
+		background-color: transparent;
+	}
+
+	.seat .chosen{
+		background-color: lightgreen;
+	}
+
+
+	.colOrder{
+		background-color: rgb(211, 231, 250);
+	}
+
+	.img{
+		width: 400px;
+		margin-right: 30px;
+	}
+
+	th{
+		color: gray;
+		text-align: left;
+		padding-bottom: 5px;
+	}
+
+	td{
+		padding-bottom: 5px;
+		padding-left: 10px;
+		font-weight: bold;
+	}
+
+	td .seat{
+		width: 15px;
+		margin-left: 5px;
+		margin-right: 5px;
+	}
+
+
+
+
+
+	@media only screen and (max-width: 1440px){
+		#app{
+			height: 100%;
+		}
+
+		.inputWindow{
+			grid-template-columns: 1fr;
+			margin-bottom: 30px;
+		}
+
+		.input{
+			float: none;
+		}
+
+		.orderWindow{
+			grid-template-columns: 1fr;
+		}
+	}
+
+	@media only screen and (max-width: 922px){
+
+		.wrapper{
+			grid-template-columns: 1fr;
+		}
+
+		.cropped{
+			width: 250px;
+			height: 300px;
+			overflow: hidden;
+		}
+	}
 
 
 </style>