From 72e3bb715157fb5aabcbc889f4f7143bf87b90f5 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Mon, 30 May 2022 14:14:04 +0200
Subject: feat(master): add map

---
 master/src/components/G7Map.vue   | 85 +++++++++++++++++++++++++++++++++++++++
 master/src/scss/_breakpoints.scss |  8 ++++
 master/src/views/Home.vue         | 14 ++++++-
 3 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 master/src/components/G7Map.vue
 create mode 100644 master/src/scss/_breakpoints.scss

(limited to 'master/src')

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>
-- 
cgit v1.2.3-18-g5258