From d8f3385c71dc558783badf1cf6fdf364310e872c Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Fri, 3 May 2024 21:35:38 +0200
Subject: [PATCH] Adding dynamic changes to profile settings
---
src/components/Settings/SettingsProfile.vue | 29 ++++++++++++++++++---
1 file changed, 25 insertions(+), 4 deletions(-)
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index c85f53f..8080512 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -179,7 +179,7 @@ onMounted(() => {
<div class="tab-pane active" id="profile">
<h6>DIN PROFILINFORMASJON</h6>
<hr>
- <form @submit.prevent="handleSubmit" novalidate class="d-flex">
+ <form @submit.prevent="handleSubmit" novalidate class="d-flex infoHolder">
<div>
<div class="user-avatar">
<input type="file" ref="fileInputRef" @change="handleFileChange" accept=".jpg, .jpeg, .png"
@@ -195,15 +195,14 @@ onMounted(() => {
<div class="form-group">
<BaseInput data-cy="first-name" :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
id="firstNameInputChange" input-id="first-name-new" type="text" label="Fornavn"
- placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn"
- style="max-width: 400px" />
+ placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn" class="inputDynamic" />
</div>
<br>
<div class="form-group">
<BaseInput data-cy="last-name" :model-value="surnameRef" @input-change-event="handleSurnameInputEvent"
id="surnameInput-change" input-id="surname-new" type="text" label="Etternavn"
placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn"
- style="max-width: 400px; width: 400px;" />
+ class="inputDynamic"/>
</div>
<br>
<div class="d-flex">
@@ -276,4 +275,26 @@ onMounted(() => {
cursor: pointer;
width: 200px;
}
+
+.infoHolder {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+@media (max-width: 1252px) {
+ .infoHolder {
+ flex-direction: column;
+ }
+}
+
+.inputDynamic {
+ width: 340px;
+}
+
+@media (max-width: 960px) {
+ .inputDynamic {
+ width: 200px;
+ }
+}
</style>
\ No newline at end of file
--
GitLab