Poprawki kompatybilności

src/App.vue

@@ -8,7 +8,6 @@
 @import './styles/global.scss';
 
 #app {
-  background-color: $bgCol;
   color: white;
 
   min-height: 100vh;

src/components/Order.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="order">
-    <transition name="order-anim" mode="out-in">
+    <div class="order_content">
-      <keep-alive>
+      <transition name="order-anim" mode="out-in">
-        <component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
+        <keep-alive>
-      </keep-alive>
+          <component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
-    </transition>
+        </keep-alive>
-
+      </transition>
-    <OrderFooter />
+      <OrderFooter />
+    </div>
   </div>
 </template>
 
@@ -49,15 +50,34 @@ export default defineComponent({
 <style lang="scss">
 @import '../styles/global.scss';
 
+// Order scrollbar
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #fff;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
+
 .order {
-  max-width: 500px;
+  max-width: 550px;
   background-color: white;
   color: black;
 
-  padding: 0.5em;
+  max-height: 95vh;
-  box-shadow: 0 0 15px 2px white;
+  overflow-y: auto;
 
-  font-family: initial;
+  font-size: 15px;
+
+  box-shadow: 0 0 15px 2px white;
 
   h2 {
     margin: 0;
@@ -75,6 +95,10 @@ export default defineComponent({
   }
 }
 
+.order_content {
+  padding: 0.5em;
+}
+
 .flex-row {
   display: flex;
   justify-content: space-between;

src/components/OrderO.vue

@@ -23,7 +23,7 @@
     </section>
 
     <section class="order_table">
-      <table>
+      <table cellborder="1">
         <tbody>
           <tr class="tr-header">
             <td width="25%" rowspan="2">
@@ -34,14 +34,14 @@
             <td>do</td>
             <td width="10%" rowspan="2">1) prędkość najwyżej km/h</td>
             <td width="10%" rowspan="2">2) jechać ostrożnie</td>
-            <td width="25%" rowspan="2">z powodu</td>
+            <td width="35%" rowspan="2">z powodu</td>
           </tr>
 
           <tr class="tr-header">
             <td colspan="2">kilometra</td>
           </tr>
 
-          <tr v-for="row in order.orderList">
+          <tr v-for="row in order.orderList" class="tr-data">
             <td>
               <input type="text" v-model="row.name" />
             </td>
@@ -131,8 +131,7 @@ export default defineComponent({
         }
       }
 
-      if(this.order.other)
+      if (this.order.other) message += `; ${this.order.other}`;
-        message += `; ${this.order.other}`
 
       this.store.orderMessage = message;
     },
@@ -161,11 +160,16 @@ th {
   background-color: black;
   margin: 0.5em 0;
 }
+
 .order_table {
   .tr-header td {
     padding: 1em 0.5em;
   }
 
+  .tr-data td {
+    padding: 0.5em 0;
+  }
+
   tbody {
     font-weight: normal;
     text-align: center;
@@ -177,9 +181,9 @@ th {
   }
 
   textarea {
-    resize: none;
+    width: 80%;
-    height: 100%;
+    height: 40px;
-    width: 90%;
+    resize: vertical;
   }
 }
 
@@ -187,14 +191,16 @@ th {
   border-left: 2px solid black;
   border-right: 2px solid black;
 
+  display: flex;
+  flex-direction: column;
   height: 250px;
 
   padding: 0.5em;
 
   textarea {
     resize: vertical;
-    max-height: 220px;
+    height: 220px;
-    width: 98%;
+    width: 95%;
   }
 }
 </style>

src/components/OrderS.vue

@@ -249,7 +249,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 textarea {
   width: 95%;
   height: 200px;

src/components/SideBar.vue

@@ -56,14 +56,13 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .sidebar {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 0;
 
+  z-index: 999;
+
   transform: translateY(-50%);
-  width: 50px;
-  max-height: 250px;
-  height: 95vh;
 }
 
 .sidebar_content {
@@ -85,7 +84,8 @@ export default defineComponent({
 
     color: white;
     background-color: #000000aa;
-
+    width: 50px;
+    height: 85px;
 
     .bar {
       position: absolute;
@@ -110,4 +110,28 @@ export default defineComponent({
     }
   }
 }
+
+@media screen and (max-width: 650px) {
+  .sidebar {
+    left: 50%;
+    top: 0;
+
+    transform: translate(-50%, 0);
+  }
+
+  .sidebar_content {
+    grid-template-rows: 1fr;
+    grid-template-columns: repeat(3, 1fr);
+
+    & > button {
+      height: 50px;
+      width: 60px;
+
+      .bar {
+        width: 100%;
+        height: 4px;
+      }
+    }
+  }
+}
 </style>

src/styles/global.scss

@@ -8,8 +8,10 @@ html {
   padding: 0;
   margin: 0;
   min-height: 100vh;
+  background-color: $bgCol;
 
   font-family: 'Libre Franklin', sans-serif;
+  font-weight: 500;
 }
 
 button {
@@ -43,3 +45,28 @@ button {
     color: $accentCol;
   }
 }
+
+select {
+  border: 2px solid black;
+  background: none;
+  padding: 0.1em 0;
+  border-radius: 0.3em;
+  text-align: center;
+}
+
+// Global scrollbar
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #333;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}

src/views/Home.vue

@@ -51,13 +51,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .home {
-  display: flex;
-  justify-content: center;
-
-  flex-wrap: wrap;
-
   min-height: 100vh;
-  padding: 1em;
 
   overflow-x: auto;
 
@@ -67,17 +61,25 @@ export default defineComponent({
     align-items: flex-start;
     justify-content: center;
     margin-top: 1em;
+
+    @media screen and (max-width: 650px) {
+      margin-top: 60px;
+    }
   }
 
   .order_container {
     font-size: 0.9rem;
     margin-right: 0.5em;
     margin-bottom: 1em;
+
+    @media screen and (max-width: 550px) {
+      margin: 0.5em;
+    }
   }
 }
 
 .message_container {
-  padding: 0 1em;
+  padding: 1em;
   width: 500px;
 
   h3 {
@@ -88,7 +90,6 @@ export default defineComponent({
 
   button {
     margin: 0 0.5em;
-    font-size: 0.85em;
   }
 
   @media screen and (max-width: 550px) {