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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 517
      src/App.vue

517
src/App.vue
View File

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

Write Preview
Loading…
Cancel
Save