FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor and redesign user profile section

This commit is contained in:
Andreas Nedbal 2020-04-30 20:35:22 +02:00
parent 3f0d84a4ad
commit 7bd7b91ea4
9 changed files with 141 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/_variables.scss
View File

@ -26,7 +26,8 @@ $avatar-sizes: (
"xs": 20px,
"sm": 30px,
"md": 40px,
"lg": 80px
"lg": 80px,
"xl": 160px,
);
:root {

1
app/assets/stylesheets/application.css.scss
View File

@ -101,6 +101,7 @@ $navbar-inverse-toggle-border-color: #512da8;
"components/avatars",
"components/buttons",
"components/jumbotron",
"components/profile",
"components/question";
body { padding-top: 50px; }

62
app/assets/stylesheets/components/_profile.scss Normal file
View File

@ -0,0 +1,62 @@
.profile {
&__avatar {
display: block;
width: map-get($avatar-sizes, "xl");
height: map-get($avatar-sizes, "xl");
margin: -(map-get($avatar-sizes, "xl") / 2) auto 0;
border-radius: $avatar-border-radius;
box-shadow: $box-shadow;
}
&__header-container {
margin-bottom: map-get($spacers, 3);
position: relative;
z-index: -1;
width: 100%;
overflow: hidden;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.10),
rgba(0, 0, 0, 0.10)
) var(--primary);
max-height: 440px;
}
&__header-image {
display: block;
min-width: 900px;
width: 100%;
}
&__name,
&__biography,
&__website,
&__location {
margin-bottom: map-get($spacers, 3);
}
&__actions,
&__biography {
margin-top: map-get($spacers, 3);
}
&__display-name {
font-weight: bold;
font-size: 1.1em;
}
&__screen-name {
&:only-child {
@extend .profile__display-name;
}
&:not(:only-child) {
font-size: 0.9em;
color: RGB(var(--muted-text));
}
}
}
.user--banned {
text-decoration: line-through !important;
}

115
app/assets/stylesheets/scss/user.scss
View File

@ -1,118 +1,3 @@
.profile--img {
min-height: 80px;
min-width: 80px;
height: 80px;
width: 8px;
}
.profile--displayname {
font-weight: 700;
font-size: 1.2em;
margin-top: -0.165em;
line-height: 1.33em;
}
.profile--username {
font-size: 0.9em;
color: rgba(0, 0, 0, 0.4);
line-height: 1.33;
}
.profile--followtag {
margin: 0px 0px 0.2em;
}
.profile--text {
margin-bottom: 2px;
line-height: 1.5em;
margin-top: 0.65em;
}
#profile--header {
position: relative;
z-index: -1;
width: 100%;
overflow: hidden;
background-color: darken($navbar-inverse-bg, 10%);
max-height: 440px;
}
.profile--panel .panel-heading {
color: theme-color('primary');
border-bottom: 2px solid theme-color('primary');
background-color: #fff;
text-transform: uppercase;
}
.profile--panel .panel-body {
padding-top: 0px;
}
.inbox--panel .panel-heading {
color: theme-color('info');
border-bottom: 2px solid theme-color('info');
background-color: #fff;
text-transform: uppercase;
}
.warning--panel .panel-heading {
color: theme-color('danger');
border-bottom: 2px solid theme-color('danger');
background-color: #fff;
text-transform: uppercase;
}
.profile--follow-btn {
margin-top: 5px;
}
.profile--avatar {
width: 100%;
height: auto;
border: medium none;
}
.profile--panel-badge {
width: 100%;
text-align: center;
padding-top: 0.15em;
padding-bottom: 0.15em;
text-transform: uppercase;
font-weight: bold;
margin: 0;
color: #fff;
}
$colours: danger theme-color('danger'),
default #BBB,
success theme-color('success'),
warning theme-color('warning'),
primary theme-color('primary'),
info #2980b9;
@each $colour in $colours {
.panel-badge-#{nth($colour, 1)} {
background-color: nth($colour, 2);
}
}
.user--banned {
text-decoration: line-through !important;
}
.profile--header-img {
display: block;
min-width: 900px;
width: 100%;
}
@media(min-width: 767px) {
.container.headerable {
padding-top: 0;
margin-top: -30px;
}
}
.userbox--header {
width: 100%;
height: auto;

12
app/views/layouts/user/profile.haml
View File

@ -1,11 +1,11 @@
#profile--header
%img.profile--header-img{src: @user.profile_header.url(:web)}
.container.j2-page.headerable
.profile__header-container
%img.profile__header-image{src: @user.profile_header.url(:web)}
.container
.row
#profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
= render 'user/profile_info'
.col-md-3.col-xs-12.col-sm-4
= render 'user/profile'
.d-none.d-sm-block= render 'shared/links'
.col-md-9.col-xs-12.col-sm-8.j2-col-reset
.col-md-9.col-xs-12.col-sm-8
= render "questionbox"
= render "tabs/profile"
= yield

32
app/views/user/_actions.haml Normal file
View File

@ -0,0 +1,32 @@
.profile__actions
- if user_signed_in?
- type ||= :nil
- if user == current_user
%a.btn.btn-dark.btn-block{href: edit_user_profile_path} Edit profile
- else
- if current_user.following? user
%button#editprofile.btn.btn-primary.btn-block{type: :button, name: 'user-action', data: { action: :unfollow, type: type, target: user.screen_name }}
= t 'views.actions.unfollow'
- else
%button#editprofile.btn.btn-primary.btn-block{type: :button, name: 'user-action', data: { action: :follow, type: type, target: user.screen_name }}
= t 'views.actions.follow'
- unless user == current_user
.btn-group.btn-block
%button.btn.btn-light.btn-block.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
= t 'views.actions.title'
%span.caret
.dropdown-menu
%a.dropdown-item.d-block.d-sm-none{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
%i.fa.fa-users
= t 'views.actions.group'
%a.dropdown-item{href: '#', data: { action: 'report-user', target: user.screen_name }}
%i.fa.fa-exclamation-triangle
= t 'views.actions.report'
- if current_user.mod?
%a.dropdown-item{href: '#', data: { target: "#modal-privileges", toggle: :modal }}
%i.fa.fa-wrench
= raw t('views.actions.privilege', user: user.screen_name)
- unless user.has_role?(:administrator)
%a.dropdown-item{href: '#', data: { target: "#modal-ban", toggle: :modal }}
%i.fa.fa-ban
= t 'views.actions.ban'

40
app/views/user/_actions.html.haml
View File

@ -1,40 +0,0 @@
- if user_signed_in?
- type ||= :nil
- if user == current_user
%a.btn.btn-default.btn-block.profile--follow-btn{href: edit_user_profile_path} Edit profile
- else
- if current_user.following? user
%button#editprofile.btn.btn-default.btn-block.profile--follow-btn{type: :button, name: 'user-action', data: { action: :unfollow, type: type, target: user.screen_name }}
= t 'views.actions.unfollow'
- else
%button#editprofile.btn.btn-primary.btn-block.profile--follow-btn{type: :button, name: 'user-action', data: { action: :follow, type: type, target: user.screen_name }}
= t 'views.actions.follow'
- unless user == current_user
.btn-group.btn-block
%button.btn.btn-default.btn-block.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
= t 'views.actions.title'
%span.caret
%ul.dropdown-menu
/
%li
%a{href: '#', name: 'user-action', data: { action: :block, type: type, target: user.screen_name }}
%i.fa.fa-minus-circle
Block
%li.visible-xs
%a{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }}
%i.fa.fa-users
= t 'views.actions.group'
%li
%a{href: '#', data: { action: 'report-user', target: user.screen_name }}
%i.fa.fa-exclamation-triangle
= t 'views.actions.report'
- if current_user.mod?
%li
%a{href: '#', data: { target: "#modal-privileges", toggle: :modal }}
%i.fa.fa-wrench
= raw t('views.actions.privilege', user: user.screen_name)
- unless user.has_role?(:administrator)
%li
%a{href: '#', data: { target: "#modal-ban", toggle: :modal }}
%i.fa.fa-ban
= t 'views.actions.ban'

38
app/views/user/_profile.haml Normal file
View File

@ -0,0 +1,38 @@
.card#profile
%img.profile__avatar{src: @user.profile_picture.url(:large)}
.card-body
.profile__name
- unless @user.display_name.blank?
.profile__display-name
= @user.display_name
.profile__screen-name
= @user.screen_name
.profile__badge-container
- if @user.banned?
%span.badge.badge-dark
%i.fa.fa-fw.fa-ban
= t 'views.user.title.banned'
- if @user.following? current_user
.badge.badge-light
= t 'views.user.follows_you'
- if user_signed_in? && current_user.has_role?(:administrator)
- if @user.has_role?(:administrator)
%span.badge.badge-danger
%i.fa.fa-fw.fa-flask
= t 'views.user.title.admin'
- if @user.has_role?(:moderator)
%span.badge.badge-success
%i.fa.fa-fw.fa-users
= t 'views.user.title.moderator'
- unless @user.bio.blank?
.profile__biography
= markdown @user.bio
- unless @user.website.blank?
.profile__website
%i.fa.fa-fw.fa-globe
%a{href: @user.website}= @user.display_website
- unless @user.location.blank?
.profile__location
%i.fa.fa-fw.fa-location-arrow
= @user.location
= render 'user/actions', user: @user, type: :follower

39
app/views/user/_profile_info.html.haml
View File

@ -1,39 +0,0 @@
.card#profile
%img.profile--avatar{src: @user.profile_picture.url(:large)}
- if user_signed_in? && current_user.has_role?(:administrator)
- if @user.has_role?(:administrator)
.profile--panel-badge.panel-badge-danger
%i.fa.fa-flask
= t 'views.user.title.admin'
- if @user.has_role?(:moderator)
.profile--panel-badge.panel-badge-success
%i.fa.fa-users
= t 'views.user.title.moderator'
- if @user.banned?
.profile--panel-badge.panel-badge-default
%i.fa.fa-ban
= t 'views.user.title.banned'
- if @user.following? current_user
.profile--panel-badge.panel-badge-default
= t 'views.user.follows_you'
.card-body
.profile--panel-name
- if @user.display_name.blank?
.profile--displayname
= @user.screen_name
- else
.profile--displayname
= @user.display_name
.profile--username
= @user.screen_name
- unless @user.bio.blank?
%p.profile--text= markdown @user.bio
- unless @user.website.blank?
%p.profile--text
%i.fa.fa-globe
%a{href: @user.website}= @user.display_website
- unless @user.location.blank?
%p.profile--text
%i.fa.fa-location-arrow
= @user.location
= render 'user/actions', user: @user, type: :follower