From d45ad77f8f2a63eea40f8c822ee9ef818d31e755 Mon Sep 17 00:00:00 2001
From: petr <p.plachy2@seznam.cz>
Date: Tue, 9 Feb 2021 10:48:42 +0100
Subject: [PATCH] responzivita

---
 src/App.vue | 338 +++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 306 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 984a587..fa8237a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,18 +21,34 @@
                         
                             
                             <!-- 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 -->
+                            
                         
                         
-                            <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í -->
+                            </div>
                         </div>
                         <div class="hlavni2">
                             <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">
+                                <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
                             </p>
                             
                             <!-- volba třídy E, B -->
@@ -71,38 +87,50 @@
                 </div>
 
                 <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>
@@ -122,6 +150,11 @@ export default {
   name: 'App',
   data: function() {
       return {
+          travelDestinaction: "",
+          travelDestinactions: [
+              { value: "P", text: "Paris" },
+              { value: "L", text: "London" },
+          ],
          
           
           travelType: "",
@@ -210,10 +243,9 @@ export default {
       background-color: lightgreen;
   }
   .col{
-      width: 70%;
+      width: 90%;
       background-color: rgb(255, 255, 255);
-      margin: 0 left;
-        opacity: 0.8;
+        opacity: 0.99;
   }
 
   .hlavni{
@@ -225,6 +257,82 @@ export default {
   .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%;
+  }
+  .hlavni2{
+      width: 80%;
+      margin: 0 auto;
+
+  }
+  @media (max-width: 1200px) {
+     .wrapper {
+    display: grid;
+    grid-template-columns: 1fr 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;
+  }
+
+  .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");
@@ -247,10 +355,176 @@ export default {
   .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);
   }
 
-  @media (max-width: 500px) {
+  .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;
+
+  }
     
     
 }