Flatter design on User Page

- Cleanup of the design ( remove border-radius ... )
- Fixed some alignment and width in mobile and lower screen size

app/assets/stylesheets/common/components/navs.css.scss

@@ -56,7 +56,6 @@
   padding: 0;
   overflow: hidden;
   background-color: $nav-stacked-background-color;
-  @include border-radius-all(4px);
   @include box-shadow(0 1px 0 $white);
   > li {
     border-bottom: 1px solid $nav-stacked-divider-color;
@@ -66,16 +65,15 @@
     > a {
       margin: 0;
       padding: 13px 13px 13px 30px;
-      font-weight: bold;
       font-size: 16px;
       line-height: 20px;
       cursor: pointer;
+      color: $nav-stacked-color;
     }
   }
   .active > a,
   .active .icon-chevron-right {
-    color: $nav-stacked-border-color-active;
-    text-shadow: 0 1px 0 rgba($white, 0.5);
+    color: $white;
     background-color: $nav-stacked-background-color-active;
   }
   .count {

app/assets/stylesheets/common/foundation/variables.scss

@@ -71,12 +71,13 @@ $nav-pills-background-color-active: #e45735 !default;
 
 // Stacked nav
 
+$nav-stacked-color: #534d4b !default;
 $nav-stacked-border-color: #ccc !default;
 $nav-stacked-background-color: #fafafa !default;
 $nav-stacked-divider-color: #e6e6e6 !default;
 $nav-stacked-chevron-color: #ccc !default;
 $nav-stacked-border-color-active: #f15b22 !default;
-$nav-stacked-background-color-active: #f9e7e0 !default;
+$nav-stacked-background-color-active: #e45735 !default;
 
 // Button nav
 

app/assets/stylesheets/desktop/user.scss

@@ -40,7 +40,6 @@
     color: $darkish_gray;
   }
   .warning {
-    @include border-radius-all(6px);
     background-color: lighten($red, 10%);
     padding: 5px 8px;
     color: $white;
@@ -110,16 +109,16 @@
 }
 
 .user-main {
-  width: 840px;
+  width: 850px;
   float: left;
   margin-bottom: 50px;
 
   @include medium-width {
-    width: 730px;
+    width: 735px;
   }
 
   @include small-width {
-    width: 650px;
+    width: 680px;
   }
 
   .user-content {
@@ -127,21 +126,18 @@
     background-color: white;
     border: 1px solid #ddd;
     margin-bottom: 10px;
-    @include border-radius-all(4px);
   }
 
   .about {
     background-color: #444;
     margin-bottom: 10px;
     overflow: hidden;
-    border: 1px solid #bbb;
     color: #fff;
 
-    @include border-radius-all(4px);
 
     .details {
       text-align: center;
-      padding: 10px;
+      padding: 12px;
 
 
       h1 {
@@ -188,11 +184,12 @@
         text-align: right;
         padding: 0 10px;
         width: 20%;
-        @include border-radius-all(4px);
 
         dd {
           color: white;
           margin: 0 0 7px 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
         dt {
           color: #aaa;
@@ -203,9 +200,8 @@
 
     .controls {
       background-color: #ddd;
-      margin-top: 10px;
-      padding: 5px;
-      height: 32px;
+      padding: 12px;
+      height: 30px;
 
       .right {
         float: right;
@@ -273,7 +269,6 @@
       background-color: white;
       border: 1px solid #ddd;
       margin-bottom: 10px;
-      @include border-radius-all(4px);
     }
     .type {
       color: lighten($black, 40%);

app/assets/stylesheets/mobile/user.scss

@@ -47,7 +47,6 @@
   width: 220px;
   min-height: 200px;
   background-color: #f8f8f8;
-  border-radius: 5px;
   color: #444;
   word-wrap: break-word;
 }
@@ -56,8 +55,12 @@
 
   h3 {
     color: #666;
+    padding-left: 5px;
+  }
+  .nav-stacked {
+    border-left: 0;
+    border-right: 0;
   }
-
   .summary {
     height: 50px;
   }
@@ -112,11 +115,8 @@
     background-color: #444;
     margin-bottom: 10px;
     overflow: hidden;
-    border: 1px solid #bbb;
     color: #fff;
 
-    @include border-radius-all(4px);
-
     .details {
       text-align: center;
       padding: 10px;
@@ -145,7 +145,6 @@
         background-color: #222;
         text-align: left;
         padding: 0 10px;
-        @include border-radius-all(4px);
 
         dd {
           color: white;
@@ -161,9 +160,49 @@
     .controls {
       background-color: #ddd;
       margin-top: 0px;
-      padding: 5px;
+      padding: 10px 10px 0 10px;
 
-      button { margin-bottom: 3px; }
+      .btn { 
+        margin-bottom: 10px;
+        float: none;
+      }
+    }
+  }
+
+  .about.collapsed-info {
+    .controls {
+      margin-top: 0;
+    }
+
+    .details {
+      .secondary { display: none; }
+      .bio { display: none; }
+
+      .primary {
+        width: 100%;
+        text-align: left;
+        margin-top: 4px;
+
+        .avatar {
+          float: left;
+          margin-right: 10px;
+          border: 2px solid white;
+          width: 45px;
+          height: 45px;
+        }
+
+        h1 {
+          margin:0;
+          font-size: 20px;
+          line-height: 22px;
+        }
+
+        h2 {
+          font-size: 17px;
+          line-height: 16px;
+          margin-top: 4px;
+        }
+      }
     }
   }
 
@@ -188,9 +227,7 @@
     .item {
       padding: 10px 8px;
       background-color: white;
-      border: 1px solid #b9b9b9;
-      margin-bottom: 10px;
-      @include border-radius-all(4px);
+      border-bottom: 1px solid #b9b9b9;
     }
     .type {
       color: lighten($black, 40%);