Mobile-friendly profile info box

app/assets/stylesheets/base.css.scss

@@ -16,6 +16,7 @@ body {
 @import "scss/user";
 @import "scss/notifications";
 @import "scss/groups";
+@import "scss/mobile";
 
 .j2-page {
   padding-top: 30px;

app/assets/stylesheets/scss/mobile.scss

@@ -0,0 +1,4 @@
+@media (max-width: 768px) {
+  @import "mobile/settings";
+  @import "mobile/profile";
+}

app/assets/stylesheets/scss/mobile/profile.scss

@@ -0,0 +1,76 @@
+.container.headerable:not(.profile--no-header) {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+#profile--header:not(.profile--no-header) {
+  min-width: 0px;
+  * {
+    min-width: 0px;
+  }
+}
+
+
+.container.headerable {
+  #profile-info {
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    margin-bottom: 15px;
+    
+    #profile.panel, #profile-stats.panel {
+      box-shadow: none;
+      margin-bottom: 0;
+    }
+
+    #profile.panel {
+      font-size: 0;
+
+      .profile--avatar {
+        width: 64px;
+        position: relative;
+        top: -15px;
+        left: 5px;
+        display: inline;
+      }
+
+      .profile--panel-badge {
+        display: inline-block;
+        padding: 0 5px;
+        vertical-align: top;
+        width: auto;
+        margin-top: -15px;
+        &:nth-child(2) {
+          margin-left: 5px;
+        }
+        .fa {
+          font-size: 15px;
+        }
+      }
+
+      .panel-body {
+        font-size: 15px;
+        .profile--panel-name {
+          margin-top: -75px;
+          margin-left: 60px
+        }
+      }
+    }
+
+    #profile-stats {
+      border: none;
+      .panel-heading {
+        display: none;
+      }
+
+      .panel-body {
+        font-size: 0px;
+        padding: 0;
+        .row {
+          width: 50%;
+          display: inline-block;
+          font-size: 12px;
+          margin: 0;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/scss/mobile/settings.scss

@@ -0,0 +1,11 @@
+#profile-header-media {
+  clear: both;
+  display: block;
+  .pull-left {
+    float: none !important;
+    clear: both;
+    img {
+      width: 100%
+    }
+  }
+}

app/views/user/_profile_info.html.haml

@@ -28,14 +28,15 @@
     .profile--panel-badge.panel-badge-default
       Follows you
   .panel-body
-    - if @user.display_name.blank?
-      .profile--displayname
-        = @user.screen_name
-    - else
-      .profile--displayname
-        = @user.display_name
-      .profile--username
-        = @user.screen_name
+    .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?

app/views/user/_stats.html.haml

@@ -1,4 +1,4 @@
-.panel.panel-default.profile--panel
+.panel.panel-default.profile--panel#profile-stats
   .panel-heading
     %h3.panel-title Stats
   .panel-body

app/views/user/edit.html.haml

@@ -9,7 +9,7 @@
 
           = f.text_field :display_name, label: "Your name"
 
-          .media
+          .media#profile-picture-media
             .pull-left
               %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
             .media-body
@@ -26,7 +26,7 @@
                 %button#cropper-zoom-in.btn.btn-inverse{type: :button}
                   %i.fa.fa-search-plus
 
-          .media
+          .media#profile-header-media
             .pull-left
               %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
             .media-body

app/views/user/show.html.haml

@@ -1,9 +1,9 @@
 - provide(:title, user_title(@user))
 - no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end
-#profile--header.hidden-xs{class: no_header}
+#profile--header{class: no_header}
   %img.profile--header-img{src: @user.profile_header.url(:web)}
 .container.j2-page.headerable{class: no_header}
-  .col-md-3.col-xs-12.col-sm-4.j2-col-reset
+  #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset
     = render 'user/profile_info'
     .hidden-xs= render 'shared/links'
   .col-md-9.col-xs-12.col-sm-8.j2-col-reset