Improve profile header layout

This commit is contained in:
Andreas Nedbal 2022-07-24 14:30:20 +02:00 committed by Karina Kwiatek
parent 21c81e7bcd
commit 74dc7c4526
4 changed files with 55 additions and 15 deletions

View File

@ -58,7 +58,8 @@ $avatar-sizes: (
"sm": 30px,
"md": 40px,
"lg": 80px,
"xl": 160px,
"xl": 120px,
"xxl": 160px,
);
$spacers: (

View File

@ -3,15 +3,35 @@
display: block;
width: map-get($avatar-sizes, "xl");
height: map-get($avatar-sizes, "xl");
margin: -(map-get($avatar-sizes, "xl") / 2) auto 0;
margin: -(map-get($avatar-sizes, "xl") / 2.5) map-get($spacers, 4) 0;
border-radius: $avatar-border-radius;
box-shadow: $box-shadow;
@include media-breakpoint-up(sm) {
width: map-get($avatar-sizes, "xxl");
height: map-get($avatar-sizes, "xxl");
margin: -(map-get($avatar-sizes, "xxl") / 2) auto 0;
}
}
&__header-card {
margin-top: map-get($spacers, 3);
overflow: hidden;
}
&__name-container {
align-self: center;
max-width: 100%;
overflow: hidden;
@include media-breakpoint-up(sm) {
padding: map-get($spacers, 4);
padding-bottom: 0;
}
}
&__header-container {
margin-bottom: map-get($spacers, 3);
position: relative;
z-index: -1;
width: 100%;
overflow: hidden;
background: linear-gradient(
@ -27,7 +47,6 @@
width: 100%;
}
&__name,
&__biography,
&__website,
&__location {
@ -42,6 +61,13 @@
&__display-name {
font-weight: bold;
font-size: 1.1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include media-breakpoint-up(sm) {
white-space: initial;
}
}
&__screen-name {
@ -54,6 +80,16 @@
color: RGB(var(--muted-text));
}
}
@include media-breakpoint-up(sm) {
&__name {
margin-bottom: map-get($spacers, 3);
}
& .card-body {
padding-top: 0;
}
}
}
.user--banned {

View File

@ -1,6 +1,7 @@
.profile__header-container
%img.profile__header-image{ src: @user.profile_header.url(:web) }
.container
.card.profile__header-card
.profile__header-container
%img.profile__header-image{ src: @user.profile_header.url(:web) }
.row
.col-md-3.col-xs-12.col-sm-4
= render 'user/profile', user: @user

View File

@ -1,12 +1,14 @@
.card#profile
%img.profile__avatar{ src: user.profile_picture.url(:large) }
.card.profile#profile
.d-flex.d-sm-block
%img.profile__avatar{ src: user.profile_picture.url(:large) }
.profile__name-container
.profile__name
- unless user.profile.display_name.blank?
.profile__display-name
= user.profile.display_name
.profile__screen-name
= user.screen_name
.card-body
.profile__name
- unless user.profile.display_name.blank?
.profile__display-name
= user.profile.display_name
.profile__screen-name
= user.screen_name
.profile__badge-container
- if user.banned?
%span.badge.badge-dark