Poprawki responsywności

src/App.scss

@@ -45,7 +45,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.5rem + 1.3vw);
+    font-size: calc(0.55rem + 1vw);
   }
 }
 

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -64,6 +64,7 @@ export default defineComponent({
   justify-content: center;
 
   flex-wrap: wrap;
+  gap: 0.5em;
 
   .dispatcher {
     font-size: 2em;
@@ -82,17 +83,15 @@ export default defineComponent({
     }
 
     &_name {
-      margin-right: 0.4em;
       cursor: pointer;
+      margin-right: 0.25em;
     }
 
     &_likes {
       img {
         height: 0.7em;
-        margin-right: 0.25em;
+        margin: 0 0.25em;
       }
-
-      margin-right: 1.5em;
     }
   }
 

src/components/SceneryView/SceneryTimetable.vue

@@ -10,11 +10,17 @@
         <span class="text--grayed">
           {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
         </span>
+        <!-- 
+        <button class="btn--image" v-if="!timetableOnly">
+          <a :href="`${$route.path}?station=${$route.query.station}&timetableOnly=1`">
+            <img :src="getIcon('view')" alt="View image" />
+          </a>
+        </button> -->
       </h3>
 
       <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
         <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
-          {{ i > 0 && '&bull;' || '' }}
+          {{ (i > 0 && '&bull;') || '' }}
 
           <button
             :key="cp.checkpointName"
@@ -185,6 +191,10 @@ export default defineComponent({
       type: Object as PropType<Station>,
       required: true,
     },
+
+    timetableOnly: {
+      type: Boolean,
+    },
   },
 
   data: () => ({
@@ -252,6 +262,10 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
+
+    showTimetableOnlyView() {
+      this.$router.push(`${this.$route.fullPath}&timetableOnly=1`);
+    },
   },
 
   mounted() {
@@ -295,7 +309,7 @@ export default defineComponent({
   h3 {
     display: flex;
     align-items: center;
-    font-size: 1.4em;
+    font-size: 1.3em;
   }
 }
 

src/router/index.ts

@@ -18,7 +18,6 @@ const routes: Array<RouteRecordRaw> = [
     path: '/scenery',
     name: 'SceneryView',
     component: () => import('../views/SceneryView.vue'),
-    props: true,
   },
   {
     path: '/journal',

src/styles/global.scss

@@ -250,66 +250,6 @@ button.btn--image {
   }
 }
 
-// .btn {
-//   background: none;
-//   cursor: pointer;
-//   font-size: 1em;
-
-//   &--text {
-//     background: none;
-//     color: white;
-
-//     transition: color 0.3s;
-
-//     &:hover:not(:disabled),
-//     &:focus:not(:disabled) {
-//       color: $accentCol;
-//     }
-
-//     &.checked {
-//       color: var(--clr-primary);
-//       font-weight: bold;
-//     }
-//   }
-
-//   &--image {
-//     display: flex;
-
-//     padding: 0.4em 1em;
-//     font-weight: bold;
-//     font-size: 1em;
-
-//     border-radius: 0.75em 0.75em 0 0;
-//     background-color: #1b1b1b;
-
-//     img {
-//       height: 1.3em;
-//       margin-right: 0.5rem;
-//     }
-//   }
-
-//   &--option {
-//     cursor: pointer;
-
-//     color: white;
-//     background-color: #333;
-
-//     border-radius: 0.25em;
-//     padding: 0.25em 0.5em;
-
-//     &.checked {
-//       color: var(--clr-primary);
-//       font-weight: bold;
-
-//       background-color: #3c3c3c;
-//     }
-//   }
-
-//   &:disabled {
-//     opacity: 0.65;
-//   }
-// }
-
 .return-btn {
   display: none;
   justify-content: center;

src/views/SceneryView.vue

@@ -8,16 +8,16 @@
       </action-button>
     </div>
 
-    <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
+    <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper" :data-timetable-only="timetableOnly">
-      <div class="scenery-left">
+      <div class="scenery-left" v-if="!timetableOnly">
         <div class="scenery-actions">
-          <button v-if="!timetableOnly" class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
+          <button class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
             <img :src="getIcon('back')" alt="Back to scenery" />
           </button>
         </div>
 
         <SceneryHeader :station="stationInfo" />
-        <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
+        <SceneryInfo :station="stationInfo" />
       </div>
 
       <div class="scenery-right">
@@ -33,7 +33,12 @@
         </div>
 
         <keep-alive>
-          <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
+          <component
+            :is="currentViewCompontent"
+            :station="stationInfo"
+            :timetableOnly="timetableOnly"
+            :key="currentViewCompontent"
+          ></component>
         </keep-alive>
       </div>
     </div>
@@ -41,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { useRoute } from 'vue-router';
 import routerMixin from '../mixins/routerMixin';
 import { useStore } from '../store/store';
@@ -68,7 +73,9 @@ export default defineComponent({
     SceneryTimetablesHistory,
     SceneryDispatchersHistory,
   },
+
   mixins: [routerMixin, imageMixin],
+
   data: () => ({
     viewModes: [
       {
@@ -89,17 +96,22 @@ export default defineComponent({
     currentViewCompontent: 'SceneryTimetable',
     onlineFrom: -1,
   }),
+
   activated() {
     this.loadSelectedCheckpoint();
   },
+
   setup() {
     const route = useRoute();
     const store = useStore();
-    const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
+
+    const timetableOnly = computed(() => (route.query['timetableOnly'] == '1' ? true : false));
     const isComponentVisible = computed(() => route.path === '/scenery');
+
     const stationInfo = computed(() => {
       return store.stationList.find((station) => station.name === route.query.station?.toString().replace(/_/g, ' '));
     });
+
     return {
       timetableOnly,
       isComponentVisible,
@@ -111,11 +123,13 @@ export default defineComponent({
     setViewMode(componentName: string) {
       this.currentViewCompontent = componentName;
     },
+
     loadSelectedCheckpoint() {
       if (!this.stationInfo?.generalInfo?.checkpoints) return;
       if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
       this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
     },
+
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
@@ -169,8 +183,12 @@ button.back-btn {
   max-width: 1700px;
 
   margin: 1rem 0;
-
   text-align: center;
+
+  &[data-timetable-only='true'] {
+    grid-template-columns: 1fr;
+    max-width: 1000px;
+  }
 }
 
 .scenery-left {