New layout without background color

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/javascripts/activities.js.coffee

 class @Activities
   constructor: ->
     Pager.init 20, true
-    $(".event-filter .btn").bind "click", (event) =>
+    $(".event-filter a").bind "click", (event) =>
       event.preventDefault()
       @toggleFilter($(event.currentTarget))
       @reloadActivities()
@@ -12,7 +12,7 @@ class @Activities
 
 
   toggleFilter: (sender) ->
-    sender.toggleClass "active"
+    sender.parent().toggleClass "active"
     event_filters = $.cookie("event_filter")
     filter = sender.attr("id").split("_")[0]
     if event_filters

app/assets/stylesheets/framework/blocks.scss

@@ -20,7 +20,8 @@
 
 .content-block,
 .gray-content-block {
-  margin: -$gl-padding;
+  margin-top: -$gl-padding;
+  margin-bottom: -$gl-padding;
   background-color: $background-color;
   padding: $gl-padding;
   margin-bottom: 0px;
@@ -86,10 +87,7 @@
 .cover-block {
   text-align: center;
   background: $background-color;
-  margin: -$gl-padding;
-  margin-bottom: 0;
-  padding: 44px $gl-padding;
-  border-bottom: 1px solid $border-color;
+  padding-top: 44px;
   position: relative;
 
   .avatar-holder {
@@ -131,6 +129,10 @@
       right: auto;
     }
   }
+
+  .cover-menu {
+    margin: 0;
+  }
 }
 
 .block-connector {

app/assets/stylesheets/framework/files.scss

@@ -3,8 +3,6 @@
  *
  */
 .file-holder {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
   border: none;
   border-top: 1px solid #E7E9EE;
   border-bottom: 1px solid #E7E9EE;

app/assets/stylesheets/framework/flash.scss

@@ -8,10 +8,12 @@
   .flash-notice {
     @extend .alert;
     @extend .alert-info;
+    margin: 0;
   }
 
   .flash-alert {
     @extend .alert;
     @extend .alert-danger;
+    margin: 0;
   }
 }

app/assets/stylesheets/framework/header.scss

@@ -28,6 +28,7 @@ header {
     min-height: $header-height;
     background-color: #fff;
     border: none;
+    border-bottom: 1px solid #EEE;
 
     .container-fluid {
       width: 100% !important;

app/assets/stylesheets/framework/layout.scss

@@ -5,8 +5,6 @@ html {
 }
 
 body {
-  background-color: #F3F3F3 !important;
-
   &.navless {
     background-color: white !important;
   }

app/assets/stylesheets/framework/lists.scss

@@ -109,10 +109,8 @@ ul.content-list {
   padding: 0;
 
   > li {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
     border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
     color: $gl-gray;
 
     .avatar {

app/assets/stylesheets/framework/sidebar.scss

@@ -21,7 +21,6 @@
 
 .content-wrapper {
   width: 100%;
-  padding: 20px;
 
   .container-fluid {
     background: #FFF;

app/assets/stylesheets/framework/tables.scss

 .table-holder {
-  margin: -$gl-padding;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: 0;
 }
 
 table {

app/assets/stylesheets/framework/timeline.scss

@@ -5,10 +5,8 @@
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
     border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
     color: $gl-gray;
     border-bottom: 1px solid $border-white-light;
 

app/assets/stylesheets/pages/detail_page.scss

 .detail-page-header {
-  margin: -$gl-padding;
-  padding: 7px $gl-padding;
+  margin-top: -$gl-padding;
+  margin-bottom: -$gl-padding;
+  padding: 7px 0;
   margin-bottom: 0px;
   border-bottom: 1px solid $border-color;
   color: #5c5d5e;

app/assets/stylesheets/pages/events.scss

@@ -4,9 +4,7 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding $gl-padding $gl-padding ($gl-padding + $gl-avatar-size + 15px);
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
+  padding: $gl-padding 0 $gl-padding ($gl-avatar-size + 15px);
   border-bottom: 1px solid $table-border-color;
   color: #7f8fa4;
 

app/assets/stylesheets/pages/projects.scss

@@ -26,6 +26,8 @@
 }
 
 .project-home-panel {
+  padding-bottom: 40px;
+  border-bottom: 1px solid $border-color;
 
   .cover-controls {
     .project-settings-dropdown {
@@ -416,8 +418,6 @@ ul.nav.nav-projects-tabs {
 
 .top-area {
   border-bottom: 1px solid #EEE;
-  margin: 0 -16px;
-  padding: 0 $gl-padding;
   height: 42px;
 
   ul.left-top-menu {
@@ -574,10 +574,8 @@ pre.light-well {
   @include basic-list;
 
   .project-row {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
     border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
 
     &.no-description {
       .project {

app/helpers/events_helper.rb

@@ -27,15 +27,17 @@ module EventsHelper
     key = key.to_s
     active = 'active' if @event_filter.active?(key)
     link_opts = {
-      class: "event-filter-link btn btn-default #{active}",
+      class: "event-filter-link",
       id:    "#{key}_event_filter",
       title: "Filter by #{tooltip.downcase}",
     }
 
+    content_tag :li, class: active do
       link_to request.path, link_opts do
         content_tag(:span, ' ' + tooltip)
       end
     end
+  end
 
   def icon_for_event
     {

app/views/groups/show.html.haml

@@ -5,6 +5,9 @@
   - if current_user
     = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
 
+- @no_container = true
+- @blank_container = true
+
 .cover-block
   .cover-controls
     - if @group && can?(current_user, :admin_group, @group)
@@ -25,8 +28,8 @@
     .cover-desc.description
       = markdown(@group.description, pipeline: :description)
 
-- if can?(current_user, :read_group, @group)
-  %ul.center-top-menu.no-top
+
+  %ul.center-top-menu.cover-menu
     %li.active
       = link_to "#activity", 'data-toggle' => 'tab' do
         Activity
@@ -35,9 +38,12 @@
         = link_to "#projects", 'data-toggle' => 'tab' do
           Projects
 
+- if can?(current_user, :read_group, @group)
+
+  %div{ class: container_class }
     .tab-content
       .tab-pane.active#activity
-      .gray-content-block.activity-filter-block
+        .activity-filter-block
           - if current_user
             = render "events/event_last_push", event: @last_push
 

app/views/projects/_activity.html.haml

-.gray-content-block.activity-filter-block
+.activity-filter-block
   - if current_user
     .pull-right
       = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Feed", class: 'btn rss-btn' do

app/views/projects/show.html.haml

@@ -7,8 +7,10 @@
     = render 'shared/no_ssh'
     = render 'shared/no_password'
 
-= render 'projects/last_push'
+- @no_container = true
+- @blank_container = true
 
+= render 'projects/last_push'
 = render "home_panel"
 
 .project-stats.gray-content-block.second-block
@@ -57,15 +59,17 @@
           = link_to add_contribution_guide_path(@project) do
             Add Contribution guide
 
-- if @project.archived?
+- if @repository.commit
+  .content-block.second-block.white
+    %div{ class: container_class }
+      = render 'projects/last_commit', commit: @repository.commit, project: @project
+
+%div{ class: container_class }
+  - if @project.archived?
     .text-warning.center.prepend-top-20
       %p
         = icon("exclamation-triangle fw")
         Archived project! Repository is read-only
 
-- if @repository.commit
-  .content-block.second-block.white
-    = render 'projects/last_commit', commit: @repository.commit, project: @project
-
-%div{class: "project-show-#{default_project_view}"}
+  %div{class: "project-show-#{default_project_view}"}
     = render default_project_view

app/views/shared/_event_filter.html.haml

-.btn-group.btn-group-next.event-filter
+%ul.left-top-menu.event-filter.no-top
   = event_filter_link EventFilter.push, 'Push events'
   = event_filter_link EventFilter.merged, 'Merge events'
   = event_filter_link EventFilter.comments, 'Comments'