CSS refactoring

app/assets/stylesheets/common.scss

@@ -401,16 +401,6 @@ p.time {
   }
 }
-.mr_source_commit , 
-.mr_target_commit { 
-  .commit { 
-    list-style:none;
-    margin-top:10px;
-    &:hover { 
-      background:none;
-    }
-  }
-}
 .prettyprint { 
   background-color: #fefbf3;
@@ -446,51 +436,6 @@ p.time {
   }
 }
-/**
- *  UI box element 
- *  contains top, middle, bottom blocks
- * 
- */
-.main_box { 
-  @extend .borders;
-  @extend .prepend-top-20;
-  @extend .append-bottom-20;
-  border-width:1px;
-
-  img { max-width: 100%; }
-
-  pre {
-    code {
-      background: none !important;
-    }
-  }
-
-  .top_box_content, 
-  .middle_box_content, 
-  .bottom_box_content { 
-    padding:15px;
-
-    pre {
-      background: none !important;
-      margin:0;
-      border:none;
-      padding:0;
-    }
-  }
-
-  .middle_box_content { 
-    border-radius:0;
-    border:none;
-    font-size:12px;
-    background-color:#f5f5f5;
-    border:none;
-    border-top:1px solid #eee;
-  }
-
-  .bottom_box_content { 
-    border-top:1px solid #eee;
-  }
-}
 .highlight_word { 
   background:#EEDC94;
@@ -551,40 +496,6 @@ p.time {
   }
 }
-.new_note {
-  .input-file {
-    font: 500px monospace;
-    opacity:0;
-    filter: alpha(opacity=0);
-    position: absolute;
-    z-index: 1;
-    top:0;
-    right:0;
-    padding:0;
-    margin: 0;
-  }
-
-  .file_upload {
-    position: absolute;
-    right:14px;
-    top:7px;
-  }
-
-  div.attachments {
-    position:relative;
-    width: 350px;
-    height: 36px;
-    overflow:hidden;
-    margin:0 0 5px !important;
-  }
-  .file_name {
-    line-height:30px;
-    width:240px;
-    height:28px;
-    overflow:hidden;
-  }
-}
-
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
   img { max-width:100% }
@@ -665,70 +576,7 @@ li.note {
   }
 }
-.automerge_widget { 
-
-  &.can_be_merged { 
-    background: #DFF0D8;
-  }
-
-
-  form { 
-    margin-bottom:0;
-    .clearfix { 
-      margin-bottom:0;
-    }
-  }
-
-  .accept_group { 
-    float:left;
-    border: 1px solid #ADA;
-    padding: 2px;
-    @include border-radius(5px);
-    border-radius: 5px;
-    background: #CEB;
-
-    .accept_merge_request { 
-      float:left;
-    }
-    .remove_branch_holder { 
-      margin-left:20px;
-      margin-right:10px;
-      float:left;
-    }
-    label { 
-      color:#444;
-    }
-  }
-
-
-  .how_to_merge_link { 
-    @extend .primary;
-  }
-}
-
-.graph_holder { 
-  border: 1px solid #aaa;
-  padding:1px;
-
-
-  h4 { 
-    padding:0 10px;
-    border-bottom: 1px solid #bbb;
-    background:#eee;
-    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
-    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-  }
-
-  .graph { 
-    background: #f1f1f1;
-    cursor: move;
-    height: 70%;
-    overflow: hidden;
-  }
-}
 /* CHZN reset few styles */
 .chzn-container-single .chzn-single { 
@@ -752,3 +600,4 @@ li.note {
   @include border-radius(4px);
   min-height:42px;
 }
+

app/assets/stylesheets/gitlab_bootstrap.scss

@@ -532,3 +532,50 @@ ul.breadcrumb {
   padding:20px;
   color:#777;
 }
+
+/**
+ *  UI box element 
+ *  contains top, middle, bottom blocks
+ * 
+ */
+.main_box { 
+  @extend .borders;
+  @extend .prepend-top-20;
+  @extend .append-bottom-20;
+  border-width:1px;
+
+  img { max-width: 100%; }
+
+  pre {
+    code {
+      background: none !important;
+    }
+  }
+
+  .top_box_content, 
+  .middle_box_content, 
+  .bottom_box_content { 
+    padding:15px;
+
+    pre {
+      background: none !important;
+      margin:0;
+      border:none;
+      padding:0;
+    }
+  }
+
+  .middle_box_content { 
+    border-radius:0;
+    border:none;
+    font-size:12px;
+    background-color:#f5f5f5;
+    border:none;
+    border-top:1px solid #eee;
+  }
+
+  .bottom_box_content { 
+    border-top:1px solid #eee;
+  }
+}
+

app/assets/stylesheets/main.scss

@@ -117,20 +117,15 @@ $hover: #FDF5D9;
  */
 @import "common.scss";
-/**
- * Styles related to displaying commits
- */
-@import "sections/commits.scss";
 /**
- * Styles related to displaying issues
+ * Styles related to specific part of app
  */
+@import "sections/commits.scss";
 @import "sections/issues.scss";
-
-/**
- * Styles related to projects
- */
 @import "sections/projects.scss";
+@import "sections/merge_requests.scss";
+@import "sections/graph.scss";
 /**
  * This scss file redefine chozen selectbox styles for

app/assets/stylesheets/notes.scss

@@ -120,3 +120,37 @@ td .line_note_link {
   opacity: 1.0;
   filter: alpha(opacity=100);
 }
+
+.new_note {
+  .input-file {
+    font: 500px monospace;
+    opacity:0;
+    filter: alpha(opacity=0);
+    position: absolute;
+    z-index: 1;
+    top:0;
+    right:0;
+    padding:0;
+    margin: 0;
+  }
+
+  .file_upload {
+    position: absolute;
+    right:14px;
+    top:7px;
+  }
+
+  div.attachments {
+    position:relative;
+    width: 350px;
+    height: 36px;
+    overflow:hidden;
+    margin:0 0 5px !important;
+  }
+  .file_name {
+    line-height:30px;
+    width:240px;
+    height:28px;
+    overflow:hidden;
+  }
+}

app/assets/stylesheets/sections/commits.scss

@@ -166,3 +166,18 @@
 .commit-author, .commit-committer{display: block;color: #999; font-weight: normal; font-style: italic;}
 .commit-author strong, .commit-committer strong{font-weight: bold; font-style: normal;}
+
+/** COMMIT ROW **/
+.commit { 
+  @extend .wll;
+
+  .browse_code_link_holder { 
+    @extend .span2;
+    float:right;
+  }
+
+  .committed_ago { 
+    float:right;
+    @extend .cgray;
+  }
+}

app/assets/stylesheets/sections/graph.scss

+.graph_holder { 
+  border: 1px solid #aaa;
+  padding:1px;
+
+
+  h4 { 
+    padding:0 10px;
+    border-bottom: 1px solid #bbb;
+    background:#eee;
+    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
+    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
+  }
+
+  .graph { 
+    background: #f1f1f1;
+    cursor: move;
+    height: 70%;
+    overflow: hidden;
+  }
+}
+

app/assets/stylesheets/sections/merge_requests.scss

+/** 
+ * MR form
+ *
+ */
+
+.mr_branch_box { 
+  @extend .ui-box;
+  margin-bottom:20px;
+
+  .body { 
+    background:#f1f1f1;
+  }
+
+  .commit { 
+    margin:0;
+    padding:0;
+    padding: 5px;
+    margin-bottom: 5px;
+
+    .committed_ago { 
+      display:none;
+    }
+    .browse_code_link_holder { 
+      display:none;
+    }
+    list-style:none;
+    &:hover { 
+      background:none;
+    }
+  }
+}
+
+/**
+ * MR -> show: Automerge widget
+ *
+ */
+.automerge_widget { 
+  &.can_be_merged { 
+    background: #DFF0D8;
+  }
+
+  form { 
+    margin-bottom:0;
+    .clearfix { 
+      margin-bottom:0;
+    }
+  }
+
+  .accept_group { 
+    float:left;
+    border: 1px solid #ADA;
+    padding: 2px;
+    @include border-radius(5px);
+    border-radius: 5px;
+    background: #CEB;
+
+    .accept_merge_request { 
+      float:left;
+    }
+    .remove_branch_holder { 
+      margin-left:20px;
+      margin-right:10px;
+      float:left;
+    }
+    label { 
+      color:#444;
+    }
+  }
+
+
+  .how_to_merge_link { 
+    @extend .primary;
+  }
+}

app/views/commits/_commit.html.haml

-%li.wll.commit
-  .right.span2
+%li.commit
+  .browse_code_link_holder
     %p
       %strong= link_to "Browse Code »", tree_project_ref_path(@project, commit.id), :class => "right"
   = link_to project_commit_path(@project, :id => commit.id) do
@@ -10,7 +10,7 @@
       = image_tag gravatar_icon(commit.author_email), :class => "avatar", :width => 16
       %span.row_title= truncate(commit.safe_message, :length => 50)
-      %span.right.cgray
+      %span.committed_ago
         = time_ago_in_words(commit.committed_date)
         ago
          

app/views/merge_requests/_form.html.haml

@@ -5,33 +5,30 @@
         - @merge_request.errors.full_messages.each do |msg|
           %li= msg
-
-
   %h3.padded.cgray 1. Select Branches
+
   .row
     .span6
-      .ui-box
+      .mr_branch_box
         %h5 From (Head Branch)
         .body 
           .padded
             = f.label :source_branch, "From", :class => "control-label"
             .controls
               = f.select(:source_branch, @project.heads.map(&:name), { :include_blank => "Select branch" }, :style => "width:250px")
-        %hr
-        .mr_source_commit
-        .clearfix
+        .bottom_commit
+          .mr_source_commit
     .span6
-      .ui-box
+      .mr_branch_box
         %h5 To (Base Branch)
         .body
           .padded
             = f.label :target_branch, "To", :class => "control-label"
             .controls
               = f.select(:target_branch, @project.heads.map(&:name), { :include_blank => "Select branch" }, :style => "width:250px")
-        %hr
-        .mr_target_commit
-        .clearfix
+        .bottom_commit
+          .mr_target_commit
   %h3.padded.cgray 2. Fill info
   .clearfix