Refactor userbox styling and layout

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;
-}

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 {

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;
+  }
+}

app/assets/stylesheets/scss/user.scss

@@ -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;
-}

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

app/views/shared/_userbox.html.haml

@@ -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

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

app/views/user/show_follow.js.erb

@@ -1,5 +1,5 @@
 $('#users').append('<% @users.each do |user|
-  %><div class="col-md-4 col-sm-6 col-xs-12"><%= j render 'shared/userbox', user: user
+  %><div class="col"><%= j render 'shared/userbox', user: user
 %></div><% end %>');
 <% if @more_data_available %>
   $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @users_last_id %>');