Download as
Browse Code »

Commit a16d755813a9cf567d842a9f252d40e65902d52b

Authored by Dmitriy Zaporozhets
2 parents ce527b68 0c0beec2
Exists in spb-stable and in 3 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb

Merge branch 'refactor/scss' of /home/git/repositories/gitlab/gitlabhq

Showing 18 changed files with 271 additions and 243 deletions   Show diff stats
app/assets/stylesheets/gitlab_bootstrap.scss
  Diff comments   View file @a16d755
... ... @@ -61,6 +61,8 @@ $baseLineHeight: 18px !default;
61 61 @import "gitlab_bootstrap/typography.scss";
62 62 @import "gitlab_bootstrap/buttons.scss";
63 63 @import "gitlab_bootstrap/blocks.scss";
  64 +@import "gitlab_bootstrap/ui_box.scss";
  65 +@import "gitlab_bootstrap/issue_box.scss";
64 66 @import "gitlab_bootstrap/files.scss";
65 67 @import "gitlab_bootstrap/lists.scss";
66 68 @import "gitlab_bootstrap/forms.scss";
... ...
app/assets/stylesheets/gitlab_bootstrap/blocks.scss
  Diff comments   View file @a16d755
1   -/**
2   - * ===================================
3   - * Contain UI block elements:
4   - * .ui-box - for any block & widgets
5   - * ===================================
6   - */
7   -
8   -/**
9   - * UI Block
10   - *
11   - */
12   -.ui-box {
13   - background: #FFF;
14   - margin-bottom: 20px;
15   - border: 1px solid #DDD;
16   - word-wrap: break-word;
17   -
18   - &.small-box {
19   - margin-bottom: 10px;
20   -
21   - .title {
22   - font-size: 13px;
23   - line-height: 30px;
24   -
25   - a {
26   - color: #666;
27   - &:hover {
28   - text-decoration: underline;
29   - }
30   - }
31   - }
32   - }
33   -
34   - &.ui-box-show {
35   - color: #666;
36   - margin:20px 0;
37   - background: #FAFAFA;
38   -
39   - .control-group {
40   - margin-bottom: 0;
41   - }
42   - }
43   -
44   - &.ui-box-danger {
45   - background: #f7f7f7;
46   - border: none;
47   -
48   - .title {
49   - background: #D65;
50   - color: #fff;
51   - text-shadow: 0 1px 1px #900;
52   - }
53   - }
54   -
55   - img { max-width: 100%; }
56   -
57   - pre {
58   - code {
59   - background: none !important;
60   - }
61   - }
62   -
63   - .ui-box-head,
64   - .ui-box-body,
65   - .ui-box-bottom {
66   - padding: 15px;
67   -
68   - .clearfix {
69   - margin: 0;
70   - }
71   - }
72   -
73   - .ui-box-head {
74   - .box-title {
75   - font-size: 20px;
76   - font-weight: 500;
77   - line-height: 28px;
78   - margin: 0;
79   - color: #444;
80   - }
81   - h3 {
82   - margin: 0;
83   - }
84   - }
85   -
86   - .ui-box-body {
87   - border: none;
88   - background-color: #f5f5f5;
89   - border: none;
90   - border-top: 1px solid #eee;
91   - }
92   -
93   - .ui-box-bottom {
94   - border-top: 1px solid #eee;
95   - }
96   -
97   - ul {
98   - margin: 0;
99   - }
100   -
101   - .title {
102   - background-color: #EEE;
103   - border-bottom: 1px solid #DDD;
104   - color: #666;
105   - font-size: 16px;
106   - text-shadow: 0 1px 1px #fff;
107   - padding: 0 10px;
108   - font-size: 14px;
109   - line-height: 40px;
110   - font-weight: normal;
111   - margin: 0;
112   -
113   - > a {
114   - text-shadow: 0 1px 1px #fff;
115   - }
116   -
117   - form {
118   - margin-bottom: 0;
119   - margin-top: 0;
120   - }
121   -
122   - .btn {
123   - vertical-align: middle;
124   - padding: 4px 12px;
125   - @include box-shadow(0 0px 1px 1px #f2f2f2);
126   - }
127   -
128   - .nav-pills {
129   - > li {
130   - > a {
131   - padding: 13px;
132   - margin: 0;
133   - font-size: 13px;
134   - }
135   - &.active {
136   - > a {
137   - background: #D5D5D5;
138   - color: $style_color;
139   - @include border-radius(0);
140   - border-radius: 0;
141   - border-left: 1px solid #CCC;
142   - border-right: 1px solid #CCC;
143   - }
144   - }
145   - }
146   - }
147   - }
148   -
149   - &.padded {
150   - h5, .title {
151   - margin: -20px;
152   - margin-bottom: 0;
153   - padding: 5px 20px;
154   - }
155   - }
156   -
157   - .row_title {
158   - font-weight: 500;
159   - color: #444;
160   - &:hover {
161   - color: #444;
162   - text-decoration: underline;
163   - }
164   - }
165   -
166   - .form-holder {
167   - padding-top: 20px;
168   - form {
169   - margin-bottom: 0;
170   - legend {
171   - text-indent: 10px;
172   - }
173   - .form-actions {
174   - margin-bottom: 0;
175   - }
176   - }
177   - }
178   -}
179   -
180   -.tab-pane {
181   - .ui-box {
182   - margin: 3px 3px 25px 3px;
183   - }
184   -}
185   -
186 1 .light-well {
187 2 background: #f9f9f9;
188 3 padding: 15px;
... ...
app/assets/stylesheets/gitlab_bootstrap/issue_box.scss 0 → 100644
  Diff comments   View file @a16d755
... ... @@ -0,0 +1,46 @@
  1 +/**
  2 + * Issue box:
  3 + * Huge block (one per page) for storing title, descripion and other information.
  4 + * Used for Issue#show page, MergeRequest#show page etc
  5 + *
  6 + * CLasses:
  7 + * .issue-box - Regular box
  8 + */
  9 +
  10 +.issue-box {
  11 + color: #666;
  12 + margin:20px 0;
  13 + background: #FAFAFA;
  14 + border: 1px solid #DDD;
  15 +
  16 + .control-group {
  17 + margin-bottom: 0;
  18 + }
  19 +
  20 + .title {
  21 + font-size: 20px;
  22 + font-weight: 500;
  23 + line-height: 28px;
  24 + margin: 0;
  25 + color: #444;
  26 + }
  27 +
  28 + .context {
  29 + border: none;
  30 + background-color: #f5f5f5;
  31 + border: none;
  32 + border-top: 1px solid #eee;
  33 + }
  34 +
  35 + .description {
  36 + border-top: 1px solid #eee;
  37 + }
  38 +
  39 + .title, .context, .description {
  40 + padding: 15px;
  41 +
  42 + .clearfix {
  43 + margin: 0;
  44 + }
  45 + }
  46 +}
... ...
app/assets/stylesheets/gitlab_bootstrap/ui_box.scss 0 → 100644
  Diff comments   View file @a16d755
... ... @@ -0,0 +1,171 @@
  1 +/**
  2 + * UI box:
  3 + * Block element for separating information on page.
  4 + * Used for storing issues lists, grouped data.
  5 + * You can have multiple ui boxes on one page
  6 + *
  7 + * Classes:
  8 + * .ui-box - for any block & widgets
  9 + * .ui-box.ui-box-small - same but with smaller title
  10 + * .ui-box.ui-box-danger - with red title
  11 + *
  12 + * Ex. 1: List
  13 + * .ui-box
  14 + * .title
  15 + * # title here
  16 + * %ul
  17 + * # content here
  18 + *
  19 + * Ex. 2: Block data
  20 + * .ui-box
  21 + * .title
  22 + * # title here
  23 + * .body
  24 + * # content here
  25 + *
  26 + */
  27 +
  28 +.ui-box {
  29 + background: #FFF;
  30 + margin-bottom: 20px;
  31 + border: 1px solid #DDD;
  32 + word-wrap: break-word;
  33 +
  34 + img {
  35 + max-width: 100%;
  36 + }
  37 +
  38 + pre {
  39 + code {
  40 + background: none !important;
  41 + }
  42 + }
  43 +
  44 + ul {
  45 + margin: 0;
  46 + }
  47 +
  48 + .title {
  49 + background-color: #EEE;
  50 + border-bottom: 1px solid #DDD;
  51 + color: #666;
  52 + font-size: 16px;
  53 + text-shadow: 0 1px 1px #fff;
  54 + padding: 0 10px;
  55 + font-size: 14px;
  56 + line-height: 40px;
  57 + font-weight: normal;
  58 + margin: 0;
  59 +
  60 + > a {
  61 + text-shadow: 0 1px 1px #fff;
  62 + }
  63 +
  64 + form {
  65 + margin-bottom: 0;
  66 + margin-top: 0;
  67 + }
  68 +
  69 + .btn {
  70 + vertical-align: middle;
  71 + padding: 4px 12px;
  72 + @include box-shadow(0 0px 1px 1px #f2f2f2);
  73 + }
  74 +
  75 + .nav-pills {
  76 + > li {
  77 + > a {
  78 + padding: 13px;
  79 + margin: 0;
  80 + font-size: 13px;
  81 + }
  82 + &.active {
  83 + > a {
  84 + background: #D5D5D5;
  85 + color: $style_color;
  86 + @include border-radius(0);
  87 + border-radius: 0;
  88 + border-left: 1px solid #CCC;
  89 + border-right: 1px solid #CCC;
  90 + }
  91 + }
  92 + }
  93 + }
  94 + }
  95 +
  96 + .body {
  97 + padding: 10px;
  98 + }
  99 +
  100 + &.padded {
  101 + h5, .title {
  102 + margin: -20px;
  103 + margin-bottom: 0;
  104 + padding: 5px 20px;
  105 + }
  106 + }
  107 +
  108 + .row_title {
  109 + font-weight: 500;
  110 + color: #444;
  111 + &:hover {
  112 + color: #444;
  113 + text-decoration: underline;
  114 + }
  115 + }
  116 +
  117 + .form-holder {
  118 + padding-top: 20px;
  119 + form {
  120 + margin-bottom: 0;
  121 + legend {
  122 + text-indent: 10px;
  123 + }
  124 + .form-actions {
  125 + margin-bottom: 0;
  126 + }
  127 + }
  128 + }
  129 +}
  130 +
  131 +/*
  132 + * Small box
  133 + */
  134 +.ui-box.ui-box-small {
  135 + margin-bottom: 10px;
  136 +
  137 + .title {
  138 + font-size: 13px;
  139 + line-height: 30px;
  140 +
  141 + a {
  142 + color: #666;
  143 + &:hover {
  144 + text-decoration: underline;
  145 + }
  146 + }
  147 + }
  148 +}
  149 +
  150 +/*
  151 + * Danger box
  152 + */
  153 +.ui-box.ui-box-danger {
  154 + background: #f7f7f7;
  155 + border: none;
  156 +
  157 + .title {
  158 + background: #D65;
  159 + color: #fff;
  160 + text-shadow: 0 1px 1px #900;
  161 + }
  162 +}
  163 +
  164 +/*
  165 + * Block under tw-bootstrap tabs
  166 + */
  167 +.tab-pane {
  168 + .ui-box {
  169 + margin: 3px 3px 25px 3px;
  170 + }
  171 +}
... ...
app/assets/stylesheets/sections/wiki.scss
  Diff comments   View file @a16d755
1   -h3.page-title .edit-wiki-header {
  1 +.title .edit-wiki-header {
2 2 width: 780px;
3 3 margin-left: auto;
4 4 margin-right: auto;
... ...
app/views/admin/background_jobs/show.html.haml
  Diff comments   View file @a16d755
... ... @@ -5,7 +5,7 @@
5 5  
6 6 .ui-box
7 7 .title Sidekiq running processes
8   - .ui-box-body
  8 + .body
9 9 - if @sidekiq_processes.empty?
10 10 %h4.cred
11 11 %i.icon-warning-sign
... ...
app/views/admin/groups/show.html.haml
  Diff comments   View file @a16d755
... ... @@ -48,7 +48,7 @@
48 48 .ui-box
49 49 .title
50 50 Add user(s) to the group:
51   - .ui-box-body.form-holder
  51 + .body.form-holder
52 52 %p.light
53 53 Read more about project permissions
54 54 %strong= link_to "here", help_permissions_path, class: "vlink"
... ...
app/views/admin/projects/show.html.haml
  Diff comments   View file @a16d755
... ... @@ -78,7 +78,7 @@
78 78 .ui-box
79 79 .title
80 80 Transfer project
81   - .ui-box-body
  81 + .body
82 82 = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f|
83 83 .control-group
84 84 = f.label :namespace_id, "Namespace"
... ...
app/views/groups/edit.html.haml
  Diff comments   View file @a16d755
... ... @@ -63,7 +63,7 @@
63 63 .tab-pane#tab-remove
64 64 .ui-box.ui-box-danger
65 65 .title Remove group
66   - .ui-box-body
  66 + .body
67 67 %p
68 68 Removing group will cause all child projects and resources to be removed.
69 69 %p
... ...
app/views/projects/edit.html.haml
  Diff comments   View file @a16d755
... ... @@ -105,7 +105,7 @@
105 105 Unarchive project
106 106 - else
107 107 Archive project
108   - .ui-box-body
  108 + .body
109 109 - if @project.archived?
110 110 %p
111 111 Unarchiving the project will mark its repository as active.
... ... @@ -168,7 +168,7 @@
168 168 - if can?(current_user, :remove_project, @project)
169 169 .ui-box.ui-box-danger
170 170 .title Remove project
171   - .ui-box-body
  171 + .body
172 172 %p
173 173 Removing the project will delete its repository and all related resources including issues, merge requests etc.
174 174 %br
... ...
app/views/projects/issues/_form.html.haml
  Diff comments   View file @a16d755
... ... @@ -6,14 +6,14 @@
6 6 - @issue.errors.full_messages.each do |msg|
7 7 %span= msg
8 8 %br
9   - .ui-box.ui-box-show
10   - .ui-box-head
  9 + .issue-box
  10 + .title
11 11 .control-group
12 12 = f.label :title do
13 13 %strong= "Subject *"
14 14 .controls
15 15 = f.text_field :title, maxlength: 255, class: "input-xxlarge js-gfm-input", autofocus: true, required: true
16   - .ui-box-body
  16 + .context
17 17 .control-group
18 18 .issue_assignee.pull-left
19 19 = f.label :assignee_id do
... ... @@ -31,7 +31,7 @@
31 31 Milestone
32 32 .controls= f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'chosen'})
33 33  
34   - .ui-box-bottom
  34 + .description
35 35 .control-group
36 36 = f.label :label_list do
37 37 %i.icon-tag
... ...
app/views/projects/issues/show.html.haml
  Diff comments   View file @a16d755
... ... @@ -37,17 +37,16 @@
37 37 %span.light Milestone
38 38 = @issue.milestone.title
39 39  
40   -.ui-box.ui-box-show
41   - .ui-box-head
42   - %h4.box-title
43   - = gfm escape_once(@issue.title)
  40 +.issue-box
  41 + %h4.title
  42 + = gfm escape_once(@issue.title)
44 43  
45   - .ui-box-body
  44 + .context
46 45 %cite.cgray
47 46 = render partial: 'issue_context', locals: { issue: @issue }
48 47  
49 48 - if @issue.description.present?
50   - .ui-box-bottom
  49 + .description
51 50 .wiki
52 51 = preserve do
53 52 = markdown @issue.description
... ...
app/views/projects/issues/update.js.haml
  Diff comments   View file @a16d755
... ... @@ -3,8 +3,8 @@
3 3 :plain
4 4 $("##{dom_id(@issue)}").fadeOut();
5 5 - elsif params[:issue_context]
6   - $('.ui-box-body').html("#{escape_javascript(render partial: 'issue_context', locals: { issue: @issue })}");
7   - $('.ui-box-body').effect('highlight');
  6 + $('.issue-box .context').html("#{escape_javascript(render partial: 'issue_context', locals: { issue: @issue })}");
  7 + $('.issue-box .context').effect('highlight');
8 8 $('.chosen').chosen();
9 9 $('.edit-issue.inline-update input[type="submit"]').hide();
10 10 - if @issue.milestone
... ...
app/views/projects/merge_requests/show/_mr_box.html.haml
  Diff comments   View file @a16d755
1   -.ui-box.ui-box-show
2   - .ui-box-head
3   - %h4.box-title
4   - = gfm escape_once(@merge_request.title)
  1 +.issue-box
  2 + %h4.title
  3 + = gfm escape_once(@merge_request.title)
5 4  
6   - .ui-box-body
7   - %div
8   - %cite.cgray
9   - Created by #{link_to_member(@project, @merge_request.author)}.
10   - - if @merge_request.assignee
11   - Currently assigned to #{link_to_member(@project, @merge_request.assignee)}.
12   - - if @merge_request.milestone
13   - .pull-right
14   - - milestone = @merge_request.milestone
15   - %cite.cgray Attached to milestone
16   - %strong= link_to_gfm truncate(milestone.title, length: 20), project_milestone_path(milestone.project, milestone)
  5 + .context
  6 + %cite.cgray
  7 + Created by #{link_to_member(@project, @merge_request.author)}.
  8 + - if @merge_request.assignee
  9 + Currently assigned to #{link_to_member(@project, @merge_request.assignee)}.
  10 + - if @merge_request.milestone
  11 + .pull-right
  12 + - milestone = @merge_request.milestone
  13 + %cite.cgray Attached to milestone
  14 + %strong= link_to_gfm truncate(milestone.title, length: 20), project_milestone_path(milestone.project, milestone)
17 15  
18 16  
19 17 - if @merge_request.description.present?
20   - .ui-box-bottom
  18 + .description
21 19 .wiki
22 20 = preserve do
23 21 = markdown @merge_request.description
24 22  
25 23 - if @merge_request.closed?
26   - .ui-box-bottom.alert-error
  24 + .description.alert-error
27 25 %span
28 26 %i.icon-remove
29 27 Closed by #{link_to_member(@project, @merge_request.closed_event.author)}
30 28 #{time_ago_with_tooltip(@merge_request.closed_event.created_at)} ago.
31 29 - if @merge_request.merged?
32   - .ui-box-bottom.alert-success
  30 + .description.alert-success
33 31 %span
34 32 %i.icon-ok
35 33 Merged by #{link_to_member(@project, @merge_request.merge_event.author)}
36 34 #{time_ago_with_tooltip(@merge_request.merge_event.created_at)} ago.
37 35 - if !@closes_issues.empty? && @merge_request.opened?
38   - .ui-box-bottom.alert-info
  36 + .description.alert-info
39 37 %span
40 38 %i.icon-ok
41 39 Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
... ...
app/views/projects/milestones/show.html.haml
  Diff comments   View file @a16d755
... ... @@ -28,13 +28,11 @@
28 28 ← To milestones list
29 29  
30 30  
31   -.ui-box.ui-box-show
32   - .ui-box-head
33   - %h4.box-title
  31 +.issue-box
  32 + %h4.title
  33 + = gfm escape_once(@milestone.title)
34 34  
35   - = gfm escape_once(@milestone.title)
36   -
37   - .ui-box-body
  35 + .context
38 36 %p
39 37 Progress:
40 38 #{@milestone.closed_items_count} closed
... ... @@ -46,7 +44,7 @@
46 44  
47 45  
48 46 - if @milestone.description.present?
49   - .ui-box-bottom
  47 + .description
50 48 = preserve do
51 49 = markdown @milestone.description
52 50  
... ...
app/views/projects/wikis/_form.html.haml
  Diff comments   View file @a16d755
... ... @@ -6,15 +6,14 @@
6 6 - @wiki.errors.full_messages.each do |msg|
7 7 %li= msg
8 8  
9   - .ui-box.ui-box-show
10   - .ui-box-head
11   - %h3.page-title
12   - .edit-wiki-header
13   - = @wiki.title.titleize
14   - = f.hidden_field :title, value: @wiki.title
15   - = f.select :format, options_for_select(GollumWiki::MARKUPS, {selected: @wiki.format}), {}, class: "pull-right input-medium"
16   - = f.label :format, class: "pull-right", style: "padding-right: 20px;"
17   - .ui-box-body
  9 + .issue-box
  10 + %h3.title
  11 + .edit-wiki-header
  12 + = @wiki.title.titleize
  13 + = f.hidden_field :title, value: @wiki.title
  14 + = f.select :format, options_for_select(GollumWiki::MARKUPS, {selected: @wiki.format}), {}, class: "pull-right input-medium"
  15 + = f.label :format, class: "pull-right", style: "padding-right: 20px;"
  16 + .context
18 17 .controls
19 18 %span.cgray
20 19 Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
... ... @@ -22,11 +21,11 @@
22 21 %code [Link Title](page-slug)
23 22 \.
24 23  
25   - .ui-box-bottom
  24 + .description
26 25 .control-group
27 26 = f.label :content
28 27 .controls= f.text_area :content, class: 'span8 js-gfm-input', rows: 18
29   - .ui-box-bottom
  28 + .description
30 29 .control-group
31 30 = f.label :commit_message
32 31 .controls= f.text_field :message, class: 'span8', rows: 18
... ...
app/views/shared/_issues.html.haml
  Diff comments   View file @a16d755
1 1 - if @issues.any?
2 2 - @issues.group_by(&:project).each do |group|
3   - .ui-box.small-box
  3 + .ui-box.ui-box-small
4 4 - project = group[0]
5 5 .title
6 6 = link_to_project project
... ...
app/views/shared/_merge_requests.html.haml
  Diff comments   View file @a16d755
1 1 - if @merge_requests.any?
2 2 - @merge_requests.group_by(&:target_project).each do |group|
3   - .ui-box.small-box
  3 + .ui-box.ui-box-small
4 4 - project = group[0]
5 5 .title
6 6 = link_to_project project
... ...