DISC-800/Refactoring of Search.vue.

src/components/common/PortalContent.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="container">
+		<div class="row">
+			<div class="intro">
+				<h2>Velkommen til DR's arkiv på Det Kgl. Bibliotek</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+					magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+					est laborum.
+				</p>
+				<router-link to="/about">read more</router-link>
+			</div>
+		</div>
+		<div class="container">
+			<h3>Udpluk fra arkivet</h3>
+			<GridDisplay
+				:spot-nr="8"
+				:row-nr="4"
+				:draggable="true"
+				:spots="mockdata1"
+			></GridDisplay>
+		</div>
+		<div class="blue-background">
+			<div class="edge blue"></div>
+
+			<div class="container">
+				<h3>Om DR Arkivet</h3>
+				<GridDisplay
+					:draggable="false"
+					:spot-nr="3"
+					:row-nr="3"
+					:blue-background="true"
+					:spots="mockdata2"
+				></GridDisplay>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useSearchResultStore } from '@/store/searchResultStore';
+import GridDisplay from '@/components/common/GridDisplay.vue';
+import { GenericSearchResultType } from '@/types/GenericSearchResultTypes';
+
+export default defineComponent({
+	name: 'PortalContent',
+	components: {
+		GridDisplay,
+	},
+
+	setup() {
+		const mockdata1 = ['1', '2', '3', '4', '5', '6', '7', '8'] as unknown as GenericSearchResultType[];
+		const mockdata2 = ['1', '2', '3'] as unknown as GenericSearchResultType[];
+		const searchResultStore = useSearchResultStore();
+
+		return { searchResultStore, mockdata1, mockdata2 };
+	},
+});
+</script>
+
+<style></style>

src/components/search/CategoryTags.vue

@@ -150,6 +150,7 @@ h2 {
 .category-tags {
 	flex-wrap: wrap;
 	margin-top: 20px;
+	display: flex;
 }
 
 .category-tags .tag {

src/components/search/Facets.vue

@@ -1,32 +1,46 @@
 <template>
-	<div class="facet-container">
-		<div>
-			<Transition
-				name="fade"
-				mode="out-in"
+	<div
+		class="search-facets active"
+		ref="facetsContainer"
+	>
+		<div class="facet-background">
+			<button
+				class="facet-close-button"
+				@click="searchResultStore.toggleShowFacets(false)"
 			>
+				<span class="material-icons">close</span>
+			</button>
+
+			<div class="facet-container">
 				<div>
-					<h2 class="headline">{{ t('search.channels') }}</h2>
-					<div
-						class="checkbox"
-						v-for="(singleFacet, index) in currentFacetNr as unknown as FacetPair[]"
-						:key="index + 'facet'"
+					<Transition
+						name="fade"
+						mode="out-in"
 					>
-						<kb-checkboxcomponent
-							:fqkey="'creator_affiliation'"
-							:title="channelFacets[index]?.title"
-							:number="channelFacets[index]?.number"
-							:value="filterExists('creator_affiliation', channelFacets[index]?.title)"
-							:inslide="index"
-							:content="!searchResultStore.loading"
-						/>
-					</div>
+						<div>
+							<h2 class="headline">{{ t('search.channels') }}</h2>
+							<div
+								class="checkbox"
+								v-for="(singleFacet, index) in currentFacetNr as unknown as FacetPair[]"
+								:key="index + 'facet'"
+							>
+								<kb-checkboxcomponent
+									:fqkey="'creator_affiliation'"
+									:title="channelFacets[index]?.title"
+									:number="channelFacets[index]?.number"
+									:value="filterExists('creator_affiliation', channelFacets[index]?.title)"
+									:inslide="index"
+									:content="!searchResultStore.loading"
+								/>
+							</div>
+						</div>
+					</Transition>
+					<CategoryTags
+						:categories="categoryFacets"
+						:category-nr="categoryNr"
+					></CategoryTags>
 				</div>
-			</Transition>
-			<CategoryTags
-				:categories="categoryFacets"
-				:category-nr="categoryNr"
-			></CategoryTags>
+			</div>
 		</div>
 	</div>
 </template>
@@ -53,7 +67,7 @@ export default defineComponent({
 		facetResults: { type: Object as PropType<FacetResultType>, required: true },
 	},
 
-	setup(props, { emit }) {
+	setup(props) {
 		const searchResultStore = useSearchResultStore();
 		const showFacets = ref(false);
 		const currentFacets = ref(Object as unknown as FacetResultType);
@@ -62,13 +76,17 @@ export default defineComponent({
 		const categoryFacets = ref([] as FacetPair[]);
 		const categoryNr = ref(0);
 
+		const facetsContainer = ref<HTMLElement | null>(null);
+
 		const lastUpdate = ref(0);
 		const route = useRoute();
 		const router = useRouter();
 
 		const { t } = useI18n();
 
 		onMounted(() => {
+			window.innerWidth > 800 ? searchResultStore.toggleShowFacets(true) : searchResultStore.toggleShowFacets(false);
+
 			currentFacets.value = props.facetResults;
 			channelFacets.value = simplifyFacets(currentFacets.value['creator_affiliation']);
 			categoryFacets.value = simplifyFacets(currentFacets.value['categories']);
@@ -86,7 +104,6 @@ export default defineComponent({
 						channelFacets.value = [] as FacetPair[];
 						categoryFacets.value = [] as FacetPair[];
 
-						showFacets.value = false;
 						currentFacets.value = newFacets;
 						channelFacets.value = simplifyFacets(newFacets['creator_affiliation']);
 						categoryFacets.value = simplifyFacets(newFacets['categories']);
@@ -109,9 +126,29 @@ export default defineComponent({
 			router.push({ query: routeQueries });
 		};
 
+		watch(
+			() => searchResultStore.showFacets,
+			() => {
+				toggleFacets();
+			},
+		);
+
+		const toggleFacets = () => {
+			if (searchResultStore.showFacets) {
+				facetsContainer.value?.classList.add('active');
+				//resultContainer.value?.classList.add('fullwidth');
+
+				window.document.body.classList.add('remove-body-scroll');
+			} else {
+				facetsContainer.value?.classList.remove('active');
+				//resultContainer.value?.classList.remove('fullwidth');
+				window.document.body.classList.remove('remove-body-scroll');
+			}
+		};
+
 		const filterUpdateHelper = (e: Event) => {
 			updateFilters(e as CustomEvent);
-			emit('facetUpdate');
+			window.innerWidth < 800 ? searchResultStore.toggleShowFacets(false) : null;
 		};
 
 		return {
@@ -130,6 +167,8 @@ export default defineComponent({
 			addFilter,
 			removeFilter,
 			route,
+			toggleFacets,
+			facetsContainer,
 			t,
 		};
 	},
@@ -145,6 +184,13 @@ export default defineComponent({
 	flex-direction: column;
 }
 
+.search-facets.active {
+	visibility: visible;
+	pointer-events: all;
+	transform: translateX(0%);
+	width: 100%;
+}
+
 h2 {
 	font-size: 16px;
 	color: black;
@@ -161,9 +207,78 @@ h2 {
 	padding: 3px 0px;
 }
 
+.facet-close-button {
+	border: 0px;
+	background-color: transparent;
+	font-size: 0px;
+	position: absolute;
+	top: 10px;
+	z-index: 25;
+	right: 10px;
+	cursor: pointer;
+}
+.search-facets {
+	transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
+	min-width: 0px;
+	margin-bottom: 20px;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	z-index: 5;
+	background-color: white;
+	overflow-y: scroll;
+	height: 100vh;
+	visibility: hidden;
+	pointer-events: none;
+	box-sizing: border-box;
+	padding: 40px 15% 0px 15%;
+	transform: translateX(-100%);
+}
+
+@media (min-width: 640px) {
+	.search-facets {
+		top: 20%;
+		height: 60%;
+		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+		width: 70%;
+	}
+
+	.search-facets::-webkit-scrollbar-track {
+		background-color: transparent;
+	}
+
+	.search-facets.active {
+		width: 70%;
+	}
+}
 @media (min-width: 800px) {
 	.facet-container {
 		flex-direction: column;
 	}
+
+	.facet-background {
+		background-color: rgba(30, 30, 30, 0.1);
+	}
+	.facet-close-button {
+		display: none;
+	}
+	.search-facets {
+		position: initial;
+		background-color: initial;
+		width: 0px;
+		margin-right: 0px;
+		overflow-y: initial;
+		overflow-x: hidden;
+		padding: 0px 0px;
+		transform: translateX(0%);
+		opacity: 0;
+		box-shadow: initial;
+	}
+	.search-facets.active {
+		width: 290px;
+		margin-right: 30px;
+		min-width: 300px;
+		opacity: 1;
+	}
 }
 </style>