Download as
Browse Code »

Commit 4345e9220ee2935610c97b0226d011a4736366f1

Authored by Dmitriy Zaporozhets
1 parent dc5bd10d
Exists in spb-stable and in 3 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb

Refactor UI boxes. Split issue box to different class 

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing 5 changed files with 220 additions and 186 deletions   Show diff stats
app/assets/stylesheets/gitlab_bootstrap.scss
  Diff comments   View file @4345e92
@@ -61,6 +61,8 @@ $baseLineHeight: 18px !default; @@ -61,6 +61,8 @@ $baseLineHeight: 18px !default;
61 @import "gitlab_bootstrap/typography.scss"; 61 @import "gitlab_bootstrap/typography.scss";
62 @import "gitlab_bootstrap/buttons.scss"; 62 @import "gitlab_bootstrap/buttons.scss";
63 @import "gitlab_bootstrap/blocks.scss"; 63 @import "gitlab_bootstrap/blocks.scss";
  64 +@import "gitlab_bootstrap/ui_box.scss";
  65 +@import "gitlab_bootstrap/issue_box.scss";
64 @import "gitlab_bootstrap/files.scss"; 66 @import "gitlab_bootstrap/files.scss";
65 @import "gitlab_bootstrap/lists.scss"; 67 @import "gitlab_bootstrap/lists.scss";
66 @import "gitlab_bootstrap/forms.scss"; 68 @import "gitlab_bootstrap/forms.scss";
app/assets/stylesheets/gitlab_bootstrap/blocks.scss
  Diff comments   View file @4345e92
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 .light-well { 1 .light-well {
187 background: #f9f9f9; 2 background: #f9f9f9;
188 padding: 15px; 3 padding: 15px;
app/assets/stylesheets/gitlab_bootstrap/issue_box.scss 0 → 100644
  Diff comments   View file @4345e92
@@ -0,0 +1,46 @@ @@ -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 @4345e92
@@ -0,0 +1,171 @@ @@ -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 @4345e92
1 -h3.page-title .edit-wiki-header { 1 +.title .edit-wiki-header {
2 width: 780px; 2 width: 780px;
3 margin-left: auto; 3 margin-left: auto;
4 margin-right: auto; 4 margin-right: auto;