From a3052ddbf090d8f98b92ffd02bc77c5265b51a83 Mon Sep 17 00:00:00 2001
From: Tini Tran <tinit@stud.ntnu.no>
Date: Fri, 19 Apr 2024 15:57:11 +0200
Subject: [PATCH] Created a dropdown component and a box
---
src/views/HomePage/EconomyView.vue | 193 ++++++++++++++++++++++++++++-
1 file changed, 191 insertions(+), 2 deletions(-)
diff --git a/src/views/HomePage/EconomyView.vue b/src/views/HomePage/EconomyView.vue
index 5a29d3c..27b9af7 100644
--- a/src/views/HomePage/EconomyView.vue
+++ b/src/views/HomePage/EconomyView.vue
@@ -1,11 +1,200 @@
<script setup lang="ts">
+import { ref } from 'vue'
+const selectedOption = ref<string | null>(null)
+const dropdownOptions = [
+ 'Option 1',
+ 'Option 2',
+ 'Option 3'
+]
+
+const handleSelectionChange = (value: string) => {
+ selectedOption.value = value
+}
</script>
<template>
- <h1>EconomyView</h1>
+ <div class="economy-ui">
+
+ <h2>Dine forbruk</h2>
+ <div class="container">
+ <div class="box">
+ <div class="custom-dropdown-container">
+ <select class="custom-dropdown" v-model="selectedOption" @change="handleSelectionChange($event.target.value)">
+ <option disabled value="">Filtrer dine transaksjoner</option>
+ <option v-for="option in dropdownOptions" :key="option" :value="option">{{ option }}</option>
+ </select>
+ </div>
+ <div class="component-container">
+ <div class="component">
+ <div class="component-left">
+ <div class="component-title">
+ Rema 1000
+ </div>
+ </div>
+ <div class="component-right">
+ <div class="component-right-field">
+ <span> Date: 10.05.2012</span>
+ </div>
+ <div class="component-right-field">
+ <span>
+ 100 kr
+ </span>
+ </div>
+ <div class="component-right-field">
+ <span>
+ Kategori: Mat
+ </span>
+ </div>
+
+
+ </div>
+ </div>
+ <div class="component">
+
+ </div>
+ <div class="component">
+
+ </div>
+ <div class="component">
+
+ </div>
+ <div class="component">
+
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
</template>
+
+
+
<style scoped>
-</style>
\ No newline at end of file
+
+.economy-ui {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+h2 {
+ color: #6AB40A;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ padding-bottom: 1%;
+}
+
+.custom-dropdown-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.container {
+ display: flex;
+ height: 100vh;
+}
+.component-left{
+ width:50%;
+ height:100%;
+}
+.component-right {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: 100%;
+}
+.component-container {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.box {
+ border-radius: 20px;
+ border: 1px solid #000;
+ width:80%;
+ max-width: 600px; /* Limit maximum width */
+ min-height: 250px;
+ height: 75%;
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+.component {
+ border-radius: 20px;
+ border: 1px solid #000;
+ /*box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
+ width: 80%;
+ height: 10%;
+ margin-left: 5%;
+ margin-bottom: 2.5%;
+ display:flex;
+}
+
+.custom-dropdown {
+ width: 80%;
+ height: 7%;
+ padding: 8px;
+ margin-top: 2%;
+ margin-bottom: 5%;
+ border-radius: 20px;
+}
+
+.component-title {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding-left: 20px;
+ font-size:1.5em
+
+}
+
+.component-right-field {
+ display: flex;
+ height: 100%;
+ width: 95%;
+ justify-content: right;
+ font-size: 1em;
+}
+
+
+@media screen and (max-width: 600px) {
+ .box {
+ width: 100%;
+ margin: 10px; /* Adjust margin for smaller screens */
+ }
+
+ .container {
+ flex-direction: row; /* Change flex direction for smaller screens */
+ }
+
+ h2 {
+ font-size: 1.5em; /* Adjust font size for smaller screens */
+ }
+
+ .component-title {
+ font-size: 1.2em; /* Adjust font size for smaller screens */
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding-left: 20px;
+ }
+
+ .component-right-field {
+ display: flex;
+ height: 100%;
+ width: 95%;
+ justify-content: right;
+ font-size: 0.8em; /* Adjust font size for smaller screens */
+ }
+}
+
+</style>
--
GitLab