ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

A profile header now has a max height of 250px (instead of fixed) and shrinks vertically when the profile picture is not tall enough to fill 250px. Changed css class to be more specific.

Browse Source
This commit is contained in:
Dries Cruyskens 2020-06-23 17:22:44 +02:00
parent 977156c591
commit dcaa2cf07b
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
View File

@ -123,15 +123,10 @@ export default {
<style lang="scss">
.profile-header {
height: 100%;
position: relative;
background-color: DarkGrey; /* Fallback color */
}
.profile-header-image {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
}
@ -169,7 +164,10 @@ export default {
.profileHeader-attachments-upload-area {
height: 100%;
position: relative;
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;

6
webapp/pages/profile/_id/_slug.vue
View File

@ -2,7 +2,7 @@
<div>
<ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
<ds-flex-item width="100%">
<base-card class="profile-header">
<base-card class="profile-header-card">
<user-profile-header :user="user" :editable="myProfile"></user-profile-header>
</base-card>
</ds-flex-item>
@ -550,8 +550,8 @@ export default {
}
}
.profile-header {
.profile-header-card {
padding: 0px; /* Overwrite default card padding to 0. */
height: 250px;
max-height: 250px;
}
</style>