Skip to content
Snippets Groups Projects
Commit 1891dfd4 authored by vildemv's avatar vildemv
Browse files

Did some layout fixes to the profile page and its components.

parent b795c17e
No related branches found
No related tags found
1 merge request!17Did some layout fixes to the profile page and its components.
Pipeline #276865 passed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 285 additions and 44 deletions
src/assets/base.css
+ 18
− 4
View file @ 1891dfd4
...@@ -4,13 +4,18 @@ ...@@ -4,13 +4,18 @@
--vt-c-white-mute: #f2f2f2; --vt-c-white-mute: #f2f2f2;
--vt-c-kellyGreen: #6AB40A; --vt-c-kellyGreen: #6AB40A;
--vt-c-kellyGreen-Dark: #4E9208;
--vt-c-kellyGreen-Light: #A4ED45; --vt-c-kellyGreen-Light: #A4ED45;
--vt-c-borderGrey: #C1C1C1; --vt-c-borderGrey: #C1C1C1;
--vt-c-borderGreyDark: #a19f9f; --vt-c-borderGreyDark: #a19f9f;
--vt-c-Raspberry: #E91658; --vt-c-Raspberry: #E91658;
--vt-c-Raspberry-Dark: #C2134A;
--vt-c-Orange: #FFA600; --vt-c-Orange: #FFA600;
--vt-c-Orange-Dark: #CC8400;;
--vt-c-Orange-Light: #FCBD47; --vt-c-Orange-Light: #FCBD47;
--vt-c-DarkBlue: #1600B2; --vt-c-DarkBlue: #1600B2;
--vt-c-DarkBlue-Dark: #0F0099;;
--vt-c-DarkBlue-Light: #2500CC;
--vt-c-Grape: #8332AC; --vt-c-Grape: #8332AC;
--vt-c-Grey: #A4A4A6; --vt-c-Grey: #A4A4A6;
--vt-c-Grey-Light: #CCCCCF; --vt-c-Grey-Light: #CCCCCF;
...@@ -29,9 +34,16 @@ ...@@ -29,9 +34,16 @@
/* semantic color variables for this project */ /* semantic color variables for this project */
:root { :root {
--color-pageination-button: var(--vt-c-white);
--color-pageination-button-click: var(--vt-c-borderGrey);
--color-confirm-button: var(--vt-c-kellyGreen); --color-confirm-button: var(--vt-c-kellyGreen);
--color-confirm-button-click: var(--vt-c-kellyGreen-Dark);
--color-cancel-button: var(--vt-c-Raspberry); --color-cancel-button: var(--vt-c-Raspberry);
--color-cancel-button-click: var(--vt-c-Raspberry-Dark);
--color-save-button: var(--vt-c-Orange);
--color-save-button-click: var(--vt-c-Orange-Dark);
--color-buttonText: var(--vt-c-white); --color-buttonText: var(--vt-c-white);
--color-button-text: var(--vt-c-white);
--color-inactive-button: var(--vt-c-borderGrey); --color-inactive-button: var(--vt-c-borderGrey);
--color-inactive-button-text: var(--vt-c-borderGreyDark); --color-inactive-button-text: var(--vt-c-borderGreyDark);
...@@ -60,6 +72,7 @@ ...@@ -60,6 +72,7 @@
--color-sideBar: var(--vt-c-white); --color-sideBar: var(--vt-c-white);
--color-background: var(--vt-c-white); --color-background: var(--vt-c-white);
--color-background-white: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft); --color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute); --color-background-mute: var(--vt-c-white-mute);
...@@ -68,6 +81,7 @@ ...@@ -68,6 +81,7 @@
--color-border-error: var(--vt-c-Raspberry); --color-border-error: var(--vt-c-Raspberry);
--color-text: var(--vt-c-text-light-1); --color-text: var(--vt-c-text-light-1);
--color-text-black: var(--vt-c-black);
--color-text-error: var(--vt-c-Raspberry); --color-text-error: var(--vt-c-Raspberry);
--color-shadow: rgba(0, 0, 0, 0.2); --color-shadow: rgba(0, 0, 0, 0.2);
...@@ -148,17 +162,17 @@ h1{ ...@@ -148,17 +162,17 @@ h1{
} }
h2{ h2{
font-size: 2.5em; font-size: 2.0em;
} }
h3{ h3{
font-size: 1em; font-size: 1.5em;
} }
h4{ h4{
font-size: 0.5em; font-size: 1.0em;
} }
h5{ h5{
font-size: 0.25em; font-size: 0.5em;
} }
\ No newline at end of file
src/assets/png/gold-coin.png 0 → 100644
+ 0
− 0
View file @ 1891dfd4
src/assets/png/gold-coin.png

399 KiB

src/assets/pig_394778.png → src/assets/png/pig_394778.png
+ 0
− 0
View file @ 1891dfd4
File moved
src/components/TopBanner.vue
+ 1
− 1
View file @ 1891dfd4
...@@ -10,7 +10,7 @@ function navigateToStartingPage(){ ...@@ -10,7 +10,7 @@ function navigateToStartingPage(){
<template> <template>
<div id = TopBanner> <div id = TopBanner>
<h2 id = "AppName">Sparesti<img src="../assets/pig_394778.png" alt = "logo" id = "logo" @click="navigateToStartingPage()"></h2> <h2 id = "AppName">Sparesti<img src="../assets/png/pig_394778.png" alt = "logo" id = "logo" @click="navigateToStartingPage()"></h2>
</div> </div>
</template> </template>
......
src/components/profile/BadgeInfo.vue
+ 98
− 0
View file @ 1891dfd4
...@@ -5,13 +5,81 @@ const props = defineProps <{ ...@@ -5,13 +5,81 @@ const props = defineProps <{
title: string title: string
}>(); }>();
const testData = [
{
id:1,
title: 'Mynt A',
img:'/src/assets/png/gold-coin.png'
},
{
id:2,
title: 'Mynt B',
img:'/src/assets/png/gold-coin.png'
},
{
id:3,
title: 'Mynt C',
img:'/src/assets/png/gold-coin.png'
},
{
id:4,
title: 'Mynt D',
img:'/src/assets/png/gold-coin.png'
},
{
id:5,
title: 'Mynt E',
img:'/src/assets/png/gold-coin.png'
},
{
id:6,
title: 'Mynt F',
img:'/src/assets/png/gold-coin.png'
},
{
id:7,
title: 'Mynt G',
img:'/src/assets/png/gold-coin.png'
},
{
id:8,
title: 'Mynt H',
img:'/src/assets/png/gold-coin.png'
},
{
id:9,
title: 'Mynt I',
img:'/src/assets/png/gold-coin.png'
},
{
id:10,
title: 'Mynt J',
img:'/src/assets/png/gold-coin.png'
},
]
const title = ref<string>(props.title) const title = ref<string>(props.title)
const achievements = ref<Achievement[]>(testData)
interface Achievement{
id: number,
title: string,
img: string
};
</script> </script>
<template> <template>
<div class="badge-container"> <div class="badge-container">
<h3 class="title">{{title}}</h3> <h3 class="title">{{title}}</h3>
<div class="badges">
<div class="badge" v-for="(achievement) in achievements" :key="achievement.id">
<img class="badge-img" :src="achievement.img" :alt="achievement.title">
<h3 class="badge-title"> {{achievement.title}}</h3>
</div>
</div>
</div> </div>
</template> </template>
...@@ -20,9 +88,39 @@ const title = ref<string>(props.title) ...@@ -20,9 +88,39 @@ const title = ref<string>(props.title)
.badge-container{ .badge-container{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
} }
.title{ .title{
font-weight: bold; font-weight: bold;
} }
.badges{
display: flex;
flex-direction: row;
overflow-x: scroll;
width: 100%;
gap: 2.0%;
}
.badge{
display: flex;
flex-direction: column;
min-width: 10%;
aspect-ratio: 1/1;
}
.badge-img{
width: 100%;
}
.badge-title{
text-align: center;
}
@media only screen and (max-width: 1000px) {
.badge{
min-width: 16.5%;
}
}
</style> </style>
\ No newline at end of file
src/components/profile/BankAccountInfo.vue
+ 22
− 4
View file @ 1891dfd4
...@@ -38,13 +38,15 @@ const saveAccountInfo = async ()=> { ...@@ -38,13 +38,15 @@ const saveAccountInfo = async ()=> {
<div class="account-info"> <div class="account-info">
<div class="header"> <div class="header">
<h3 class="title">Konto opplysninger</h3> <h3 class="title">Konto opplysninger</h3>
<button class="save-button" @click="saveAccountInfo">Lagre</button> <button class="save-button" @click="saveAccountInfo">
<h3 class="save-button-title">Lagre</h3>
</button>
</div> </div>
<div class="input-fields"> <div class="input-fields">
<div class="input-collection"> <div class="input-collection">
<h3>Forbrukskonto: </h3> <h4>Forbrukskonto: </h4>
<select class="accounts" v-model="checkingAccount"> <select class="accounts" v-model="checkingAccount">
<option key="check-default" :value="checkingAccount">{{checkingAccount}}</option> <option key="check-default" :value="checkingAccount">{{checkingAccount}}</option>
<option v-for="(account, index) in checkingAccountOptions" :key="'check' + index" :value="account">{{ account }}</option> <option v-for="(account, index) in checkingAccountOptions" :key="'check' + index" :value="account">{{ account }}</option>
...@@ -52,7 +54,7 @@ const saveAccountInfo = async ()=> { ...@@ -52,7 +54,7 @@ const saveAccountInfo = async ()=> {
</div> </div>
<div class="input-collection"> <div class="input-collection">
<h3>Sparekonto: </h3> <h4>Sparekonto: </h4>
<select class="accounts" :class="{'error': accountError}" v-model="savingAccount"> <select class="accounts" :class="{'error': accountError}" v-model="savingAccount">
<option key="saving-default" :value="savingAccount">{{savingAccount}}</option> <option key="saving-default" :value="savingAccount">{{savingAccount}}</option>
<option v-for="(account, index) in savingAccountOptions" :key="'saving' + index" :value="account">{{ account }}</option> <option v-for="(account, index) in savingAccountOptions" :key="'saving' + index" :value="account">{{ account }}</option>
...@@ -60,7 +62,7 @@ const saveAccountInfo = async ()=> { ...@@ -60,7 +62,7 @@ const saveAccountInfo = async ()=> {
</div> </div>
<div class="alert-box"> <div class="alert-box">
<h3 v-if="accountError" class="error-message">{{accountError}}</h3> <h4 v-if="accountError" class="error-message">{{accountError}}</h4>
</div> </div>
</div> </div>
...@@ -91,6 +93,21 @@ const saveAccountInfo = async ()=> { ...@@ -91,6 +93,21 @@ const saveAccountInfo = async ()=> {
border-radius: 20px; border-radius: 20px;
padding-right: 5.0%; padding-right: 5.0%;
padding-left: 5.0%; padding-left: 5.0%;
color: var(--color-headerText);
background-color: var(--color-save-button);
border: none;
}
.save-button:hover{
transform: scale(1.02);
}
.save-button:active{
background-color: var(--color-save-button-click);
}
.save-button-title{
font-weight: bold;
} }
...@@ -125,6 +142,7 @@ const saveAccountInfo = async ()=> { ...@@ -125,6 +142,7 @@ const saveAccountInfo = async ()=> {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-items: center; place-items: center;
min-height: 25px;
} }
.error{ .error{
......
src/components/profile/IncomeInfo.vue
+ 26
− 10
View file @ 1891dfd4
...@@ -44,19 +44,21 @@ const saveInput = async () => { ...@@ -44,19 +44,21 @@ const saveInput = async () => {
<div class="income-info"> <div class="income-info">
<div class="header"> <div class="header">
<h3 class="title">Økonomiske opplysninger</h3> <h3 class="title">Økonomiske opplysninger</h3>
<button class="save-button" @click="saveInput">Lagre</button> <button class="save-button" @click="saveInput">
<h3 class="save-button-title">Lagre</h3>
</button>
</div> </div>
<div class="input-fields"> <div class="input-fields">
<div class="description-collection"> <div class="description-collection">
<div class="description-box"> <div class="description-box">
<h3 class="description">Månedlig inntekt (nok): </h3> <h4 class="description">Månedlig inntekt (nok): </h4>
</div> </div>
<div class="description-box"> <div class="description-box">
<h3 class="description">Faste utgifter (nok): </h3> <h4 class="description">Faste utgifter (nok): </h4>
</div> </div>
<div class="description-box"> <div class="description-box">
<h3 class="description">Ønsket sparebeløp (nok): </h3> <h4 class="description">Ønsket sparebeløp (nok): </h4>
</div> </div>
</div> </div>
...@@ -64,21 +66,21 @@ const saveInput = async () => { ...@@ -64,21 +66,21 @@ const saveInput = async () => {
<div class="input"> <div class="input">
<input class="input-field" :class="{'error': monthlyIncomeError}" v-model="monthlyIncome"> <input class="input-field" :class="{'error': monthlyIncomeError}" v-model="monthlyIncome">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="monthlyIncomeError" class="error-message">{{monthlyIncomeError}}</h3> <h4 v-if="monthlyIncomeError" class="error-message">{{monthlyIncomeError}}</h4>
</div> </div>
</div> </div>
<div class="input"> <div class="input">
<input class="input-field" :class="{'error': monthlySpendingError}" v-model="monthlySpending"> <input class="input-field" :class="{'error': monthlySpendingError}" v-model="monthlySpending">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="monthlySpendingError" class="error-message">{{monthlySpendingError}}</h3> <h4 v-if="monthlySpendingError" class="error-message">{{monthlySpendingError}}</h4>
</div> </div>
</div> </div>
<div class="input"> <div class="input">
<input class="input-field" :class="{'error': monthlySavingError}" v-model="monthlySaving"> <input class="input-field" :class="{'error': monthlySavingError}" v-model="monthlySaving">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="monthlySavingError" class="error-message">{{monthlySavingError}}</h3> <h4 v-if="monthlySavingError" class="error-message">{{monthlySavingError}}</h4>
</div> </div>
</div> </div>
...@@ -113,6 +115,21 @@ const saveInput = async () => { ...@@ -113,6 +115,21 @@ const saveInput = async () => {
border-radius: 20px; border-radius: 20px;
padding-right: 5.0%; padding-right: 5.0%;
padding-left: 5.0%; padding-left: 5.0%;
color: var(--color-headerText);
background-color: var(--color-save-button);
border: none;
}
.save-button:hover{
transform: scale(1.02);
}
.save-button:active{
background-color: var(--color-save-button-click);
}
.save-button-title{
font-weight: bold;
} }
.input-fields{ .input-fields{
...@@ -171,8 +188,7 @@ const saveInput = async () => { ...@@ -171,8 +188,7 @@ const saveInput = async () => {
place-items: center; place-items: center;
width: 100%; width: 100%;
height: 50%; min-height: 25px;
min-height: 1rem;
} }
.error{ .error{
...@@ -185,7 +201,7 @@ const saveInput = async () => { ...@@ -185,7 +201,7 @@ const saveInput = async () => {
@media only screen and (max-width: 1000px){ @media only screen and (max-width: 1000px){
.input-fields{ .input-fields{
padding-top: 1.0%; padding-top: 3.0%;
} }
} }
......
src/components/profile/PasswordInfo.vue
+ 25
− 7
View file @ 1891dfd4
...@@ -45,29 +45,31 @@ const saveInfo = async () => { ...@@ -45,29 +45,31 @@ const saveInfo = async () => {
<div class="password-info"> <div class="password-info">
<div class="header"> <div class="header">
<h3 class="title">Passord</h3> <h3 class="title">Passord</h3>
<button class="save-button" @click="saveInfo"> Lagre</button> <button class="save-button" @click="saveInfo">
<h3 class="save-button-title">Lagre</h3>
</button>
</div> </div>
<div class="input-fields"> <div class="input-fields">
<div class="input-collection"> <div class="input-collection">
<h3>Nåværende passord: </h3> <h4>Nåværende passord: </h4>
<input class="input" <input class="input"
:class="{'error': currentPasswordError}" :class="{'error': currentPasswordError}"
type="password" type="password"
v-model="currentPassword"> v-model="currentPassword">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="currentPasswordError" class="error-message">{{currentPasswordError}}</h3> <h4 v-if="currentPasswordError" class="error-message">{{currentPasswordError}}</h4>
</div> </div>
</div> </div>
<div class="input-collection"> <div class="input-collection">
<h3>Nytt passord: </h3> <h4>Nytt passord: </h4>
<input class="input" <input class="input"
:class="{'error': newPasswordError}" :class="{'error': newPasswordError}"
type="password" type="password"
v-model="newPassword"> v-model="newPassword">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="newPasswordError" class="error-message">{{newPasswordError}}</h3> <h4 v-if="newPasswordError" class="error-message">{{newPasswordError}}</h4>
</div> </div>
</div> </div>
</div> </div>
...@@ -80,7 +82,7 @@ const saveInfo = async () => { ...@@ -80,7 +82,7 @@ const saveInfo = async () => {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
} }
...@@ -98,14 +100,29 @@ const saveInfo = async () => { ...@@ -98,14 +100,29 @@ const saveInfo = async () => {
border-radius: 20px; border-radius: 20px;
padding-right: 5.0%; padding-right: 5.0%;
padding-left: 5.0%; padding-left: 5.0%;
color: var(--color-headerText);
background-color: var(--color-save-button);
border: none;
}
.save-button:hover{
transform: scale(1.02);
}
.save-button:active{
background-color: var(--color-save-button-click);
}
.save-button-title{
font-weight: bold;
} }
.input-fields{ .input-fields{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
width: 100%; width: 100%;
height: 100%;
place-content: start; place-content: start;
} }
...@@ -126,6 +143,7 @@ const saveInfo = async () => { ...@@ -126,6 +143,7 @@ const saveInfo = async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-items: center; place-items: center;
min-height: 20px;
} }
.error{ .error{
......
src/components/profile/UserInfo.vue
+ 51
− 9
View file @ 1891dfd4
...@@ -40,7 +40,9 @@ const saveUserInfo = async ()=>{ ...@@ -40,7 +40,9 @@ const saveUserInfo = async ()=>{
<div class="user-info"> <div class="user-info">
<div class="header"> <div class="header">
<h3 class="title">Bruker opplysninger</h3> <h3 class="title">Bruker opplysninger</h3>
<button class="save-button" @click="saveUserInfo">Lagre</button> <button class="save-button" @click="saveUserInfo">
<h3 class="save-button-title">Lagre</h3>
</button>
</div> </div>
<div class="input-fields"> <div class="input-fields">
<div class="img-input"> <div class="img-input">
...@@ -50,17 +52,17 @@ const saveUserInfo = async ()=>{ ...@@ -50,17 +52,17 @@ const saveUserInfo = async ()=>{
</div> </div>
<div class="text-input"> <div class="text-input">
<div class="input-collection"> <div class="input-collection">
<H3>Brukernavn: </H3> <H4>Brukernavn: </H4>
<input class="input" :class="{'error': usernameError}" v-model="username"> <input class="input" :class="{'error': usernameError}" v-model="username">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="usernameError" class="error-message">{{usernameError}}</h3> <h4 v-if="usernameError" class="error-message">{{usernameError}}</h4>
</div> </div>
</div> </div>
<div class="input-collection"> <div class="input-collection">
<H3>E-post: </H3> <H4>E-post: </H4>
<input class="input" :class="{'error': emailError}" v-model="email"> <input class="input" :class="{'error': emailError}" v-model="email">
<div class="alert-box"> <div class="alert-box">
<h3 v-if="emailError" class="error-message">{{emailError}}</h3> <h4 v-if="emailError" class="error-message">{{emailError}}</h4>
</div> </div>
</div> </div>
</div> </div>
...@@ -94,6 +96,21 @@ const saveUserInfo = async ()=>{ ...@@ -94,6 +96,21 @@ const saveUserInfo = async ()=>{
border-radius: 20px; border-radius: 20px;
padding-right: 5.0%; padding-right: 5.0%;
padding-left: 5.0%; padding-left: 5.0%;
color: var(--color-headerText);
background-color: var(--color-save-button);
border: none;
}
.save-button:hover{
transform: scale(1.02);
}
.save-button:active{
background-color: var(--color-save-button-click);
}
.save-button-title{
font-weight: bold;
} }
.input-fields{ .input-fields{
...@@ -118,6 +135,12 @@ const saveUserInfo = async ()=>{ ...@@ -118,6 +135,12 @@ const saveUserInfo = async ()=>{
height: 100%; height: 100%;
} }
.input{
border-radius: 20px;
min-height: 30px;
padding-left: 2.0%;
}
.img-input{ .img-input{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -135,10 +158,22 @@ const saveUserInfo = async ()=>{ ...@@ -135,10 +158,22 @@ const saveUserInfo = async ()=>{
height: 50%; height: 50%;
} }
.input{ .save-button{
border-radius: 20px; border-radius: 20px;
min-height: 30px; padding-right: 5.0%;
padding-left: 2.0%; padding-left: 5.0%;
color: var(--color-headerText);
font-weight: bold;
background-color: var(--color-save-button);
border: none;
}
.save-button:hover{
transform: scale(1.02);
}
.save-button:active{
background-color: var(--color-save-button-click);
} }
.profile-picture-button{ .profile-picture-button{
...@@ -148,7 +183,7 @@ const saveUserInfo = async ()=>{ ...@@ -148,7 +183,7 @@ const saveUserInfo = async ()=>{
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
background-color: transparent; background-color: var(--color-headerText);
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
} }
...@@ -168,6 +203,7 @@ const saveUserInfo = async ()=>{ ...@@ -168,6 +203,7 @@ const saveUserInfo = async ()=>{
place-items: center; place-items: center;
width: 100%; width: 100%;
min-height: 20px;
} }
.error{ .error{
...@@ -178,4 +214,10 @@ const saveUserInfo = async ()=>{ ...@@ -178,4 +214,10 @@ const saveUserInfo = async ()=>{
color: var(--color-text-error); color: var(--color-text-error);
} }
@media only screen and (max-width: 1000px) {
.img-input{
max-width: 15%;
}
}
</style> </style>
\ No newline at end of file
src/views/FrontPage/StartView.vue
+ 1
− 1
View file @ 1891dfd4
...@@ -13,7 +13,7 @@ function navigateToLogin(){ ...@@ -13,7 +13,7 @@ function navigateToLogin(){
<template> <template>
<div id = StartPage> <div id = StartPage>
<div id = "heading"> <div id = "heading">
<h1 id = "title">Sparesti<img src="../../assets/pig_394778.png" alt ="logo" id = "logo"></h1> <h1 id = "title">Sparesti<img src="../../assets/png/pig_394778.png" alt ="logo" id = "logo"></h1>
</div> </div>
<div id = Info> <div id = Info>
<InfoComponent/> <InfoComponent/>
......
src/views/HomePage/ProfileView.vue
+ 33
− 6
View file @ 1891dfd4
...@@ -31,7 +31,7 @@ const username = ref<string>('$$$$') ...@@ -31,7 +31,7 @@ const username = ref<string>('$$$$')
</div> </div>
</div> </div>
<div id="bottom"> <div id="bottom">
<div class="component"> <div class="component" id="badges">
<BadgeInfo title="Mynter"></BadgeInfo> <BadgeInfo title="Mynter"></BadgeInfo>
</div> </div>
</div> </div>
...@@ -46,7 +46,6 @@ const username = ref<string>('$$$$') ...@@ -46,7 +46,6 @@ const username = ref<string>('$$$$')
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 650px;
gap: 2.5%; gap: 2.5%;
} }
...@@ -58,12 +57,22 @@ const username = ref<string>('$$$$') ...@@ -58,12 +57,22 @@ const username = ref<string>('$$$$')
#top, #middle{ #top, #middle{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
height: 33%;
gap: 1.5%; gap: 1.5%;
} }
#top{
min-height: 35%;
}
#middle{
min-height: 38.5%;
}
#bottom{
padding-bottom: 100px;
min-height: 35%;
}
.component{ .component{
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 20px; border-radius: 20px;
...@@ -74,22 +83,40 @@ const username = ref<string>('$$$$') ...@@ -74,22 +83,40 @@ const username = ref<string>('$$$$')
#user-info, #income-info{ #user-info, #income-info{
width: 60%; width: 60%;
height: 100%;
} }
#password-info, #account-info{ #password-info, #account-info{
width: 40%; width: 40%;
height: 100%;
}
#badges{
width: 100%;
} }
@media only screen and (max-width: 1000px){ @media only screen and (max-width: 1000px){
#top, #middle{ #top{
display: flex;
flex-direction: column;
place-content: space-evenly;
width: 100%;
min-height: 60%;
}
#middle{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-content: space-evenly;
width: 100%; width: 100%;
height: 100%; min-height: 70%;
} }
#user-info, #password-info, #income-info, #account-info{ #user-info, #password-info, #income-info, #account-info{
width: 100%; width: 100%;
} }
#user-info, #password-info{
height: 50%;
}
} }
</style> </style>
\ No newline at end of file
src/views/HomePageView.vue
+ 10
− 2
View file @ 1891dfd4
...@@ -40,13 +40,13 @@ import SideNav from '@/components/navigation/SideNav.vue' ...@@ -40,13 +40,13 @@ import SideNav from '@/components/navigation/SideNav.vue'
.main{ .main{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; height: 88%;
width: 100%; width: 100%;
min-height: 650px;
} }
.side-nav{ .side-nav{
width: 15%; width: 15%;
min-height: 650px;
padding: 2.0% 1.0% 2.0% 1.0% ; padding: 2.0% 1.0% 2.0% 1.0% ;
box-shadow: 0 2px 5px var(--color-shadow); box-shadow: 0 2px 5px var(--color-shadow);
} }
...@@ -66,6 +66,14 @@ import SideNav from '@/components/navigation/SideNav.vue' ...@@ -66,6 +66,14 @@ import SideNav from '@/components/navigation/SideNav.vue'
.view-element{ .view-element{
width: 100%; width: 100%;
} }
.main{
min-height: 0;
}
.view-element{
min-height: 650px;
}
} }
</style> </style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment