Poprawki stylistyczne

src/components/Order.vue

@@ -68,13 +68,12 @@ export default defineComponent({
   background-color: white;
   color: black;
 
+  height: 925px;
   max-height: 95vh;
   overflow: auto;
 
   font-size: 15px;
 
-  box-shadow: 0 0 15px 2px white;
-
   h2 {
     margin: 0;
     padding: 0;

src/components/OrderMessage.vue

@@ -28,11 +28,12 @@ import { useStore } from '../store/store';
 import saveIcon from '../assets/icon-save.svg';
 import orderStorageMixin from '../mixins/orderStorageMixin';
 import orderFooterMixin from '../mixins/orderFooterMixin';
+import orderValidationMixin from '../mixins/orderValidationMixin';
 
 export default defineComponent({
   name: 'OrderMessage',
 
-  mixins: [orderStorageMixin, orderFooterMixin],
+  mixins: [orderStorageMixin, orderValidationMixin],
 
   data() {
     return {
@@ -78,26 +79,13 @@ export default defineComponent({
       }, 5000);
     },
 
-    verifyHeader() {
-      const header = this.store[this.store.chosenOrderType].header;
-      const fieldsToCorrect = [];
-
-      if (!header.orderNo) fieldsToCorrect.push('numer rozkazu');
-      if (!header.trainNo) fieldsToCorrect.push('numer pociągu / manewru');
-      if (!header.date) fieldsToCorrect.push('data');
-
-      return fieldsToCorrect;
-    },
-
     copyMessage() {
       if (!navigator.clipboard)
         return this.showActionMonit(
           'Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/'
         );
 
-      const headerFieldsToCorrect = this.verifyHeader();
-      const footerFieldsToCorrect = this.verifyFooter();
-      const fieldsToCorrect = [...headerFieldsToCorrect, ...footerFieldsToCorrect];
+      const fieldsToCorrect = this.verifyOrderFields();
 
       if (fieldsToCorrect.length > 0)
         return this.showActionMonit(

src/components/OrderO.vue

@@ -193,7 +193,7 @@ th {
 
   display: flex;
   flex-direction: column;
-  height: 250px;
+  height: 285px;
 
   padding: 0.5em;
 

src/components/SideBar.vue

@@ -64,13 +64,13 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .sidebar {
-  position: fixed;
-  top: 50%;
+  position: absolute;
+  top: 0;
   left: 0;
 
   z-index: 999;
 
-  transform: translateY(-50%);
+  transform: translate(-100%, 0);
 }
 
 .sidebar_content {
@@ -91,14 +91,14 @@ export default defineComponent({
     align-items: center;
 
     color: white;
-    background-color: #00000073;
+    background-color: #1d1d1d;
     width: 50px;
     height: 85px;
 
     .bar {
       position: absolute;
       top: 0;
-      right: 0;
+      left: 0;
 
       height: 100%;
       width: 4px;
@@ -118,7 +118,7 @@ export default defineComponent({
     }
 
     &:focus-visible {
-      background-color: #6d6d6d73;
+      background-color: #6d6d6d;
     }
   }
 }
@@ -140,17 +140,18 @@ button.option-save {
   .sidebar {
     left: 50%;
     top: 0;
+    width: 100%;
 
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -100%);
   }
 
   .sidebar_content {
-    grid-template-rows: 1fr;
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    justify-content: space-between;
 
     & > button {
-      height: 60px;
-      width: 60px;
+      height: 40px;
+      width: 100px;
 
       .bar {
         width: 100%;
@@ -160,3 +161,4 @@ button.option-save {
   }
 }
 </style>
+

src/mixins/orderFooterMixin.ts

@@ -9,21 +9,6 @@ export default defineComponent({
   },
 
   methods: {
-    verifyFooter() {
-      const footer = this.store.orderFooter;
-
-      const fieldsToCorrect = [];
-
-      if (!footer.stationName) fieldsToCorrect.push('stacja');
-      if (!footer.checkpointName) fieldsToCorrect.push('posterunek');
-      if (!footer.hour) fieldsToCorrect.push('godzina');
-      if (!footer.minutes) fieldsToCorrect.push('minuta');
-      if (!footer.dispatcherName && !footer.secondaryDispatcherName)
-        fieldsToCorrect.push('dyżurny ruchu (lub z polecenia dyżurnego ruchu)');
-
-      return fieldsToCorrect;
-    },
-
     generateFooter() {
       const footer = this.store.orderFooter;
 

src/mixins/orderValidationMixin.ts

@@ -0,0 +1,32 @@
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    verifyOrderFields() {
+      const header = this.store[this.store.chosenOrderType].header;
+      const footer = this.store.orderFooter;
+
+      const fieldsToCorrect = [];
+
+      if (!header.orderNo) fieldsToCorrect.push('numer rozkazu');
+      if (!header.trainNo) fieldsToCorrect.push('numer pociągu / manewru');
+      if (!header.date) fieldsToCorrect.push('data');
+
+      if (!footer.stationName) fieldsToCorrect.push('stacja');
+      if (!footer.checkpointName) fieldsToCorrect.push('posterunek');
+      if (!footer.hour) fieldsToCorrect.push('godzina');
+      if (!footer.minutes) fieldsToCorrect.push('minuta');
+      if (!footer.dispatcherName && !footer.secondaryDispatcherName)
+        fieldsToCorrect.push('dyżurny ruchu (lub z polecenia dyżurnego ruchu)');
+
+      return fieldsToCorrect;
+    },
+  },
+});

src/views/Home.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- <OrderHelper v-if="store.helperModalOpen" /> -->
-  <SideBar />
 
   <div class="home">
     <div class="home_container">
       <div class="order_container">
+        <SideBar />
         <OrderVue />
       </div>
 
@@ -108,7 +108,7 @@ export default defineComponent({
     width: 100%;
 
     @media screen and (max-width: 650px) {
-      padding-top: 85px;
+      padding-top: 5em;
       padding-bottom: 5em;
     }
   }
@@ -116,6 +116,8 @@ export default defineComponent({
   .order_container {
     width: 100%;
     max-width: 550px;
+    
+    position: relative;
   }
 
   .message_container {