From 1352039a45f1df171c5753f3bb1a06734c9b9420 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Fri, 3 May 2024 21:26:39 +0200
Subject: [PATCH] feat: Making myProfile responsive
---
src/components/UserProfile/MyProfile.vue | 14 ++++++++++----
1 file changed, 10 insertions(+), 4 deletions(-)
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index e91e5b3..c6922f1 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -168,8 +168,8 @@ const toUpdateUserSettings = () => {
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col 12">
<div class="card">
- <div class="rounded-top text-white d-flex flex-row bg-primary justify-content-between" :style="{
- height: '200px',
+ <div class="rounded-top text-white d-flex flex-row bg-primary justify-content-between flex-wrap" id="banner" :style="{
+
backgroundImage: `url(${bannerImageUrl})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
@@ -180,7 +180,7 @@ const toUpdateUserSettings = () => {
style="width: 150px; height:150px; margin-left: 25px; margin-right: 15px;">
</div>
<h1 data-cy="firstname" style="display: flex; align-items: end; margin-bottom: 20px;">{{ firstname }} {{
- lastname }}</h1>
+ lastname }}</h1>
</div>
<div class="d-flex align-items-end text-white my-3 mx-5">
<div class="d-flex align-items-center flex-column">
@@ -331,7 +331,13 @@ const toUpdateUserSettings = () => {
}
#banner {
- background-image: url('/src/assets/banners/stacked.svg');
+ height: 200px;
+}
+
+@media (max-width: 940px) {
+ #banner {
+ height: 320px;
+}
}
/*-------*/
--
GitLab