Responsywność, sidebar

src/components/Order.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="rozkaz">
-    <OrderNVue v-if="orderType == 'N'" />
+    <keep-alive>
-    <OrderSVue v-if="orderType == 'S'" />
+      <component :is="chosenOrderComponent"></component>
+    </keep-alive>
 
     <section class="info">
       <table class="info-table">
@@ -60,12 +61,6 @@ import OrderSVue from './OrderS.vue';
 export default defineComponent({
   components: { OrderNVue, OrderSVue },
 
-  data() {
-    return {
-      orderType: 'N',
-    };
-  },
-
   setup() {
     const store = useStore();
 
@@ -74,6 +69,12 @@ export default defineComponent({
       info: store.orderInfo,
     };
   },
+
+  computed: {
+    chosenOrderComponent() {
+      return this.store.chosenOrderType == 'OrderS' ? OrderSVue : OrderNVue;
+    },
+  },
 });
 </script>
 
@@ -81,13 +82,15 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .rozkaz {
-  width: 500px;
+  max-width: 500px;
   background-color: white;
   color: black;
 
   padding: 0.5em;
   box-shadow: 0 0 15px 2px white;
 
+  font-family: initial;
+
   h2 {
     margin: 0;
     padding: 0;
@@ -98,6 +101,10 @@ export default defineComponent({
     border: 2px solid black;
     border-bottom: none;
   }
+
+  @media screen and (max-width: 550px) {
+   font-size: 3vw;
+  }
 }
 
 .flex-row {
@@ -125,9 +132,9 @@ input {
 }
 
 select {
-  margin-top: 0.5rem;
+  margin-top: 0.5em;
-  margin-right: 0.5rem;
+  margin-right: 0.5em;
-  font-size: 0.8rem;
+  font-size: 0.8em;
 }
 
 .table-section {

src/components/OrderN.vue

@@ -212,6 +212,8 @@ import { useStore } from '../store/store';
 type OrderRowRange = 1 | 2 | 3 | 4 | 5;
 
 export default defineComponent({
+  name: 'OrderN',
+  
   setup() {
     const store = useStore();
     const order = reactive(store.orderN);

src/components/OrderS.vue

@@ -91,6 +91,8 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
 
 export default defineComponent({
+  name: 'OrderS',
+
   setup() {
     const store = useStore();
     return {

src/components/SideBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <section class="sidebar">
+    <div class="sidebar_content">
+      <button
+        v-for="orderType in orderTypeList"
+        :key="orderType.id"
+        @click="selectOrderType(orderType.id)"
+        :data-selected="store.chosenOrderType == orderType.id"
+      >
+        {{ orderType.name }}
+
+        <div class="bar"></div>
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  data() {
+    return {
+      orderTypeList: [
+        {
+          id: 'OrderN',
+          name: 'N',
+        },
+        {
+          id: 'OrderS',
+          name: 'S',
+        },
+        {
+          id: 'OrderO',
+          name: 'O',
+        },
+      ],
+    };
+  },
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    selectOrderType(type: string) {
+      this.store.chosenOrderType = type;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/global.scss';
+
+.sidebar {
+  position: absolute;
+  top: 50%;
+  left: 0;
+
+  transform: translateY(-50%);
+  width: 50px;
+  max-height: 250px;
+  height: 95vh;
+}
+
+.sidebar_content {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  gap: 0.25em;
+
+  font-size: 1.5em;
+  font-weight: bold;
+  height: 100%;
+
+  & > button {
+    position: relative;
+    overflow: hidden;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    background-color: #000000aa;
+
+
+    .bar {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      height: 100%;
+      width: 4px;
+
+      transform: translateX(100%);
+      transition: all 200ms ease-in-out;
+    }
+
+    &[data-selected='true'] .bar {
+      transform: translateX(0);
+
+      background-color: $accentCol;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/order_templates/orders.json

@@ -1,7 +0,0 @@
-{
-    "orderN": {
-        "header": "Rozkaz pisemny \"N\" nr {0} dla pociągu nr {1} dnia {2} {3}r.",
-        "row1": "1. Od {0} do {1} tor nr {2} jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr {3}",
-        "row2": "2. ZEZWALAM po otrzymaniu ${0}"
-    }
-}

src/store/store.ts

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia';
 export const useStore = defineStore('store', {
   state: () => {
     return {
+      chosenOrderType: 'OrderN',
+
       orderInfo: {
         stationName: '',
         checkpointName: '',
@@ -80,10 +82,10 @@ export const useStore = defineStore('store', {
         chosenRows: [1],
 
         header: {
-          orderNo: '',
+          orderNo: '1',
           trainNo: '',
           for: 'pociągu',
-          date: '',
+          date: new Date().toLocaleDateString('pl-PL', { day: '2-digit', month: 'long' }),
         },
 
         row1: {
@@ -116,3 +118,4 @@ export const useStore = defineStore('store', {
 });
 
 
+

src/styles/global.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap');
+
 $bgCol: #313638;
 $accentCol: #0defff;
 
@@ -6,23 +8,31 @@ html {
   padding: 0;
   margin: 0;
   min-height: 100vh;
+
+  font-family: 'Libre Franklin', sans-serif;
 }
 
-button.g-button {
+button {
-  outline: 2px solid white;
   border: none;
+  outline: none;
+  background: none;
+
+  transition: all 150ms ease-in;
+  font-family: 'Libre Franklin', sans-serif;
+
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1em;
+
+  &.g-button {
+    outline: 2px solid white;
     background: none;
     color: white;
 
     text-align: center;
 
     padding: 0.5em;
-
+  }
-  font-size: 1em;
-
-  cursor: pointer;
-  transition: all 150ms ease-in;
-  font-weight: bold;
 
   &:hover {
     color: $accentCol;

src/views/Home.vue

@@ -1,4 +1,6 @@
 <template>
+  <SideBar />
+
   <div class="home">
     <div class="home_container">
       <div class="order_container">
@@ -23,8 +25,9 @@
 import { defineComponent } from 'vue';
 import OrderVue from '../components/Order.vue';
 import { useStore } from '../store/store';
+import SideBar from '../components/SideBar.vue';
 export default defineComponent({
-  components: { OrderVue },
+  components: { OrderVue, SideBar },
 
   setup() {
     return {
@@ -44,11 +47,11 @@ export default defineComponent({
 .home {
   display: flex;
   justify-content: center;
-  align-items: center;
 
   flex-wrap: wrap;
 
   min-height: 100vh;
+  padding: 1em;
 
   overflow-x: auto;
 
@@ -57,17 +60,19 @@ export default defineComponent({
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;
+    margin-top: 1em;
   }
 
   .order_container {
     font-size: 0.9rem;
     margin-right: 0.5em;
+    margin-bottom: 1em;
   }
 }
 
 .message_container {
   padding: 0 1em;
-  width: 500px;
+  max-width: 500px;
 
   h3 {
     margin: 0;