restruct: scenery info components

src/components/SceneryView/SceneryInfo.vue

@@ -1,69 +1,11 @@
 <template>
   <div class="scenery-info">
     <section>
-      <div class="scenery-info-general">
-        <SceneryInfoIcons :station="station" />
+      <SceneryInfoIcons :station="station" />
+      <SceneryInfoGeneral :station="station" />
+      <SceneryInfoRoutes v-if="station" :station="station" />
+      <SceneryInfoAuthors :station="station" />
 
-        <div class="scenery-general-list" v-if="station?.generalInfo">
-          <span>
-            <b>{{ $t('availability.title') }}:</b>
-            {{ $t(`availability.${station.generalInfo.availability}`) }}
-
-            <span v-if="station.generalInfo.reqLevel > -1">
-              -
-              {{
-                $t(
-                  'scenery.req-level',
-                  { lvl: station.generalInfo.reqLevel },
-                  station.generalInfo.reqLevel
-                )
-              }}
-            </span>
-          </span>
-
-          <span>
-            &bull; <b>{{ $t('controls.title') }}:</b>
-            {{ $t(`controls.${station.generalInfo.controlType}`) }}
-          </span>
-
-          <span>
-            &bull; <b>{{ $t('signals.title') }}:</b>
-            {{ $t(`signals.${station.generalInfo.signalType}`) }}
-          </span>
-
-          <span v-if="station.generalInfo.lines">
-            &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
-          </span>
-          <span v-if="station.generalInfo.project">
-            &bull; <b>{{ $t('scenery.project-title') }}: </b>
-            <a
-              style="color: salmon; text-decoration: underline; font-weight: bold"
-              :href="station.generalInfo.projectUrl"
-              target="_blank"
-            >
-              {{ station.generalInfo.project }}
-            </a>
-          </span>
-        </div>
-
-        <SceneryInfoRoutes v-if="station" :station="station" />
-
-        <div
-          class="scenery-authors"
-          v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
-        >
-          <b>
-            {{
-              $t(
-                'scenery.authors-title',
-                { authors: station.generalInfo.authors.length },
-                station.generalInfo.authors.length
-              )
-            }}:
-          </b>
-          {{ station.generalInfo.authors.join(', ') }}
-        </div>
-      </div>
 
       <div style="margin: 2em 0; height: 2px; background-color: white"></div>
 
@@ -89,15 +31,20 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
+import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
+import SceneryInfoAuthors from "./SceneryInfo/SceneryInfoAuthors.vue";
+
 import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   components: {
     SceneryInfoDispatcher,
+    SceneryInfoGeneral,
     SceneryInfoIcons,
+    SceneryInfoAuthors,
     SceneryInfoUserList,
     SceneryInfoSpawnList,
-    SceneryInfoRoutes
+    SceneryInfoRoutes,
   },
   props: {
     station: {
@@ -134,20 +81,6 @@ h3.section-header {
   margin-top: 1em;
 }
 
-.scenery-info-general {
-  margin-top: 1em;
-}
-
-.scenery-general-list {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  span {
-    margin: 0 0.15em;
-  }
-}
-
 .scenery-topic a {
   font-weight: bold;
 }