Improve profile header layout
This commit is contained in:
parent
21c81e7bcd
commit
74dc7c4526
|
@ -58,7 +58,8 @@ $avatar-sizes: (
|
||||||
"sm": 30px,
|
"sm": 30px,
|
||||||
"md": 40px,
|
"md": 40px,
|
||||||
"lg": 80px,
|
"lg": 80px,
|
||||||
"xl": 160px,
|
"xl": 120px,
|
||||||
|
"xxl": 160px,
|
||||||
);
|
);
|
||||||
|
|
||||||
$spacers: (
|
$spacers: (
|
||||||
|
|
|
@ -3,15 +3,35 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: map-get($avatar-sizes, "xl");
|
width: map-get($avatar-sizes, "xl");
|
||||||
height: 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;
|
border-radius: $avatar-border-radius;
|
||||||
box-shadow: $box-shadow;
|
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 {
|
&__header-container {
|
||||||
margin-bottom: map-get($spacers, 3);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: -1;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
|
@ -27,7 +47,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name,
|
|
||||||
&__biography,
|
&__biography,
|
||||||
&__website,
|
&__website,
|
||||||
&__location {
|
&__location {
|
||||||
|
@ -42,6 +61,13 @@
|
||||||
&__display-name {
|
&__display-name {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__screen-name {
|
&__screen-name {
|
||||||
|
@ -54,6 +80,16 @@
|
||||||
color: RGB(var(--muted-text));
|
color: RGB(var(--muted-text));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
&__name {
|
||||||
|
margin-bottom: map-get($spacers, 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .card-body {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user--banned {
|
.user--banned {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
.profile__header-container
|
|
||||||
%img.profile__header-image{ src: @user.profile_header.url(:web) }
|
|
||||||
.container
|
.container
|
||||||
|
.card.profile__header-card
|
||||||
|
.profile__header-container
|
||||||
|
%img.profile__header-image{ src: @user.profile_header.url(:web) }
|
||||||
.row
|
.row
|
||||||
.col-md-3.col-xs-12.col-sm-4
|
.col-md-3.col-xs-12.col-sm-4
|
||||||
= render 'user/profile', user: @user
|
= render 'user/profile', user: @user
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
.card#profile
|
.card.profile#profile
|
||||||
%img.profile__avatar{ src: user.profile_picture.url(:large) }
|
.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
|
.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
|
.profile__badge-container
|
||||||
- if user.banned?
|
- if user.banned?
|
||||||
%span.badge.badge-dark
|
%span.badge.badge-dark
|
||||||
|
|
Loading…
Reference in New Issue