Refactor css lists. Use well-list class

app/assets/stylesheets/common.scss

@@ -281,33 +281,6 @@ p.time {
   border: 2px solid #ddd;
 }
 
-.leftbar {
-  h5, .title {
-    padding: 5px 10px;
-  }
-
-  h4 {
-    font-size: 14px;
-    padding: 2px 10px;
-    color: #666;
-    border-bottom: 1px solid #f1f1f1;
-  }
-  a:last-child h4 { border: none; }
-
-  a:hover {
-    h4 {
-      color: #111;
-      background: $hover;
-      border-color: #CCC;
-      .ico.project {
-        background-position:-209px -21px;
-      }
-    }
-  }
-  .bottom {
-    padding: 10px;
-  }
-}
 
 
 /* Fix for readme code (stopped it from being yellow) */
@@ -321,7 +294,6 @@ p.time {
   }
 }
 
-
 .highlight_word {
   background: #EEDC94;
 }

app/assets/stylesheets/gitlab_bootstrap/blocks.scss

@@ -152,19 +152,6 @@
     }
   }
 
-  li, .wll {
-    padding: 10px;
-    &:first-child {
-      @include border-radius(4px 4px 0 0);
-      border-top: none;
-    }
-
-    &:last-child {
-      @include border-radius(0 0 4px 4px);
-      border: none;
-    }
-  }
-
   .ui-box-body {
     padding: 10px;
   }

app/assets/stylesheets/gitlab_bootstrap/common.scss

@@ -10,11 +10,6 @@
 /** COMMON CLASSES **/
 .left { float:left }
 .right { float:right!important }
-.width-50p { width:50% }
-.width-49p { width:49% }
-.width-30p { width:30% }
-.width-65p { width:65% }
-.width-100p { width:100% }
 .append-bottom-10 { margin-bottom:10px }
 .append-bottom-20 { margin-bottom:20px }
 .prepend-top-10 { margin-top:10px }

app/assets/stylesheets/gitlab_bootstrap/lists.scss

-/** LISTS **/
-
-ul {
-  /**
-   * List li block element #1
+/**
+ * Well styled list
  *
  */
-  .wll {
+.well-list {
+  margin: 0;
+  list-style: none;
+  li {
     background-color: #FFF;
-    padding: 10px 5px;
+    padding: 10px;
     min-height: 20px;
     border-bottom: 1px solid #eee;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
+    &.disabled {
+      color: #888;
+    }
+
     &.smoke { background-color: #f5f5f5; }
+
     &:hover {
       background: $hover;
       border-bottom: 1px solid #ADF;
     }
-    &:last-child { border:none }
+
+    &:first-child {
+      @include border-radius(4px 4px 0 0);
+      border-top: none;
+    }
+
+    &:last-child {
+      @include border-radius(0 0 4px 4px);
+      border: none;
+    }
+
     .author { color: #999; }
 
     p {
@@ -29,6 +44,11 @@ ul {
         top: 3px;
       }
     }
+
+    .well-title {
+      font-size: 14px;
+      line-height: 18px;
+    }
   }
 }
 

app/assets/stylesheets/jquery.ui.gitlab.css

-/*
- * jQuery UI CSS Framework 1.8.7
- *
- * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Theming/API
- */
-
-/* Layout helpers
-----------------------------------*/
-.ui-helper-hidden { display: none; }
-.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
-.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
-.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
-.ui-helper-clearfix { display: inline-block; }
-/* required comment for clearfix to work in Opera \*/
-* html .ui-helper-clearfix { height:1%; }
-.ui-helper-clearfix { display:block; }
-/* end clearfix */
-.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
-
-
 /* Interaction Cues
 ----------------------------------*/
 .ui-state-disabled { cursor: default !important; }
@@ -140,26 +116,6 @@
 /* Overlays */
 .ui-widget-overlay { background: #262b33; opacity: .70;filter:Alpha(Opacity=70); }
 .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #000000; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
-/*
- * jQuery UI Resizable 1.8.7
- *
- * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Resizable#theming
- */
-.ui-resizable { position: relative;}
-.ui-resizable-handle { position: absolute; font-size: 0.1px; z-index: 999; display: block;}
-.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
-.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
-.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
-.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
-.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
-.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
-.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
-.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
-.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
 /*
  * jQuery UI Selectable 1.8.7
  *
@@ -240,34 +196,7 @@
   cursor: pointer;
   font-weight: bold;
 }
-/*
- * jQuery UI Slider 1.8.7
- *
- * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Slider#theming
- */
-.ui-slider { position: relative; text-align: left; background: #d7d7d7; z-index: 1; }
-.ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; }
-.ui-slider .ui-slider-handle { background: url(slider_handles.png) 0px -23px no-repeat; position: absolute; z-index: 2; width: 23px; height: 23px; cursor: default; border: none; outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
-.ui-slider  .ui-state-hover, .ui-slider  .ui-state-active { background-position: 0 0; }
-.ui-slider .ui-slider-range { background: #a3cae0; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
-.ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; }
 
-
-.ui-slider-horizontal { height: 5px; }
-.ui-slider-horizontal .ui-slider-handle { top: -8px; margin-left: -13px; }
-.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
-.ui-slider-horizontal .ui-slider-range-min { left: 0; }
-.ui-slider-horizontal .ui-slider-range-max { right: 0; }
-
-.ui-slider-vertical { width: 5px; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -8px; margin-left: 0; margin-bottom: -13px; }
-.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
-.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
-.ui-slider-vertical .ui-slider-range-max { top: 0; }
 /*
  * jQuery UI Datepicker 1.8.7
  *
@@ -326,45 +255,3 @@
 .ui-datepicker table .ui-state-highlight { border-color: #ADE; }
 .ui-datepicker-calendar .ui-state-default { background: transparent; border-color: #FFF; }
 .ui-datepicker-calendar .ui-state-active { background: #D9EDF7; border-color: #ADE; color: #3A89A3; font-weight: bold; text-shadow: 0 1px 1px #fff; }
-
-/* with multiple calendars */
-.ui-datepicker.ui-datepicker-multi { width:auto; }
-.ui-datepicker-multi .ui-datepicker-group { float:left; }
-.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
-.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
-.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
-.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
-.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
-.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
-.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
-.ui-datepicker-row-break { clear:both; width:100%; }
-
-
-/* Extra Input Field Styling */
-.ui-form textarea, .ui-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) {
-	padding: 3px;
-	-webkit-border-radius: 2px;
-	-moz-border-radius: 2px;
-	border-radius: 2px;
-	border: 1px solid #cecece;
-	outline: none;
-	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset, 0 1px 0 rgba(255,255,255,0.2);
-	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset, 0 1px 0 rgba(255,255,255,0.2);
-	box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset, 0 1px 0 rgba(255,255,255,0.2);
-    -webkit-transition: all 250ms ease-in-out;
-    -moz-transition: all 250ms ease-in-out;
-    -o-transition: all 250ms ease-in-out;
-    transition: all 250ms ease-in-out;
-}
-.ui-form textarea:hover, .ui-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):hover {
-	border: 1px solid #bdbdbd;
-	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.2);
-	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.2);
-	box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.2);
-}
-.ui-form textarea:focus, .ui-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus {
-	border: 1px solid #95bdd4;
-	-webkit-box-shadow: 0 2px 3px rgba(161,202,226,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
-	-moz-box-shadow: 0 2px 3px rgba(161,202,226,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
-	box-shadow: 0 2px 3px rgba(161,202,226,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
-}

app/assets/stylesheets/sections/commits.scss

@@ -229,8 +229,6 @@
 
 /** COMMIT ROW **/
 .commit {
-  @extend .wll;
-
   .browse_code_link_holder {
     @extend .span2;
     float: right;

app/assets/stylesheets/sections/events.scss

@@ -76,7 +76,6 @@
 
   padding: 16px 5px;
   &:last-child { border:none }
-  .wll:hover { background:none }
 
   .event_commits {
     margin-top: 5px;

app/assets/stylesheets/sections/issues.scss

@@ -121,12 +121,3 @@ input.check_all_issues {
 #update_status {
   width: 100px;
 }
-
-
-/**
- * Milestones list
- *
- */
-.milestone {
-  @extend .wll;
-}

app/assets/stylesheets/sections/projects.scss

@@ -8,7 +8,7 @@
 
     .groups_box,
     .projects_box {
-      h5 {
+      > h5 {
         color: $style_color;
         font-size: 16px;
         text-shadow: 0 1px 1px #fff;
@@ -16,20 +16,8 @@
         line-height: 32px;
         font-size: 14px;
       }
-      ul {
-        li {
-          padding: 0;
-          a {
-            display: block;
-            .group_name {
-              font-size: 14px;
-              line-height: 18px;
-            }
-            .project_name {
-              color: #4fa2bd;
-              font-size: 14px;
-              line-height: 18px;
-            }
+      .nav-projects-tabs li { padding: 0; }
+      .well-list {
         .arrow {
           float: right;
           padding: 10px;
@@ -44,9 +32,6 @@
           }
         }
       }
-        }
-      }
-      @extend .leftbar;
       @extend .ui-box;
     }
   }

app/views/commits/_commits.html.haml

@@ -3,4 +3,4 @@
     %h5.small
       %i.icon-calendar
       = day.stamp("28 Aug, 2010")
-    %ul.unstyled= render commits
+    %ul.well-list= render commits

app/views/compare/show.html.haml

@@ -9,7 +9,7 @@
 - if @commits.present?
   %div.ui-box
     %h5.small Commits (#{@commits.count})
-    %ul.unstyled= render @commits
+    %ul.well-list= render @commits
 
   - unless @diffs.empty?
     %h4 Diff

app/views/dashboard/_groups.html.haml

@@ -8,11 +8,11 @@
         = link_to new_admin_group_path, class: "btn very_small info" do
           %i.icon-plus
           New Group
-  %ul.unstyled
+  %ul.well-list
     - groups.each do |group|
-      %li.wll
+      %li
         = link_to group_path(id: group.path), class: dom_class(group) do
-          %strong.group_name= truncate(group.name, length: 35)
+          %strong.well-title= truncate(group.name, length: 35)
           %span.arrow
             →
           %span.last_activity

app/views/dashboard/_projects.html.haml

@@ -16,14 +16,14 @@
     = nav_tab :scope, 'joined' do
       = link_to "Joined", dashboard_path(scope: 'joined')
 
-  %ul.unstyled
+  %ul.well-list
     - projects.each do |project|
-      %li.wll
+      %li
         = link_to project_path(project), class: dom_class(project) do
           - if project.namespace
             = project.namespace.human_name
             \/
-          %strong.project_name
+          %strong.well-title
             = truncate(project.name, length: 25)
           %span.arrow
             →
@@ -31,6 +31,6 @@
             %strong Last activity:
             %span= project_last_activity(project)
     - if projects.blank?
-      %li.wll
+      %li
         %h3.nothing_here_message There are no projects here.
   .bottom= paginate projects, theme: "gitlab"

app/views/dashboard/issues.html.haml

@@ -14,7 +14,7 @@
         %div.ui-box
           - @project = group[0]
           %h5= link_to_project @project
-          %ul.unstyled.issues_table
+          %ul.well-list.issues_table
             - group[1].each do |issue|
               = render(partial: 'issues/show', locals: {issue: issue})
       %hr

app/views/dashboard/merge_requests.html.haml

@@ -10,9 +10,10 @@
   .span9
     - if @merge_requests.any?
       - @merge_requests.group_by(&:project).each do |group|
-        %ul.unstyled.ui-box
+        .ui-box
           - @project = group[0]
           %h5= link_to_project @project
+          %ul.well-list
             - group[1].each do |merge_request|
               = render(partial: 'merge_requests/merge_request', locals: {merge_request: merge_request})
       %hr

app/views/events/event/_push.html.haml

@@ -12,7 +12,7 @@
 - if event.push_with_commits?
   - project = event.project
   .event-body
-    %ul.unstyled.event_commits
+    %ul.well-list.event_commits
       - few_commits = event.commits[0...2]
       - few_commits.each do |commit|
         = render "events/commit", commit: commit, project: project

app/views/groups/_projects.html.haml

@@ -8,13 +8,13 @@
         = link_to new_project_path(namespace_id: @group.id), class: "btn very_small info" do
           %i.icon-plus
           New Project
-  %ul.unstyled
+  %ul.well-list
     - if projects.blank?
       %p.nothing_here_message This groups has no projects yet
     - projects.each do |project|
-      %li.wll
+      %li
         = link_to project_path(project), class: dom_class(project) do
-          %strong.project_name= truncate(project.name, length: 25)
+          %strong.well-title= truncate(project.name, length: 25)
           %span.arrow
             →
           %span.last_activity

app/views/groups/issues.html.haml

@@ -10,7 +10,7 @@
     %div.ui-box
       - @project = group[0]
       %h5= @project.name
-      %ul.unstyled.issues_table
+      %ul.well-list.issues_table
         - group[1].each do |issue|
           = render(partial: 'issues/show', locals: {issue: issue})
   %hr

app/views/groups/merge_requests.html.haml

@@ -6,7 +6,7 @@
 %br
 - if @merge_requests.any?
   - @merge_requests.group_by(&:project).each do |group|
-    %ul.unstyled.ui-box
+    %ul.well-list.ui-box
       - @project = group[0]
       %h5= @project.name
       - group[1].each do |merge_request|

app/views/groups/people.html.haml

@@ -9,9 +9,9 @@
         Team
         %small
           (#{@users.size})
-      %ul.unstyled
+      %ul.well-list
         - @users.each do |user|
-          %li.wll
+          %li
             = image_tag gravatar_icon(user.email, 16), class: "avatar s16"
             %strong= user.name
             %span.cgray= user.email

app/views/issues/_show.html.haml

-%li.wll{ id: dom_id(issue), class: issue_css_classes(issue), url: project_issue_path(issue.project, issue) }
+%li{ id: dom_id(issue), class: issue_css_classes(issue), url: project_issue_path(issue.project, issue) }
   - if controller.controller_name == 'issues'
     .issue_check
       = check_box_tag dom_id(issue,"selected"), nil, false, 'data-id' => issue.id, class: "selected_issue", disabled: !can?(current_user, :modify_issue, issue)

app/views/issues/index.html.haml

@@ -55,7 +55,7 @@
             = hidden_field_tag :f, params[:f]
         .clearfix
 
-    %ul#issues-table.unstyled.issues_table
+    %ul#issues-table.well-list.issues_table
       = render "issues"
 
 #new_issue_dialog

app/views/labels/_label.html.haml

-%li.wll
+%li
   %strong
     %i.icon-tag
     = label.name

app/views/labels/index.html.haml

@@ -4,7 +4,7 @@
   Labels
 %br
 %div.ui-box
-  %ul.unstyled.labels-table
+  %ul.well-list.labels-table
     - @labels.each do |label|
       = render 'label', label: label
 

app/views/merge_requests/_merge_request.html.haml

-%li.wll{ class: mr_css_classes(merge_request) }
+%li{ class: mr_css_classes(merge_request) }
   .right
     .left
       - if merge_request.merged?

app/views/merge_requests/index.html.haml

@@ -30,7 +30,7 @@
         = hidden_field_tag :f, params[:f]
     .clearfix
 
-  %ul.unstyled
+  %ul.well-list
     = render @merge_requests
     - if @merge_requests.blank?
       %li

app/views/merge_requests/show/_commits.html.haml

@@ -5,19 +5,19 @@
       Commits (#{@commits.count})
     .merge-request-commits
       - if @commits.count > 8
-        %ul.first_mr_commits.unstyled
+        %ul.first_mr_commits.well-list
           - @commits.first(8).each do |commit|
             = render "commits/commit", commit: commit
           %li.bottom
             8 of #{@commits.count} commits displayed.
             %strong
               %a.mr_show_all_commits Click here to show all
-        %ul.all_mr_commits.hide.unstyled
+        %ul.all_mr_commits.hide.well-list
           - @commits.each do |commit|
             = render "commits/commit", commit: commit
 
       - else
-        %ul.unstyled
+        %ul.well-list
           - @commits.each do |commit|
             = render "commits/commit", commit: commit
 

app/views/milestones/index.html.haml

@@ -18,7 +18,7 @@
           = link_to project_milestones_path(@project, f: "all") do
             All
 
-    %ul.unstyled
+    %ul.well-list
       = render @milestones
 
       - if @milestones.present?

app/views/services/index.html.haml

@@ -2,8 +2,8 @@
 %h3.page_title Services
 %br
 
-%ul.unstyled.ui-box
-  %li.wll
+%ul.ui-box.well-list
+  %li
     %h4.cgreen
       = link_to edit_project_service_path(@project, :gitlab_ci) do
         GitLab CI
@@ -17,14 +17,14 @@
           %small.cgray
             %i.icon-off
             Disabled
-  %li.wll
-    %h4.cgray
+  %li.disabled
+    %h4
       Jenkins CI
       %small An extendable open source continuous integration server
       .right
         %small Not implemented yet
-  %li.wll
-    %h4.cgray
+  %li.disabled
+    %h4
       Campfire
       %small Web-based group chat tool
       .right

app/views/team_members/_show.html.haml

 - user = member.user
 - allow_admin = can? current_user, :admin_project, @project
-%li.wll{id: dom_id(member), class: "team_member_row user_#{user.id}"}
+%li{id: dom_id(member), class: "team_member_row user_#{user.id}"}
   .row
     .span6
       = link_to project_team_member_path(@project, member), title: user.name, class: "dark" do

app/views/team_members/_team.html.haml

 - grouper_project_members(@project).each do |access, members|
-  %fieldset
-    %legend
+  .ui-box
+    %h5
       = Project.access_options.key(access).pluralize
       %small= members.size
-    %ul.unstyled
+    %ul.well-list
       - members.sort_by(&:user_name).each do |up|
         = render(partial: 'team_members/show', locals: {member: up})