From 86744a3da49fadc2bec74072ed1e902088773e53 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Fri, 1 May 2020 18:38:29 +0200 Subject: [PATCH] Refactor userbox styling and layout --- app/assets/stylesheets/application.css.scss | 21 +++------- app/assets/stylesheets/base.css.scss | 2 +- .../stylesheets/components/_userbox.scss | 39 +++++++++++++++++++ app/assets/stylesheets/scss/user.scss | 18 --------- app/views/shared/_userbox.haml | 12 ++++++ app/views/shared/_userbox.html.haml | 24 ------------ app/views/user/show_follow.haml | 4 +- app/views/user/show_follow.js.erb | 2 +- 8 files changed, 60 insertions(+), 62 deletions(-) create mode 100644 app/assets/stylesheets/components/_userbox.scss delete mode 100644 app/assets/stylesheets/scss/user.scss create mode 100644 app/views/shared/_userbox.haml delete mode 100644 app/views/shared/_userbox.html.haml diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index eb59637c..fb746561 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -63,6 +63,7 @@ $navbar-inverse-toggle-border-color: #512da8; @import "bootstrap", +"bootstrap-datetimepicker", "font-awesome", "nprogress", "nprogress-bootstrap"; @@ -82,6 +83,7 @@ $navbar-inverse-toggle-border-color: #512da8; @import "overrides/alerts", +"overrides/bootstrap-datetimepicker", "overrides/buttons", "overrides/colors", "overrides/card", @@ -89,6 +91,7 @@ $navbar-inverse-toggle-border-color: #512da8; "overrides/inputs", "overrides/links", "overrides/list-group", +"overrides/minicolors", "overrides/navbar"; /** @@ -102,21 +105,7 @@ $navbar-inverse-toggle-border-color: #512da8; "components/buttons", "components/jumbotron", "components/profile", -"components/question"; - -body { padding-top: 50px; } - -@import 'bootstrap-datetimepicker'; -.remove-native-picker::-webkit-calendar-picker-indicator{ - display: none -} +"components/question", +"components/userbox"; @import "base"; - -.minicolors-theme-bootstrap .minicolors-swatch { - top: 0; - left: 0; - width: 42px; - height: 42px; - border-radius: 0; -} diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss index 9e9abbed..6b4f84d4 100644 --- a/app/assets/stylesheets/base.css.scss +++ b/app/assets/stylesheets/base.css.scss @@ -4,6 +4,7 @@ body { overflow-y: scroll; word-wrap: break-word; background-color: var(--background); + padding-top: 50px; } @import "scss/flags"; @@ -13,7 +14,6 @@ body { @import "scss/comments"; @import "scss/entry"; @import "scss/panel"; -@import "scss/user"; @import "scss/notifications"; .j2-page { diff --git a/app/assets/stylesheets/components/_userbox.scss b/app/assets/stylesheets/components/_userbox.scss new file mode 100644 index 00000000..42d7463a --- /dev/null +++ b/app/assets/stylesheets/components/_userbox.scss @@ -0,0 +1,39 @@ +.userbox { + overflow: hidden; + + &__header { + width: 100%; + height: auto; + max-height: 70px; + + @include media-breakpoint-up(sm) { + max-height: 60px; + } + } + + &__avatar { + display: block; + width: map-get($avatar-sizes, "lg"); + height: map-get($avatar-sizes, "lg"); + margin-top: -(map-get($avatar-sizes, "lg") / 2); + margin-left: auto; + margin-right: auto; + border-radius: $avatar-border-radius; + box-shadow: $box-shadow; + } + + .profile__name { + display: block; + margin: map-get($spacers, 3) 0; + text-align: center; + } + + .card-body { + display: flex; + flex-direction: column; + } + + .profile__actions { + margin-top: auto; + } +} diff --git a/app/assets/stylesheets/scss/user.scss b/app/assets/stylesheets/scss/user.scss deleted file mode 100644 index ea9dada6..00000000 --- a/app/assets/stylesheets/scss/user.scss +++ /dev/null @@ -1,18 +0,0 @@ -.userbox--header { - width: 100%; - height: auto; -} - -.userbox--avatar { - display: block; - margin-left: auto; - margin-right: auto; - margin-top: -60px; - border-radius: 5px; -} - -.userbox--username { - text-align: center; - margin-top: 10px; - margin-bottom: 5px; -} diff --git a/app/views/shared/_userbox.haml b/app/views/shared/_userbox.haml new file mode 100644 index 00000000..67a4472e --- /dev/null +++ b/app/views/shared/_userbox.haml @@ -0,0 +1,12 @@ +- type ||= @type || :nil +.card.h-100.userbox + %img.userbox__header{src: user.profile_header.url(:mobile)} + .card-body + %img.userbox__avatar{src: user.profile_picture.url(:small)} + %a.profile__name{href: show_user_profile_path(user.screen_name)} + - unless user.display_name.blank? + .profile__display-name + = user.display_name + .profile__screen-name + = user.screen_name + = render 'user/actions', user: user, type: type diff --git a/app/views/shared/_userbox.html.haml b/app/views/shared/_userbox.html.haml deleted file mode 100644 index 8757615a..00000000 --- a/app/views/shared/_userbox.html.haml +++ /dev/null @@ -1,24 +0,0 @@ -- type ||= @type || :nil -- header_class = if user.profile_header.exists? then "userbox--header-container" else "userbox--no-header" end -.card - %div{class: header_class} - %img.userbox--header{src: user.profile_header.url(:mobile)} - .card-body - %img.userbox--avatar{src: user.profile_picture.url(:small)} - %p.userbox--username - - if user.display_name.blank? - %a.profile--displayname{href: show_user_profile_path(user.screen_name)} - = user.screen_name - - else - %a.profile--displayname{href: show_user_profile_path(user.screen_name)} - = user.display_name - %span.profile--username - = user.screen_name - .row - .col-md-6.col-sm-6.col-xs-6 - %h4.entry-text#asked-count= user.asked_count - %h6.entry-subtext= t('views.general.question').pluralize(user.asked_count) - .col-md-6.col-sm-6.col-xs-6 - %h4.entry-text#answered-count= user.answered_count - %h6.entry-subtext= t('views.general.answer').pluralize(user.answered_count) - = render 'user/actions', user: user, type: type diff --git a/app/views/user/show_follow.haml b/app/views/user/show_follow.haml index 19d0938a..15cf82e6 100644 --- a/app/views/user/show_follow.haml +++ b/app/views/user/show_follow.haml @@ -1,6 +1,6 @@ -#users +#users.row.row-cols-1.row-cols-sm-2.row-cols-md-3 - @users.each do |user| - .col-md-4.col-sm-6.col-xs-12 + .col = render 'shared/userbox', user: user = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id diff --git a/app/views/user/show_follow.js.erb b/app/views/user/show_follow.js.erb index 6857406a..213d55f3 100644 --- a/app/views/user/show_follow.js.erb +++ b/app/views/user/show_follow.js.erb @@ -1,5 +1,5 @@ $('#users').append('<% @users.each do |user| - %>
<%= j render 'shared/userbox', user: user + %>
<%= j render 'shared/userbox', user: user %>
<% end %>'); <% if @more_data_available %> $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id %>');