Refactor UI boxes. Split issue box to different class

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

app/assets/stylesheets/gitlab_bootstrap.scss

@@ -61,6 +61,8 @@ $baseLineHeight: 18px !default;
 @import "gitlab_bootstrap/typography.scss";
 @import "gitlab_bootstrap/buttons.scss";
 @import "gitlab_bootstrap/blocks.scss";
+@import "gitlab_bootstrap/ui_box.scss";
+@import "gitlab_bootstrap/issue_box.scss";
 @import "gitlab_bootstrap/files.scss";
 @import "gitlab_bootstrap/lists.scss";
 @import "gitlab_bootstrap/forms.scss";

app/assets/stylesheets/gitlab_bootstrap/blocks.scss

-/**
- * ===================================
- * Contain UI block elements:
- *   .ui-box   - for any block & widgets
- * ===================================
- */
-
-/**
- * UI Block
- *
- */
-.ui-box {
-  background: #FFF;
-  margin-bottom: 20px;
-  border: 1px solid #DDD;
-  word-wrap: break-word;
-
-  &.small-box {
-    margin-bottom: 10px;
-
-    .title {
-      font-size: 13px;
-      line-height: 30px;
-
-      a {
-        color: #666;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  &.ui-box-show {
-    color: #666;
-    margin:20px 0;
-    background: #FAFAFA;
-
-    .control-group {
-      margin-bottom: 0;
-    }
-  }
-
-  &.ui-box-danger {
-    background: #f7f7f7;
-    border: none;
-
-    .title {
-      background: #D65;
-      color: #fff;
-      text-shadow: 0 1px 1px #900;
-    }
-  }
-
-  img { max-width: 100%; }
-
-  pre {
-    code {
-      background: none !important;
-    }
-  }
-
-  .ui-box-head,
-  .ui-box-body,
-  .ui-box-bottom {
-    padding: 15px;
-
-    .clearfix {
-      margin: 0;
-    }
-  }
-
-  .ui-box-head {
-    .box-title {
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 28px;
-      margin: 0;
-      color: #444;
-    }
-    h3 {
-      margin: 0;
-    }
-  }
-
-  .ui-box-body {
-    border: none;
-    background-color: #f5f5f5;
-    border: none;
-    border-top: 1px solid #eee;
-  }
-
-  .ui-box-bottom {
-    border-top: 1px solid #eee;
-  }
-
-  ul {
-    margin: 0;
-  }
-
-  .title {
-    background-color: #EEE;
-    border-bottom: 1px solid #DDD;
-    color: #666;
-    font-size: 16px;
-    text-shadow: 0 1px 1px #fff;
-    padding: 0 10px;
-    font-size: 14px;
-    line-height: 40px;
-    font-weight: normal;
-    margin: 0;
-
-    > a {
-      text-shadow: 0 1px 1px #fff;
-    }
-
-    form {
-      margin-bottom: 0;
-      margin-top: 0;
-    }
-
-    .btn {
-      vertical-align: middle;
-      padding: 4px 12px;
-      @include box-shadow(0 0px 1px 1px #f2f2f2);
-    }
-
-    .nav-pills {
-      > li {
-        > a {
-          padding: 13px;
-          margin: 0;
-          font-size: 13px;
-        }
-        &.active {
-          > a {
-            background: #D5D5D5;
-            color: $style_color;
-            @include border-radius(0);
-            border-radius: 0;
-            border-left: 1px solid #CCC;
-            border-right: 1px solid #CCC;
-          }
-        }
-      }
-    }
-  }
-
-  &.padded {
-    h5, .title {
-      margin: -20px;
-      margin-bottom: 0;
-      padding: 5px 20px;
-    }
-  }
-
-  .row_title {
-    font-weight: 500;
-    color: #444;
-    &:hover {
-      color: #444;
-      text-decoration: underline;
-    }
-  }
-
-  .form-holder {
-    padding-top: 20px;
-    form {
-      margin-bottom: 0;
-      legend {
-        text-indent: 10px;
-      }
-      .form-actions {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.tab-pane {
-  .ui-box {
-    margin: 3px 3px 25px 3px;
-  }
-}
-
 .light-well {
   background: #f9f9f9;
   padding: 15px;

app/assets/stylesheets/gitlab_bootstrap/issue_box.scss

+/**
+ * Issue box:
+ * Huge block (one per page) for storing title, descripion and other information.
+ * Used for Issue#show page, MergeRequest#show page etc
+ *
+ * CLasses:
+ *   .issue-box - Regular box
+ */
+
+.issue-box {
+  color: #666;
+  margin:20px 0;
+  background: #FAFAFA;
+  border: 1px solid #DDD;
+
+  .control-group {
+    margin-bottom: 0;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    margin: 0;
+    color: #444;
+  }
+
+  .context {
+    border: none;
+    background-color: #f5f5f5;
+    border: none;
+    border-top: 1px solid #eee;
+  }
+
+  .description {
+    border-top: 1px solid #eee;
+  }
+
+  .title, .context, .description {
+    padding: 15px;
+
+    .clearfix {
+      margin: 0;
+    }
+  }
+}

app/assets/stylesheets/gitlab_bootstrap/ui_box.scss

+/**
+ * UI box:
+ * Block element for separating information on page.
+ * Used for storing issues lists, grouped data.
+ * You can have multiple ui boxes on one page
+ *
+ * Classes:
+ *   .ui-box   - for any block & widgets
+ *   .ui-box.ui-box-small - same but with smaller title
+ *   .ui-box.ui-box-danger - with red title
+ *
+ * Ex. 1: List
+ *   .ui-box
+ *     .title
+ *       # title here
+ *     %ul
+ *       # content here
+ *
+ * Ex. 2: Block data
+ *   .ui-box
+ *     .title
+ *       # title here
+ *     .body
+ *       # content here
+ *
+ */
+
+.ui-box {
+  background: #FFF;
+  margin-bottom: 20px;
+  border: 1px solid #DDD;
+  word-wrap: break-word;
+
+  img {
+    max-width: 100%;
+  }
+
+  pre {
+    code {
+      background: none !important;
+    }
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .title {
+    background-color: #EEE;
+    border-bottom: 1px solid #DDD;
+    color: #666;
+    font-size: 16px;
+    text-shadow: 0 1px 1px #fff;
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: 40px;
+    font-weight: normal;
+    margin: 0;
+
+    > a {
+      text-shadow: 0 1px 1px #fff;
+    }
+
+    form {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+
+    .btn {
+      vertical-align: middle;
+      padding: 4px 12px;
+      @include box-shadow(0 0px 1px 1px #f2f2f2);
+    }
+
+    .nav-pills {
+      > li {
+        > a {
+          padding: 13px;
+          margin: 0;
+          font-size: 13px;
+        }
+        &.active {
+          > a {
+            background: #D5D5D5;
+            color: $style_color;
+            @include border-radius(0);
+            border-radius: 0;
+            border-left: 1px solid #CCC;
+            border-right: 1px solid #CCC;
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    padding: 10px;
+  }
+
+  &.padded {
+    h5, .title {
+      margin: -20px;
+      margin-bottom: 0;
+      padding: 5px 20px;
+    }
+  }
+
+  .row_title {
+    font-weight: 500;
+    color: #444;
+    &:hover {
+      color: #444;
+      text-decoration: underline;
+    }
+  }
+
+  .form-holder {
+    padding-top: 20px;
+    form {
+      margin-bottom: 0;
+      legend {
+        text-indent: 10px;
+      }
+      .form-actions {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+/*
+ * Small box
+ */
+.ui-box.ui-box-small {
+  margin-bottom: 10px;
+
+  .title {
+    font-size: 13px;
+    line-height: 30px;
+
+    a {
+      color: #666;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+/*
+ * Danger box
+ */
+.ui-box.ui-box-danger {
+  background: #f7f7f7;
+  border: none;
+
+  .title {
+    background: #D65;
+    color: #fff;
+    text-shadow: 0 1px 1px #900;
+  }
+}
+
+/*
+ * Block under tw-bootstrap tabs
+ */
+.tab-pane {
+  .ui-box {
+    margin: 3px 3px 25px 3px;
+  }
+}

app/assets/stylesheets/sections/wiki.scss

-h3.page-title .edit-wiki-header {
+.title .edit-wiki-header {
   width: 780px;
   margin-left: auto;
   margin-right: auto;