petr.plachy
/
letenka
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

responzivita

master
petr 4 years ago
parent
5a5258345b
commit
d45ad77f8f
1 changed files with 306 additions and 32 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. 338
      src/App.vue

338
src/App.vue
View File

@ -21,18 +21,34 @@
<!-- volba destinace --> <!-- volba destinace -->
<p>
<select v-model="travelDestinaction">
<option value="" disabled>Vyberte jednu možnost</option>
<option v-for="(option, index) in travelDestinactions" :key="index" :value="option">
{{ option.text }}
</option>
</select>
</p>
<!-- datum odletu --> <!-- datum odletu -->
<v-date-picker v-model="departuredate" :min-date="new Date()" value=""/>
<div v-if="travelType.value == 'O'" class="input-group">
<label for="inputDepartureDate">Označte datum odletu</label>
<v-date-picker v-model="departureRangeDate" :min-date="new Date()" value=""/>
</div>
<div v-else class="input-group">
<label for="inputDepartureRangeDate"> Označte datum příletu a odletu</label>
<v-date-picker v-model="departureRangeDate" is-range />
<!-- datum příletu pokud zpáteční --> <!-- datum příletu pokud zpáteční -->
</div>
</div> </div>
<div class="hlavni2"> <div class="hlavni2">
<p> <p>
<label for="inputPersonCount">Počet cestujících</label><br> <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">
<input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
</p> </p>
<!-- volba třídy E, B --> <!-- volba třídy E, B -->
@ -71,40 +87,52 @@
</div> </div>
<div class="col"> <div class="col">
<div class="druha">
<h2>Objednávka</h2>
<p v-if="travelType">
Typ cesty:
<span style="text-transform: lowercase">
{{ travelType.text }}
</span>
</p>
<p>
Počet cestujích: {{ personCount}}
</p>
<p v-if="classType">
Třída:
<span style="text-transform: lowercase">
{{ classType.text }}
</span>
</p>
<div v-if="chosenSeats.length">
Vybraná místa:
<div class="sedadlo">
<div class="seat" v-for="seat in chosenSeats" :key="seat">
{{ seat }}
<img class="obr" src="./assets/sedadlo.png" alt="">
<div class="hlavni1">
<div class="hlavni2">
<h2>Objednávka</h2>
<p v-if="travelType">
Typ cesty:
<span style="text-transform: lowercase">
{{ travelType.text }}
</span>
</p>
<p v-if="travelDestinaction">
Cílová destinace
<span style="text-transform: lowercase">
{{ travelDestinaction.text }}
</span>
</p>
<p>
Počet cestujích: {{ personCount}}
</p>
<p v-if="classType">
Třída:
<span style="text-transform: lowercase">
{{ classType.text }}
</span>
</p>
<div v-if="chosenSeats.length">
Vybraná místa:
<div class="sedadlo">
<div class="seat" v-for="seat in chosenSeats" :key="seat">
{{ seat }}
<img class="obr" src="./assets/sedadlo.png" alt="">
</div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -122,6 +150,11 @@ export default {
name: 'App', name: 'App',
data: function() { data: function() {
return { return {
travelDestinaction: "",
travelDestinactions: [
{ value: "P", text: "Paris" },
{ value: "L", text: "London" },
],
travelType: "", travelType: "",
@ -210,10 +243,9 @@ export default {
background-color: lightgreen; background-color: lightgreen;
} }
.col{ .col{
width: 70%;
width: 90%;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
margin: 0 left;
opacity: 0.8;
opacity: 0.99;
} }
.hlavni{ .hlavni{
@ -225,6 +257,7 @@ export default {
.hlava{ .hlava{
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
text-align: center;
} }
#app{ #app{
background-image: url("./assets/leta.jpeg"); background-image: url("./assets/leta.jpeg");
@ -248,9 +281,250 @@ export default {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
}
@media (max-width: 1200px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
} }
@media (max-width: 500px) {
.seat {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid gray;
margin: 2px;
background-color: rgb(62, 156, 53);
}
.seat div:hover {
cursor: pointer;
background-color: lightgray;
}
.seat .disabled {
color: rgb(255, 255, 255);
}
.seat .disabled:hover {
cursor: default;
background-color: transparent;
}
.seat .chosen {
background-color: lightgreen;
}
.col{
width: 80%;
background-color: rgb(255, 255, 255);
opacity: 0.99;
}
.hlavni{
width: 90%;
margin: 0 auto;
background-color: white;
}
.hlava{
width: 90%;
margin: 0 auto;
text-align: center;
}
#app{
background-image: url("./assets/leta.jpeg");
}
.obr{
width: 30px;
}
h1,h2,h3,p {
font-family: Arial, Helvetica, sans-serif;
}
.druha{
width: 30%;
float: left;
}
.col1{
width: 100%;
}
.hlavni2{
width: 80%;
margin: 0 auto;
}
}
@media (max-width: 800px) {
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
.seat {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid gray;
margin: 2px;
background-color: rgb(62, 156, 53);
}
.seat div:hover {
cursor: pointer;
background-color: lightgray;
}
.seat .disabled {
color: rgb(255, 255, 255);
}
.seat .disabled:hover {
cursor: default;
background-color: transparent;
}
.seat .chosen {
background-color: lightgreen;
}
.col{
width: 80%;
background-color: rgb(255, 255, 255);
opacity: 0.99;
min-height: 100px;
}
.hlavni{
width: 90%;
margin: 0 auto;
background-color: white;
}
.hlava{
width: 100%;
margin: 0 auto;
text-align: center;
}
#app{
background-image: url("./assets/leta.jpeg");
}
.obr{
width: 30px;
}
h1,h2,h3,p {
font-family: Arial, Helvetica, sans-serif;
}
.druha{
width: 30%;
float: left;
}
.col1{
width: 80%;
background-color: rgb(255, 255, 255);
opacity: 0.99;
}
.hlavni2{
width: 50%;
margin: 0 auto;
background-color: white;
}
}
@media (max-width: 500px) {
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
.seat {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid gray;
margin: 2px;
background-color: rgb(62, 156, 53);
}
.seat div:hover {
cursor: pointer;
background-color: lightgray;
}
.seat .disabled {
color: rgb(255, 255, 255);
}
.seat .disabled:hover {
cursor: default;
background-color: transparent;
}
.seat .chosen {
background-color: lightgreen;
}
.col{
width: 100%;
background-color: rgb(255, 255, 255);
opacity: 0.99;
min-height: 100px;
}
.hlavni{
width: 90%;
margin: 0 auto;
background-color: white;
}
.hlava{
width: 100%;
margin: 0 auto;
text-align: center;
}
#app{
background-image: url("./assets/leta.jpeg");
}
.obr{
width: 30px;
}
h1,h2,h3,p {
font-family: Arial, Helvetica, sans-serif;
}
.druha{
width: 30%;
float: left;
}
.col1{
width: 100%;
background-color: rgb(255, 255, 255);
opacity: 0.99;
}
.hlavni2{
width: 50%;
margin: 0 auto;
background-color: white;
}
} }

Write Preview
Loading…
Cancel
Save