Skip to content
Snippets Groups Projects
Commit 914e6cd3 authored by VIktorGrev's avatar VIktorGrev
Browse files

style: Changeing friend size

parent d8f3385c
No related branches found
No related tags found
1 merge request!104Feat/profile and settings improvements
Pipeline #285262 passed with warnings
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div v-if="showFriends"> <div v-if="showFriends">
<div v-if="elementsInFriends"> <div v-if="elementsInFriends">
<div class="row"> <div class="row">
<div class="col-lg-3" v-for="friend in friends" :key="friend.id"> <div class="friendBox d-flex flex-wrap" v-for="friend in friends" :key="friend.id">
<div class="card card-one"> <div class="card card-one">
<div class="header"> <div class="header">
<div v-if="friend.profileImage" class="avatar"> <div v-if="friend.profileImage" class="avatar">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
<h3><router-link to="" data-cy="navigateToFriend" href="#" class="btn stretched-link" <h3><router-link to="" data-cy="navigateToFriend" href="#" class="btn stretched-link"
id="profileName" @click="navigateToFriend(friend.id)">{{ id="profileName" @click="navigateToFriend(friend.id)">{{
friend.firstName }} {{ friend.lastName }}</router-link></h3> friend.firstName }} {{ friend.lastName }}</router-link></h3>
<div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div> <div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div>
<div class="contacts"> <div class="contacts">
<a class="text removeFriend" data-bs-toggle="collapse" <a class="text removeFriend" data-bs-toggle="collapse"
...@@ -71,7 +71,8 @@ ...@@ -71,7 +71,8 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Legg til venn</h5> <h5 class="modal-title">Legg til venn</h5>
<button type="button" class="close btn-close" @click="showAddFriend = false" aria-label="Close"></button> <button type="button" class="close btn-close" @click="showAddFriend = false"
aria-label="Close"></button>
</div> </div>
<div class="modal-body d-flex justify-content-center align-items-center flex-column"> <div class="modal-body d-flex justify-content-center align-items-center flex-column">
<form class="col-md-10 d-flex justify-content-center align-items-center flex-row my-4" <form class="col-md-10 d-flex justify-content-center align-items-center flex-row my-4"
...@@ -86,8 +87,8 @@ ...@@ -86,8 +87,8 @@
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center">
<div class="col-md-2 col-sm-2"> <div class="col-md-2 col-sm-2">
<div v-if="user.profileImage !== null"><img id="profilePicture" <div v-if="user.profileImage !== null"><img id="profilePicture"
:src="apiUrl + '/api/images/' + user.profileImage" :src="apiUrl + '/api/images/' + user.profileImage" alt="bruker"
alt="bruker" class="profile-photo-lg"></div> class="profile-photo-lg"></div>
<div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'" <div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'"
alt="bruker" class="profile-photo-lg"></div> alt="bruker" class="profile-photo-lg"></div>
</div> </div>
...@@ -319,7 +320,7 @@ body { ...@@ -319,7 +320,7 @@ body {
/*social */ /*social */
.card-one { .card-one {
position: relative; position: relative;
width: 300px; width: 200px;
background: #fff; background: #fff;
box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.4); box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.4);
} }
...@@ -660,4 +661,8 @@ ul.friend-list .right p { ...@@ -660,4 +661,8 @@ ul.friend-list .right p {
#addFriend:hover { #addFriend:hover {
background-color: #003b58f5; background-color: #003b58f5;
} }
.friendBox {
width: 250px;
}
</style> </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