Merge pull request #5084 from Flaburgan/profile-mobile-improvements

Improve profile page design on mobile

Changelog.md

@@ -17,6 +17,7 @@ The default for including jQuery from a CDN has changed. If you want to continue
 
 ## Refactor
 * Redesign contacts page [#5153](https://github.com/diaspora/diaspora/pull/5153)
+* Improve profile page design on mobile [#5084](https://github.com/diaspora/diaspora/pull/5084)
 
 ## Bug fixes
 * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158)

app/assets/stylesheets/mobile/mobile.css.scss

@@ -48,9 +48,10 @@ h3 {
   position: relative;
   text-align: left;
   padding: 10px 0;
-  * {
-    max-width: 100%; }
   min-height: 34px;
+  
+  * { max-width: 100%; }
+  
   .avatar {
     @include border-radius(4px);
 
@@ -151,7 +152,8 @@ h3 {
   }
 }
 
-.stream_element, #login_form {
+.stream_element,
+#login_form {
   @include border-radius(5px);
   @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));
 
@@ -297,27 +299,42 @@ h3 {
 }
 
 #author_info {
-  height: 100%;
+  margin: -10px;
-  position: relative;
+  margin-bottom: 10px;
+  padding-top: 5px;
+  background-color: #fff;
+  border-bottom: 1px solid #aaa;
   word-wrap: break-word;
 
   img {
-    height: 90px;
+    @include border-radius(4px);
-    width: 90px;
+    
-    margin-right: 10px;
+    height: 70px;
+    width: 70px;
+    margin: 10px;
     float: left;
   }
 
   .content {
-    padding-left: 100px;
+    padding-left: 90px;
-  }
+    
+    h2 {
+      font-size: 20px;
+      line-height: 20px;
+      margin-bottom: 0px;
+    }
 
-  .description {
+    .description {
-    font: {
+      font: {
-      weight: normal;
+        weight: normal;
-      size: small;
+        size: small;
-    };
+      };
-    color: $text-grey;
+      color: $text-grey;
+    }
+  }
+  
+  .bottom_bar {
+    position: static;
   }
 }
 

app/views/people/_sub_header.html.haml

@@ -19,7 +19,7 @@
   .description
     - if !person.tag_string.blank? && user_signed_in?
       = Diaspora::Taggable.format_tags(person.profile.tag_string)
-      - if user_signed_in? && person == current_user.person
+      - if person == current_user.person
         %span.hover_edit
           = link_to t('.edit'), edit_profile_path
     - else

app/views/people/show.mobile.haml

@@ -10,6 +10,10 @@
         = @person.name
       %span.description
         = @person.diaspora_handle
+      .clear
+    .bottom_bar
+      - if !@person.tag_string.blank? && user_signed_in?
+        = Diaspora::Taggable.format_tags(@person.profile.tag_string)
 
 .span12.profile_stream
   - if @stream.stream_posts.length > 0