refactor: changed amount of christmas lights that show, and made modal christmas lights smaller

frontend/.eslintrc

@@ -40,6 +40,7 @@
 		"prettier/prettier": [
 			"error"
 		],
-		"vue/order-in-components": 2
+		"vue/order-in-components": 2,
+		"vue/no-v-for-template-key": 0
 	}
 }

frontend/src/components/ChristmasLights.vue

@@ -1,26 +1,16 @@
 <template>
-	<div :class="{ 'christmas-lights': true, loggedIn }">
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
-		<div class="christmas-wire"></div>
-		<span class="christmas-light"></span>
+	<div
+		:class="{
+			'christmas-lights': true,
+			loggedIn,
+			'christmas-lights-small': small
+		}"
+	>
 		<div class="christmas-wire"></div>
+		<template v-for="n in lights" :key="n">
+			<span class="christmas-light"></span>
+			<div class="christmas-wire"></div>
+		</template>
 	</div>
 </template>
 
@@ -28,11 +18,16 @@
 import { mapState } from "vuex";
 
 export default {
+	props: {
+		small: { type: Boolean, default: false },
+		lights: { type: Number, default: 1 }
+	},
 	computed: {
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn
 		})
 	},
+
 	async mounted() {
 		this.christmas = await lofig.get("siteSettings.christmas");
 	}
@@ -52,6 +47,18 @@ export default {
 		overflow: hidden;
 		pointer-events: none;
 
+		&.christmas-lights-small {
+			.christmas-light {
+				height: 28px;
+				width: 10px;
+
+				&::before {
+					width: 10px;
+					height: 10px;
+				}
+			}
+		}
+
 		.christmas-light {
 			height: 34px;
 			width: 12px;

frontend/src/components/Modal.vue

@@ -15,7 +15,7 @@
 				<span class="delete material-icons" @click="closeCurrentModal()"
 					>highlight_off</span
 				>
-				<christmas-lights v-if="christmas" />
+				<christmas-lights v-if="christmas" small :lights="5" />
 			</header>
 			<section class="modal-card-body">
 				<slot name="body" />

frontend/src/components/layout/MainHeader.vue

@@ -67,7 +67,10 @@
 			</div>
 		</div>
 
-		<christmas-lights v-if="siteSettings.christmas" />
+		<christmas-lights
+			v-if="siteSettings.christmas"
+			:lights="Math.min(Math.floor(windowWidth / 175), 15)"
+		/>
 	</nav>
 </template>
 
@@ -96,7 +99,8 @@ export default {
 				logo: "",
 				sitename: "",
 				christmas: false
-			}
+			},
+			windowWidth: 0
 		};
 	},
 	computed: {
@@ -140,8 +144,16 @@ export default {
 
 		this.frontendDomain = await lofig.get("frontendDomain");
 		this.siteSettings = await lofig.get("siteSettings");
+
+		this.$nextTick(() => {
+			this.onResize();
+			window.addEventListener("resize", this.onResize);
+		});
 	},
 	methods: {
+		onResize() {
+			this.windowWidth = window.innerWidth;
+		},
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("user/auth", ["logout"]),
 		...mapActions("user/preferences", ["changeNightmode"])