From 36e88b960a32d4f291a32be988488414a44f7d29 Mon Sep 17 00:00:00 2001 From: randx Date: Wed, 13 Jun 2012 20:02:30 +0300 Subject: [PATCH] CSS refactoring --- app/assets/stylesheets/common.scss | 153 +----------------- app/assets/stylesheets/gitlab_bootstrap.scss | 47 ++++++ app/assets/stylesheets/main.scss | 13 +- app/assets/stylesheets/notes.scss | 34 ++++ app/assets/stylesheets/sections/commits.scss | 15 ++ app/assets/stylesheets/sections/graph.scss | 23 +++ .../stylesheets/sections/merge_requests.scss | 74 +++++++++ app/views/commits/_commit.html.haml | 6 +- app/views/merge_requests/_form.html.haml | 17 +- 9 files changed, 208 insertions(+), 174 deletions(-) create mode 100644 app/assets/stylesheets/sections/graph.scss create mode 100644 app/assets/stylesheets/sections/merge_requests.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 32667ec6..1507aab2 100644 --- a/app/assets/stylesheets/common.scss +++ b/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; } + diff --git a/app/assets/stylesheets/gitlab_bootstrap.scss b/app/assets/stylesheets/gitlab_bootstrap.scss index 445987f7..04a55bf9 100644 --- a/app/assets/stylesheets/gitlab_bootstrap.scss +++ b/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; + } +} + diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 7bf56cd0..5a09e564 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -117,20 +117,15 @@ $hover: #FDF5D9; */ @import "common.scss"; + /** - * Styles related to displaying commits + * Styles related to specific part of app */ @import "sections/commits.scss"; - -/** - * Styles related to displaying issues - */ @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 diff --git a/app/assets/stylesheets/notes.scss b/app/assets/stylesheets/notes.scss index 3142d640..70a31dbb 100644 --- a/app/assets/stylesheets/notes.scss +++ b/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; + } +} diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss index 736f5053..c0a5d708 100644 --- a/app/assets/stylesheets/sections/commits.scss +++ b/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; + } +} diff --git a/app/assets/stylesheets/sections/graph.scss b/app/assets/stylesheets/sections/graph.scss new file mode 100644 index 00000000..33d91de5 --- /dev/null +++ b/app/assets/stylesheets/sections/graph.scss @@ -0,0 +1,23 @@ +.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; + } +} + diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss new file mode 100644 index 00000000..de1ecf72 --- /dev/null +++ b/app/assets/stylesheets/sections/merge_requests.scss @@ -0,0 +1,74 @@ +/** + * 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; + } +} diff --git a/app/views/commits/_commit.html.haml b/app/views/commits/_commit.html.haml index f52dbcfe..9f9502e3 100644 --- a/app/views/commits/_commit.html.haml +++ b/app/views/commits/_commit.html.haml @@ -1,5 +1,5 @@ -%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   diff --git a/app/views/merge_requests/_form.html.haml b/app/views/merge_requests/_form.html.haml index 82d95577..d69faa14 100644 --- a/app/views/merge_requests/_form.html.haml +++ b/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