Merge branch 'improve-ui' into 'master'

Improve UI

* Improve group rename warning
* Refactor select css. Make selects same width

See merge request !400

CHANGELOG

@@ -7,6 +7,7 @@ v 7.10.0 (unreleased)
   - List new commits for newly pushed branch in activity view.
   - Add changelog, license and contribution guide links to project sidebar.
   - Improve diff UI
+  - Identical look of selectboxes in UI
 
 v 7.9.0 (unreleased)
   - Add HipChat integration documentation (Stan Hu)

app/assets/stylesheets/generic/selects.scss

@@ -46,55 +46,13 @@
   }
 }
 
-select {
-  &.select2 {
-    width: 100px;
-  }
-
-  &.select2-sm {
-    width: 100px;
-  }
+.select2-container {
+  width: 100% !important;
 }
 
-@media (min-width: $screen-sm-min) {
-  select {
-    &.select2 {
-      width: 150px;
-    }
-    &.select2-sm {
-      width: 120px;
-    }
-  }
-}
-
-/* Medium devices (desktops, 992px and up) */
-@media (min-width: $screen-md-min) {
-  select {
-    &.select2 {
-      width: 170px;
-    }
-    &.select2-sm {
-      width: 140px;
-    }
-  }
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: $screen-lg-min) {
-  select {
-    &.select2 {
-      width: 200px;
-    }
-    &.select2-sm {
-      width: 150px;
-    }
-  }
-}
-
-
 /** Branch/tag selector **/
 .project-refs-form .select2-container {
-  margin-right: 10px;
+  width: 160px !important;
 }
 
 .ajax-users-dropdown, .ajax-project-users-dropdown {

app/assets/stylesheets/pages/groups.scss

@@ -1,6 +1,5 @@
 .new-group-member-holder {
   margin-top: 50px;
-  background: #f9f9f9;
   padding-top: 20px;
 }
 

app/assets/stylesheets/pages/issues.scss

@@ -59,33 +59,34 @@
   }
 }
 
-@media (min-width: 800px)  { .issues_filters select { width: 160px; }  }
-@media (min-width: 1200px) { .issues_filters select { width: 220px; }  }
+@media (min-width: 800px)  {
+  .issues_bulk_update {
+    select, .select2-container {
+      width: 120px !important;
+      display: inline-block;
+    }
+  }
+}
 
-@media (min-width: 800px)  { .issues_bulk_update .select2-container { min-width: 120px; }  }
-@media (min-width: 1200px) { .issues_bulk_update .select2-container { min-width: 160px; }  }
+@media (min-width: 1200px) {
+  .issues_bulk_update {
+    select, .select2-container {
+      width: 160px !important;
+      display: inline-block;
+    }
+  }
+}
 
 .issues_bulk_update {
   .select2-container .select2-choice {
     color: #444 !important;
-    font-weight: 500;
   }
 }
 
-#update_status {
-  width: 100px;
-}
-
 .participants {
   margin-bottom: 20px;
 }
 
-.issues_bulk_update {
-  .select2-container {
-    text-shadow: none;
-  }
-}
-
 .issue-search-form {
   margin: 0;
   height: 24px;
@@ -177,6 +178,6 @@ h2.issue-title {
   font-weight: bold;
 }
 
-.context .select2-container {
-  width: 100% !important;
+.issue-form .select2-container {
+  width: 250px !important;
 }

app/assets/stylesheets/pages/merge_requests.scss

@@ -194,3 +194,7 @@
     }
   }
 }
+
+.merge-request-form .select2-container {
+  width: 250px !important;
+}

app/assets/stylesheets/pages/tree.scss

@@ -112,7 +112,7 @@
 
 .tree-ref-holder {
   float: left;
-  margin-right: 6px;
+  margin-right: 15px;
 
   .select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice {
     padding: 4px 12px;

app/views/groups/group_members/_group_member.html.haml

@@ -31,7 +31,9 @@
               %i.fa.fa-minus.fa-inverse
 
     .edit-member.hide.js-toggle-content
+      %br
       = form_for [@group, member], remote: true do |f|
-        .alert.prepend-top-20
-          = f.select :access_level, options_for_select(GroupMember.access_level_roles, member.access_level)
+        .prepend-top-10
+          = f.select :access_level, options_for_select(GroupMember.access_level_roles, member.access_level), {}, class: 'form-control'
+        .prepend-top-10
           = f.submit 'Save', class: 'btn btn-save btn-sm'

app/views/projects/issues/index.html.haml

@@ -18,7 +18,7 @@
   .clearfix
     .issues_bulk_update.hide
       = form_tag bulk_update_namespace_project_issues_path(@project.namespace, @project), method: :post  do
-        = select_tag('update[state_event]', options_for_select([['Open', 'reopen'], ['Closed', 'close']]), prompt: "Status")
+        = select_tag('update[state_event]', options_for_select([['Open', 'reopen'], ['Closed', 'close']]), prompt: "Status", class: 'form-control')
         = project_users_select_tag('update[assignee_id]', placeholder: 'Assignee')
         = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
         = hidden_field_tag 'update[issues_ids]', []

app/views/projects/project_members/_project_member.html.haml

@@ -29,7 +29,9 @@
             %i.fa.fa-minus.fa-inverse
 
     .edit-member.hide.js-toggle-content
+      %br
       = form_for member, as: :project_member, url: namespace_project_project_member_path(@project.namespace, @project, member.user), remote: true do |f|
-        .alert.prepend-top-20
-          = f.select :access_level, options_for_select(ProjectMember.access_roles, member.access_level)
-          = f.submit 'Save', class: 'btn btn-save btn-sm'
+        .prepend-top-10
+          = f.select :access_level, options_for_select(ProjectMember.access_roles, member.access_level), {}, class: 'form-control'
+        .prepend-top-10
+          = f.submit 'Save', class: 'btn btn-save'

app/views/projects/protected_branches/index.html.haml

@@ -23,12 +23,12 @@
       .col-sm-10
         = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: "Select branch"}, {class: "select2"})
     .form-group
-      = f.label :developers_can_push, class: 'control-label' do
-        Developers can push
-      .col-sm-10
+      .col-sm-offset-2.col-sm-10
         .checkbox
-          = f.check_box :developers_can_push
-          %span.descr Allow developers to push to this branch
+          = f.label :developers_can_push do
+            = f.check_box :developers_can_push
+            %strong Developers can push
+          .help-block Allow developers to push to this branch
     .form-actions
       = f.submit 'Protect', class: "btn-create btn"
 = render 'branches_list'

app/views/shared/_group_form.html.haml

@@ -15,7 +15,7 @@
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
           autofocus: local_assigns[:autofocus] || false
     - if @group.persisted?
-      .alert.alert-danger
+      .alert.alert-warning.prepend-top-10
         %ul
           %li Changing group path can have unintended side effects.
           %li Renaming group path will rename directory for all related projects