Improve profile header layout
This commit is contained in:
parent
21c81e7bcd
commit
74dc7c4526
|
@ -58,7 +58,8 @@ $avatar-sizes: (
|
|||
"sm": 30px,
|
||||
"md": 40px,
|
||||
"lg": 80px,
|
||||
"xl": 160px,
|
||||
"xl": 120px,
|
||||
"xxl": 160px,
|
||||
);
|
||||
|
||||
$spacers: (
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
.container
|
||||
.card.profile__header-card
|
||||
.profile__header-container
|
||||
%img.profile__header-image{ src: @user.profile_header.url(:web) }
|
||||
.container
|
||||
.row
|
||||
.col-md-3.col-xs-12.col-sm-4
|
||||
= render 'user/profile', user: @user
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
.card#profile
|
||||
.card.profile#profile
|
||||
.d-flex.d-sm-block
|
||||
%img.profile__avatar{ src: user.profile_picture.url(:large) }
|
||||
.card-body
|
||||
.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__badge-container
|
||||
- if user.banned?
|
||||
%span.badge.badge-dark
|
||||
|
|
Loading…
Reference in New Issue