Skip to content
Snippets Groups Projects
Commit 7bca0686 authored by vildemv's avatar vildemv
Browse files

Added help pop-up to the discover view. Did also do some layout changes to...

Added help pop-up to the discover view. Did also do some layout changes to make the page more scalable.
parent 0b831ece
No related branches found
No related tags found
1 merge request!53Frontend improvements
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DicoverHelpPopUp from '@/components/popups/help/DicoverHelpPopUp.vue'
type Article = {
source: {
......@@ -15,6 +16,17 @@ type Article = {
content: string | null;
};
const displayHelpPopUp = ref<boolean>(false)
const openHelpPopUp = () => {
displayHelpPopUp.value = true;
}
const closeHelpPopUp = async () => {
displayHelpPopUp.value = false;
}
const articles = ref<Article[]>([]);
onMounted(async () => {
......@@ -30,22 +42,34 @@ onMounted(async () => {
<template>
<div class="discover-view">
<h2 id="view-title">Utforsk økonomi og sparenyheter fra E24</h2>
<p id="view-description">Her kan du se de nyeste artiklene fra E24 anngående
sparing og bank. Klikk på en artikkel som virker interessant.</p>
<ul class="discover-items">
<li v-for="(article, index) in articles" :key="index" class="article-item">
<div class="header">
<h2 id="view-title">Sparetips og økonomi fra E24!</h2>
<img
src="/src/components/icons/navigation/help.svg"
alt="hjelp"
@click="openHelpPopUp"
class="help-icon">
<div v-if="displayHelpPopUp" class="popup-container">
<DicoverHelpPopUp
@closePopUp="closeHelpPopUp"
></DicoverHelpPopUp>
</div>
</div>
<div class="discover-items">
<div v-for="(article, index) in articles" :key="index" class="article-item">
<a :href="article.url" target="_blank" class="article-link">
<div class="article-content">
<div class="article-title">{{ article.title }}</div>
<div class="article-description">{{ article.description }}</div>
<h3 class="article-title">{{ article.title }}</h3>
<h4 class="article-description">{{ article.description }}</h4>
<div class="image-div">
<img :src="article.urlToImage" alt="Article Thumbnail" class="image">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
......@@ -56,6 +80,10 @@ onMounted(async () => {
.article-content {
background-color: var(--vt-c-black-mute);
}
.help-icon{
filter: invert(1);
}
}
/* Light mode media query */
......@@ -65,14 +93,33 @@ onMounted(async () => {
}
}
#view-title {
color: var(--color-heading);
padding-left: 15px;
.header{
display: flex;
flex-direction: row;
place-content: space-between;
max-height: 6.5%;
}
#view-description {
color: var(--color-text);
padding-left: 15px;
.help-icon:hover{
transform: scale(1.05);
}
.popup-container {
position: fixed; /* Change to fixed to cover the entire viewport */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: rgba(64, 64, 64, 0.5);
align-items: center;
z-index: 1000; /* Adjust z-index as needed */
}
#view-title {
color: var(--color-heading);
}
.discover-view {
......@@ -80,74 +127,63 @@ onMounted(async () => {
flex-direction: column;
width: 100%;
height: 100%;
min-height: 650px;
gap: 2.5%;
}
.discover-items {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
row-gap: 0.2%;
column-gap: 1.5%;
}
.article-item {
width: calc(33.33% - 10px);
padding: 10px;
height: 400px;
padding-top: 0;
width: calc(calc(100% - 2 * 1.5%) / 3);
height: 7.0%;
}
.article-content {
display: flex;
flex-direction: column;
border-radius: 10px;
padding: 10px;
overflow: hidden;
padding: 5.0%;
border-radius: 20px;
height: 100%;
justify-content: space-around;
align-content: center;
object-fit: contain;
width: 100%;
justify-content: space-between;
align-content: start;
}
.article-title {
font-size: 130%;
font-weight: bold;
margin-bottom: 5px;
line-height: 20px;
}
.article-description {
font-size: 110%;
font-weight: normal;
line-height: initial;
}
.image {
margin-top: 5px;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
width: 100%;
border-radius: 20px;
}
.image-div {
display: flex;
justify-content: center;
align-items: center;
align-items: end;
height: 50%;
overflow: hidden;
border-radius: 20px;
}
@media screen and (max-width: 1200px) {
@media screen and (max-width: 900px) {
.article-item {
width: calc(50% - 10px);
width: calc(calc(98.5%) / 2);
height: 5.5%;
}
}
@media screen and (max-width: 480px) {
@media screen and (max-width: 600px) {
.article-item {
width: calc(100% - 10px);
width: 100%;
aspect-ratio: 1/0.5;
}
}
......@@ -155,6 +191,5 @@ onMounted(async () => {
text-decoration: none;
color: inherit;
transition: none;
padding: 0;
}
</style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment