Redesign profile page and group page mobile navigation

app/assets/stylesheets/framework/blocks.scss

@@ -156,6 +156,26 @@
     border-bottom: 1px solid $border-color;
     text-align: left;
     padding: 24px 0;
+
+    .group-info {
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+
+      .avatar {
+        float: none;
+      }
+    }
+  }
+
+  .group-info {
+    h1 {
+      display: inline;
+    }
   }
 }
 

app/assets/stylesheets/framework/mobile.scss

@@ -30,7 +30,7 @@
   }
 
   .rss-btn {
-    display: none !important;
+    display: none;
   }
 
   .project-home-links {

app/assets/stylesheets/framework/nav.scss

@@ -198,13 +198,35 @@
     .dropdown {
       margin-left: 7px;
     }
-  }
 
-  .nav-links {
-    border-bottom: none;
+    @media (max-width: $screen-md-max) {
+      float: none;
+      margin-bottom: 10px;
 
-    a {
-      padding-top: 2px;
+      .btn {
+        width: 20%;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+
+      .rss-btn,
+      .dropdown-new {
+        display: inline-block;
+        width: 48%;
+      }
     }
   }
 }
+
+.nav-links {
+  border-bottom: none;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  a {
+    padding-top: 2px;
+  }
+}

app/assets/stylesheets/framework/variables.scss

@@ -109,7 +109,7 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
 
-$black: #000000;
+$black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
 $border-white-light: #f1f2f4;

app/assets/stylesheets/pages/profile.scss

@@ -205,3 +205,33 @@
     text-align: center;
   }
 }
+
+.user-profile {
+  @media (max-width: $screen-xs-max) {
+    .cover-block {
+      padding-top: 20px;
+    }
+
+    .cover-controls {
+      position: static;
+      margin-bottom: 20px;
+
+      .btn {
+        display: inline-block;
+        width: 48%;
+      }
+    }
+  }
+
+  .cover-controls {
+    @media (max-width: $screen-xs-max) {
+      position: static;
+      margin-bottom: 20px;
+
+      .btn {
+        display: inline-block;
+        width: 48%;
+      }
+    }
+  }
+}

app/views/groups/show.html.haml

@@ -8,12 +8,16 @@
   .container-fluid
     = link_to group_icon(@group), target: '_blank' do
       = image_tag group_icon(@group), class: "avatar group-avatar s90"
-    .cover-title
-      %h1 @#{@group.path}
+    .group-info
+      .cover-title
+        %h1
+          @#{@group.path}
+          %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+            = visibility_level_icon(@group.visibility_level, fw: false)
 
-    - if @group.description.present?
-      .cover-desc.description
-        = markdown(@group.description, pipeline: :description)
+      - if @group.description.present?
+        .cover-desc.description
+          = markdown(@group.description, pipeline: :description)
 
 %div{ class: container_class }
   .top-area