diff options
Diffstat (limited to 'master/src')
| -rw-r--r-- | master/src/components/G7Map.vue | 85 | ||||
| -rw-r--r-- | master/src/scss/_breakpoints.scss | 8 | ||||
| -rw-r--r-- | master/src/views/Home.vue | 14 |
3 files changed, 106 insertions, 1 deletions
diff --git a/master/src/components/G7Map.vue b/master/src/components/G7Map.vue new file mode 100644 index 0000000..6a887b1 --- /dev/null +++ b/master/src/components/G7Map.vue @@ -0,0 +1,85 @@ +<template> + <div class="map-wrapper"> + <img src="g7-map.svg"> + <div class="rooms"> + <span class="title">Rooms</span> + <ol> + <li + :key="room" + v-for="room in rooms" + > + {{ room }} + </li> + </ol> + </div> + </div> +</template> + +<script lang="ts"> +import { defineComponent } from "vue"; + +export default defineComponent( + { + name: "G7Map", + data() { + return { + rooms: [ + "Studio / G3", + "Studio 1", + "Hall", + "Studio 2", + "Studio 3", + "Grupprum", + "Verkstad", + "Serverrum", + "Kurator", + "Pannrum", + "Toalett", + "Inspelningsbås", + "G2", + "Trapphus" + ] + }; + } + } +); +</script> + +<style scoped lang="scss"> +@use "sass:map"; + +@use "@/scss/colors"; + +@import "@/scss/breakpoints"; + +.map-wrapper { + display: flex; + flex-wrap: wrap; + row-gap: 5em; + column-gap: 10em; + + img { + max-width: 50%; + } + + .rooms { + min-width: 40%; + + ol li { + line-height: 1.75em; + } + + .title { + font-size: 2rem; + font-weight: 700; + color: colors.$primary; + } + } +} + +@media (max-width: map.get($breakpoints, "xl")) { + .map-wrapper img { + max-width: 90%; + } +} +</style> diff --git a/master/src/scss/_breakpoints.scss b/master/src/scss/_breakpoints.scss new file mode 100644 index 0000000..fe2ccdb --- /dev/null +++ b/master/src/scss/_breakpoints.scss @@ -0,0 +1,8 @@ +$breakpoints: ( + "xs": 0, + "sm": 576px, + "md": 768px, + "lg": 992px, + "xl": 1200px, + "xxl": 1400px +); diff --git a/master/src/views/Home.vue b/master/src/views/Home.vue index 180383f..88f65e8 100644 --- a/master/src/views/Home.vue +++ b/master/src/views/Home.vue @@ -3,22 +3,29 @@ <div id="title-container"> <span>Gymnasiearbete</span> </div> + <!-- <div id="minion-list"> <Minion name="Skyddsling 1" ip="10.0.1.179" /> </div> + --> + <div id="map-container"> + <G7Map /> + </div> </div> </template> <script lang="ts"> import { Options, Vue } from "vue-class-component"; import Minion from "@/components/MinionStatus.vue"; +import G7Map from "@/components/G7Map.vue"; @Options({ components: { - Minion + Minion, + G7Map } }) export default class HomeView extends Vue {} @@ -29,6 +36,7 @@ export default class HomeView extends Vue {} display: flex; justify-content: center; margin-top: 2em; + margin-bottom: 7em; span { font-size: 2.5rem; @@ -38,4 +46,8 @@ export default class HomeView extends Vue {} #minion-list { margin: 3em; } + +#map-container { + margin-left: 3em; +} </style> |