Dra 2762 spots

src/App.vue

@@ -453,7 +453,7 @@ export default defineComponent({
 }
 
 .search-to-home-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -492,7 +492,7 @@ export default defineComponent({
 }
 
 .home-to-search-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -526,7 +526,7 @@ export default defineComponent({
 }
 
 .record-to-search-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -580,7 +580,7 @@ export default defineComponent({
 }
 
 .search-to-record-leave-to {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }

src/assets/fonts/iconfont/material-icons.css

@@ -37,3 +37,41 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
+.category-image {
+	width: 16px;
+	height: 16px;
+  background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.category-image.diverse {
+	background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.category-image.dokumentar {
+	background-image: url('@/assets/icons/blue/dokumentar-blue.svg');
+}
+.category-image.film-og-serier {
+	background-image: url('@/assets/icons/blue/fiktion-blue.svg');
+}
+.category-image.kultur-og-oplysning {
+	background-image: url('@/assets/icons/blue/kultur-blue.svg');
+}
+.category-image.livsstil {
+	background-image: url('@/assets/icons/blue/livsstil-blue.svg');
+}
+.category-image.musik {
+	background-image: url('@/assets/icons/blue/musik-blue.svg');
+}
+.category-image.nyheder-politik-og-samfund {
+	background-image: url('@/assets/icons/blue/nyheder-blue.svg');
+}
+.category-image.sport {
+	background-image: url('@/assets/icons/blue/sport-blue.svg');
+}
+.category-image.humor-quiz-og-underholdning {
+	background-image: url('@/assets/icons/blue/underholdning-blue.svg');
+}
+.category-image.natur-og-videnskab {
+	background-image: url('@/assets/icons/blue/videnskab-blue.svg');
+}
+.category-image.brn-og-unge {
+	background-image: url('@/assets/icons/blue/born-blue.svg');
+}

src/assets/styles/elements.css

@@ -15,7 +15,7 @@
     --bg-secondary-light: #324666;
     --bg-secondary-light-20: #F0FBFF;
     --bg-header: #002e70;
-    --bg-footer: #002e70;
+    --bg-footer: #013277;
 
     /*colors*/
     --color-main:#ea9fbc;
@@ -27,7 +27,7 @@
 
     /*borders*/
     --color-border-active: #001C43;
-    --color-border-light:#96e2fd;
+    --color-border-light:#FBECF2;
     --color-border-golden:#e0b500;
     --color-border-success:#ea9fbc;
     --color-border-disabled:#757575;

src/components/common/AdvancedSpot.vue

@@ -0,0 +1,171 @@
+<template>
+	<simple-spot
+		:spot-size="spotSize"
+		:color="color"
+		:icon-name="iconName"
+	>
+		<transition name="fade">
+			<div
+				v-show="authStore.currentArchiveProgress !== 0"
+				class="hero-info"
+			>
+				<div class="info">
+					<div class="progress-headline">
+						<h2>{{ t('hero.progress', { index: Math.round(currentProgress) }) }}</h2>
+						<p>
+							{{ t('hero.explanation') }}
+						</p>
+					</div>
+					<div class="process-bar">
+						<div
+							v-for="i in 20"
+							:key="i"
+							:class="progress(i)"
+						></div>
+					</div>
+				</div>
+			</div>
+		</transition>
+	</simple-spot>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import { useAuthStore } from '@/store/authStore';
+import gsap from 'gsap';
+import { useI18n } from 'vue-i18n';
+type SpotSizeType = 'small' | 'medium' | 'large' | 'max';
+type ColorType = 'main' | 'light';
+export default defineComponent({
+	name: 'AdvancedSpot',
+	components: { SimpleSpot },
+	props: {
+		spotSize: {
+			type: String as PropType<SpotSizeType>,
+			required: true,
+		},
+		color: {
+			type: String as PropType<ColorType>,
+			default() {
+				return 'main';
+			},
+		},
+		iconName: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+	},
+	setup() {
+		const currentProgress = ref();
+		const authStore = useAuthStore();
+		const { t } = useI18n();
+		onMounted(() => {
+			if (authStore.currentArchiveProgress !== 0) {
+				currentProgress.value = authStore.currentArchiveProgress;
+			}
+		});
+
+		const progress = (index: number) => {
+			const maxRange = 20;
+			let pt = Math.round((maxRange / 100) * currentProgress.value);
+			if (index < pt) return 'step darkblue';
+			if (index === pt) return 'step darkblue';
+			if (index === pt + 1) return 'step blue';
+			if (index === pt + 2) return 'step lightblue';
+			if (index === pt + 3) return 'step grey';
+			if (index === pt + 4) return 'step lightgrey';
+			if (index > pt + 4) return 'step white';
+		};
+
+		watch(
+			() => authStore.currentArchiveProgress,
+			(newVal: number) => {
+				if (newVal !== 0) {
+					gsap.to(currentProgress, {
+						value: authStore.currentArchiveProgress,
+						duration: 2,
+						ease: 'power2.out',
+						snap: { value: 1 },
+					});
+				}
+			},
+		);
+		return { authStore, progress, currentProgress, t };
+	},
+});
+</script>
+
+<style scoped>
+.progress-headline > * {
+	margin: 0;
+}
+
+.hero-info {
+	max-width: 100%;
+	/* position: relative; */
+	z-index: 0;
+	display: flex;
+	box-sizing: border-box;
+	height: 150px;
+	justify-content: flex-start;
+}
+
+.info {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.hero-info .link-container {
+	font-weight: 100;
+}
+
+.process-bar {
+	height: 34px;
+	display: flex;
+	position: absolute;
+	width: 100%;
+	left: 0px;
+	bottom: 0px;
+	background-color: var(--bg-default);
+}
+
+.step {
+	width: 5%;
+	height: 100%;
+	box-sizing: border-box;
+	border-left: 1px solid rgba(255, 255, 255, 0.05);
+	transition: all 0.15s ease-in-out 0s;
+}
+
+.step.darkblue {
+	background-color: var(--bg-main);
+}
+.step.blue {
+	background-color: var(--bg-main);
+	opacity: 0.95;
+}
+
+.step.lightblue {
+	background-color: var(--bg-main);
+	opacity: 0.85;
+}
+
+.step.grey {
+	background-color: var(--bg-main);
+	opacity: 0.75;
+}
+
+.step.lightgrey {
+	background-color: var(--bg-main);
+	opacity: 0.7;
+}
+
+.step.white {
+	background-color: transparent;
+	border-color: transparent;
+}
+</style>

src/components/common/KBButton.vue

@@ -9,15 +9,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -33,15 +35,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -57,15 +61,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -135,6 +141,18 @@ export default defineComponent({
 				return false;
 			},
 		},
+		customIconLeft: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+		customIconRight: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
 	},
 	setup(props) {
 		const attrs = useAttrs();
@@ -164,6 +182,7 @@ export default defineComponent({
 	width: fit-content;
 	min-height: 34px;
 	line-height: 1;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-text::first-letter {
 	text-transform: capitalize;
@@ -239,18 +258,17 @@ export default defineComponent({
 /* Call to action buttons */
 .btn-cta {
 	border-radius: var(--rounded-medium);
-	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-cta .btn-text {
 	border-bottom: 1px solid transparent;
 	margin-bottom: -1px;
 	transition: 200ms;
 }
 .btn-cta:not(:disabled):hover {
-	transition: all 5s ease 0s;
-	.btn-text {
-		border-color: var(--color-border-active);
-	}
+	transition: all 0.3s ease 0s;
+	background-color: var(--bg-main-2);
+	border-color: var(--color-border-light);
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0);
 }
 .btn-cta.medium .material-icons {
 	font-size: calc(var(--fs-lead) + 8px);