Remove admin.scss

app/assets/stylesheets/framework.scss

@@ -40,3 +40,4 @@
 @import "framework/blank";
 @import "framework/wells.scss";
 @import "framework/page-header.scss";
+@import "framework/broadcast-messages";

app/assets/stylesheets/framework/blocks.scss

@@ -269,6 +269,10 @@
     }
   }
+  .emoji-icon {
+    display: inline-block;
+  }
+
   @media(max-width: $screen-xs-max) {
     margin-top: 50px;
     text-align: center;

app/assets/stylesheets/framework/broadcast-messages.scss

+.broadcast-message {
+  @extend .alert-warning;
+  padding: 10px;
+  text-align: center;
+
+  div,
+  p {
+    display: inline;
+    margin: 0;
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+}
+
+.broadcast-message-preview {
+  @extend .broadcast-message;
+  margin-bottom: 20px;
+}

app/assets/stylesheets/framework/common.scss

@@ -403,4 +403,8 @@ table {
   &-60 {
     @include str-truncated(60%);
   }
+
+  &-100 {
+    @include str-truncated(100%);
+  }
 }

app/assets/stylesheets/framework/lists.scss

@@ -106,13 +106,13 @@ ul.task-list {
   }
 }
+// Generic content list
 ul.content-list {
   @include basic-list;
-
   margin: 0;
   padding: 0;
-  > li {
+  li {
     border-color: $table-border-color;
     font-size: $list-font-size;
     color: $list-text-color;
@@ -193,6 +193,41 @@ ul.content-list {
   }
 }
+// Content list using flexbox
+.flex-list {
+  .flex-row {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    white-space: nowrap;
+  }
+
+  .row-main-content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding-right: 8px;
+  }
+
+  .row-title {
+    font-weight: 600;
+  }
+
+  .row-second-line {
+    display: block;
+  }
+
+  .dropdown {
+    .btn-block {
+      margin-bottom: 0;
+      line-height: inherit;
+    }
+  }
+
+  .label-default {
+    color: $btn-transparent-color;
+  }
+}
+
 .panel > .content-list > li {
   padding: $gl-padding-top $gl-padding;

app/assets/stylesheets/framework/tables.scss

@@ -34,6 +34,10 @@ table {
         background-color: $background-color;
         font-weight: normal;
         border-bottom: none;
+
+        &.wide {
+          width: 55%;
+        }
       }
       td {
@@ -42,3 +46,16 @@ table {
     }
   }
 }
+
+.responsive-table {
+  @media (max-width: $screen-sm-max) {
+    th {
+      width: 100%;
+    }
+
+    td {
+      width: 100%;
+      float: left;
+    }
+  }
+}

app/assets/stylesheets/pages/admin.scss

-/**
- * Admin area
- *
- */
-
-.broadcast-messages {
-  .message {
-    line-height: 2;
-  }
-}
-
-.broadcast-message {
-  @extend .alert-warning;
-  padding: 10px;
-  text-align: center;
-
-  > div,
-  p {
-    display: inline;
-    margin: 0;
-
-    a {
-      color: inherit;
-      text-decoration: underline;
-    }
-  }
-}
-
-.broadcast-message-preview {
-  @extend .broadcast-message;
-  margin-bottom: 20px;
-}
-
-// Users List
-
-.users-list {
-  .user-row {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    white-space: nowrap;
-  }
-
-  .user-details {
-    flex: 1 1 auto;
-    overflow: hidden;
-    padding-right: 8px;
-  }
-
-  .user-name {
-    display: inline-block;
-    font-weight: 600;
-  }
-
-  .user-name,
-  .user-email {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .dropdown {
-    .btn-block {
-      margin-bottom: 0;
-      line-height: inherit;
-    }
-  }
-
-  .label-default {
-    color: $btn-transparent-color;
-  }
-}
-
-.abuse-reports {
-  .table {
-    table-layout: fixed;
-  }
-
-  .subheading {
-    padding-bottom: $gl-padding;
-  }
-
-  .message {
-    word-wrap: break-word;
-  }
-
-  .btn {
-    white-space: normal;
-    padding: $gl-btn-padding;
-  }
-
-  th {
-    width: 15%;
-
-    &.wide {
-      width: 55%;
-    }
-  }
-
-  @media (max-width: $screen-sm-max) {
-    th {
-      width: 100%;
-    }
-
-    td {
-      width: 100%;
-      float: left;
-    }
-  }
-
-  .no-reports {
-    .emoji-icon {
-      margin-left: $btn-side-margin;
-      margin-top: 3px;
-    }
-
-    span {
-      font-size: 18px;
-    }
-  }
-}
-
-.admin-builds-table {
-  .ci-table td:last-child {
-    min-width: 120px;
-  }
-}

app/assets/stylesheets/pages/pipelines.scss

@@ -280,6 +280,12 @@
   }
 }
+.admin-builds-table {
+  .ci-table td:last-child {
+    min-width: 120px;
+  }
+}
+
 // Pipeline visualization
 .toggle-pipeline-btn {

app/views/admin/abuse_reports/index.html.haml

@@ -4,7 +4,7 @@
 .abuse-reports
   - if @abuse_reports.present?
     .table-holder
-      %table.table
+      %table.table.responsive-table
         %thead.hidden-sm.hidden-xs
           %tr
             %th User
@@ -13,8 +13,6 @@
             %th Action
         = render @abuse_reports
   - else
-    .no-reports
-      %span.pull-left
-        There are no abuse reports!
-      .pull-left
-        = emoji_icon 'tada'
+    .empty-state
+      .text-center
+        %h4 There are no abuse reports! #{emoji_icon 'tada'}

app/views/admin/users/_user.html.haml

-%li.user-row
+%li.flex-row
   .user-avatar
     = image_tag avatar_icon(user), class: "avatar", alt: ''
-  .user-details
-    .user-name
+  .row-main-content
+    .user-name.row-title.str-truncated-100
       = link_to user.name, [:admin, user]
     - if user.blocked?
       %span.label.label-danger blocked
@@ -12,7 +12,7 @@
       %span.label.label-default External
     - if user == current_user
       %span It's you!
-    .user-email
+    .row-second-line.str-truncated-100
       = mail_to user.email, user.email
   .controls
     = link_to 'Edit', edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn'

app/views/admin/users/index.html.haml

@@ -68,7 +68,7 @@
             %small.badge= number_with_delimiter(User.without_projects.count)
         .fade-right
-  %ul.users-list.content-list
+  %ul.flex-list.content-list
     - if @users.empty?
       %li
         .nothing-here-block No users found.