Refactor css lists. Use well-list class

88260774 · Dmitriy Zaporozhets · 85d5f606 · 88260774 · 88260774 · 88260774
Commit 88260774 authored Dec 18, 2012 by Dmitriy Zaporozhets
32 changed files
--- a/app/assets/stylesheets/common.scss
+++ b/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;
 }

--- a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
+++ b/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;
  }

--- a/app/assets/stylesheets/gitlab_bootstrap/common.scss
+++ b/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 }

--- a/app/assets/stylesheets/gitlab_bootstrap/lists.scss
+++ b/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;
+    }
  }
 }


--- a/app/assets/stylesheets/jquery.ui.gitlab.css
+++ b/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);
-}
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -229,8 +229,6 @@

 /** COMMIT ROW **/
 .commit {
-  @extend .wll;
-
  .browse_code_link_holder {
    @extend .span2;
    float: right;

--- a/app/assets/stylesheets/sections/events.scss
+++ b/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;

--- a/app/assets/stylesheets/sections/issues.scss
+++ b/app/assets/stylesheets/sections/issues.scss
@@ -121,12 +121,3 @@ input.check_all_issues {
 #update_status {
  width: 100px;
 }
-
-
-/**
- * Milestones list
- *
- */
-.milestone {
-  @extend .wll;
-}
--- a/app/assets/stylesheets/sections/projects.scss
+++ b/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;
    }
  }

--- a/app/views/commits/_commits.html.haml
+++ b/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
--- a/app/views/compare/show.html.haml
+++ b/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

--- a/app/views/dashboard/_groups.html.haml
+++ b/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
            &rarr;
          %span.last_activity

--- a/app/views/dashboard/_projects.html.haml
+++ b/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
            &rarr;
@@ -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"
--- a/app/views/dashboard/issues.html.haml
+++ b/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

--- a/app/views/dashboard/merge_requests.html.haml
+++ b/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

--- a/app/views/events/event/_push.html.haml
+++ b/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

--- a/app/views/groups/_projects.html.haml
+++ b/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
            &rarr;
          %span.last_activity

--- a/app/views/groups/issues.html.haml
+++ b/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

--- a/app/views/groups/merge_requests.html.haml
+++ b/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|

--- a/app/views/groups/people.html.haml
+++ b/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

--- a/app/views/issues/_issues.html.haml
+++ b/app/views/issues/_issues.html.haml
--- a/app/views/issues/_show.html.haml
+++ b/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)

--- a/app/views/issues/index.html.haml
+++ b/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

--- a/app/views/labels/_label.html.haml
+++ b/app/views/labels/_label.html.haml
-%li.wll
+%li
  %strong
    %i.icon-tag
    = label.name

--- a/app/views/labels/index.html.haml
+++ b/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


--- a/app/views/merge_requests/_merge_request.html.haml
+++ b/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?

--- a/app/views/merge_requests/index.html.haml
+++ b/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

--- a/app/views/merge_requests/show/_commits.html.haml
+++ b/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


--- a/app/views/milestones/index.html.haml
+++ b/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?

--- a/app/views/services/index.html.haml
+++ b/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

--- a/app/views/team_members/_show.html.haml
+++ b/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

--- a/app/views/team_members/_team.html.haml
+++ b/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})