stanislav.platil
/
letenka
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

css + responzivita

master
Stanislav Platil 4 years ago
parent
f00184dc4d
commit
75e7a91dd2
1 changed files with 372 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 293
      src/App.vue

293
src/App.vue
View File

@ -1,77 +1,146 @@
<template> <template>
<div id="app"> <div id="app">
<header>
<h1>Letenka</h1> <h1>Letenka</h1>
</header>
<div class="wrapper"> <div class="wrapper">
<div class="colInput">
<h2 style="color: white; margin: 20px">Parametry letu</h2>
<div class="inputWindow">
<div class="col"> <div class="col">
<h2>Parametry letu</h2>
<p>
<div class="input">
<label for="travelType">Cesta</label>
<select v-model="travelType"> <select v-model="travelType">
<option value="" disabled>Vyberte jednu možnost</option> <option value="" disabled>Vyberte jednu možnost</option>
<option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option> <option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option>
</select> </select>
</p>
</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>
<v-date-picker v-model="departureDate" :min-date="new Date()" />
<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>
<p>
<label for="inputPersonCount">Počet cestujících</label><br>
<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"> <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
</p>
</div>
<p>
<label for="inputClassType">Volba třídy</label><br>
<div class="input">
<label for="inputClassType">Volba třídy</label>
<select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType"> <select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
<option value="" disabled>Vyberte jednu možnost</option> <option value="" disabled>Vyberte jednu možnost</option>
<option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option> <option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option>
</select> </select>
</p>
</div>
<div class="seatWrap">
<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 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"> <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 }} {{ seat }}
</div> </div>
<div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)"> <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
<img class="seatImg" src="./assets/seat-b.png" alt="">
{{ seat }} {{ seat }}
</div> </div>
<div v-else class="disabled"> <div v-else class="disabled">
<img class="seatImg" src="./assets/seat-b.png" alt="">
{{ seat }} {{ seat }}
</div> </div>
</div> </div>
</div> </div>
<button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
</div>
</div>
</div> </div>
<div class="colOrder">
<h2 style="margin: 20px">Objednávka</h2>
<div class="orderWindow">
<div class="col"> <div class="col">
<h2>Objednávka</h2>
<p v-if="travelType">
Typ cesty:
<table>
<tr>
<th><label for="travelType">Typ cesty: </label></th>
<td>
<span style="text-transform: lowercase"> <span style="text-transform: lowercase">
{{ travelType.text }} {{ travelType.text }}
</span> </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:
</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"> <div class="seat" v-for="seat in chosenSeats" :key="seat">
{{ seat }} {{ seat }}
</div> </div>
</td>
</tr>
</table>
</div> </div>
<div class="col">
<div class="cropped">
<img class="img" src="./assets/inside.jpg" alt="">
</div> </div>
</div> </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> </template>
<script> <script>
@ -101,7 +170,15 @@ export default {
"E1", "E2", "E3", "E4", "E5" "E1", "E2", "E3", "E4", "E5"
], ],
chosenSeats: [], chosenSeats: [],
departureDate: new Date()
departureDate: new Date(),
departureRangeDate: {
start: new Date(),
end: new Date()
},
chosenDestination: "",
destinations: [
"Londýn", "New York", "Moskva"
]
} }
}, },
methods: { methods: {
@ -128,17 +205,103 @@ export default {
</script> </script>
<style> <style>
#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{ .wrapper{
display: grid; display: grid;
grid-template-columns: 1fr 1fr; 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{ .seat{
display: inline-block; display: inline-block;
width: 30px; width: 30px;
text-align: center; text-align: center;
margin: 2px;
border: 1px solid grey;
margin-left: 20px;
margin-right: 20px;
} }
.seat div:hover{ .seat div:hover{
@ -160,4 +323,68 @@ export default {
} }
.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> </style>

Write Preview
Loading…
Cancel
Save