diff options
| author | Mike Greiling <mike@pixelcog.com> | 2018-05-25 21:05:53 +0000 |
|---|---|---|
| committer | Mike Greiling <mike@pixelcog.com> | 2018-05-25 21:05:53 +0000 |
| commit | 74894a38779adb32a8b8a3cdad8358fc98693403 (patch) | |
| tree | 4bf957d7b513797b03e571f451a760e2eb1524d8 | |
| parent | 6f4935bcee76a7af532399945f440a8fbd15658e (diff) | |
| parent | d219ed25fa0b67984984f0b5f60f1eff7a0c34c9 (diff) | |
| download | gitlab-ce-74894a38779adb32a8b8a3cdad8358fc98693403.tar.gz | |
Merge branch 'bootstrap4' into 'master'
Upgrade to Bootstrap 4
Closes #45185 and #46710
See merge request gitlab-org/gitlab-ce!18232
709 files changed, 3119 insertions, 3298 deletions
diff --git a/.scss-lint.yml b/.scss-lint.yml index 180d377d6f8..3df66033fa8 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -46,8 +46,9 @@ linters: # - properties # - @include declarations with inner @content # - nested rule sets. + # Disabled to minimize Bootstrap migration footprint DeclarationOrder: - enabled: true + enabled: false # `scss-lint:disable` control comments should be preceded by a comment # explaining why these linters are being disabled for this file. @@ -257,7 +257,6 @@ gem 'sass-rails', '~> 5.0.6' gem 'uglifier', '~> 2.7.2' gem 'addressable', '~> 2.5.2' -gem 'bootstrap-sass', '~> 3.3.0' gem 'font-awesome-rails', '~> 4.7' gem 'gemojione', '~> 3.3' gem 'gon', '~> 6.2' diff --git a/Gemfile.lock b/Gemfile.lock index 476da021a9d..7332b55c175 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -69,9 +69,6 @@ GEM attr_encrypted (3.1.0) encryptor (~> 3.0.0) attr_required (1.0.0) - autoprefixer-rails (6.2.3) - execjs - json awesome_print (1.2.0) axiom-types (0.1.1) descendants_tracker (~> 0.0.4) @@ -91,9 +88,6 @@ GEM binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) blankslate (2.1.2.4) - bootstrap-sass (3.3.6) - autoprefixer-rails (>= 5.2.1) - sass (>= 3.3.4) bootstrap_form (2.7.0) brakeman (4.2.1) browser (2.2.0) @@ -992,7 +986,6 @@ DEPENDENCIES benchmark-ips (~> 2.3.0) better_errors (~> 2.1.0) binding_of_caller (~> 0.7.2) - bootstrap-sass (~> 3.3.0) bootstrap_form (~> 2.7.0) brakeman (~> 4.2) browser (~> 2.2) diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 976d32abe9b..eb0f06efab4 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -345,7 +345,7 @@ class AwardsHandler { counter.text(counterNumber - 1); this.removeYouFromUserList($emojiButton); } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') { - $emojiButton.tooltip('destroy'); + $emojiButton.tooltip('dispose'); counter.text('0'); this.removeYouFromUserList($emojiButton); if ($emojiButton.parents('.note').length) { @@ -358,7 +358,7 @@ class AwardsHandler { } removeEmoji($emojiButton) { - $emojiButton.tooltip('destroy'); + $emojiButton.tooltip('dispose'); $emojiButton.remove(); const $votesBlock = this.getVotesBlock(); if ($votesBlock.find('.js-emoji-btn').length === 0) { @@ -392,7 +392,7 @@ class AwardsHandler { .removeAttr('data-title') .removeAttr('data-original-title') .attr('title', this.toSentence(authors)) - .tooltip('fixTitle'); + .tooltip('_fixTitle'); } addYouToUserList(votesBlock, emoji) { @@ -405,7 +405,7 @@ class AwardsHandler { users.unshift('You'); return awardBlock .attr('title', this.toSentence(users)) - .tooltip('fixTitle'); + .tooltip('_fixTitle'); } createAwardButtonForVotesBlock(votesBlock, emojiName) { diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue index 6e6cb31e3ac..d0f60e1d4cb 100644 --- a/app/assets/javascripts/badges/components/badge.vue +++ b/app/assets/javascripts/badges/components/badge.vue @@ -89,7 +89,7 @@ export default { v-show="hasError" class="btn-group" > - <div class="btn btn-default btn-xs disabled"> + <div class="btn btn-default btn-sm disabled"> <icon class="prepend-left-8 append-right-8" name="doc_image" @@ -98,7 +98,7 @@ export default { /> </div> <div - class="btn btn-default btn-xs disabled" + class="btn btn-default btn-sm disabled" > <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span> </div> @@ -106,7 +106,7 @@ export default { <button v-show="hasError" - class="btn btn-transparent btn-xs text-primary" + class="btn btn-transparent btn-sm text-primary" type="button" v-tooltip :title="s__('Badges|Reload badge image')" diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue index ca7197e1e0f..268968b63b3 100644 --- a/app/assets/javascripts/badges/components/badge_list.vue +++ b/app/assets/javascripts/badges/components/badge_list.vue @@ -23,8 +23,8 @@ export default { </script> <template> - <div class="panel panel-default"> - <div class="panel-heading"> + <div class="card"> + <div class="card-header"> {{ s__('Badges|Your badges') }} <span v-show="!isLoading" @@ -33,19 +33,19 @@ export default { </div> <loading-icon v-show="isLoading" - class="panel-body" + class="card-body" size="2" /> <div v-if="hasNoBadges" - class="panel-body" + class="card-body" > <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span> <span v-else>{{ s__('Badges|This project has no badges') }}</span> </div> <div v-else - class="panel-body" + class="card-body" > <badge-list-row v-for="badge in badges" diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js index e2a73a1797c..75834ba351d 100644 --- a/app/assets/javascripts/behaviors/copy_to_clipboard.js +++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js @@ -8,10 +8,10 @@ function showTooltip(target, title) { if (!$target.data('hideTooltip')) { $target .attr('title', title) - .tooltip('fixTitle') + .tooltip('_fixTitle') .tooltip('show') .attr('title', originalTitle) - .tooltip('fixTitle'); + .tooltip('_fixTitle'); } } diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js index 3ec932bdb73..b6e2781773c 100644 --- a/app/assets/javascripts/behaviors/quick_submit.js +++ b/app/assets/javascripts/behaviors/quick_submit.js @@ -69,7 +69,7 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q $this.tooltip({ container: 'body', html: 'true', - placement: 'auto top', + placement: 'top', title, trigger: 'manual', }); diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js index ffff4ddb71a..a8b6dbf0948 100644 --- a/app/assets/javascripts/behaviors/requires_input.js +++ b/app/assets/javascripts/behaviors/requires_input.js @@ -42,9 +42,9 @@ $.fn.requiresInput = function requiresInput() { function hideOrShowHelpBlock(form) { const selected = $('.js-select-namespace option:selected'); if (selected.length && selected.data('optionsParent') === 'groups') { - form.find('.help-block').hide(); + form.find('.form-text.text-muted').hide(); } else if (selected.length) { - form.find('.help-block').show(); + form.find('.form-text.text-muted').show(); } } diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js index c17877a276d..766039404ce 100644 --- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js +++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js @@ -2,9 +2,9 @@ import sqljs from 'sql.js'; import { template as _template } from 'underscore'; const PREVIEW_TEMPLATE = _template(` - <div class="panel panel-default"> - <div class="panel-heading"><%- name %></div> - <div class="panel-body"> + <div class="card"> + <div class="card-header"><%- name %></div> + <div class="card-body"> <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/> </div> </div> diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js index 0799991aa40..13318c58006 100644 --- a/app/assets/javascripts/blob/sketch/index.js +++ b/app/assets/javascripts/blob/sketch/index.js @@ -44,7 +44,7 @@ export default class SketchLoader { previewLink.href = previewUrl; previewLink.target = '_blank'; previewImage.src = previewUrl; - previewImage.className = 'img-responsive'; + previewImage.className = 'img-fluid'; previewLink.appendChild(previewImage); this.container.appendChild(previewLink); diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 137e1f5a099..f61c0be9230 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -116,7 +116,7 @@ export default class BlobViewer { this.copySourceBtn.classList.add('disabled'); } - $(this.copySourceBtn).tooltip('fixTitle'); + $(this.copySourceBtn).tooltip('_fixTitle'); } switchToViewer(name) { diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 84885ca9306..33e3369b971 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -77,7 +77,7 @@ export default { <template> <li - class="card" + class="board-card" :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index 8d84c1735b8..e8dfd95f7ae 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -92,7 +92,7 @@ export default { <template> <div class="board-new-issue-form"> - <div class="card"> + <div class="board-card"> <form @submit="submit($event)"> <div class="flash-container" @@ -122,7 +122,7 @@ export default { /> <div class="clearfix prepend-top-10"> <button - class="btn btn-success pull-left" + class="btn btn-success float-left" type="submit" :disabled="disabled" ref="submit-button" @@ -130,7 +130,7 @@ export default { Submit issue </button> <button - class="btn btn-default pull-right" + class="btn btn-default float-right" type="button" @click="cancel" > diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js index 84fe9b1288a..dcc07810d01 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.js +++ b/app/assets/javascripts/boards/components/issue_card_inner.js @@ -135,8 +135,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({ }, template: ` <div> - <div class="card-header"> - <h4 class="card-title"> + <div class="board-card-header"> + <h4 class="board-card-title"> <i class="fa fa-eye-slash confidential-icon" v-if="issue.confidential" @@ -147,13 +147,13 @@ gl.issueBoards.IssueCardInner = Vue.extend({ :href="issue.path" :title="issue.title">{{ issue.title }}</a> <span - class="card-number" + class="board-card-number" v-if="issueId" > {{ issue.referencePath }} </span> </h4> - <div class="card-assignee"> + <div class="board-card-assignee"> <user-avatar-link v-for="(assignee, index) in issue.assignees" :key="assignee.id" @@ -175,11 +175,11 @@ gl.issueBoards.IssueCardInner = Vue.extend({ </div> </div> <div - class="card-footer" + class="board-card-footer" v-if="showLabelFooter" > <button - class="label color-label has-tooltip" + class="badge color-label has-tooltip" v-for="label in issue.labels" type="button" v-if="showLabel(label)" diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js index 9e37f95cdd6..eb8a66975ee 100644 --- a/app/assets/javascripts/boards/components/modal/empty_state.js +++ b/app/assets/javascripts/boards/components/modal/empty_state.js @@ -41,10 +41,10 @@ gl.issueBoards.ModalEmptyState = Vue.extend({ template: ` <section class="empty-state"> <div class="row"> - <div class="col-xs-12 col-sm-6 col-sm-push-6"> + <div class="col-xs-12 col-sm-6 order-sm-last"> <aside class="svg-content"><img :src="emptyStateSvg"/></aside> </div> - <div class="col-xs-12 col-sm-6 col-sm-pull-6"> + <div class="col-xs-12 col-sm-6 order-sm-first"> <div class="text-content"> <h4>{{ contents.title }}</h4> <p v-html="contents.content"></p> diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js index 9735e0ddacc..11bb3e98334 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js +++ b/app/assets/javascripts/boards/components/modal/footer.js @@ -58,7 +58,7 @@ gl.issueBoards.ModalFooter = Vue.extend({ template: ` <footer class="form-actions add-issues-footer"> - <div class="pull-left"> + <div class="float-left"> <button class="btn btn-success" type="button" @@ -72,7 +72,7 @@ gl.issueBoards.ModalFooter = Vue.extend({ <lists-dropdown></lists-dropdown> </div> <button - class="btn btn-default pull-right" + class="btn btn-default float-right" type="button" @click="toggleModal(false)"> Cancel diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js index 6b04a6c7a6c..6c662432037 100644 --- a/app/assets/javascripts/boards/components/modal/list.js +++ b/app/assets/javascripts/boards/components/modal/list.js @@ -133,9 +133,9 @@ gl.issueBoards.ModalList = Vue.extend({ <div v-for="issue in group" v-if="showIssue(issue)" - class="card-parent"> + class="board-card-parent"> <div - class="card" + class="board-card" :class="{ 'is-active': issue.selected }" @click="toggleIssue($event, issue)"> <issue-card-inner diff --git a/app/assets/javascripts/boards/components/modal/tabs.js b/app/assets/javascripts/boards/components/modal/tabs.js index b6465a88e5e..9d331de8e22 100644 --- a/app/assets/javascripts/boards/components/modal/tabs.js +++ b/app/assets/javascripts/boards/components/modal/tabs.js @@ -24,7 +24,7 @@ gl.issueBoards.ModalTabs = Vue.extend({ role="button" @click.prevent="changeTab('all')"> Open issues - <span class="badge"> + <span class="badge badge-pill"> {{ issuesCount }} </span> </a> @@ -35,7 +35,7 @@ gl.issueBoards.ModalTabs = Vue.extend({ role="button" @click.prevent="changeTab('selected')"> Selected issues - <span class="badge"> + <span class="badge badge-pill"> {{ selectedCount }} </span> </a> diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index a6f8681cfac..29ab13b8e0b 100644 --- a/app/assets/javascripts/boards/index.js +++ b/app/assets/javascripts/boards/index.js @@ -214,7 +214,7 @@ export default () => { if (this.disabled) { $tooltip.tooltip(); } else { - $tooltip.tooltip('destroy'); + $tooltip.tooltip('dispose'); } }); }, diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js index e177a3bfdc7..47efb3a8cee 100644 --- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js +++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js @@ -141,6 +141,11 @@ export default class VariableList { $rowClone.find(entry.selector).val(entry.default); }); + // Close any dropdowns + $rowClone.find('.dropdown-menu.show').each((index, $dropdown) => { + $dropdown.classList.remove('show'); + }); + this.initRow($rowClone); $row.after($rowClone); diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index 9c12b89240c..bb5fcea648d 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -191,11 +191,11 @@ export default { :value="ingressExternalIp" readonly /> - <span class="input-group-btn"> + <span class="input-group-append"> <clipboard-button :text="ingressExternalIp" :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')" - class="js-clipboard-btn" + class="input-group-text js-clipboard-btn" /> </span> </div> diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js index db96da4ccba..50e2949ab55 100644 --- a/app/assets/javascripts/commons/bootstrap.js +++ b/app/assets/javascripts/commons/bootstrap.js @@ -1,15 +1,7 @@ import $ from 'jquery'; // bootstrap jQuery plugins -import 'bootstrap-sass/assets/javascripts/bootstrap/affix'; -import 'bootstrap-sass/assets/javascripts/bootstrap/alert'; -import 'bootstrap-sass/assets/javascripts/bootstrap/button'; -import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown'; -import 'bootstrap-sass/assets/javascripts/bootstrap/modal'; -import 'bootstrap-sass/assets/javascripts/bootstrap/tab'; -import 'bootstrap-sass/assets/javascripts/bootstrap/transition'; -import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip'; -import 'bootstrap-sass/assets/javascripts/bootstrap/popover'; +import 'bootstrap'; // custom jQuery functions $.fn.extend({ diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js index 9c88466e576..a4e84da1eda 100644 --- a/app/assets/javascripts/compare_autocomplete.js +++ b/app/assets/javascripts/compare_autocomplete.js @@ -78,7 +78,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = ( $dropdownContainer.on('click', '.dropdown-content a', e => { $dropdown.prop('title', e.target.text.replace(/_+?/g, '-')); if ($dropdown.hasClass('has-tooltip')) { - $dropdown.tooltip('fixTitle'); + $dropdown.tooltip('_fixTitle'); } }); }); diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js index a88b6971f90..09d490106df 100644 --- a/app/assets/javascripts/create_merge_request_dropdown.js +++ b/app/assets/javascripts/create_merge_request_dropdown.js @@ -61,8 +61,8 @@ export default class CreateMergeRequestDropdown { } available() { - this.availableButton.classList.remove('hide'); - this.unavailableButton.classList.add('hide'); + this.availableButton.classList.remove('hidden'); + this.unavailableButton.classList.add('hidden'); } bindEvents() { @@ -232,7 +232,7 @@ export default class CreateMergeRequestDropdown { } hide() { - this.wrapperEl.classList.add('hide'); + this.wrapperEl.classList.add('hidden'); } init() { @@ -406,8 +406,8 @@ export default class CreateMergeRequestDropdown { } unavailable() { - this.availableButton.classList.add('hide'); - this.unavailableButton.classList.remove('hide'); + this.availableButton.classList.add('hidden'); + this.unavailableButton.classList.remove('hidden'); } updateBranchName(suggestedBranchName) { diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue index 32ae0cc1476..5be17081b58 100644 --- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue @@ -16,7 +16,7 @@ <template> <span v-if="count === 50" - class="events-info pull-right" + class="events-info float-right" > <i class="fa fa-warning" diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js index 180a6bd67e7..fe9b0795609 100644 --- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js +++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js @@ -79,7 +79,7 @@ const DiffNoteAvatars = Vue.extend({ storeState: { handler() { this.$nextTick(() => { - $('.has-tooltip', this.$el).tooltip('fixTitle'); + $('.has-tooltip', this.$el).tooltip('_fixTitle'); // We need to add/remove a class to an element that is outside the Vue instance this.addNoCommentClass(); @@ -138,7 +138,7 @@ const DiffNoteAvatars = Vue.extend({ this.$nextTick(() => { this.setDiscussionVisible(); - $('.has-tooltip', this.$el).tooltip('fixTitle'); + $('.has-tooltip', this.$el).tooltip('_fixTitle'); $('.has-tooltip', this.$el).tooltip('hide'); }); }, diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js index df4c72ba0ed..8d66417abac 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_btn.js +++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js @@ -61,7 +61,7 @@ const ResolveBtn = Vue.extend({ this.$nextTick(() => { $(this.$refs.button) .tooltip('hide') - .tooltip('fixTitle'); + .tooltip('_fixTitle'); }); }, resolve: function () { diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index ab9e22037d0..0b3fef9fcca 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -74,7 +74,7 @@ </span> </button> - <ul class="dropdown-menu dropdown-menu-align-right"> + <ul class="dropdown-menu dropdown-menu-right"> <li v-for="(action, i) in actions" :key="i"> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 79326ca3487..23aaab2c441 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -486,14 +486,14 @@ {{ model.folderName }} </span> - <span class="badge"> + <span class="badge badge-pill"> {{ model.size }} </span> </span> </div> <div - class="table-section section-10 deployment-column hidden-xs hidden-sm" + class="table-section section-10 deployment-column d-none d-sm-none d-md-block" role="gridcell" > <span v-if="shouldRenderDeploymentID"> @@ -513,7 +513,7 @@ </div> <div - class="table-section section-15 hidden-xs hidden-sm" + class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell" > <a diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index deada134b27..8df1b6317e3 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -28,7 +28,7 @@ <template> <a v-tooltip - class="btn monitoring-url hidden-xs hidden-sm" + class="btn monitoring-url d-none d-sm-none d-md-block" data-container="body" rel="noopener noreferrer nofollow" :href="monitoringUrl" diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index c822fb1574c..7515d711c50 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -40,7 +40,7 @@ <template> <button type="button" - class="btn hidden-xs hidden-sm" + class="btn d-none d-sm-none d-md-block" @click="onClick" :disabled="isLoading" > diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index dda7429a726..7055f208451 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -43,7 +43,7 @@ if (confirm('Are you sure you want to stop this environment?')) { this.isLoading = true; - $(this.$el).tooltip('destroy'); + $(this.$el).tooltip('dispose'); eventHub.$emit('postAction', this.stopUrl); } @@ -55,7 +55,7 @@ <button v-tooltip type="button" - class="btn stop-env-link hidden-xs hidden-sm" + class="btn stop-env-link d-none d-sm-none d-md-block" data-container="body" @click="onClick" :disabled="isLoading" diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index e8469d088ef..0dbbbb75e07 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -30,7 +30,7 @@ <template> <a v-tooltip - class="btn terminal-button hidden-xs hidden-sm" + class="btn terminal-button d-none d-sm-none d-md-block" data-container="body" :title="title" :aria-label="title" diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js index 2d5bae9a9c4..2f27c9351bc 100644 --- a/app/assets/javascripts/feature_highlight/feature_highlight.js +++ b/app/assets/javascripts/feature_highlight/feature_highlight.js @@ -24,7 +24,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { template: ` <div class="popover feature-highlight-popover" role="tooltip"> <div class="arrow"></div> - <div class="popover-content"></div> + <div class="popover-body"></div> </div> `, }) diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index fa48d7d1915..746a06b7c4f 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -374,7 +374,7 @@ GitLabDropdown = (function() { $relatedTarget = $(e.relatedTarget); $dropdownMenu = $relatedTarget.closest('.dropdown-menu'); if ($dropdownMenu.length === 0) { - return _this.dropdown.removeClass('open'); + return _this.dropdown.removeClass('show'); } } }; @@ -801,7 +801,7 @@ GitLabDropdown = (function() { if (this.options.filterable) { const initialScrollTop = $(window).scrollTop(); - if (this.dropdown.is('.open')) { + if (this.dropdown.is('.show') && !this.filterInput.is(':focus')) { this.filterInput.focus(); } diff --git a/app/assets/javascripts/gl_field_error.js b/app/assets/javascripts/gl_field_error.js index 972b2252acb..87c6e37b9fb 100644 --- a/app/assets/javascripts/gl_field_error.js +++ b/app/assets/javascripts/gl_field_error.js @@ -62,7 +62,7 @@ export default class GlFieldError { this.inputDomElement = this.inputElement.get(0); this.form = formErrors; this.errorMessage = this.inputElement.attr('title') || 'This field is required.'; - this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${this.errorMessage}</p>`); + this.fieldErrorElement = $(`<p class='${errorMessageClass} hidden'>${this.errorMessage}</p>`); this.state = { valid: false, @@ -146,8 +146,8 @@ export default class GlFieldError { renderInvalid() { this.inputElement.addClass(inputErrorClass); - this.scopedSiblings.hide(); - return this.fieldErrorElement.show(); + this.scopedSiblings.addClass('hidden'); + return this.fieldErrorElement.removeClass('hidden'); } renderClear() { @@ -157,7 +157,7 @@ export default class GlFieldError { this.accessCurrentValue(trimmedInput); } this.inputElement.removeClass(inputErrorClass); - this.scopedSiblings.hide(); - this.fieldErrorElement.hide(); + this.scopedSiblings.addClass('hidden'); + this.fieldErrorElement.addClass('hidden'); } } diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 764b130fdb8..7f64a9bd741 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -99,7 +99,7 @@ export default { /> </div> <div - class="avatar-container prepend-top-8 prepend-left-5 s24 hidden-xs" + class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block" :class="{ 'content-loading': group.isChildrenLoading }" > <a diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 0aaf5a112cb..2c184ea726c 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -102,12 +102,12 @@ export default { class="ide-empty-state" > <div class="row js-empty-state"> - <div class="col-xs-12"> + <div class="col-12"> <div class="svg-content svg-250"> <img :src="emptyStateSvgPath" /> </div> </div> - <div class="col-xs-12"> + <div class="col-12"> <div class="text-content text-center"> <h4> Welcome to the GitLab IDE diff --git a/app/assets/javascripts/ide/components/ide_file_buttons.vue b/app/assets/javascripts/ide/components/ide_file_buttons.vue index a6c6f46a144..30b00abf6ed 100644 --- a/app/assets/javascripts/ide/components/ide_file_buttons.vue +++ b/app/assets/javascripts/ide/components/ide_file_buttons.vue @@ -32,14 +32,14 @@ export default { <template> <div v-if="showButtons" - class="pull-right ide-btn-group" + class="float-right ide-btn-group" > <a v-tooltip v-if="!file.binary" :href="file.blamePath" :title="__('Blame')" - class="btn btn-xs btn-transparent blame" + class="btn btn-sm btn-transparent blame" > <icon name="blame" @@ -50,7 +50,7 @@ export default { v-tooltip :href="file.commitsPath" :title="__('History')" - class="btn btn-xs btn-transparent history" + class="btn btn-sm btn-transparent history" > <icon name="history" @@ -61,7 +61,7 @@ export default { v-tooltip :href="file.permalink" :title="__('Permalink')" - class="btn btn-xs btn-transparent permalink" + class="btn btn-sm btn-transparent permalink" > <icon name="link" @@ -72,7 +72,7 @@ export default { v-tooltip :href="file.rawPath" target="_blank" - class="btn btn-xs btn-transparent prepend-left-10 raw" + class="btn btn-sm btn-transparent prepend-left-10 raw" rel="noopener noreferrer" :title="rawDownloadButtonLabel"> <icon diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index a0ce1c9dac7..f0b29702497 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -57,7 +57,7 @@ export default { <div class="dropdown" :class="{ - open: dropdownOpen, + show: dropdownOpen, }" > <button @@ -69,12 +69,12 @@ export default { <icon name="plus" :size="12" - css-classes="pull-left" + css-classes="float-left" /> <icon name="arrow-down" :size="12" - css-classes="pull-left" + css-classes="float-left" /> </button> <ul diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index a95a0225950..d83a90f71e1 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -70,12 +70,12 @@ export default { @submit="createEntryInStore" > <form - class="form-horizontal" slot="body" @submit.prevent="createEntryInStore" + class="form-group row append-bottom-0" > <fieldset class="form-group append-bottom-0"> - <label class="label-light col-sm-3 ide-new-modal-label"> + <label class="label-light col-form-label col-sm-3 ide-new-modal-label"> {{ __('Name') }} </label> <div class="col-sm-9"> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index f2178c06c10..a281ecb95c8 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -197,7 +197,7 @@ export default { > <div class="ide-mode-tabs clearfix" > <ul - class="nav-links pull-left" + class="nav-links float-left" v-if="!shouldHideEditor && isEditModeActive" > <li :class="editTabCSS"> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index 7bc865058c6..442697e1c80 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -144,7 +144,7 @@ export default { :file="file" /> </span> - <span class="pull-right ide-file-icon-holder"> + <span class="float-right ide-file-icon-holder"> <mr-file-icon v-if="file.mrChange" /> @@ -177,7 +177,7 @@ export default { :project-id="file.projectId" :branch="file.branchId" :path="file.path" - class="pull-right prepend-left-8" + class="float-right prepend-left-8" /> </div> </div> diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue index 79af8c0b0c7..3e47da88050 100644 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ b/app/assets/javascripts/ide/components/repo_loading_file.vue @@ -25,13 +25,13 @@ /> </td> <template v-if="!leftPanelCollapsed"> - <td class="hidden-sm hidden-xs"> + <td class="d-none d-sm-none d-md-block"> <skeleton-loading-container :small="true" /> </td> - <td class="hidden-xs"> + <td class="d-none d-sm-block"> <skeleton-loading-container class="animation-container-right" :small="true" diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue index a539506bce2..7ef5e679881 100644 --- a/app/assets/javascripts/issue_show/components/edit_actions.vue +++ b/app/assets/javascripts/issue_show/components/edit_actions.vue @@ -51,7 +51,7 @@ <template> <div class="prepend-top-default append-bottom-default clearfix"> <button - class="btn btn-save pull-left" + class="btn btn-save float-left" :class="{ disabled: formState.updateLoading || !isSubmitEnabled }" type="submit" :disabled="formState.updateLoading || !isSubmitEnabled" @@ -64,14 +64,14 @@ </i> </button> <button - class="btn btn-default pull-right" + class="btn btn-default float-right" type="button" @click="closeForm"> Cancel </button> <button v-if="shouldShowDeleteButton" - class="btn btn-danger pull-right append-right-default" + class="btn btn-danger float-right append-right-default" :class="{ disabled: deleteLoading }" type="button" :disabled="deleteLoading" diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue index 779705e19ac..ab8bd34762f 100644 --- a/app/assets/javascripts/issue_show/components/form.vue +++ b/app/assets/javascripts/issue_show/components/form.vue @@ -84,7 +84,7 @@ <div :class="{ 'col-sm-8 col-lg-9': hasIssuableTemplates, - 'col-xs-12': !hasIssuableTemplates, + 'col-12': !hasIssuableTemplates, }" > <title-field diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js index ace45e9dd29..c67bd7fb0c6 100644 --- a/app/assets/javascripts/job.js +++ b/app/assets/javascripts/job.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import _ from 'underscore'; +import StickyFill from 'stickyfilljs'; import axios from './lib/utils/axios_utils'; import { visitUrl } from './lib/utils/url_utility'; import bp from './breakpoints'; @@ -82,17 +83,11 @@ export default class Job { /** If the browser does not support position sticky, it returns the position as static. If the browser does support sticky, then we allow the browser to handle it, if not - then we default back to Bootstraps affix + then we use a polyfill **/ if (this.$topBar.css('position') !== 'static') return; - const offsetTop = this.$buildTrace.offset().top; - - this.$topBar.affix({ - offset: { - top: offsetTop, - }, - }); + StickyFill.add(this.$topBar); } // eslint-disable-next-line class-methods-use-this diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue index 21b545d6cab..c1044f4cd42 100644 --- a/app/assets/javascripts/jobs/components/header.vue +++ b/app/assets/javascripts/jobs/components/header.vue @@ -56,7 +56,7 @@ export default { actions.push({ label: 'New issue', path: this.job.new_issue_path, - cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block', + cssClass: 'js-new-issue btn btn-new btn-inverted d-none d-md-block d-lg-block d-xl-block', type: 'link', }); } diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue index dfe87d89a39..83560a8ff0e 100644 --- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue +++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue @@ -39,7 +39,7 @@ <span v-if="hasHelpURL" - class="help-button pull-right" + class="help-button float-right" > <a :href="helpUrl" diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue index db19dc9b238..82fec7e936b 100644 --- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue +++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue @@ -48,7 +48,7 @@ export default { return `${this.job.runner.description} (#${this.job.runner.id})`; }, retryButtonClass() { - let className = 'js-retry-button pull-right btn btn-retry visible-md-block visible-lg-block'; + let className = 'js-retry-button pull-right btn btn-retry d-none d-md-block d-lg-block d-xl-block'; className += this.job.status && this.job.recoverable ? ' btn-primary' @@ -105,7 +105,7 @@ export default { type="button" :aria-label="__('Toggle Sidebar')" class="btn btn-blank gutter-toggle pull-right - visible-xs-block visible-sm-block js-sidebar-build-toggle" + d-block d-sm-block d-md-none js-sidebar-build-toggle" > <i aria-hidden="true" diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js index e230dbbd4ac..6af22ecc990 100644 --- a/app/assets/javascripts/label_manager.js +++ b/app/assets/javascripts/label_manager.js @@ -35,7 +35,7 @@ export default class LabelManager { const $label = $(`#${$btn.data('domId')}`); const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add'; const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`); - $tooltip.tooltip('destroy'); + $tooltip.tooltip('dispose'); _this.toggleLabelPriority($label, action); _this.toggleEmptyState($label, $btn, action); } diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index 9b62cfb8206..eafdaf4a672 100644 --- a/app/assets/javascripts/labels_select.js +++ b/app/assets/javascripts/labels_select.js @@ -120,7 +120,7 @@ export default class LabelsSelect { $sidebarLabelTooltip .attr('title', labelTooltipTitle) - .tooltip('fixTitle'); + .tooltip('_fixTitle'); $('.has-tooltip', $value).tooltip({ container: 'body' diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 9ff2042475b..8b5445d012b 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -51,7 +51,7 @@ export const rstrip = (val) => { return val; }; -export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('fixTitle'); +export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('_fixTitle'); export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => { const field = $(fieldSelector); diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index b7624cf490a..0ff23bbb061 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -143,8 +143,7 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => { if (setTimeago) { // Recreate with custom template $(el).tooltip({ - template: - '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>', + template: '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', }); } diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 247aeb481c6..9803bebfd10 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -46,9 +46,9 @@ document.addEventListener('beforeunload', () => { // Unbind scroll events $(document).off('scroll'); // Close any open tooltips - $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy'); + $('.has-tooltip, [data-toggle="tooltip"]').tooltip('dispose'); // Close any open popover - $('[data-toggle="popover"]').popover('destroy'); + $('[data-toggle="popover"]').popover('dispose'); }); window.addEventListener('hashchange', handleLocationHash); @@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', () => { $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() { $(this) - .tooltip('destroy') + .tooltip('dispose') .closest('li') .fadeOut(); }); @@ -141,9 +141,9 @@ document.addEventListener('DOMContentLoaded', () => { }); // Initialize tooltips - $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover'; $body.tooltip({ selector: '.has-tooltip, [data-toggle="tooltip"]', + trigger: 'hover', placement(tip, el) { return $(el).data('placement') || 'bottom'; }, @@ -196,7 +196,7 @@ document.addEventListener('DOMContentLoaded', () => { $container.remove(); }); - $('.navbar-toggle').on('click', () => { + $('.navbar-toggler').on('click', () => { $('.header-content').toggleClass('menu-expanded'); gl.lazyLoader.loadCheck(); }); diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 3f84f4b9499..3548c07aea8 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -362,7 +362,7 @@ export default class MergeRequestTabs { // // status - Boolean, true to show, false to hide toggleLoading(status) { - $('.mr-loading-status .loading').toggle(status); + $('.mr-loading-status .loading').toggleClass('hidden', status); } diffViewType() { diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue index a6dbe42a8f0..241627f9790 100644 --- a/app/assets/javascripts/monitoring/components/graph_group.vue +++ b/app/assets/javascripts/monitoring/components/graph_group.vue @@ -17,12 +17,12 @@ export default { <template> <div v-if="showPanels" - class="panel panel-default prometheus-panel" + class="card prometheus-panel" > - <div class="panel-heading"> + <div class="card-header"> <h4>{{ name }}</h4> </div> - <div class="panel-body prometheus-graph-group"> + <div class="card-body prometheus-graph-group"> <slot></slot> </div> </div> diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 96f2b3eac98..b2c1a26bbae 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -1231,8 +1231,8 @@ export default class Notes { const isForced = forceShow === true || forceShow === false; const showNow = forceShow === true || (!isCurrentlyShown && !isForced); - targetRow.toggle(showNow); - notesContent.toggle(showNow); + targetRow.toggleClass('hide', !showNow); + notesContent.toggleClass('hide', !showNow); } if (addForm) { @@ -1675,7 +1675,7 @@ export default class Notes { <div class="note-header"> <div class="note-header-info"> <a href="/${_.escape(currentUsername)}"> - <span class="hidden-xs">${_.escape( + <span class="d-none d-sm-block">${_.escape( currentUsername, )}</span> <span class="note-headline-light">${_.escape( @@ -1694,7 +1694,7 @@ export default class Notes { </li>`, ); - $tempNote.find('.hidden-xs').text(_.escape(currentUserFullname)); + $tempNote.find('.d-none.d-sm-block').text(_.escape(currentUserFullname)); $tempNote .find('.note-headline-light') .text(`@${_.escape(currentUsername)}`); diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 48642c4a086..72d7e22fba0 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -321,7 +321,7 @@ Please check your network connection and try again.`; <li class="timeline-entry"> <div class="timeline-entry-inner"> <div class="flash-container error-alert timeline-content"></div> - <div class="timeline-icon hidden-xs hidden-sm"> + <div class="timeline-icon d-none d-sm-none d-md-block"> <user-avatar-link v-if="author" :link-href="author.path" @@ -369,7 +369,7 @@ js-gfm-input js-autosize markdown-area js-vue-textarea" </markdown-field> <div class="note-form-actions"> <div - class="pull-left btn-group + class="float-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"> <button @click.prevent="handleSave()" @@ -383,6 +383,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" name="button" type="button" class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle" + data-display="static" data-toggle="dropdown" aria-label="Open comment type dropdown"> <i diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index e0f883a8e08..7f5aacaa3a2 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -100,7 +100,7 @@ export default { : 'div'; }, wrapperClass() { - return this.isDiffDiscussion ? '' : 'panel panel-default'; + return this.isDiffDiscussion ? '' : 'card'; }, }, mounted() { @@ -263,7 +263,7 @@ Please check your network connection and try again.`; class="discussion-reply-holder"> <template v-if="!isReplying && canReply"> <div - class="btn-group-justified discussion-with-resolve-btn" + class="btn-group d-flex discussion-with-resolve-btn" role="group"> <div class="btn-group" diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js index 9e6cf67dff0..00e27ca0e70 100644 --- a/app/assets/javascripts/notifications_form.js +++ b/app/assets/javascripts/notifications_form.js @@ -15,7 +15,7 @@ export default class NotificationsForm { toggleCheckbox(e) { const $checkbox = $(e.currentTarget); - const $parent = $checkbox.closest('.checkbox'); + const $parent = $checkbox.closest('.form-check'); this.saveEvent($checkbox, $parent); } diff --git a/app/assets/javascripts/pages/admin/admin.js b/app/assets/javascripts/pages/admin/admin.js index 91f154b7ecd..ff4d6ab15f9 100644 --- a/app/assets/javascripts/pages/admin/admin.js +++ b/app/assets/javascripts/pages/admin/admin.js @@ -25,7 +25,7 @@ export default function adminInit() { $('body').on('click', '.js-toggle-colors-link', (e) => { e.preventDefault(); - $('.js-toggle-colors-container').toggle(); + $('.js-toggle-colors-container').toggleClass('hide'); }); $('.log-tabs a').on('click', function logTabsClick(e) { diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js index fbdef329ab2..8e8f47c21d8 100644 --- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js +++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js @@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => { const twoFactorNode = document.querySelector('.js-two-factor-auth'); const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true'; if (skippable) { - const button = `<a class="btn btn-xs btn-warning pull-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`; + const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`; const flashAlert = document.querySelector('.flash-alert .container-fluid'); if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button); } diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue index 25a88f846eb..17b91479ea5 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue @@ -42,7 +42,7 @@ </label> <span v-if="helpText" - class="help-block" + class="form-text text-muted" > {{ helpText }} </span> diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js index 124bc2ba710..ca375007ec5 100644 --- a/app/assets/javascripts/pages/users/user_tabs.js +++ b/app/assets/javascripts/pages/users/user_tabs.js @@ -181,7 +181,7 @@ export default class UserTabs { toggleLoading(status) { return this.$parentEl.find('.loading-status .loading') - .toggle(status); + .toggleClass('hidden', status); } setCurrentAction(source) { @@ -195,6 +195,6 @@ export default class UserTabs { } getCurrentAction() { - return this.$parentEl.find('.nav-links .active a').data('action'); + return this.$parentEl.find('.nav-links a.active').data('action'); } } diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue index 3ed07a4a47d..dd9578a6c7f 100644 --- a/app/assets/javascripts/performance_bar/components/request_selector.vue +++ b/app/assets/javascripts/performance_bar/components/request_selector.vue @@ -37,7 +37,7 @@ export default { <template> <div id="peek-request-selector" - class="pull-right" + class="float-right" > <select v-model="currentRequestId"> <option diff --git a/app/assets/javascripts/pipelines/components/blank_state.vue b/app/assets/javascripts/pipelines/components/blank_state.vue index 8d3d6223d7b..f3219b8291c 100644 --- a/app/assets/javascripts/pipelines/components/blank_state.vue +++ b/app/assets/javascripts/pipelines/components/blank_state.vue @@ -17,13 +17,13 @@ <template> <div class="row empty-state"> - <div class="col-xs-12"> + <div class="col-12"> <div class="svg-content"> <img :src="svgPath" /> </div> </div> - <div class="col-xs-12 text-center"> + <div class="col-12 text-center"> <div class="text-content"> <h4>{{ message }}</h4> </div> diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue index 6083421073e..50c27bed9fd 100644 --- a/app/assets/javascripts/pipelines/components/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/empty_state.vue @@ -19,13 +19,13 @@ </script> <template> <div class="row empty-state js-empty-state"> - <div class="col-xs-12"> + <div class="col-12"> <div class="svg-content svg-250"> <img :src="emptyStateSvgPath" /> </div> </div> - <div class="col-xs-12"> + <div class="col-12"> <div class="text-content"> <template v-if="canSetCi"> diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue index 27b938c4985..dc16d395bcb 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue @@ -96,6 +96,7 @@ export default { :class="cssClassJobName" data-container="body" data-html="true" + data-boundary="viewport" class="js-pipeline-graph-job-link" > diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index ceb4d9ca604..4d965733f95 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -46,7 +46,7 @@ }; </script> <template> - <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags"> + <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags"> <a :href="pipeline.path" class="js-pipeline-url-link"> @@ -69,35 +69,35 @@ <span v-if="pipeline.flags.latest" v-tooltip - class="js-pipeline-url-latest label label-success" + class="js-pipeline-url-latest badge badge-success" title="Latest pipeline for this branch"> latest </span> <span v-if="pipeline.flags.yaml_errors" v-tooltip - class="js-pipeline-url-yaml label label-danger" + class="js-pipeline-url-yaml badge badge-danger" :title="pipeline.yaml_errors"> yaml invalid </span> <span v-if="pipeline.flags.failure_reason" v-tooltip - class="js-pipeline-url-failure label label-danger" + class="js-pipeline-url-failure badge badge-danger" :title="pipeline.failure_reason"> error </span> <a v-if="pipeline.flags.auto_devops" tabindex="0" - class="js-pipeline-url-autodevops label label-info autodevops-badge" + class="js-pipeline-url-autodevops badge badge-info autodevops-badge" v-popover="popoverOptions" role="button"> Auto DevOps </a> <span v-if="pipeline.flags.stuck" - class="js-pipeline-url-stuck label label-warning"> + class="js-pipeline-url-stuck badge badge-warning"> stuck </span> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue index 3297af7bde4..e9bc3cf14ca 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue @@ -63,7 +63,7 @@ <loading-icon v-if="isLoading" /> </button> - <ul class="dropdown-menu dropdown-menu-align-right"> + <ul class="dropdown-menu dropdown-menu-right"> <li v-for="(action, i) in actions" :key="i" diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue index 1b9e0f917a4..31fcc9dd412 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue @@ -37,7 +37,7 @@ > </i> </button> - <ul class="dropdown-menu dropdown-menu-align-right"> + <ul class="dropdown-menu dropdown-menu-right"> <li v-for="(artifact, i) in artifacts" :key="i"> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index b99246a92d0..a3c17479e6f 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -331,7 +331,7 @@ <pipelines-artifacts-component v-if="pipeline.details.artifacts.length" - class="hidden-xs hidden-sm" + class="d-none d-sm-none d-md-block" :artifacts="pipeline.details.artifacts" /> diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue index cd54d26c9d3..79dbdca4010 100644 --- a/app/assets/javascripts/pipelines/components/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/time_ago.vue @@ -75,7 +75,7 @@ </p> <p - class="finished-at hidden-xs hidden-sm" + class="finished-at d-none d-sm-none d-md-block" v-if="hasFinishedTime" > diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index e5de3f69b01..a7a2a7235fd 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -86,7 +86,11 @@ Please update your Git repository remotes as soon as possible.`), <div class="form-group"> <label :for="$options.inputId">{{ s__('Profiles|Path') }}</label> <div class="input-group"> - <div class="input-group-addon">{{ rootUrl }}</div> + <div class="input-group-prepend"> + <div class="input-group-text"> + {{ rootUrl }} + </div> + </div> <input :id="$options.inputId" class="form-control" diff --git a/app/assets/javascripts/project_fork.js b/app/assets/javascripts/project_fork.js index 6fedd94a6a9..f5cd1c3cc3e 100644 --- a/app/assets/javascripts/project_fork.js +++ b/app/assets/javascripts/project_fork.js @@ -4,6 +4,6 @@ export default () => { $('.js-fork-thumbnail').on('click', function forkThumbnailClicked() { if ($(this).hasClass('disabled')) return false; - return $('.js-fork-content').toggle(); + return $('.js-fork-content').toggleClass('hidden'); }); }; diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js index f31beb4dc78..6f06944ebb6 100644 --- a/app/assets/javascripts/project_label_subscription.js +++ b/app/assets/javascripts/project_label_subscription.js @@ -42,7 +42,7 @@ export default class ProjectLabelSubscription { const $button = $(button); if ($button.attr('data-original-title')) { - $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle'); + $button.tooltip('hide').attr('data-original-title', newAction).tooltip('_fixTitle'); } return button; diff --git a/app/assets/javascripts/project_visibility.js b/app/assets/javascripts/project_visibility.js index 7c95c71e239..a52ac768e57 100644 --- a/app/assets/javascripts/project_visibility.js +++ b/app/assets/javascripts/project_visibility.js @@ -7,7 +7,7 @@ function setVisibilityOptions(namespaceSelector) { const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex]; const { name, visibility, visibilityLevel, showPath, editPath } = selectedNamespace.dataset; - document.querySelectorAll('.visibility-level-setting .radio').forEach((option) => { + document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => { const optionInput = option.querySelector('input[type=radio]'); const optionValue = optionInput ? optionInput.value : 0; const optionTitle = option.querySelector('.option-title'); diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 93603dfc14d..888b1d6ce33 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -66,8 +66,8 @@ const bindEvents = () => { .on('click', (e) => { e.preventDefault(); }) .popover({ title: $pushNewProjectTipTrigger.data('title'), - placement: 'auto bottom', - html: 'true', + placement: 'bottom', + html: true, content: $('.push-new-project-tip-template').html(), }) .on('shown.bs.popover', () => { diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue index 0c46ed184be..7fcd62dcdb8 100644 --- a/app/assets/javascripts/projects_dropdown/components/search.vue +++ b/app/assets/javascripts/projects_dropdown/components/search.vue @@ -46,7 +46,7 @@ <template> <div - class="search-input-container hidden-xs" + class="search-input-container d-none d-sm-block" > <input type="search" diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js index 0a60f4845b2..1a75fdd75db 100644 --- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js +++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js @@ -31,7 +31,7 @@ export default class PrometheusMetrics { /* eslint-disable class-methods-use-this */ handlePanelToggle(e) { const $toggleBtn = $(e.currentTarget); - const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body'); + const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body'); $currentPanelBody.toggleClass('hidden'); if ($toggleBtn.hasClass('fa-caret-down')) { $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right'); diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 2ce43ef0125..2fc3778820b 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -84,7 +84,7 @@ css-class="btn-default btn-transparent btn-clipboard" /> - <div class="controls hidden-xs pull-right"> + <div class="controls d-none d-sm-block float-right"> <button v-if="repo.canDelete" type="button" diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index 673b1db6769..e4a4b3bb129 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -120,7 +120,7 @@ <button v-if="item.canDelete" type="button" - class="js-delete-registry btn btn-danger hidden-xs pull-right" + class="js-delete-registry btn btn-danger d-none d-sm-block float-right" :title="s__('ContainerRegistry|Remove tag')" :aria-label="s__('ContainerRegistry|Remove tag')" data-container="body" diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js index 6eb0b62fa1c..2afcf4626b8 100644 --- a/app/assets/javascripts/right_sidebar.js +++ b/app/assets/javascripts/right_sidebar.js @@ -108,7 +108,7 @@ Sidebar.prototype.todoUpdateDone = function(data) { .attr('title', $el.data(`${attrPrefix}Text`)); if ($el.hasClass('has-tooltip')) { - $el.tooltip('fixTitle'); + $el.tooltip('_fixTitle'); } if ($el.data(`${attrPrefix}Icon`)) { diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue index 5eeb2a41bae..284a258d3c9 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue @@ -41,7 +41,7 @@ export default { </i> <a v-if="editable" - class="js-sidebar-dropdown-toggle edit-link pull-right" + class="js-sidebar-dropdown-toggle edit-link float-right" href="#" > {{ __('Edit') }} @@ -49,7 +49,7 @@ export default { <a v-if="showToggle" aria-label="Toggle sidebar" - class="gutter-toggle pull-right js-sidebar-toggle" + class="gutter-toggle float-right js-sidebar-toggle" href="#" role="button" > diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue index 2d00e8ac7e0..5a374d84796 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -130,6 +130,7 @@ export default { v-tooltip data-container="body" data-placement="left" + data-boundary="viewport" :title="collapsedTooltipTitle" > <i diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue index 7f0de722f61..3f6e2f05396 100644 --- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue @@ -75,6 +75,7 @@ export default { v-tooltip data-container="body" data-placement="left" + data-boundary="viewport" :title="tooltipLabel" > <icon @@ -86,7 +87,7 @@ export default { {{ __('Confidentiality') }} <a v-if="isEditable" - class="pull-right confidential-edit" + class="float-right confidential-edit" href="#" @click.prevent="toggleForm" > diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue index 3783f71a848..4165aa19acf 100644 --- a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue +++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue @@ -32,7 +32,7 @@ export default { </script> <template> - <div class="dropdown open"> + <div class="dropdown show"> <div class="dropdown-menu sidebar-item-warning-message"> <div> <p diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue index e1e4715826a..d392977e5e2 100644 --- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue +++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue @@ -41,7 +41,7 @@ export default { </script> <template> - <div class="dropdown open"> + <div class="dropdown show"> <div class="dropdown-menu sidebar-item-warning-message"> <p class="text" diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue index 1a5e7b67eca..fb69c741dcd 100644 --- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue @@ -99,6 +99,7 @@ export default { v-tooltip data-container="body" data-placement="left" + data-boundary="viewport" :title="tooltipLabel" > <icon @@ -112,7 +113,7 @@ export default { {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }} <button v-if="isEditable" - class="pull-right lock-edit" + class="float-right lock-edit" type="button" @click.prevent="toggleForm" > diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue index 8f9e6761d20..0a945fc7fd5 100644 --- a/app/assets/javascripts/sidebar/components/participants/participants.vue +++ b/app/assets/javascripts/sidebar/components/participants/participants.vue @@ -84,6 +84,7 @@ v-tooltip data-container="body" data-placement="left" + data-boundary="viewport" :title="participantLabel" @click="onClickCollapsedIcon" > diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index f0df759ef7a..6745c1aafff 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -82,6 +82,7 @@ :title="notificationTooltip" data-container="body" data-placement="left" + data-boundary="viewport" > <icon :name="notificationIcon" @@ -91,12 +92,12 @@ /> </span> </div> - <span class="issuable-header-text hide-collapsed pull-left"> + <span class="issuable-header-text hide-collapsed float-left"> {{ __('Notifications') }} </span> <toggle-button ref="toggleButton" - class="pull-right hide-collapsed js-issuable-subscribe-button" + class="float-right hide-collapsed js-issuable-subscribe-button" :is-loading="showLoadingState" :value="subscribed" @change="toggleSubscription" diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue index 9d9ee9dea4d..209af1ce152 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue @@ -114,6 +114,7 @@ v-tooltip data-container="body" data-placement="left" + data-boundary="viewport" :title="tooltipText" > <icon name="timer" /> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue index 82c4562f9a9..6f79310b1cc 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue @@ -71,7 +71,7 @@ export default { </div> </div> <div class="compare-display-container"> - <div class="compare-display pull-left"> + <div class="compare-display float-left"> <span class="compare-label"> {{ s__('TimeTracking|Spent') }} </span> @@ -79,7 +79,7 @@ export default { {{ timeSpentHumanReadable }} </span> </div> - <div class="compare-display estimated pull-right"> + <div class="compare-display estimated float-right"> <span class="compare-label"> {{ s__('TimeTrackingEstimated|Est') }} </span> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 8f5d0bee107..7d56d2fa5ee 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -116,7 +116,7 @@ export default { <div class="title hide-collapsed"> {{ __('Time tracking') }} <div - class="help-button pull-right" + class="help-button float-right" v-if="!showHelpState" @click="toggleHelpState(true)" > @@ -127,7 +127,7 @@ export default { </i> </div> <div - class="close-help-button pull-right" + class="close-help-button float-right" v-if="showHelpState" @click="toggleHelpState(false)" > diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js index 8486019897d..cd954f75613 100644 --- a/app/assets/javascripts/users_select.js +++ b/app/assets/javascripts/users_select.js @@ -202,7 +202,7 @@ function UsersSelect(currentUser, els, options = {}) { tooltipTitle = __('Assignee'); } $value.html(assigneeTemplate(user)); - $collapsedSidebar.attr('title', tooltipTitle).tooltip('fixTitle'); + $collapsedSidebar.attr('title', tooltipTitle).tooltip('_fixTitle'); return $collapsedSidebar.html(collapsedAssigneeTemplate(user)); }); }; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue index 1fea231c816..1608858da22 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue @@ -127,7 +127,7 @@ export default { </span> <loading-button v-if="deployment.stop_url" - container-class="btn btn-default btn-xs prepend-left-default" + container-class="btn btn-default btn-sm prepend-left-default" label="Stop environment" :loading="isStopping" @click="stopEnvironment" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 18ee4c62bf1..51a0fda6555 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -131,7 +131,7 @@ export default { aria-hidden="true"> </i> </button> - <ul class="dropdown-menu dropdown-menu-align-right"> + <ul class="dropdown-menu dropdown-menu-right"> <li> <a class="js-download-email-patches" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue index ebaf2b972eb..b404a592234 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue @@ -42,7 +42,7 @@ @click="refreshWidget" :disabled="isRefreshing" type="button" - class="btn btn-xs btn-default" + class="btn btn-sm btn-default" > <loading-icon v-if="isRefreshing" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue index dad4b0fe49d..5c1500ab801 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue @@ -43,13 +43,13 @@ To merge this request, first rebase locally.`) }} <a v-if="mr.canMerge && mr.conflictResolutionPath" :href="mr.conflictResolutionPath" - class="js-resolve-conflicts-button btn btn-default btn-xs" + class="js-resolve-conflicts-button btn btn-default btn-sm" > {{ s__("mrWidget|Resolve conflicts") }} </a> <button v-if="mr.canMerge" - class="js-merge-locally-button btn btn-default btn-xs" + class="js-merge-locally-button btn btn-default btn-sm" data-toggle="modal" data-target="#modal_merge_info" > diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue index 7d366c495f0..05fecd4de35 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue @@ -98,7 +98,7 @@ export default { </span> <button @click="refresh" - class="btn btn-default btn-xs js-refresh-button" + class="btn btn-default btn-sm js-refresh-button" type="button" > {{ s__("mrWidget|Refresh now") }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue index 84be9327443..e8352c362d6 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue @@ -94,7 +94,7 @@ :disabled="isCancellingAutoMerge" role="button" href="#" - class="btn btn-xs btn-default js-cancel-auto-merge"> + class="btn btn-sm btn-default js-cancel-auto-merge"> <i v-if="isCancellingAutoMerge" class="fa fa-spinner fa-spin" @@ -129,7 +129,7 @@ :disabled="isRemovingSourceBranch" @click.prevent="removeSourceBranch" role="button" - class="btn btn-xs btn-default js-remove-source-branch" + class="btn btn-sm btn-default js-remove-source-branch" href="#" > <i diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue index 3e36a3a10f9..8c7e0664559 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue @@ -118,7 +118,7 @@ <a v-if="mr.canRevertInCurrentMR" v-tooltip - class="btn btn-close btn-xs" + class="btn btn-close btn-sm" href="#modal-revert-commit" data-toggle="modal" data-container="body" @@ -129,7 +129,7 @@ <a v-else-if="mr.revertInForkPath" v-tooltip - class="btn btn-close btn-xs" + class="btn btn-close btn-sm" data-method="post" :href="mr.revertInForkPath" :title="revertTitle" @@ -139,7 +139,7 @@ <a v-if="mr.canCherryPickInCurrentMR" v-tooltip - class="btn btn-default btn-xs" + class="btn btn-default btn-sm" href="#modal-cherry-pick-commit" data-toggle="modal" data-container="body" @@ -150,7 +150,7 @@ <a v-else-if="mr.cherryPickInForkPath" v-tooltip - class="btn btn-default btn-xs" + class="btn btn-default btn-sm" data-method="post" :href="mr.cherryPickInForkPath" :title="cherryPickTitle" @@ -189,7 +189,7 @@ @click="removeSourceBranch" :disabled="isMakingRequest" type="button" - class="btn btn-xs btn-default js-remove-branch-button" + class="btn btn-sm btn-default js-remove-branch-button" > {{ s__("mrWidget|Remove Source Branch") }} </button> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue index 3d9161f6926..086dbabe77e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue @@ -18,10 +18,10 @@ export default { <template> <div class="mr-widget-body mr-widget-empty-state"> <div class="row"> - <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center"> + <div class="artwork col-md-5 order-md-last col-12 text-center"> <span v-html="emptyStateSVG"></span> </div> - <div class="text col-sm-7 col-sm-pull-5 col-xs-12"> + <div class="text col-md-7 order-md-first col-12"> <span> Merge requests are a place to propose changes you have made to a project and discuss those changes with others. diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index 0264625a526..1d1c8ebc179 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -312,7 +312,7 @@ export default { v-else @click="toggleCommitMessageEditor" :disabled="isMergeButtonDisabled" - class="js-modify-commit-message-button btn btn-default btn-xs" + class="js-modify-commit-message-button btn btn-default btn-sm" type="button"> Modify commit message </button> @@ -329,7 +329,7 @@ export default { class="prepend-top-default commit-message-editor"> <div class="form-group clearfix"> <label - class="control-label" + class="col-form-label" for="commit-message"> Commit message </label> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue index a1f7e696795..8ea3f22ecc2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue @@ -28,7 +28,7 @@ export default { <a v-if="mr.createIssueToResolveDiscussionsPath" :href="mr.createIssueToResolveDiscussionsPath" - class="btn btn-default btn-xs js-create-issue" + class="btn btn-default btn-sm js-create-issue" > {{ s__("mrWidget|Create an issue to resolve them later") }} </a> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue index 395a71acccf..7b5367ac19b 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue @@ -42,7 +42,7 @@ export default { target="_blank"> <icon name="download" - css-classes="pull-left append-right-8" + css-classes="float-left append-right-8" :size="16" /> {{ __('Download') }} diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue index dcf1489b37c..424af5a0293 100644 --- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue +++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue @@ -87,7 +87,7 @@ <div :id="id" class="modal" - :class="id ? '' : 'show'" + :class="id ? '' : 'd-block'" role="dialog" tabindex="-1" > @@ -99,12 +99,12 @@ <div class="modal-content"> <div class="modal-header"> <slot name="header"> - <h4 class="modal-title pull-left"> + <h4 class="modal-title float-left"> {{ title }} </h4> <button type="button" - class="close pull-right" + class="close float-right" @click="emitCancel($event)" data-dismiss="modal" aria-label="Close" @@ -166,7 +166,7 @@ </div> <div v-if="!id" - class="modal-backdrop fade in" + class="modal-backdrop fade show" > </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue index f28e5e2715d..d5d5a7d3798 100644 --- a/app/assets/javascripts/vue_shared/components/gl_modal.vue +++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue @@ -53,6 +53,11 @@ export default { <div class="modal-content"> <div class="modal-header"> <slot name="header"> + <h4 class="modal-title"> + <slot name="title"> + {{ headerTitleText }} + </slot> + </h4> <button type="button" class="close js-modal-close-action" @@ -62,11 +67,6 @@ export default { > <span aria-hidden="true">×</span> </button> - <h4 class="modal-title"> - <slot name="title"> - {{ headerTitleText }} - </slot> - </h4> </slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index 088187ed348..ca17fa06a00 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -163,8 +163,8 @@ export default { <button v-if="hasSidebarButton" type="button" - class="btn btn-default visible-xs-block -visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" + class="btn btn-default d-block d-sm-none d-md-none +sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" aria-label="Toggle Sidebar" id="toggleSidebar" > diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue index c0ee88bbf72..d63318f3da6 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue @@ -111,7 +111,7 @@ Attach a file </button> <button - class="btn btn-default btn-xs hide button-cancel-uploading-files" + class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button" > Cancel diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue index 92d187e24bf..08d4936f480 100644 --- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue +++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue @@ -67,7 +67,7 @@ export default { <span v-if="shouldRenderBadge(tab.count)" - class="badge" + class="badge badge-pill" > {{ tab.count }} </span> diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue index 50b1508691b..eccba61a8c0 100644 --- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue @@ -54,7 +54,7 @@ <div class="note-header"> <div class="note-header-info"> <a :href="getUserData.path"> - <span class="hidden-xs">{{ getUserData.name }}</span> + <span class="d-none d-sm-block">{{ getUserData.name }}</span> <span class="note-headline-light">@{{ getUserData.username }}</span> </a> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue index 3fcacd156c5..71ec34f2c7a 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue @@ -116,7 +116,7 @@ v-if="isLoading" :inline="true" /> - <div class="pull-right"> + <div class="float-right"> <button v-if="editable && !editing" type="button" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue index 34a07f33a23..3c400afdc1d 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue @@ -77,13 +77,13 @@ export default { <div class="clearfix"> <button type="button" - class="btn btn-primary pull-left js-new-label-btn disabled" + class="btn btn-primary float-left js-new-label-btn disabled" > {{ __('Create') }} </button> <button type="button" - class="btn btn-default pull-right js-cancel-label-btn" + class="btn btn-default float-right js-cancel-label-btn" > {{ __('Cancel') }} </button> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue index 7da82e90e29..9ac32ff13c6 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue @@ -21,7 +21,7 @@ export default { </i> <button type="button" - class="edit-link btn btn-blank pull-right js-sidebar-dropdown-toggle" + class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle" > {{ __('Edit') }} </button> diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js index eb35294906b..c913bc34c68 100644 --- a/app/assets/javascripts/vue_shared/directives/popover.js +++ b/app/assets/javascripts/vue_shared/directives/popover.js @@ -17,6 +17,6 @@ export default { }, unbind(el) { - $(el).popover('destroy'); + $(el).popover('dispose'); }, }; diff --git a/app/assets/javascripts/vue_shared/directives/tooltip.js b/app/assets/javascripts/vue_shared/directives/tooltip.js index b7f7e9fec15..155e6b6698a 100644 --- a/app/assets/javascripts/vue_shared/directives/tooltip.js +++ b/app/assets/javascripts/vue_shared/directives/tooltip.js @@ -6,10 +6,10 @@ export default { }, componentUpdated(el) { - $(el).tooltip('fixTitle'); + $(el).tooltip('_fixTitle'); }, unbind(el) { - $(el).tooltip('destroy'); + $(el).tooltip('dispose'); }, }; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss new file mode 100644 index 00000000000..3b7ee5c73e6 --- /dev/null +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -0,0 +1,149 @@ +/* + * Scss to help with bootstrap 3 to 4 migration + */ + +$text-color: $gl-text-color; + +$brand-primary: $gl-primary; +$brand-success: $gl-success; +$brand-info: $gl-info; +$brand-warning: $gl-warning; +$brand-danger: $gl-danger; + +$border-radius-base: 3px !default; + +$modal-body-bg: $white-light; +$input-border: $border-color; +$input-border-focus: $focus-border-color; + +$padding-base-vertical: $gl-vert-padding; +$padding-base-horizontal: $gl-padding; + +html { + // Override default font size used in bs4 + font-size: 14px; +} + +button, +html [type="button"], +[type="reset"], +[type="submit"] { + // Override bootstrap reboot + -webkit-appearance: inherit; +} + +[role="button"] { + cursor: pointer; +} + +a { + color: $gl-link-color; +} + +.form-group.row .col-form-label { + // Bootstrap 4 aligns labels to the left + // for horizontal forms + @include media-breakpoint-up(md) { + text-align: right; + } +} + +table { + // Remove any table border lines + border-spacing: 0; +} + +.tooltip { + // Fix bootstrap4 bug whereby tooltips flicker when they are hovered over their borders + pointer-events: none; +} + +.popover { + font-size: 14px; +} + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .d#{$infix}-table-header-group { display: table-header-group !important; } + } +} + +.text-secondary { + // Override Bootstrap's light secondary color + // We have to use !important because bootstrap has that set as well + color: $gl-text-color-secondary !important; +} + +// Polyfill deprecated selectors + +.hidden { + display: none !important; + visibility: hidden !important; +} + +.hide { + display: none; +} + +.dropdown-toggle::after { + // Remove bootstrap's dropdown caret + display: none; +} + +.badge { + padding: 4px 5px; + font-size: 12px; + font-style: normal; + font-weight: $gl-font-weight-normal; + display: inline-block; + + &.badge-gray { + background-color: $label-gray-bg; + color: $gl-text-color; + text-shadow: none; + } + + &.badge-inverse { + background-color: $label-inverse-bg; + } +} + +.divider { + @extend .dropdown-divider; +} + +.info-well { + background: $theme-gray-50; + color: $gl-text-color; + border: 1px solid $border-color; + border-radius: 4px; + margin-bottom: 16px; + + .well-segment { + padding: 16px; + + &:not(:last-of-type) { + border-bottom: 1px solid $well-inner-border; + } + } +} + +.card { + &.card-without-border { + @extend .border-0; + } + + &.card-without-margin { + margin: 0; + } + + &.bg-light { + @extend .border-0; + } +} + +.nav-tabs .nav-link { + border: 0; +} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 9bd35183d8a..7c28024001f 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -1,7 +1,7 @@ @import 'framework/variables'; @import 'framework/mixins'; -@import 'framework/tw_bootstrap_variables'; -@import 'framework/tw_bootstrap'; +@import '../../../node_modules/bootstrap/scss/bootstrap'; +@import 'bootstrap_migration'; @import 'framework/layout'; @import 'framework/animations'; diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 077d0424093..c1ec11e434a 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -31,7 +31,7 @@ .avatar { @extend .avatar-circle; - @include transition-property(none); + transition-property: none; width: 40px; height: 40px; diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss index 6bbe32df772..57df9b969c3 100644 --- a/app/assets/stylesheets/framework/badges.scss +++ b/app/assets/stylesheets/framework/badges.scss @@ -1,4 +1,4 @@ -.badge { +.badge.badge-pill { font-weight: $gl-font-weight-normal; background-color: $badge-bg; color: $badge-color; diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss index 02f3896d591..71bbab2065d 100644 --- a/app/assets/stylesheets/framework/banner.scss +++ b/app/assets/stylesheets/framework/banner.scss @@ -23,7 +23,7 @@ border-bottom: 1px solid $border-color; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { justify-content: center; flex-direction: column; align-items: center; diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 9982a5779af..91dbb2a6365 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -37,7 +37,7 @@ flex: 0 0 100%; margin-bottom: 15px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { flex: 0 0 49%; &:nth-child(odd) { @@ -67,7 +67,7 @@ border: 1px solid $border-color; border-radius: $border-radius-default; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: flex; align-items: center; padding: 50px 30px; @@ -89,12 +89,12 @@ } .blank-state-body { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: center; margin-top: 20px; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 20px; } } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index c60f65e7a85..c5be27f2d29 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -151,7 +151,7 @@ display: inline-block; margin-left: 5px; font-size: 18px; - color: $gray; + color: color("gray"); } p { @@ -195,7 +195,7 @@ } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: center; .avatar { @@ -315,7 +315,7 @@ } } - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { flex-direction: column; .inner-content { @@ -342,7 +342,7 @@ .btn { margin: $btn-side-margin 5px; - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; } } diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index 9b54fb94cdc..d3e7d751e63 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -19,3 +19,9 @@ @extend .broadcast-message; margin-bottom: 20px; } + +.toggle-colors { + input { + min-height: 34px; + } +} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index cd9d60b96d3..0115f542c88 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -304,7 +304,8 @@ padding: 0 5px; } -.input-group-btn { +.input-group-prepend, +.input-group-append { .btn { @include btn-middle; @@ -393,7 +394,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .btn-wide-on-xs { width: 100%; } diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index c165ec0b94b..0b9dff64b0b 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -4,7 +4,7 @@ border-top: 0; direction: rtl; - @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { + @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { overflow-x: auto; } } diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss index 5fe835dd8f9..7207e5119ce 100644 --- a/app/assets/stylesheets/framework/ci_variable_list.scss +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -10,14 +10,14 @@ display: flex; align-items: flex-start; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { align-items: flex-end; } &:not(:last-child) { margin-bottom: $gl-btn-padding; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { margin-bottom: 3 * $gl-btn-padding; } } @@ -26,7 +26,7 @@ .ci-variable-body-item:last-child { margin-right: $ci-variable-remove-button-width; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { margin-right: 0; } } @@ -35,7 +35,7 @@ display: none; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .ci-variable-row-body { margin-right: $ci-variable-remove-button-width; } @@ -48,7 +48,7 @@ align-items: flex-start; width: 100%; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; } } @@ -59,7 +59,7 @@ &:not(:last-child) { margin-right: $gl-btn-padding; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { margin-right: 0; margin-bottom: $gl-btn-padding; } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 2faea55a5f5..1e7b9534275 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -70,7 +70,7 @@ pre { padding: 0; } - &.well-pre { + &.card.card-body-pre { border: 1px solid $well-pre-bg; background: $gray-light; border-radius: 0; @@ -218,7 +218,7 @@ li.note { } .git_error_tips { - @extend .col-md-6; + @extend .col-lg-6; text-align: left; margin-top: 40px; @@ -308,7 +308,7 @@ img.emoji { .btn-sign-in { text-shadow: none; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-top: 8px; } } @@ -327,7 +327,7 @@ img.emoji { } } -.well { +.card.card-body { margin-bottom: $gl-padding; hr { @@ -336,7 +336,7 @@ img.emoji { } .search_box { - @extend .well; + @extend .card.card-body; text-align: center; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index e2d97d0298f..1a415e1b852 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -1,11 +1,11 @@ .page-with-contextual-sidebar { transition: padding-left $sidebar-transition-duration; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { padding-left: $contextual-sidebar-collapsed-width; } - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { padding-left: $contextual-sidebar-width; } @@ -16,7 +16,7 @@ } .page-with-icon-sidebar { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: $contextual-sidebar-collapsed-width; } } @@ -75,7 +75,7 @@ transform: translate3d(0, 0, 0); &:not(.sidebar-collapsed-desktop) { - @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { + @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { box-shadow: inset -2px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color; } @@ -88,7 +88,7 @@ overflow-x: hidden; } - .badge:not(.fly-out-badge), + .badge.badge-pill:not(.fly-out-badge), .sidebar-context-title, .nav-item-name { display: none; @@ -142,7 +142,7 @@ } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { left: (-$contextual-sidebar-width); } @@ -166,7 +166,7 @@ width: 100%; overflow: auto; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { overflow: hidden; } } @@ -207,7 +207,7 @@ > li { > a { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-right: 2px; } @@ -222,7 +222,7 @@ } .sidebar-sub-level-items { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { position: fixed; top: 0; left: 0; @@ -277,7 +277,7 @@ } } - .badge { + .badge.badge-pill { background-color: $inactive-badge-background; color: $gl-text-color-secondary; } @@ -291,7 +291,7 @@ padding-left: 11px; } - .badge { + .badge.badge-pill { font-weight: $gl-font-weight-bold; } @@ -339,7 +339,7 @@ } .toggle-sidebar-button { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: none; } } @@ -420,7 +420,7 @@ color: $gl-text-color-secondary; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: flex; align-items: center; @@ -429,7 +429,7 @@ } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { + .breadcrumbs-links { padding-left: $gl-padding; border-left: 1px solid $gl-text-color-quaternary; @@ -437,7 +437,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .close-nav-button { display: flex; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 664aade7375..1570b1f2eaa 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -24,7 +24,7 @@ display: none; } -.open { +.show.dropdown { .dropdown-menu, .dropdown-menu-nav { @include set-visible; @@ -32,7 +32,7 @@ max-height: $dropdown-max-height; overflow-y: auto; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; } } @@ -184,7 +184,7 @@ text-decoration: none; - .badge { + .badge.badge-pill { background-color: darken($dropdown-link-hover-bg, 5%); } } @@ -210,11 +210,10 @@ .dropdown-menu, .dropdown-menu-nav { - @include set-invisible; + display: none; position: absolute; width: auto; top: 100%; - left: 0; z-index: 300; min-width: 240px; max-width: 500px; @@ -328,7 +327,7 @@ color: $gl-text-color-secondary; } - .badge + span:not(.badge) { + .badge.badge-pill + span:not(.badge.badge-pill) { // Expects up to 3 digits on the badge margin-right: 40px; } @@ -392,7 +391,7 @@ transform: translateY(0); } -.comment-type-dropdown.open .dropdown-menu { +.comment-type-dropdown.show .dropdown-menu { display: block; } @@ -473,16 +472,11 @@ .dropdown-select { width: $dropdown-width; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { width: 100%; } } -.dropdown-menu-align-right { - left: auto; - right: 0; -} - .dropdown-menu-selectable { li { a, @@ -783,7 +777,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .navbar-gitlab { li.header-projects, li.header-more, @@ -838,7 +832,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu { width: 70%; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-direction: column; width: 100%; height: auto; @@ -894,7 +888,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu { height: 284px; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .projects-list-frequent-container { width: auto; height: auto; @@ -935,7 +929,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu { color: $gl-text-color-secondary; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .project-item-metadata-container { float: none; } diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss index 4f26cd015e4..cad915bc86f 100644 --- a/app/assets/stylesheets/framework/feature_highlight.scss +++ b/app/assets/stylesheets/framework/feature_highlight.scss @@ -79,7 +79,7 @@ border-right-color: $dropdown-border-color; } - .popover-content { + .popover-body { padding: 0; } } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index d835d49d8b2..f77ec4b6a2c 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -75,7 +75,7 @@ padding: 8px $gl-padding; border-bottom: 1px solid $border-color; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: left; } @@ -125,7 +125,7 @@ &.wiki { padding: $gl-padding; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { padding: $gl-padding * 2; } } @@ -364,7 +364,7 @@ span.idiff { } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; .file-actions { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 621a4adc0cb..0ee5748952a 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -9,19 +9,19 @@ float: right; margin-right: 0; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { float: none; } } } .filters-section { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: inline-block; } } -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { .filter-item:not(:last-child) { margin-right: 6px; } @@ -37,7 +37,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .filter-item { display: block; margin: 0 0 10px; @@ -53,7 +53,7 @@ display: -webkit-flex; display: flex; - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { -webkit-flex-direction: column; flex-direction: column; } @@ -193,7 +193,7 @@ border: 1px solid $border-color; background-color: $white-light; - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-bottom: 10px; @@ -264,7 +264,7 @@ max-width: 280px; overflow: auto; - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { width: auto; left: 0; right: 0; @@ -315,7 +315,7 @@ .filtered-search-history-dropdown { width: 40%; - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { left: 0; right: 0; max-width: none; @@ -353,7 +353,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .issues-details-filters { padding: 0 0 10px; background-color: $white-light; @@ -361,7 +361,7 @@ } } -@media (max-width: $screen-xs) { +@include media-breakpoint-down(sm) { .filter-dropdown-container { .dropdown-toggle, .dropdown, diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index cb2f71b0033..52c3f18a682 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -8,19 +8,19 @@ .flash-notice { @extend .alert; - @extend .alert-info; + background-color: $blue-500; margin: 0; } .flash-warning { @extend .alert; - @extend .alert-warning; + background-color: $orange-500; margin: 0; } .flash-alert { @extend .alert; - @extend .alert-danger; + background-color: $red-500; margin: 0; .flash-text, @@ -42,14 +42,16 @@ .flash-success { @extend .alert; - @extend .alert-success; + background-color: $green-500; margin: 0; } .flash-notice, .flash-alert, - .flash-success { + .flash-success, + .flash-warning { border-radius: $border-radius-default; + color: $white-light; .container-fluid, .container-fluid.container-limited { @@ -72,7 +74,7 @@ } } -@media (max-width: $screen-sm-max) { +@include media-breakpoint-down(sm) { ul.notes { .flash-container.timeline-content { margin-left: 0; diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 1fb4e3ec761..c76ea532912 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -36,8 +36,8 @@ label { } } -.control-label { - @extend .col-sm-2; +.form-control-label { + @extend .col-md-2; } .inline-input-group { @@ -48,21 +48,21 @@ label { width: 150px; } -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { .custom-form-control { width: 150px; } } /* Medium devices (desktops, 992px and up) */ -@media (min-width: $screen-md-min) { +@include media-breakpoint-up(md) { .custom-form-control { width: 170px; } } /* Large devices (large desktops, 1200px and up) */ -@media (min-width: $screen-lg-min) { +@include media-breakpoint-up(lg) { .custom-form-control { width: 200px; } @@ -72,7 +72,7 @@ label { margin-left: 0; margin-right: 0; - .control-label { + .form-control-label { font-weight: $gl-font-weight-bold; padding-top: 4px; } @@ -83,7 +83,8 @@ label { font-family: $monospace_font; } - .input-group-btn .btn { + .input-group-prepend .btn, + .input-group-append .btn { padding: 3px $gl-btn-padding; background-color: $gray-light; border: 1px solid $border-color; @@ -102,10 +103,10 @@ label { } } - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 0 $gl-padding; - .control-label, + .form-control-label, .text-block { padding-left: 0; } @@ -124,7 +125,7 @@ label { &.input-short { width: $input-short-width; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: $input-short-md-width; } } @@ -163,8 +164,8 @@ label { margin-top: 35px; } -.form-group .control-label, -.form-group .control-label-full-width { +.form-group .form-control-label, +.form-group .form-control-label-full-width { font-weight: $gl-font-weight-normal; } @@ -178,17 +179,19 @@ label { max-width: 180px; } - .input-group-addon { + .input-group-prepend, + .input-group-append { background-color: $input-group-addon-bg; } - .input-group-addon:not(:first-child):not(:last-child) { + .input-group-prepend:not(:first-child):not(:last-child), + .input-group-append:not(:first-child):not(:last-child) { border-left: 0; border-right: 0; } } -.help-block { +.form-text.text-muted { margin-bottom: 0; margin-top: #{$grid-size / 2}; } @@ -229,7 +232,7 @@ label { } } -@media(max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .remember-me { .remember-me-checkbox { margin-top: 0; diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss index 0bbd6eb27c1..d6ae8cbb416 100644 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ b/app/assets/stylesheets/framework/gitlab_theme.scss @@ -21,7 +21,7 @@ } .container-fluid { - .navbar-toggle { + .navbar-toggler { border-left: 1px solid lighten($color-700, 10%); } } @@ -63,7 +63,7 @@ &:hover, &:focus { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { background-color: rgba($color-200, 0.2); } @@ -165,14 +165,14 @@ } } - .sidebar-top-level-items > li.active .badge { + .sidebar-top-level-items > li.active .badge.badge-pill { color: $color-800; } - .nav-links li.active a { - border-bottom-color: $color-500; + .nav-links li a.active { + border-bottom: 2px solid $color-500; - .badge { + .badge.badge-pill { font-weight: $gl-font-weight-bold; } } @@ -277,8 +277,8 @@ body { } .container-fluid { - .navbar-toggle, - .navbar-toggle:hover { + .navbar-toggler, + .navbar-toggler:hover { color: $theme-gray-700; border-left: 1px solid $theme-gray-200; } @@ -328,7 +328,7 @@ body { } } - .sidebar-top-level-items > li.active .badge { + .sidebar-top-level-items > li.active .badge.badge-pill { color: $theme-gray-900; } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 0136af76a13..2085e5646ef 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -37,6 +37,7 @@ } .header-content { + width: 100%; display: -webkit-flex; display: flex; justify-content: space-between; @@ -91,7 +92,7 @@ border-radius: $border-radius-default; .tanuki-logo { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-right: 8px; } } @@ -110,7 +111,7 @@ } &.menu-expanded { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .title-container { display: none; } @@ -133,13 +134,13 @@ border-top: 0; padding: 0; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex: 1 1 auto; } .nav { - > li:not(.hidden-xs) a { - @media (max-width: $screen-xs-max) { + > li:not(.d-none) a { + @include media-breakpoint-down(xs) { margin-left: 0; min-width: 100%; } @@ -156,7 +157,7 @@ } } - .navbar-toggle { + .navbar-toggler { right: -10px; border-radius: 0; min-width: 45px; @@ -181,14 +182,14 @@ } .navbar-nav { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: -webkit-flex; display: flex; padding-right: 10px; } li { - .badge { + .badge.badge-pill { box-shadow: none; font-weight: $gl-font-weight-bold; } @@ -197,7 +198,7 @@ .nav > li { &.header-user { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-left: 10px; } } @@ -208,7 +209,7 @@ padding: 6px 8px; height: 32px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 0; } @@ -324,8 +325,8 @@ fill: currentColor; } -.header-user .dropdown-menu-nav, -.header-new .dropdown-menu-nav { +.header-user .dropdown-menu, +.header-new .dropdown-menu { margin-top: $dropdown-vertical-offset; } @@ -378,7 +379,7 @@ margin-bottom: 0; line-height: 16px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-wrap: wrap; } @@ -410,7 +411,7 @@ .breadcrumb-item-text { text-decoration: inherit; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { @include str-truncated(128px); } } @@ -452,7 +453,7 @@ .navbar-nav { li { - .badge { + .badge.badge-pill { position: inherit; font-weight: $gl-font-weight-normal; margin-left: -6px; @@ -478,7 +479,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -493,7 +494,7 @@ margin-left: -8px; margin-right: -10px; - .nav > li:not(.hidden-xs) { + .nav > li:not(.d-none) { display: table-cell !important; width: 25%; @@ -514,7 +515,7 @@ } .header-user { - .dropdown-menu-nav { + .dropdown-menu { width: auto; min-width: 160px; margin-top: 4px; diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index d8c57a0e2d9..1d247671761 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -11,7 +11,7 @@ padding: 5px 11px; margin-top: 4px; /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding: 0 $gl-btn-padding; margin-top: 5px; } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index d107422e517..0536c39cee7 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -15,7 +15,7 @@ body { background-color: $white-light !important; } - &.card-content { + &.board-card-content { background-color: $gray-darker; .content-wrapper { @@ -74,7 +74,7 @@ body { } /* Center alert text and alert action links on smaller screens */ - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { .alert { text-align: center; } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 45517416e93..17f4958d535 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -2,7 +2,7 @@ * Well styled list * */ -.well-list { +.card-body-list { position: relative; margin: 0; padding: 0; @@ -72,7 +72,7 @@ } } - .well-title { + .card.card-body-title { font-size: $list-font-size; line-height: 18px; } @@ -159,7 +159,7 @@ ul.content-list { &:last-child { margin-right: 0; - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { margin: 0 auto; } } @@ -173,7 +173,7 @@ ul.content-list { .member-controls { float: none; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: right; } } @@ -228,7 +228,7 @@ ul.content-list { } } - .label-default { + .badge-secondary { color: $gl-text-color-secondary; } @@ -237,7 +237,7 @@ ul.content-list { } } -.panel > .content-list > li { +.card > .content-list > li { padding: $gl-padding-top $gl-padding; } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 7b5d1c2cf8b..b893151e4fe 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -74,7 +74,7 @@ } .md-header-tab { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex: 1; width: 100%; border-bottom: 1px solid $border-color; @@ -90,7 +90,7 @@ &.active { display: block; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex: none; display: flex; justify-content: center; @@ -192,7 +192,7 @@ margin-left: $gl-padding; margin-right: -5px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { margin-left: 0; margin-right: 0; } @@ -268,7 +268,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .atwho-view-ul { width: 350px; } diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 9e03bb98b8e..6244fb86fea 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -1,5 +1,5 @@ /** Common mobile (screen XS, SM) styles **/ -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .container .content { margin-top: 20px; } @@ -14,7 +14,7 @@ font-size: 12px; margin-right: 3px; - .badge { + .badge.badge-pill { display: none; } } @@ -86,7 +86,7 @@ } } -@media (max-width: $screen-sm-max) { +@include media-breakpoint-down(sm) { .issues-filters { .milestone-filter { display: none; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index eb789cc64b0..667661d8b5c 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -46,7 +46,7 @@ margin-left: $grid-size; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-direction: column; .btn + .btn { @@ -55,7 +55,7 @@ } } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { .btn:first-of-type { margin-left: auto; } @@ -74,7 +74,7 @@ body.modal-open { } } -@media (min-width: $screen-lg-min) { +@include media-breakpoint-up(lg) { .modal-full { width: 98%; } @@ -84,7 +84,7 @@ body.modal-open { background-color: $black-transparent; z-index: 2100; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { .modal-dialog { margin: 30px auto; } diff --git a/app/assets/stylesheets/framework/page_header.scss b/app/assets/stylesheets/framework/page_header.scss index 0c879f40930..660e3dcac8d 100644 --- a/app/assets/stylesheets/framework/page_header.scss +++ b/app/assets/stylesheets/framework/page_header.scss @@ -3,7 +3,7 @@ padding: 10px 0; margin-bottom: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: flex; align-items: center; @@ -19,7 +19,7 @@ margin-right: 3px; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .btn { width: 100%; margin-top: 10px; @@ -35,7 +35,7 @@ @extend .avatar-inline; margin-left: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-left: 4px; } } diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss index c3ec9db0f07..d3e013590b6 100644 --- a/app/assets/stylesheets/framework/pagination.scss +++ b/app/assets/stylesheets/framework/pagination.scss @@ -6,6 +6,7 @@ .pagination { padding: 0; + margin: 20px 0; a { cursor: pointer; @@ -30,7 +31,7 @@ } } -.panel > .gl-pagination { +.card > .gl-pagination { margin: 0; } @@ -44,7 +45,7 @@ display: none; } - .page { + .page-item { display: none; &.active { @@ -57,13 +58,13 @@ /** * Small screen pagination */ -@media (max-width: $screen-xs-min) { +@include media-breakpoint-down(xs) { .gl-pagination { .pagination li a { padding: 6px 10px; } - .page { + .page-item { display: none; &.active { @@ -76,9 +77,9 @@ /** * Medium screen pagination */ -@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) { +@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)) { .gl-pagination { - .page { + .page-item { display: none; &.active, diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss index e8d69e62194..a8e28104a94 100644 --- a/app/assets/stylesheets/framework/panels.scss +++ b/app/assets/stylesheets/framework/panels.scss @@ -1,14 +1,14 @@ -.panel { +.card { margin-bottom: $gl-padding; } -.panel-slim { - @extend .panel; +.card-slim { + @extend .card; margin-bottom: $gl-vert-padding; } -.panel-heading { +.card-header { padding: $gl-vert-padding $gl-padding; line-height: 36px; @@ -21,7 +21,7 @@ line-height: 20px; } - .badge { + .badge.badge-pill { margin-top: -2px; margin-left: 5px; } @@ -41,12 +41,13 @@ } } -.panel-empty-heading { +.card-empty-heading { border-bottom: 0; } -.panel-body { +.card-body { padding: $gl-padding; + background-color: $white-light; .form-actions { margin: -$gl-padding; @@ -54,7 +55,7 @@ } } -.panel-title { +.card-title { font-size: inherit; line-height: inherit; } diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss index 34fccf6f0a4..764bebd82c6 100644 --- a/app/assets/stylesheets/framework/responsive_tables.scss +++ b/app/assets/stylesheets/framework/responsive_tables.scss @@ -6,7 +6,7 @@ .gl-responsive-table-row-layout { width: 100%; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { display: flex; align-items: center; @@ -21,7 +21,7 @@ margin-top: 10px; border: 1px solid $border-color; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { margin: 0; padding: $gl-padding 0; border: 0; @@ -44,13 +44,13 @@ &.section-#{$width} { flex: 0 0 #{$width + '%'}; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { max-width: #{$width + '%'}; } } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { display: flex; align-self: stretch; padding: 10px; @@ -65,7 +65,7 @@ &.section-wrap { white-space: normal; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { flex-wrap: wrap; } } @@ -76,11 +76,11 @@ } .table-button-footer { - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { text-align: right; } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { display: block; align-self: stretch; min-height: 0; @@ -122,7 +122,7 @@ .table-row-header { font-size: 13px; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { display: none; } } @@ -132,13 +132,13 @@ color: $gl-text-color-secondary; text-align: left; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { display: none; } } .table-mobile-content { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { @include flex-max-width(60); text-align: right; } @@ -154,7 +154,7 @@ overflow: hidden; text-overflow: ellipsis; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { flex: 0 0 90%; } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 937638d50e8..c3c64adf3da 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -27,18 +27,18 @@ color: $black; border-bottom: 2px solid $gray-darkest; - .badge { + .badge.badge-pill { color: $black; } } - } - - &.active a { - color: $black; - font-weight: $gl-font-weight-bold; - .badge { + &.active { color: $black; + font-weight: $gl-font-weight-bold; + + .badge.badge-pill { + color: $black; + } } } } @@ -56,7 +56,7 @@ white-space: normal; /* Small devices (phones, tablets, 768px and lower) */ - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; } } @@ -80,7 +80,7 @@ } /* Small devices (phones, tablets, 768px and lower) */ - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; &.mobile-separator { @@ -124,13 +124,13 @@ position: relative; /* Medium devices (desktops, 992px and up) */ - @media (min-width: $screen-md-min) { width: 200px; } + @include media-breakpoint-up(md) { width: 200px; } /* Large devices (large desktops, 1200px and up) */ - @media (min-width: $screen-lg-min) { width: 250px; } + @include media-breakpoint-up(lg) { width: 250px; } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-bottom: 0; width: 100%; @@ -172,7 +172,7 @@ .nav-controls { width: auto; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; } } @@ -192,7 +192,7 @@ width: 100%; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-flow: row wrap; .nav-controls { @@ -352,7 +352,7 @@ max-width: 300px; width: auto; - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 250px; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 64fff7463d2..8c716400913 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -31,7 +31,7 @@ .right-sidebar-collapsed { padding-right: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { padding-right: $gutter_collapsed_width; } @@ -65,13 +65,13 @@ display: inline-flex; } - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include media-breakpoint-only(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { padding-right: $gutter_collapsed_width; } } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { .content-wrapper { padding-right: $gutter_width; } diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 430633bb01b..f80e9b1014b 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -40,7 +40,7 @@ } .snippet-actions { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: right; } } diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 5bde96caf42..a10bd1544c5 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -48,7 +48,7 @@ table { } .responsive-table { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { th { width: 100%; } diff --git a/app/assets/stylesheets/framework/tabs.scss b/app/assets/stylesheets/framework/tabs.scss index c8ba14b7066..6b60149fbbb 100644 --- a/app/assets/stylesheets/framework/tabs.scss +++ b/app/assets/stylesheets/framework/tabs.scss @@ -1,6 +1,7 @@ .gitlab-tabs { background: $gray-light; border: 1px solid $border-color; + flex-wrap: nowrap; li { width: 50%; diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 373f35e71d8..75c11590547 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -4,7 +4,7 @@ padding: 0; &::before { - @include notes-media('max', $screen-xs-min) { + @include notes-media('max', map-get($grid-breakpoints, xs)) { background: none; } } @@ -34,7 +34,7 @@ .timeline-entry-inner { position: relative; - @include notes-media('max', $screen-xs-min) { + @include notes-media('max', map-get($grid-breakpoints, xs)) { .timeline-icon { display: none; } diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss index 0cd83df218f..d5cc78a6680 100644 --- a/app/assets/stylesheets/framework/toggle.scss +++ b/app/assets/stylesheets/framework/toggle.scss @@ -121,7 +121,7 @@ cursor: not-allowed; } - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { width: 50px; &::before, diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss deleted file mode 100644 index 1c6e2bf3074..00000000000 --- a/app/assets/stylesheets/framework/tw_bootstrap.scss +++ /dev/null @@ -1,201 +0,0 @@ -/* - * Twitter bootstrap with GitLab customizations/additions - * - */ - -// Core variables and mixins -@import "bootstrap/variables"; -@import "bootstrap/mixins"; - -// Reset -@import "bootstrap/normalize"; -@import "bootstrap/print"; - -// Core CSS -@import "bootstrap/scaffolding"; -@import "bootstrap/type"; -@import "bootstrap/code"; -@import "bootstrap/grid"; -@import "bootstrap/tables"; -@import "bootstrap/forms"; -@import "bootstrap/buttons"; - -// Components -@import "bootstrap/component-animations"; -// @import "bootstrap/dropdowns"; -@import "bootstrap/button-groups"; -@import "bootstrap/input-groups"; -@import "bootstrap/navs"; -@import "bootstrap/navbar"; -@import "bootstrap/breadcrumbs"; -@import "bootstrap/pagination"; -@import "bootstrap/pager"; -@import "bootstrap/labels"; -@import "bootstrap/badges"; -@import "bootstrap/alerts"; -@import "bootstrap/progress-bars"; -@import "bootstrap/list-group"; -@import "bootstrap/wells"; -@import "bootstrap/close"; -@import "bootstrap/panels"; - -// Components w/ JavaScript -@import "bootstrap/modals"; -@import "bootstrap/tooltip"; -@import "bootstrap/popovers"; - -// Utility classes -.clearfix { - @include clearfix(); -} - -.center-block { - @include center-block(); -} - -.pull-right { - float: right !important; -} - -.pull-left { - float: left !important; -} - -.hide { - display: none; -} - -.show { - display: block !important; -} - -.invisible { - visibility: hidden; -} - -.text-hide { - @include text-hide(); -} - -.hidden { - display: none !important; - visibility: hidden !important; -} - -.affix { - position: fixed; -} - -/* - * Fix <summary> elements on firefox - * See https://github.com/necolas/normalize.css/issues/640 - * and https://github.com/twbs/bootstrap/issues/21060 - * - */ -summary { - display: list-item; -} - -@import "bootstrap/responsive-utilities"; - -// Labels -.label { - padding: 4px 5px; - font-size: 12px; - font-style: normal; - font-weight: $gl-font-weight-normal; - display: inline-block; - - &.label-gray { - background-color: $label-gray-bg; - color: $gl-text-color; - text-shadow: none; - } - - &.label-inverse { - background-color: $label-inverse-bg; - } -} - - -/** - * fix to keep tooltips position in top navigation bar - * - */ -.navbar .nav > li { - position: relative; - white-space: nowrap; -} - -/** - * Add some extra stuff to panels - * - */ - -.panel { - box-shadow: none; - - .panel-body { - form, - pre { - margin: 0; - } - - .form-actions { - margin: -15px; - margin-top: 18px; - } - } - - .panel-footer { - .pagination { - margin: 0; - } - - .btn { - min-width: 124px; - } - - .btn-clipboard { - min-width: 0; - } - } - - &.panel-small { - .panel-heading { - padding: 6px 15px; - font-size: 13px; - font-weight: $gl-font-weight-normal; - - a { - color: $panel-heading-link-color; - } - } - } - - &.panel-without-border { - border: 0; - } - - &.panel-without-margin { - margin: 0; - } -} - -.panel-succes .panel-heading, -.panel-info .panel-heading, -.panel-danger .panel-heading, -.panel-warning .panel-heading, -.panel-primary .panel-heading, -.alert { - a:not(.btn) { - @extend .alert-link; - color: $white-light; - text-decoration: underline; - } -} - -// Prevent datetimes on tooltips to break into two lines -.local-timeago { - white-space: nowrap; -} diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss deleted file mode 100644 index d04e555769b..00000000000 --- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss +++ /dev/null @@ -1,199 +0,0 @@ -// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3): -// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass -// -// Variables -// -------------------------------------------------- - - -//== Colors -// -//## Gray and brand colors for use across Bootstrap. - -// $gray-base: #000 -// $gray-darker: lighten($gray-base, 13.5%) // #222 -// $gray-dark: lighten($gray-base, 20%) // #333 -// $gray: lighten($gray-base, 33.5%) // #555 -// $gray-light: lighten($gray-base, 46.7%) // #777 -// $gray-lighter: lighten($gray-base, 93.5%) // #eee - -$brand-primary: $gl-primary; -$brand-success: $gl-success; -$brand-info: $gl-info; -$brand-warning: $gl-warning; -$brand-danger: $gl-danger; - -$border-radius-base: 3px !default; -$border-radius-large: 3px !default; -$border-radius-small: 3px !default; - - -//== Scaffolding -// -$text-color: $gl-text-color; -$link-color: $gl-link-color; -$link-hover-color: $gl-link-hover-color; - - -//== Typography -// -//## Font, line-height, and color for body text, headings, and more. - -$font-family-sans-serif: $regular_font; -$font-family-monospace: $monospace_font; -$font-size-base: $gl-font-size; - - -//== Components -// -//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). - -$padding-base-vertical: $gl-vert-padding; -$padding-base-horizontal: $gl-padding; -$component-active-color: $white-light; -$component-active-bg: $brand-info; - -//== Forms -// -//## - -$input-color: $text-color; -$input-border: $border-color; -$input-border-focus: $focus-border-color; -$legend-color: $text-color; - - -//== Pagination -// -//## - -$pagination-color: $gl-text-color; -$pagination-bg: $white-light; -$pagination-border: $border-color; - -$pagination-hover-color: $gl-text-color; -$pagination-hover-bg: $row-hover; -$pagination-hover-border: $border-color; - -$pagination-active-color: $white-light; -$pagination-active-bg: $gl-link-color; -$pagination-active-border: $gl-link-color; - -$pagination-disabled-color: #cdcdcd; -$pagination-disabled-bg: $gray-light; -$pagination-disabled-border: $border-color; - - -//== Form states and alerts -// -//## Define colors for form feedback states and, by default, alerts. - -$state-success-text: $white-light; -$state-success-bg: $brand-success; -$state-success-border: $brand-success; - -$state-info-text: $white-light; -$state-info-bg: $brand-info; -$state-info-border: $brand-info; - -$state-warning-text: $white-light; -$state-warning-bg: $brand-warning; -$state-warning-border: $brand-warning; - -$state-danger-text: $white-light; -$state-danger-bg: $brand-danger; -$state-danger-border: $brand-danger; - - -//== Alerts -// -//## Define alert colors, border radius, and padding. - -$alert-border-radius: 0; - - -//== Panels -// -//## - -$panel-border-radius: 2px; -$panel-default-text: $text-color; -$panel-default-border: $border-color; -$panel-default-heading-bg: $gray-light; -$panel-footer-bg: $gray-light; -$panel-inner-border: $border-color; - -$badge-bg: $badge-bg; -$badge-color: $badge-color; - -//== Wells -// -//## - -$well-bg: $gray-light; -$well-border: #eee; - -//== Code -// -//## - -$code-color: $red-600; -$code-bg: lighten($red-100, 2%); - -$kbd-color: $white-light; -$kbd-bg: #333; - -//== Buttons -// -//## -$btn-default-color: $gl-text-color; -$btn-default-bg: $white-light; -$btn-default-border: #e7e9ed; - -//== Nav -// -//## -$nav-link-padding: 13px $gl-padding; - -//== Code -// -//## -$pre-bg: $gray-light !default; -$pre-color: $gl-text-color !default; -$pre-border-color: $border-color; - -$table-bg-accent: $gray-light; - -$zindex-popover: 900; - -//== Modals -// -//## - -//** Padding applied to the modal body -$modal-inner-padding: $gl-padding; - -//** Padding applied to the modal title -$modal-title-padding: $gl-padding; -//** Modal title line-height -// $modal-title-line-height: $line-height-base - -//** Background color of modal content area -$modal-content-bg: $gray-light; -$modal-body-bg: $white-light; -//** Modal content border color -// $modal-content-border-color: rgba(0,0,0,.2) -//** Modal content border color **for IE8** -// $modal-content-fallback-border-color: #999 - -//** Modal backdrop background color -// $modal-backdrop-bg: #000 -//** Modal backdrop opacity -// $modal-backdrop-opacity: .5 -//** Modal header border color -// $modal-header-border-color: #e5e5e5 -//** Modal footer border color -// $modal-footer-border-color: $modal-header-border-color - -$modal-lg: 860px; -$modal-md: 540px; -// $modal-sm: 300px diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 9e1371648ed..ed0bfbbe08b 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -114,7 +114,7 @@ font-size: 0.95em; } - blockquote { + .blockquote { color: $gl-grayish-blue; font-size: inherit; padding: 8px 24px; @@ -122,12 +122,12 @@ border-left: 3px solid $white-dark; } - blockquote:dir(rtl) { + .blockquote:dir(rtl) { border-left: 0; border-right: 3px solid $white-dark; } - blockquote p { + .blockquote p { color: $gl-grayish-blue !important; font-size: inherit; line-height: 1.5; @@ -321,6 +321,16 @@ h6 { /** CODE **/ pre { font-family: $monospace_font; + display: block; + padding: $gl-padding-8; + margin: 0 0 $gl-padding-8; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: $gl-text-color; + background-color: $gray-light; + border: 1px solid $border-color; + border-radius: $border-radius-small; } code { @@ -391,7 +401,7 @@ h4 { } .text-right-lg { - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { text-align: right; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 86f82ec14ce..89b61530ddb 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -142,6 +142,11 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); $border-gray-dark: darken($white-normal, $darken-border-factor); /* + * Override Bootstrap 4 variables + */ +$secondary: $gray-light; + +/* * UI elements */ $border-color: #e5e5e5; @@ -306,6 +311,11 @@ $gl-warning: $orange-500; $gl-danger: $red-500; $gl-btn-active-background: rgba(0, 0, 0, 0.16); $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background; +// Bootstrap override states +$success: $gl-success; +$info: $gl-info; +$warning: $gl-warning; +$danger: $gl-danger; /* * Commit Diff Colors diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 3fa7a260017..514fac82b1e 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -5,7 +5,7 @@ border-radius: $border-radius-default; margin-bottom: $gl-padding; - .well-segment { + .card.card-body-segment { padding: $gl-padding; &:not(:last-of-type) { @@ -59,7 +59,7 @@ } } - .label.label-gray { + .label-gray { background-color: $well-expand-item; } @@ -108,7 +108,7 @@ } } -.well-centered { +.card.card-body-centered { h1 { font-weight: $gl-font-weight-normal; text-align: center; diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss index 658ac26fca9..b5eda79e5ed 100644 --- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss +++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss @@ -138,7 +138,7 @@ pre { margin: 0; } -blockquote { +.blockquote { color: $gl-grayish-blue; padding: 0 0 0 15px; margin: 0; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 6bb40bae9ed..1c3d312f7ac 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -58,7 +58,7 @@ .boards-app { position: relative; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { transition: width $sidebar-transition-duration; width: 100%; @@ -81,11 +81,11 @@ white-space: nowrap; min-height: 200px; - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include media-breakpoint-only(sm) { height: calc(100vh - #{$issue-board-list-difference-sm}); } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { height: calc(100vh - #{$issue-board-list-difference-md}); } @@ -94,13 +94,13 @@ 100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height} ); - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include media-breakpoint-only(sm) { height: calc( 100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height} ); } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { height: calc( 100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height} ); @@ -117,7 +117,7 @@ white-space: normal; vertical-align: top; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 400px; } @@ -274,7 +274,7 @@ font-size: (26px / $issue-boards-font-size) * 1em; } -.card { +.board-card { position: relative; padding: 11px 10px 11px $gl-padding; background: $white-light; @@ -290,7 +290,7 @@ } &.is-active, - &.is-active .card-assignee:hover a { + &.is-active .board-card-assignee:hover a { background-color: $row-hover; &:first-child:not(:only-child) { @@ -298,7 +298,7 @@ } } - .label { + .badge { border: 0; outline: 0; } @@ -310,7 +310,7 @@ } } -.card-title { +.board-card-title { @include overflow-break-word(); margin: 0 30px 0 0; font-size: 1em; @@ -322,11 +322,11 @@ } } -.card-header { +.board-card-header { display: flex; min-height: 20px; - .card-assignee { + .board-card-assignee { display: flex; justify-content: flex-end; position: absolute; @@ -397,16 +397,16 @@ } } -.card-footer { +.board-card-footer { margin: 0 0 5px; - .label { + .badge { margin-top: 5px; margin-right: 6px; } } -.card-number { +.board-card-number { font-size: 12px; color: $gl-text-color-secondary; } @@ -564,11 +564,11 @@ .add-issues-list-column { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 50%; } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: (100% / 3); } } @@ -583,11 +583,11 @@ margin-right: -$gl-vert-padding; overflow-y: scroll; - .card-parent { + .board-card-parent { padding: 0 5px 5px; } - .card { + .board-card { border: 1px solid $border-gray-dark; box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3); cursor: pointer; @@ -637,7 +637,7 @@ display: none; margin-right: 10px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: block; } } @@ -645,7 +645,7 @@ .dropdown-menu-toggle { width: 100px; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: 140px; } } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 50f32660445..9ee02ca1d83 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -215,7 +215,7 @@ } .header-action-buttons { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .sidebar-toggle-btn { margin-top: 0; margin-left: 10px; @@ -277,10 +277,6 @@ &.coverage { padding: 0 16px 11px; } - - .btn-group-justified { - margin-top: 5px; - } } .block-last { @@ -305,7 +301,7 @@ background-color: $white-light; } - .label { + .badge.badge-pill { margin-left: 2px; } @@ -320,7 +316,7 @@ } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { display: block; .btn { diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 3fd13078131..2b6d92016d5 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -63,7 +63,7 @@ text-decoration: none; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { > div { display: flex; align-items: center; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 0a27c6e0a25..a4ca82de90e 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -23,7 +23,7 @@ } .commit-hash-full { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { width: 80px; white-space: nowrap; overflow: hidden; @@ -183,7 +183,7 @@ } .commit-actions { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { .fa-spinner { font-size: 12px; } @@ -327,11 +327,11 @@ } &.invalid { - @include status-color($gray-dark, $gray, $gray-darkest); + @include status-color($gray-dark, color("gray"), $gray-darkest); border-color: $gray-darkest; &:not(span):hover { - color: $gray; + color: color("gray"); } } } diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss index fb1899284fd..bd338326154 100644 --- a/app/assets/stylesheets/pages/convdev_index.scss +++ b/app/assets/stylesheets/pages/convdev_index.scss @@ -53,19 +53,19 @@ $space-between-cards: 8px; padding: $space-between-cards / 2; position: relative; - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { width: percentage(1 / 4); } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: percentage(1 / 5); } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: percentage(1 / 6); } - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { width: percentage(1 / 10); } } @@ -82,7 +82,7 @@ $space-between-cards: 8px; .convdev-card-low { border-top-color: $color-low-score; - .card-score-big { + .board-card-score-big { background-color: $red-50; } } @@ -90,7 +90,7 @@ $space-between-cards: 8px; .convdev-card-average { border-top-color: $color-average-score; - .card-score-big { + .board-card-score-big { background-color: $orange-50; } } @@ -98,7 +98,7 @@ $space-between-cards: 8px; .convdev-card-high { border-top-color: $color-high-score; - .card-score-big { + .board-card-score-big { background-color: $green-50; } } @@ -112,14 +112,14 @@ $space-between-cards: 8px; margin: 0 0 2px; } - .text-light { + .light-text { font-size: 13px; line-height: 1.25; color: $gl-text-color-secondary; } } -.card-scores { +.board-card-scores { display: flex; justify-content: space-around; align-items: center; @@ -127,22 +127,22 @@ $space-between-cards: 8px; line-height: 1; } -.card-score { +.board-card-score { color: $gl-text-color-secondary; - .card-score-name { + .board-card-score-name { font-size: 13px; margin-top: 4px; } } -.card-score-value { +.board-card-score-value { font-size: 16px; color: $gl-text-color; font-weight: $gl-font-weight-normal; } -.card-score-big { +.board-card-score-big { border-top: 2px solid $border-color; border-bottom: 1px solid $border-color; font-size: 22px; @@ -150,7 +150,7 @@ $space-between-cards: 8px; font-weight: $gl-font-weight-normal; } -.card-buttons { +.board-card-buttons { display: flex; > * { diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index cfef6476d4d..a22c666a525 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -15,7 +15,7 @@ max-width: 480px; padding: 0 $gl-padding; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { margin: 0 auto; } } @@ -75,13 +75,13 @@ } } - .panel { + .card { .content-block { padding: 24px 0; border-bottom: 0; position: relative; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 6px 0 24px; } } @@ -89,7 +89,7 @@ .column { text-align: center; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 15px 0; } @@ -106,7 +106,7 @@ } &:last-child { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: center; } } @@ -213,7 +213,7 @@ .stage-panel { min-width: 968px; - .panel-heading { + .card-header { padding: 0; background-color: transparent; } @@ -266,7 +266,9 @@ &.issue-title, &.commit-title, &.merge-merquest-title { - @include text-overflow(); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; max-width: 100%; display: block; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 2f2c04206e2..7b36bcb3c7d 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -14,7 +14,7 @@ white-space: nowrap; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; } } @@ -25,7 +25,7 @@ display: flex; flex-grow: 1; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 0; padding-right: 0; } @@ -36,7 +36,7 @@ flex-shrink: 0; flex: 0 0 auto; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; margin-top: 10px; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 70ce5de6a6c..f06c9dcdf8c 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -86,13 +86,13 @@ &.left-side-selected { td.line_content.parallel.right-side { - @include user-select(none); + user-select: none; } } &.right-side-selected { td.line_content.parallel.left-side { - @include user-select(none); + user-select: none; } } } @@ -109,7 +109,7 @@ .old_line, .new_line { - @include user-select(none); + user-select: none; margin: 0; border: 0; padding: 0 5px; @@ -592,14 +592,14 @@ } .commit-stat-summary { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-left: -$gl-padding; padding-left: $gl-padding; background-color: $white-light; } } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { position: -webkit-sticky; position: sticky; top: 24px; @@ -610,10 +610,6 @@ top: 76px; } - &:not(.is-stuck) .diff-stats-additions-deletions-collapsed { - display: none; - } - &.is-stuck { padding-top: 0; padding-bottom: 0; @@ -622,13 +618,21 @@ .diff-stats-additions-deletions-expanded, .inline-parallel-buttons { - display: none; + display: none !important; + } + } + } + + @include media-breakpoint-up(lg) { + &.is-stuck { + .diff-stats-additions-deletions-collapsed { + display: block !important; } } } } -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { .with-performance-bar { .diff-files-changed.diff-files-changed-merge-request { top: 76px + $performance-bar-height; @@ -641,7 +645,7 @@ width: 100%; z-index: 150; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { left: $gl-padding; } @@ -772,9 +776,9 @@ } } -.frame .badge, -.image-diff-avatar-link .badge, -.notes > .badge { +.frame .badge.badge-pill, +.image-diff-avatar-link .badge.badge-pill, +.notes > .badge.badge-pill { position: absolute; background-color: $blue-400; color: $white-light; @@ -788,7 +792,7 @@ } } -.frame .badge, +.frame .badge.badge-pill, .frame .image-comment-badge { // Center align badges on the frame transform: translate(-50%, -50%); @@ -811,14 +815,14 @@ .image-diff-avatar-link { position: relative; - .badge, + .badge.badge-pill, .image-comment-badge { top: 25px; right: 8px; } } -.notes > .badge { +.notes > .badge.badge-pill { display: none; left: -13px; } @@ -840,7 +844,7 @@ display: none; } - .notes > .badge { + .notes > .badge.badge-pill { display: block; } } diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 8ecda50602d..437621299e0 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -37,7 +37,7 @@ padding-top: 7px; padding-bottom: 7px; - .pull-right { + .float-right { height: 20px; } } @@ -63,11 +63,11 @@ max-width: 450px; float: left; - @media(max-width: $screen-md-max) { + @media(max-width: map-get($grid-breakpoints, lg)-1) { width: 280px; } - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { width: 180px; } } @@ -111,10 +111,10 @@ } -@media(max-width: $screen-xs-max){ +@include media-breakpoint-down(xs) { .file-editor { .file-title { - .pull-right { + .float-right { height: auto; } } @@ -153,7 +153,7 @@ vertical-align: top; display: inline-block; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; margin: 19px 0 12px; } @@ -166,7 +166,7 @@ padding: 0 0 0 14px; border-left: 1px solid $border-color; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 5px 0; @@ -181,7 +181,7 @@ margin-top: 6px; line-height: 21px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; margin: 5px 0; } @@ -193,7 +193,7 @@ vertical-align: top; margin: 5px 0 0 8px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 0 0 16px; @@ -209,7 +209,7 @@ font-family: $regular_font; margin-top: -5px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 5px 0; @@ -223,7 +223,7 @@ width: 250px; vertical-align: top; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 5px 0; @@ -237,7 +237,7 @@ display: inline-block; margin: 7px 0 0 10px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 20px 0; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 1f406cc1c2d..cd0d67613c3 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -1,4 +1,4 @@ -@media (max-width: $screen-md-max) { +@include media-breakpoint-down(md) { .deployments-container { width: 100%; overflow: auto; @@ -138,7 +138,7 @@ border-left: 0; border-right: 0; - @media (min-width: $screen-sm-max) { + @media (min-width: map-get($grid-breakpoints, md)-1) { border-top: 0; } } @@ -251,7 +251,7 @@ font-size: 16px; } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { min-width: 100%; } } @@ -432,7 +432,7 @@ } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { .label-axis-text, .text-metric-usage, .legend-axis-text { diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index d9267f5cdf3..f79586b68b9 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -70,7 +70,7 @@ .md { font-size: $gl-font-size; - .label { + .badge.badge-pill { color: $gl-text-color; } @@ -173,7 +173,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .event-item { padding-left: 0; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 409b7285f82..c2b42e02eee 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -2,7 +2,7 @@ @include str-truncated(90%); } -.dashboard .side .panel .panel-heading .input-group { +.dashboard .side .card .card-header .input-group { .form-control { height: 42px; @@ -40,7 +40,7 @@ flex: 1; } - .dropdown-menu-align-right { + .dropdown-menu-right { margin-top: 0; } @@ -102,7 +102,7 @@ } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { &, .dropdown, .dropdown .dropdown-toggle, @@ -149,14 +149,14 @@ padding: 50px 100px; overflow: hidden; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { padding: 50px 0; } svg { float: right; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { float: none; display: block; width: 250px; @@ -171,7 +171,7 @@ width: 460px; margin-top: 120px; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { float: none; margin-top: 60px; width: auto; @@ -205,7 +205,7 @@ max-width: 480px; padding: 0 $gl-padding; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { margin: 0 auto; } } diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index 9cc9e11bcd1..0350fe5752e 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -28,8 +28,8 @@ } .key { - @extend .label; - @extend .label-inverse; + @extend .badge.badge-pill; + background-color: $label-inverse-bg; font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 3px 5px; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index a8110f069d4..4aea9740735 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -373,7 +373,7 @@ /* Extra small devices (phones, less than 768px) */ display: none; /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: block; } @@ -656,7 +656,7 @@ } .issuable-form-padding-top { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-top: 7px; } } @@ -670,7 +670,7 @@ padding-left: 9px; padding-right: 9px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: inline-block; height: auto; align-self: center; @@ -678,7 +678,7 @@ } .issuable-gutter-toggle { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { margin-left: $btn-side-margin; } } @@ -696,7 +696,7 @@ width: 100%; } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { margin-bottom: $gl-padding; } } @@ -737,7 +737,7 @@ } } - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .issuable-meta { .controls li { margin-right: 0; @@ -772,7 +772,7 @@ } } - @media(max-width: $screen-md-max) { + @media(max-width: map-get($grid-breakpoints, lg)-1) { .task-status, .issuable-due-date, .project-ref-path { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 0d17b9bae7e..19fb99bfa93 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -141,7 +141,7 @@ ul.related-merge-requests > li { } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .detail-page-header { .issuable-meta { line-height: 18px; @@ -203,7 +203,7 @@ ul.related-merge-requests > li { } } - .btn-group:not(.hide) { + .btn-group:not(.hidden) { display: flex; } @@ -245,7 +245,7 @@ ul.related-merge-requests > li { display: block; } -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { .emoji-block .row { display: flex; @@ -256,8 +256,8 @@ ul.related-merge-requests > li { } .create-mr-dropdown-wrap { - .btn-group:not(.hide) { - display: inline-block; + .btn-group:not(.hidden) { + display: inline-flex; } } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d81236c5883..e178371d21f 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -62,13 +62,13 @@ display: inline-block; margin-bottom: 10px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 200px; margin-left: $gl-padding * 2; margin-bottom: 0; } - .label { + .badge { overflow: hidden; text-overflow: ellipsis; max-width: 100%; @@ -80,7 +80,7 @@ margin-bottom: 10px; margin-left: 50px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: inline-block; width: 100px; margin-left: 10px; @@ -101,7 +101,7 @@ color: $blue-600; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: inline-block; max-width: 50%; margin-left: 10px; @@ -110,7 +110,7 @@ } } - .label { + .badge { padding: 4px $grid-size; font-size: $label-font-size; position: relative; @@ -122,6 +122,7 @@ padding: 0 $grid-size; line-height: 16px; border-radius: $label-border-radius; + color: $white-light; } .dropdown-labels-error { @@ -132,7 +133,7 @@ } .manage-labels-list { - @media(min-width: $screen-md-min) { + @media(min-width: map-get($grid-breakpoints, md)) { &.content-list li { padding: $gl-padding 0; } @@ -171,12 +172,12 @@ } .dropdown { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: right; } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .dropdown-menu { min-width: 100%; } @@ -283,7 +284,7 @@ } .label-subscribe-button { - @media(min-width: $screen-md-min) { + @media(min-width: map-get($grid-breakpoints, md)) { min-width: 105px; margin-left: $gl-padding; } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 97303d02666..c1b1d2e028d 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -191,9 +191,9 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .login-page { - .col-sm-5.pull-right { + .col-md-5.float-right { float: none !important; margin-bottom: 45px; } @@ -243,7 +243,7 @@ .navless-container { padding: 65px 15px; // height of footer + bottom padding of email confirmation link - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 0 15px 65px; } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index d5ae141dd7e..de2b5701e2d 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -9,9 +9,13 @@ } } +.member-sort-dropdown { + margin-left: $gl-padding-8; +} + .member { .list-item-name { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; width: 50%; } @@ -22,12 +26,12 @@ } .controls { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: -webkit-flex; display: flex; } - .dropdown-menu.dropdown-menu-align-right { + .dropdown-menu.dropdown-menu-right { margin-top: -2px; } } @@ -35,7 +39,7 @@ .form-horizontal { margin-top: 20px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: -webkit-flex; display: flex; margin-top: 3px; @@ -45,20 +49,20 @@ .btn-remove { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: auto; } } &.existing-title { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; } } } .member-form-control { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-bottom: 5px; margin-left: 0; margin-right: 0; @@ -73,7 +77,7 @@ .member-search-form { position: relative; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: right; } @@ -86,7 +90,7 @@ width: 100%; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-top: 0; width: 155px; } @@ -96,7 +100,7 @@ width: 100%; padding-right: 35px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 250px; } } @@ -114,7 +118,7 @@ border: 0; outline: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { right: 160px; } } @@ -125,7 +129,7 @@ align-items: center; justify-content: center; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { display: block; .flex-project-title { @@ -141,7 +145,7 @@ text-overflow: ellipsis; } - .badge { + .badge.badge-pill { height: 17px; line-height: 16px; margin-right: 5px; @@ -156,14 +160,14 @@ } } -.panel { - .panel-heading { - .badge { +.card { + .card-header { + .badge.badge-pill { margin-top: 0; } - @media (max-width: $screen-sm-min) { - .badge { + @include media-breakpoint-down(sm) { + .badge.badge-pill { margin-right: 0; margin-left: 0; } @@ -207,7 +211,7 @@ margin-right: 0; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; .controls > .btn { @@ -235,7 +239,7 @@ } } -.panel-mobile { +.card-mobile { .content-list.members-list li { display: block; diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss index 3d5ed9ef3c5..e76525fdbf6 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/pages/merge_conflicts.scss @@ -291,7 +291,7 @@ $colors: ( } .resolve-info { - @media (max-width: $screen-md-max) { + @media(max-width: map-get($grid-breakpoints, lg)-1) { margin-bottom: $gl-padding; } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 3581dd36a10..9eceb3e9a33 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -131,7 +131,7 @@ color: $gl-text-color; display: flex; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-wrap: wrap; } } @@ -282,7 +282,7 @@ display: inline-block; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { p { font-size: 13px; } @@ -494,18 +494,18 @@ } } -.panel-new-merge-request { - .panel-heading { +.card-new-merge-request { + .card-header { padding: 5px 10px; font-weight: $gl-font-weight-bold; line-height: 25px; } - .panel-body { + .card-body { padding: 10px 5px; } - .panel-footer { + .card-footer { padding: 0; .btn { @@ -519,7 +519,7 @@ } .item-title { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 45%; } } @@ -550,7 +550,7 @@ margin-bottom: 0; } - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { float: left; width: 50%; margin-bottom: 0; @@ -648,7 +648,7 @@ background-color: $white-light; border-bottom: 1px solid $border-color; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { position: sticky; position: -webkit-sticky; } @@ -657,7 +657,7 @@ left: 0; transition: right .15s; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { right: 0; } @@ -700,7 +700,7 @@ display: flex; justify-content: space-between; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-direction: column-reverse; } } @@ -736,7 +736,7 @@ display: flex; flex-wrap: wrap; - @media (min-width: $screen-xs) { + @include media-breakpoint-up(xs) { flex-wrap: nowrap; white-space: nowrap; } @@ -753,7 +753,7 @@ min-width: 100px; max-width: 150px; - @media (min-width: $screen-xs) { + @include media-breakpoint-up(xs) { min-width: 0; max-width: 100%; } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index bac3b70c734..dba83e56d72 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -31,7 +31,7 @@ } } - .panel-heading { + .card-header { line-height: $line-height-base; padding: 14px 16px; display: -webkit-flex; @@ -145,7 +145,7 @@ padding: 20px 0; } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .milestone-actions { @include clearfix(); padding-top: $gl-vert-padding; @@ -181,7 +181,7 @@ width: 100%; } - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { .milestone-buttons .verbose { display: inline; } @@ -229,7 +229,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .milestone-banner-text, .milestone-banner-link { display: inline; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 4a528bc2bb1..3b037d066dc 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -51,7 +51,7 @@ } .note-image-attach { - @extend .col-md-4; + @extend .col-lg-4; margin-left: 45px; float: none; } @@ -93,7 +93,7 @@ -webkit-flex-flow: row wrap; width: 100%; - .pull-right { + .float-right { // Flexbox quirk to make sure right-aligned items stay right-aligned. margin-left: auto; } @@ -185,12 +185,12 @@ } .notes.notes-form > li.timeline-entry { - @include notes-media('max', $screen-sm-max) { + @include notes-media('max', map-get($grid-breakpoints, md) - 1) { padding: 0; } .timeline-content { - @include notes-media('max', $screen-sm-max) { + @include notes-media('max', map-get($grid-breakpoints, md) - 1) { margin: 0; } } @@ -326,7 +326,7 @@ outline: 0; } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { float: left; margin-right: $gl-padding; @@ -350,13 +350,13 @@ line-height: 16px; margin-top: 2px; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { float: left; } } .note-form-actions { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .btn { float: none; width: 100%; @@ -375,7 +375,7 @@ left: 127px; top: 2px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { position: relative; top: 0; left: 0; @@ -410,7 +410,7 @@ width: 298px; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: flex; width: 100%; margin-bottom: 10px; @@ -432,7 +432,7 @@ .uploading-container { float: right; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { float: left; margin-top: 5px; } @@ -444,7 +444,7 @@ } .uploading-error-message { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { &::after { content: "\a"; white-space: pre; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index feee964f9bb..299eda53140 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -22,7 +22,7 @@ ul.notes { .discussion-body { padding-top: 8px; - .panel { + .card { margin-bottom: 0; } } @@ -42,7 +42,7 @@ ul.notes { position: relative; border-bottom: 0; - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { padding-left: $note-icon-gutter-width; } @@ -66,7 +66,7 @@ ul.notes { } .timeline-icon { - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: -$note-icon-gutter-width; } } @@ -74,7 +74,7 @@ ul.notes { .timeline-content { margin-left: $note-icon-gutter-width; - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: 0; } } @@ -154,7 +154,7 @@ ul.notes { .note-header { - @include notes-media('max', $screen-xs-min) { + @include notes-media('max', map-get($grid-breakpoints, xs)) { .inline { display: block; } @@ -217,7 +217,7 @@ ul.notes { .timeline-icon { float: left; - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: 0; width: auto; } @@ -231,7 +231,7 @@ ul.notes { } .timeline-content { - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: 30px; } } @@ -423,7 +423,7 @@ ul.notes { } .note-header-author-name { - @include notes-media('max', $screen-xs-max) { + @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { display: none; } } @@ -431,7 +431,7 @@ ul.notes { .note-headline-light { display: inline; - @include notes-media('max', $screen-xs-min) { + @include notes-media('max', map-get($grid-breakpoints, xs)) { display: block; } } @@ -486,7 +486,7 @@ ul.notes { margin-left: 10px; color: $gray-darkest; - @include notes-media('max', $screen-xs-max) { + @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { float: none; margin-left: 0; } @@ -634,6 +634,10 @@ ul.notes { margin-left: -55px; position: absolute; z-index: 10; + + .new & { + margin-top: -10px; + } } .discussion-body, @@ -668,7 +672,7 @@ ul.notes { } .line-resolve-all-container { - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-right: 0; padding-left: $gl-padding; } diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss index bdf07a99daf..e98cb444f0a 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/pages/notifications.scss @@ -2,7 +2,7 @@ line-height: 34px; .dropdown-menu { - @extend .dropdown-menu-align-right; + @extend .dropdown-menu-right; } } diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss index bc7fa8a26d9..86e70955389 100644 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ b/app/assets/stylesheets/pages/pipeline_schedules.scss @@ -69,7 +69,7 @@ .cron-preset-radio-input { display: inline-block; - @media (max-width: $screen-md-max) { + @include media-breakpoint-down(md) { display: block; margin: 0 0 5px 5px; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1264d977b2f..0188a55cbf3 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -16,13 +16,13 @@ margin: 0; white-space: normal; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { justify-content: flex-end; } } .ci-table { - .label { + .badge { margin-bottom: 3px; } @@ -82,7 +82,7 @@ } } -@media (max-width: $screen-md-max) { +@include media-breakpoint-down(md) { .content-list { &.builds-content-list { width: 100%; @@ -150,14 +150,14 @@ color: $gl-link-color; } - .label { + .badge { margin-right: 4px; } .label-container { font-size: 0; - .label { + .badge { margin-top: 5px; } } @@ -226,7 +226,7 @@ .stage-cell { &.table-section { - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { min-width: 160px; /* Hack alert: Without this the mini graph pipeline won't work properly*/ margin-right: -4px; } @@ -800,7 +800,7 @@ button.mini-pipeline-graph-dropdown-toggle { display: block; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 60%; } } @@ -887,7 +887,7 @@ button.mini-pipeline-graph-dropdown-toggle { transform: translate(-50%, 0); border-width: 0 5px 6px; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { left: 100%; margin-left: -12px; } @@ -909,7 +909,7 @@ button.mini-pipeline-graph-dropdown-toggle { &.dropdown-menu { transform: translate(-80%, 0); - @media (min-width: $screen-md-min) { + @media(min-width: map-get($grid-breakpoints, md)) { transform: translate(-50%, 0); right: auto; left: 50%; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index b199f9876d3..06078f1d12e 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -5,7 +5,7 @@ } .avatar-image { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; margin-bottom: 0; } @@ -119,7 +119,7 @@ .key-list-item { .key-list-item-info { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; } } @@ -188,7 +188,7 @@ .modal-dialog { width: 380px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: auto; } @@ -242,7 +242,7 @@ left: 0; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .cover-block { padding-top: 20px; } @@ -352,7 +352,7 @@ table.u2f-registrations { } } - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: center; .bordered-box { @@ -414,7 +414,7 @@ table.u2f-registrations { } &.unverified { - @include status-color($gray-dark, $gray, $common-gray-dark); + @include status-color($gray-dark, color("gray"), $common-gray-dark); } } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 53d021086bf..22964163e95 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -9,7 +9,7 @@ .new_project, .edit-project, .import-project { - .help-block { + .form-text.text-muted { margin-bottom: 10px; } @@ -34,7 +34,7 @@ } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .input-group > div { &:last-child { margin-bottom: 0; @@ -46,7 +46,8 @@ } } - .input-group-addon { + .input-group-prepend, + .input-group-append { overflow: hidden; text-overflow: ellipsis; line-height: unset; @@ -82,7 +83,7 @@ border: 1px solid $border-color; padding: 10px 32px; - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { padding: 10px 20px; } } @@ -134,7 +135,7 @@ max-width: 400px; } - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { padding-left: 20px; } } @@ -144,7 +145,7 @@ padding-top: 24px; padding-bottom: 24px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { border-bottom: 1px solid $border-color; } @@ -230,11 +231,11 @@ } .notification-dropdown .dropdown-menu { - @extend .dropdown-menu-align-right; + @extend .dropdown-menu-right; } .download-button { - @media (max-width: $screen-md-max) { + @include media-breakpoint-down(md) { margin-left: 0; } } @@ -444,11 +445,11 @@ height: 200px; width: calc((100% / 2) - #{$gl-padding * 2}); - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: calc((100% / 4) - #{$gl-padding * 2}); } - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { width: calc((100% / 5) - #{$gl-padding * 2}); } @@ -537,11 +538,12 @@ .template-input-group { position: relative; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: flex; } - .input-group-addon { + .input-group-prepend, + .input-group-append { flex: 1; text-align: left; padding-left: ($gl-padding * 3); @@ -601,12 +603,12 @@ margin: 0 auto 4px; font-size: 24px; - @media (min-width: $screen-xs-max) { + @media (min-width: map-get($grid-breakpoints, sm)-1) { top: 0; } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .btn-template-icon { display: inline-block; height: 14px; @@ -625,31 +627,31 @@ .create-project-options { display: flex; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; } .first-column { - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { max-width: 50%; padding-right: 30px; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 100%; width: 100%; } } .second-column { - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { width: 50%; flex: 1; padding-left: 30px; position: relative; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 100%; width: 100%; padding-left: 0; @@ -657,7 +659,7 @@ } // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-top: 30px; } @@ -677,7 +679,7 @@ line-height: 20px; // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { left: 50%; top: 0; transform: translateX(-50%); @@ -697,7 +699,7 @@ top: 0; // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { top: 10px; left: 10px; right: 10px; @@ -735,7 +737,7 @@ vertical-align: top; margin-top: 0; - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { float: right; } } @@ -866,13 +868,14 @@ pre.light-well { } } -.panel .projects-list li { +.card .projects-list li { padding: 10px 15px; margin: 0; } .git-clone-holder { width: 380px; + height: 28px; .btn-clipboard { border: 1px solid $border-color; @@ -888,11 +891,11 @@ pre.light-well { .form-control { @extend .monospace; - background: $white-light; + background-color: $white-light; + border-color: $border-color; font-size: 14px; margin-left: -1px; cursor: auto; - width: 101%; } } @@ -921,7 +924,8 @@ pre.light-well { } .project-tip-command { - > .input-group-btn:first-child { + > .input-group-prepend:first-child, + > .input-group-append:first-child { width: auto; } } @@ -972,7 +976,7 @@ pre.light-well { .dropdown-menu-projects { width: 300px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 500px; } @@ -986,7 +990,7 @@ pre.light-well { .inline-input-group { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 300px; } } @@ -997,8 +1001,8 @@ pre.light-well { text-align: center; margin-top: -20px; - @media (min-width: $screen-sm-min) { - margin-top: 0; + @include media-breakpoint-up(sm) { + margin: 0 $gl-padding-8; width: auto; } } @@ -1036,7 +1040,7 @@ pre.light-well { } &.form-group { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-bottom: 0; } } @@ -1064,12 +1068,12 @@ pre.light-well { .project-feature { padding-top: 10px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 45px; } &.nested { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 90px; } } diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 35985d3c8f3..17d7087bd85 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -854,7 +854,7 @@ } } - .help-block { + .form-text.text-muted { margin-top: 0; line-height: 0; } diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss index 5fb97b13470..2734faec558 100644 --- a/app/assets/stylesheets/pages/runners.scss +++ b/app/assets/stylesheets/pages/runners.scss @@ -51,7 +51,7 @@ } } -@media (max-width: $screen-md-max) { +@include media-breakpoint-down(md) { .runners-content { width: 100%; overflow: auto; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index dbde0720993..a35c4ff7c80 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -47,6 +47,7 @@ input[type="checkbox"]:hover { } .location-badge { + white-space: nowrap; height: 32px; font-size: 12px; margin: -4px 4px -4px -4px; @@ -166,7 +167,7 @@ input[type="checkbox"]:hover { } .search-holder { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: -webkit-flex; display: flex; } @@ -178,7 +179,7 @@ input[type="checkbox"]:hover { position: relative; margin-right: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-right: 5px; } } @@ -202,7 +203,7 @@ input[type="checkbox"]:hover { width: 100%; margin-top: 5px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: auto; margin-top: 0; margin-left: 5px; @@ -210,7 +211,7 @@ input[type="checkbox"]:hover { } .dropdown { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-left: 5px; margin-right: 5px; } @@ -220,7 +221,7 @@ input[type="checkbox"]:hover { width: 100%; margin-top: 5px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 180px; margin-top: 0; } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index c410049bc0b..2b3773eebad 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -70,7 +70,7 @@ animation: none; } - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { padding-right: 20px; } @@ -98,8 +98,8 @@ } .bs-callout, - .checkbox:first-child, - .help-block { + .form-check:first-child, + .form-text.text-muted { margin-top: 0; } @@ -131,12 +131,12 @@ color: $gl-danger; } -.service-settings .control-label { +.service-settings .form-control-label { padding-top: 0; } .integration-settings-form { - .well { + .card.card-body { padding: $gl-padding / 2; box-shadow: none; } @@ -158,7 +158,7 @@ } .visibility-level-setting { - .radio { + .form-check { margin-bottom: 10px; i.fa { @@ -174,7 +174,7 @@ .option-description, .option-disabled-reason { - margin-left: 29px; + margin-left: 45px; color: $project-option-descr-color; } @@ -199,22 +199,22 @@ } .prometheus-metrics-monitoring { - .panel { - .panel-toggle { + .card { + .card-toggle { width: 14px; } - .badge { + .badge.badge-pill { font-size: 12px; line-height: 12px; } - .panel-heading .badge-count { + .card-header .label-count { color: $white-light; background: $common-gray-dark; } - .panel-body { + .card-body { padding: 0; } @@ -249,7 +249,7 @@ li { padding: $gl-padding; - .badge { + .badge.badge-pill { margin-left: 5px; background: $badge-bg; } diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss index 8e2c42c1bd3..3f6f5f06075 100644 --- a/app/assets/stylesheets/pages/stat_graph.scss +++ b/app/assets/stylesheets/pages/stat_graph.scss @@ -14,7 +14,10 @@ } #contributors-master { - @include make-md-column(12); + @include media-breakpoint-up(md) { + @include make-col-ready(); + @include make-col(12); + } svg { width: 100%; @@ -33,10 +36,14 @@ } .person { - @include make-md-column(6); + @include media-breakpoint-up(md) { + @include make-col-ready(); + @include make-col(6); + } + margin-top: 10px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index ade5ddd147b..620297e589d 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -58,7 +58,7 @@ } } -.visible-xs-inline { +.d-block.d-sm-none-inline { .ci-status-link { position: relative; top: 2px; diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 4b9824fab0c..e5d7dd13915 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -126,7 +126,7 @@ color: $gl-grayish-blue; font-size: $gl-font-size; - .label { + .badge.badge-pill { color: $gl-text-color; } @@ -162,7 +162,7 @@ } } -@media (max-width: $screen-sm-max) { +@include media-breakpoint-down(sm) { .todos-filters { .dropdown-menu-toggle { width: 130px; @@ -174,7 +174,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .todo { .avatar { display: none; @@ -214,7 +214,7 @@ margin-left: auto; margin-right: auto; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { -webkit-flex-direction: row; flex-direction: row; padding-top: 80px; @@ -233,7 +233,7 @@ margin-left: auto; margin-right: auto; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 300px; margin-right: 0; -webkit-order: 2; @@ -244,7 +244,7 @@ .todos-all-done { padding-top: 20px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-top: 50px; } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index e0ee7e9aa3d..efd26cb1f81 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -7,7 +7,7 @@ color: $gl-text-color-secondary; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: flex; .tree-ref-container { @@ -41,15 +41,10 @@ position: relative; } } - - .add-to-tree-dropdown { - position: absolute; - left: 18px; - } } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .repo-breadcrumb { margin-top: 10px; position: relative; @@ -121,7 +116,7 @@ margin-left: 5px; } - @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include media-breakpoint-only(md) { @include str-truncated(450px); } diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index e70a57c2a67..800f5c68e39 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -65,7 +65,7 @@ display: block; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { &.has-sidebar-toggle { padding-right: 40px; } @@ -81,7 +81,7 @@ } } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { &.has-sidebar-toggle { padding-right: 0; } diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb index d339c01d492..43d92bde064 100644 --- a/app/helpers/avatars_helper.rb +++ b/app/helpers/avatars_helper.rb @@ -78,7 +78,7 @@ module AvatarsHelper user: commit_or_event.author, user_name: commit_or_event.author_name, user_email: commit_or_event.author_email, - css_class: 'hidden-xs' + css_class: 'd-none d-sm-inline' })) end diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb index f0afcac5986..5fce97164ae 100644 --- a/app/helpers/ci_status_helper.rb +++ b/app/helpers/ci_status_helper.rb @@ -92,7 +92,7 @@ module CiStatusHelper "pipeline-status/#{pipeline_status.sha}-#{pipeline_status.status}" end - def render_project_pipeline_status(pipeline_status, tooltip_placement: 'auto left') + def render_project_pipeline_status(pipeline_status, tooltip_placement: 'left') project = pipeline_status.project path = pipelines_project_commit_path(project, pipeline_status.sha, ref: pipeline_status.ref) @@ -103,7 +103,7 @@ module CiStatusHelper tooltip_placement: tooltip_placement) end - def render_commit_status(commit, ref: nil, tooltip_placement: 'auto left') + def render_commit_status(commit, ref: nil, tooltip_placement: 'left') project = commit.project path = pipelines_project_commit_path(project, commit, ref: ref) @@ -114,7 +114,7 @@ module CiStatusHelper tooltip_placement: tooltip_placement) end - def render_pipeline_status(pipeline, tooltip_placement: 'auto left') + def render_pipeline_status(pipeline, tooltip_placement: 'left') project = pipeline.project path = project_pipeline_path(project, pipeline) render_status_with_link('pipeline', pipeline.status, path, tooltip_placement: tooltip_placement) @@ -125,7 +125,7 @@ module CiStatusHelper Ci::Runner.shared.blank? end - def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '', container: 'body') + def render_status_with_link(type, status, path = nil, tooltip_placement: 'left', cssclass: '', container: 'body') klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}" title = "#{type.titleize}: #{ci_label_for_status(status)}" data = { toggle: 'tooltip', placement: tooltip_placement, container: container } diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index f5a7871a6e0..e5c3be47801 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -27,7 +27,7 @@ module CommitsHelper return unless @project && @ref # Add the root project link and the arrow icon - crumbs = content_tag(:li) do + crumbs = content_tag(:li, class: 'breadcrumb-item') do link_to( @project.path, project_commits_path(@project, @ref) @@ -38,7 +38,7 @@ module CommitsHelper parts = @path.split('/') parts.each_with_index do |part, i| - crumbs << content_tag(:li) do + crumbs << content_tag(:li, class: 'breadcrumb-item') do # The text is just the individual part, but the link needs all the parts before it link_to( part, @@ -62,7 +62,7 @@ module CommitsHelper # Returns a link formatted as a commit branch link def commit_branch_link(url, text) - link_to(url, class: 'label label-gray ref-name branch-link') do + link_to(url, class: 'badge badge-gray ref-name branch-link') do sprite_icon('branch', size: 12, css_class: 'fork-svg') + "#{text}" end end @@ -76,7 +76,7 @@ module CommitsHelper # Returns a link formatted as a commit tag link def commit_tag_link(url, text) - link_to(url, class: 'label label-gray ref-name') do + link_to(url, class: 'badge badge-gray ref-name') do sprite_icon('tag', size: 12, css_class: 'append-right-5 vertical-align-middle') + "#{text}" end end diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb index 2f304b040c7..58372edff3c 100644 --- a/app/helpers/icons_helper.rb +++ b/app/helpers/icons_helper.rb @@ -60,7 +60,7 @@ module IconsHelper def spinner(text = nil, visible = false) css_class = 'loading' - css_class << ' hide' unless visible + css_class << ' hidden' unless visible content_tag :div, class: css_class do icon('spinner spin') + text diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index f39a62bccc8..8572c2b7276 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -157,15 +157,15 @@ module IssuablesHelper output = "" output << "Opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe output << content_tag(:strong) do - author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true) - author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg") + author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "d-none d-sm-inline-block", tooltip: true) + author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "d-block d-sm-none") end output << " ".html_safe output << content_tag(:span, (issuable_first_contribution_icon if issuable.first_contribution?), class: 'has-tooltip', title: _('1st contribution!')) - output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "hidden-xs hidden-sm") - output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "hidden-md hidden-lg") + output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "d-none d-sm-none d-md-inline-block") + output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "d-md-none d-lg-none d-xl-inline-block") output.html_safe end @@ -199,7 +199,7 @@ module IssuablesHelper if display_count count = issuables_count_for_state(issuable_type, state) - html << " " << content_tag(:span, number_with_delimiter(count), class: 'badge') + html << " " << content_tag(:span, number_with_delimiter(count), class: 'badge badge-pill') end html.html_safe @@ -359,7 +359,8 @@ module IssuablesHelper url: project_todos_path(@project), delete_path: (dashboard_todo_path(todo) if todo), placement: (is_collapsed ? 'left' : nil), - container: (is_collapsed ? 'body' : nil) + container: (is_collapsed ? 'body' : nil), + boundary: 'viewport' } end diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb index c4a6a1e4bb3..e1b0e7a4a3e 100644 --- a/app/helpers/labels_helper.rb +++ b/app/helpers/labels_helper.rb @@ -81,7 +81,7 @@ module LabelsHelper # Intentionally not using content_tag here so that this method can be called # by LabelReferenceFilter - span = %(<span class="label color-label #{"has-tooltip" if tooltip}" ) + + span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) + %(style="background-color: #{label.color}; color: #{text_color}" ) + %(title="#{escape_once(label.description)}" data-container="body">) + %(#{escape_once(label.name)}#{label_suffix}</span>) diff --git a/app/helpers/milestones_helper.rb b/app/helpers/milestones_helper.rb index e8caab3e50c..15a15405f1d 100644 --- a/app/helpers/milestones_helper.rb +++ b/app/helpers/milestones_helper.rb @@ -89,7 +89,7 @@ module MilestonesHelper def milestone_progress_bar(milestone) options = { - class: 'progress-bar progress-bar-success', + class: 'progress-bar bg-success', style: "width: #{milestone.percent_complete(current_user)}%;" } @@ -112,8 +112,6 @@ module MilestonesHelper def milestone_tooltip_title(milestone) if milestone "#{milestone.title}<br />#{milestone_tooltip_due_date(milestone)}" - else - _('Milestone') end end @@ -173,6 +171,8 @@ module MilestonesHelper def milestone_tooltip_due_date(milestone) if milestone.due_date "#{milestone.due_date.to_s(:medium)} (#{remaining_days_in_words(milestone)})" + else + _('Milestone') end end diff --git a/app/views/abuse_report_mailer/notify.html.haml b/app/views/abuse_report_mailer/notify.html.haml index d50b4071745..5abb0dc9182 100644 --- a/app/views/abuse_report_mailer/notify.html.haml +++ b/app/views/abuse_report_mailer/notify.html.haml @@ -4,7 +4,7 @@ #{link_to @abuse_report.reporter.name, user_url(@abuse_report.reporter)} (@#{@abuse_report.reporter.username}). -%blockquote +.blockquote = @abuse_report.message %p diff --git a/app/views/abuse_reports/new.html.haml b/app/views/abuse_reports/new.html.haml index 06be1a53318..278ad210543 100644 --- a/app/views/abuse_reports/new.html.haml +++ b/app/views/abuse_reports/new.html.haml @@ -2,20 +2,20 @@ %h3.page-title Report abuse %p Please use this form to report users who create spam issues, comments or behave inappropriately. %hr -= form_for @abuse_report, html: { class: 'form-horizontal js-quick-submit js-requires-input'} do |f| += form_for @abuse_report, html: { class: 'js-quick-submit js-requires-input'} do |f| = form_errors(@abuse_report) = f.hidden_field :user_id - .form-group - = f.label :user_id, class: 'control-label' + .form-group.row + = f.label :user_id, class: 'col-sm-2 col-form-label' .col-sm-10 - name = "#{@abuse_report.user.name} (@#{@abuse_report.user.username})" = text_field_tag :user_name, name, class: "form-control", readonly: true - .form-group - = f.label :message, class: 'control-label' + .form-group.row + = f.label :message, class: 'col-sm-2 col-form-label' .col-sm-10 = f.text_area :message, class: "form-control", rows: 2, required: true, value: sanitize(@ref_url) - .help-block + .form-text.text-muted Explain the problem with this user. If appropriate, provide a link to the relevant issue or comment. .form-actions diff --git a/app/views/admin/abuse_reports/_abuse_report.html.haml b/app/views/admin/abuse_reports/_abuse_report.html.haml index 18c6c559049..89a87f38968 100644 --- a/app/views/admin/abuse_reports/_abuse_report.html.haml +++ b/app/views/admin/abuse_reports/_abuse_report.html.haml @@ -1,7 +1,7 @@ - reporter = abuse_report.reporter - user = abuse_report.user %tr - %th.visible-xs-block.visible-sm-block + %th.d-block.d-sm-none.d-md-none %strong User %td - if user @@ -11,7 +11,7 @@ - else (removed) %td - %strong.subheading.visible-xs-block.visible-sm-block Reported by + %strong.subheading.d-block.d-sm-none.d-md-none Reported by - if reporter = link_to reporter.name, reporter - else @@ -19,7 +19,7 @@ .light.small = time_ago_with_tooltip(abuse_report.created_at) %td - %strong.subheading.visible-xs-block.visible-sm-block Message + %strong.subheading.d-block.d-sm-none.d-md-none Message .message = markdown_field(abuse_report, :message) %td diff --git a/app/views/admin/abuse_reports/index.html.haml b/app/views/admin/abuse_reports/index.html.haml index 6a5e170ddd8..cc29657a439 100644 --- a/app/views/admin/abuse_reports/index.html.haml +++ b/app/views/admin/abuse_reports/index.html.haml @@ -5,7 +5,7 @@ - if @abuse_reports.present? .table-holder %table.table.responsive-table - %thead.hidden-sm.hidden-xs + %thead.d-none.d-sm-none.d-md-table-header-group %tr %th User %th Reported by diff --git a/app/views/admin/appearances/_form.html.haml b/app/views/admin/appearances/_form.html.haml index 15bda97c3b5..5e08837255f 100644 --- a/app/views/admin/appearances/_form.html.haml +++ b/app/views/admin/appearances/_form.html.haml @@ -1,11 +1,11 @@ -= form_for @appearance, url: admin_appearances_path, html: { class: 'form-horizontal'} do |f| += form_for @appearance, url: admin_appearances_path do |f| = form_errors(@appearance) %fieldset.app_logo %legend Navigation bar: - .form-group - = f.label :header_logo, 'Header logo', class: 'control-label' + .form-group.row + = f.label :header_logo, 'Header logo', class: 'col-sm-2 col-form-label' .col-sm-10 - if @appearance.header_logo? = image_tag @appearance.header_logo_url, class: 'appearance-light-logo-preview' @@ -21,18 +21,18 @@ %fieldset.sign-in %legend Sign in/Sign up pages: - .form-group - = f.label :title, class: 'control-label' + .form-group.row + = f.label :title, class: 'col-sm-2 col-form-label' .col-sm-10 = f.text_field :title, class: "form-control" - .form-group - = f.label :description, class: 'control-label' + .form-group.row + = f.label :description, class: 'col-sm-2 col-form-label' .col-sm-10 = f.text_area :description, class: "form-control", rows: 10 .hint Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}. - .form-group - = f.label :logo, class: 'control-label' + .form-group.row + = f.label :logo, class: 'col-sm-2 col-form-label' .col-sm-10 - if @appearance.logo? = image_tag @appearance.logo_url, class: 'appearance-logo-preview' @@ -48,8 +48,8 @@ %fieldset %legend New project pages: - .form-group - = f.label :new_project_guidelines, class: 'control-label' + .form-group.row + = f.label :new_project_guidelines, class: 'col-sm-2 col-form-label' .col-sm-10 = f.text_area :new_project_guidelines, class: "form-control", rows: 10 .hint @@ -63,5 +63,5 @@ = link_to 'New project page', new_project_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer' - if @appearance.updated_at - %span.pull-right + %span.float-right Last edit #{time_ago_with_tooltip(@appearance.updated_at)} diff --git a/app/views/admin/application_settings/_abuse.html.haml b/app/views/admin/application_settings/_abuse.html.haml index bb3fa26a33e..6b9b2a17dd9 100644 --- a/app/views/admin/application_settings/_abuse.html.haml +++ b/app/views/admin/application_settings/_abuse.html.haml @@ -1,12 +1,12 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :admin_notification_email, 'Abuse reports notification email', class: 'control-label col-sm-2' + .form-group.row + = f.label :admin_notification_email, 'Abuse reports notification email', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :admin_notification_email, class: 'form-control' - .help-block + .form-text.text-muted Abuse reports will be sent to this address if it is set. Abuse reports are always available in the admin area. = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml index dd86c9ed2eb..f40dd347eb3 100644 --- a/app/views/admin/application_settings/_account_and_limit.html.haml +++ b/app/views/admin/application_settings/_account_and_limit.html.haml @@ -1,37 +1,37 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :gravatar_enabled do = f.check_box :gravatar_enabled Gravatar enabled - .form-group - = f.label :default_projects_limit, class: 'control-label col-sm-2' + .form-group.row + = f.label :default_projects_limit, class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :default_projects_limit, class: 'form-control' - .form-group - = f.label :max_attachment_size, 'Maximum attachment size (MB)', class: 'control-label col-sm-2' + .form-group.row + = f.label :max_attachment_size, 'Maximum attachment size (MB)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :max_attachment_size, class: 'form-control' - .form-group - = f.label :session_expire_delay, 'Session duration (minutes)', class: 'control-label col-sm-2' + .form-group.row + = f.label :session_expire_delay, 'Session duration (minutes)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :session_expire_delay, class: 'form-control' - %span.help-block#session_expire_delay_help_block GitLab restart is required to apply changes - .form-group - = f.label :user_oauth_applications, 'User OAuth applications', class: 'control-label col-sm-2' + %span.form-text.text-muted#session_expire_delay_help_block GitLab restart is required to apply changes + .form-group.row + = f.label :user_oauth_applications, 'User OAuth applications', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :user_oauth_applications do = f.check_box :user_oauth_applications Allow users to register any application to use GitLab as an OAuth provider - .form-group - = f.label :user_default_external, 'New users set to external', class: 'control-label col-sm-2' + .form-group.row + = f.label :user_default_external, 'New users set to external', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :user_default_external do = f.check_box :user_default_external Newly registered users will by default be external diff --git a/app/views/admin/application_settings/_background_jobs.html.haml b/app/views/admin/application_settings/_background_jobs.html.haml index 8198a822a10..da7248337d2 100644 --- a/app/views/admin/application_settings/_background_jobs.html.haml +++ b/app/views/admin/application_settings/_background_jobs.html.haml @@ -1,4 +1,4 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset @@ -6,25 +6,25 @@ These settings require a = link_to 'restart', help_page_path('administration/restart_gitlab') to take effect. - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :sidekiq_throttling_enabled do = f.check_box :sidekiq_throttling_enabled Enable Sidekiq Job Throttling - .help-block + .form-text.text-muted Limit the amount of resources slow running jobs are assigned. - .form-group - = f.label :sidekiq_throttling_queues, 'Sidekiq queues to throttle', class: 'control-label col-sm-2' + .form-group.row + = f.label :sidekiq_throttling_queues, 'Sidekiq queues to throttle', class: 'col-form-label col-sm-2' .col-sm-10 = f.select :sidekiq_throttling_queues, sidekiq_queue_options_for_select, { include_hidden: false }, multiple: true, class: 'select2 select-wide', data: { field: 'sidekiq_throttling_queues' } - .help-block + .form-text.text-muted Choose which queues you wish to throttle. - .form-group - = f.label :sidekiq_throttling_factor, 'Throttling Factor', class: 'control-label col-sm-2' + .form-group.row + = f.label :sidekiq_throttling_factor, 'Throttling Factor', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :sidekiq_throttling_factor, class: 'form-control', min: '0.01', max: '0.99', step: '0.01' - .help-block + .form-text.text-muted The factor by which the queues should be throttled. A value between 0.0 and 1.0, exclusive. = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml index 079f371e0ba..6a06271de2a 100644 --- a/app/views/admin/application_settings/_ci_cd.html.haml +++ b/app/views/admin/application_settings/_ci_cd.html.haml @@ -1,45 +1,45 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :auto_devops_enabled do = f.check_box :auto_devops_enabled Enabled Auto DevOps for projects by default - .help-block + .form-text.text-muted It will automatically build, test, and deploy applications based on a predefined CI/CD configuration = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md') - .form-group - = f.label :auto_devops_domain, class: 'control-label col-sm-2' + .form-group.row + = f.label :auto_devops_domain, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :auto_devops_domain, class: 'form-control', placeholder: 'domain.com' - .help-block + .form-text.text-muted = s_("AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages.") - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :shared_runners_enabled do = f.check_box :shared_runners_enabled Enable shared runners for new projects - .form-group - = f.label :shared_runners_text, class: 'control-label col-sm-2' + .form-group.row + = f.label :shared_runners_text, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :shared_runners_text, class: 'form-control', rows: 4 - .help-block Markdown enabled - .form-group - = f.label :max_artifacts_size, 'Maximum artifacts size (MB)', class: 'control-label col-sm-2' + .form-text.text-muted Markdown enabled + .form-group.row + = f.label :max_artifacts_size, 'Maximum artifacts size (MB)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :max_artifacts_size, class: 'form-control' - .help-block + .form-text.text-muted Set the maximum file size for each job's artifacts = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size') - .form-group - = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'control-label col-sm-2' + .form-group.row + = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :default_artifacts_expire_in, class: 'form-control' - .help-block + .form-text.text-muted Set the default expiration time for each job's artifacts. 0 for unlimited. = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration') diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml index 6c89f1c4e98..7443f02ad15 100644 --- a/app/views/admin/application_settings/_email.html.haml +++ b/app/views/admin/application_settings/_email.html.haml @@ -1,24 +1,24 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :email_author_in_body do = f.check_box :email_author_in_body Include author name in notification email body - .help-block + .form-text.text-muted Some email servers do not support overriding the email sender name. Enable this option to include the name of the author of the issue, merge request or comment in the email body instead. - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :html_emails_enabled do = f.check_box :html_emails_enabled Enable HTML emails - .help-block + .form-text.text-muted By default GitLab sends emails in HTML and plain text formats so mail clients can choose what format to use. Disable this option if you only want to send emails in plain text format. diff --git a/app/views/admin/application_settings/_gitaly.html.haml b/app/views/admin/application_settings/_gitaly.html.haml index 4acc5b3a0c5..859a1c6f45c 100644 --- a/app/views/admin/application_settings/_gitaly.html.haml +++ b/app/views/admin/application_settings/_gitaly.html.haml @@ -1,27 +1,27 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :gitaly_timeout_default, 'Default Timeout Period', class: 'control-label col-sm-2' + .form-group.row + = f.label :gitaly_timeout_default, 'Default Timeout Period', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :gitaly_timeout_default, class: 'form-control' - .help-block + .form-text.text-muted Timeout for Gitaly calls from the GitLab application (in seconds). This timeout is not enforced for git fetch/push operations or Sidekiq jobs. - .form-group - = f.label :gitaly_timeout_fast, 'Fast Timeout Period', class: 'control-label col-sm-2' + .form-group.row + = f.label :gitaly_timeout_fast, 'Fast Timeout Period', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :gitaly_timeout_fast, class: 'form-control' - .help-block + .form-text.text-muted Fast operation timeout (in seconds). Some Gitaly operations are expected to be fast. If they exceed this threshold, there may be a problem with a storage shard and 'failing fast' can help maintain the stability of the GitLab instance. - .form-group - = f.label :gitaly_timeout_medium, 'Medium Timeout Period', class: 'control-label col-sm-2' + .form-group.row + = f.label :gitaly_timeout_medium, 'Medium Timeout Period', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :gitaly_timeout_medium, class: 'form-control' - .help-block + .form-text.text-muted Medium operation timeout (in seconds). This should be a value between the Fast and the Default timeout. = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml index 3bc101ddf04..97d397788c6 100644 --- a/app/views/admin/application_settings/_help_page.html.haml +++ b/app/views/admin/application_settings/_help_page.html.haml @@ -1,22 +1,22 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :help_page_text, class: 'control-label col-sm-2' + .form-group.row + = f.label :help_page_text, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :help_page_text, class: 'form-control', rows: 4 - .help-block Markdown enabled - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-text.text-muted Markdown enabled + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :help_page_hide_commercial_content do = f.check_box :help_page_hide_commercial_content Hide marketing-related entries from help - .form-group - = f.label :help_page_support_url, 'Support page URL', class: 'control-label col-sm-2' + .form-group.row + = f.label :help_page_support_url, 'Support page URL', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :help_page_support_url, class: 'form-control', placeholder: 'http://company.example.com/getting-help', :'aria-describedby' => 'support_help_block' - %span.help-block#support_help_block Alternate support URL for help page + %span.form-text.text-muted#support_help_block Alternate support URL for help page = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_influx.html.haml b/app/views/admin/application_settings/_influx.html.haml index a173fd38a9c..e5d699f9a2f 100644 --- a/app/views/admin/application_settings/_influx.html.haml +++ b/app/views/admin/application_settings/_influx.html.haml @@ -1,4 +1,4 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset @@ -8,60 +8,60 @@ = link_to 'restart', help_page_path('administration/restart_gitlab') to take effect. = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/introduction') - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :metrics_enabled do = f.check_box :metrics_enabled Enable InfluxDB Metrics - .form-group - = f.label :metrics_host, 'InfluxDB host', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_host, 'InfluxDB host', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :metrics_host, class: 'form-control', placeholder: 'influxdb.example.com' - .form-group - = f.label :metrics_port, 'InfluxDB port', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_port, 'InfluxDB port', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :metrics_port, class: 'form-control', placeholder: '8089' - .help-block + .form-text.text-muted The UDP port to use for connecting to InfluxDB. InfluxDB requires that your server configuration specifies a database to store data in when sending messages to this port, without it metrics data will not be saved. - .form-group - = f.label :metrics_pool_size, 'Connection pool size', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_pool_size, 'Connection pool size', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :metrics_pool_size, class: 'form-control' - .help-block + .form-text.text-muted The amount of InfluxDB connections to open. Connections are opened lazily. Users using multi-threaded application servers should ensure enough connections are available (at minimum the amount of application server threads). - .form-group - = f.label :metrics_timeout, 'Connection timeout', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_timeout, 'Connection timeout', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :metrics_timeout, class: 'form-control' - .help-block + .form-text.text-muted The amount of seconds after which an InfluxDB connection will time out. - .form-group - = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :metrics_method_call_threshold, class: 'form-control' - .help-block + .form-text.text-muted A method call is only tracked when it takes longer to complete than the given amount of milliseconds. - .form-group - = f.label :metrics_sample_interval, 'Sampler Interval (sec)', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_sample_interval, 'Sampler Interval (sec)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :metrics_sample_interval, class: 'form-control' - .help-block + .form-text.text-muted The sampling interval in seconds. Sampled data includes memory usage, retained Ruby objects, file descriptors and so on. - .form-group - = f.label :metrics_packet_size, 'Metrics per packet', class: 'control-label col-sm-2' + .form-group.row + = f.label :metrics_packet_size, 'Metrics per packet', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :metrics_packet_size, class: 'form-control' - .help-block + .form-text.text-muted The amount of points to store in a single UDP packet. More points results in fewer but larger UDP packets being sent. diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml index b83ffc375d9..539ff9b5168 100644 --- a/app/views/admin/application_settings/_ip_limits.html.haml +++ b/app/views/admin/application_settings/_ip_limits.html.haml @@ -1,53 +1,53 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :throttle_unauthenticated_enabled do = f.check_box :throttle_unauthenticated_enabled Enable unauthenticated request rate limit - %span.help-block + %span.form-text.text-muted Helps reduce request volume (e.g. from crawlers or abusive bots) - .form-group - = f.label :throttle_unauthenticated_requests_per_period, 'Max requests per period per IP', class: 'control-label col-sm-2' + .form-group.row + = f.label :throttle_unauthenticated_requests_per_period, 'Max requests per period per IP', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :throttle_unauthenticated_requests_per_period, class: 'form-control' - .form-group - = f.label :throttle_unauthenticated_period_in_seconds, 'Rate limit period in seconds', class: 'control-label col-sm-2' + .form-group.row + = f.label :throttle_unauthenticated_period_in_seconds, 'Rate limit period in seconds', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :throttle_unauthenticated_period_in_seconds, class: 'form-control' - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :throttle_authenticated_api_enabled do = f.check_box :throttle_authenticated_api_enabled Enable authenticated API request rate limit - %span.help-block + %span.form-text.text-muted Helps reduce request volume (e.g. from crawlers or abusive bots) - .form-group - = f.label :throttle_authenticated_api_requests_per_period, 'Max requests per period per user', class: 'control-label col-sm-2' + .form-group.row + = f.label :throttle_authenticated_api_requests_per_period, 'Max requests per period per user', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :throttle_authenticated_api_requests_per_period, class: 'form-control' - .form-group - = f.label :throttle_authenticated_api_period_in_seconds, 'Rate limit period in seconds', class: 'control-label col-sm-2' + .form-group.row + = f.label :throttle_authenticated_api_period_in_seconds, 'Rate limit period in seconds', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :throttle_authenticated_api_period_in_seconds, class: 'form-control' - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :throttle_authenticated_web_enabled do = f.check_box :throttle_authenticated_web_enabled Enable authenticated web request rate limit - %span.help-block + %span.form-text.text-muted Helps reduce request volume (e.g. from crawlers or abusive bots) - .form-group - = f.label :throttle_authenticated_web_requests_per_period, 'Max requests per period per user', class: 'control-label col-sm-2' + .form-group.row + = f.label :throttle_authenticated_web_requests_per_period, 'Max requests per period per user', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :throttle_authenticated_web_requests_per_period, class: 'form-control' - .form-group - = f.label :throttle_authenticated_web_period_in_seconds, 'Rate limit period in seconds', class: 'control-label col-sm-2' + .form-group.row + = f.label :throttle_authenticated_web_period_in_seconds, 'Rate limit period in seconds', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :throttle_authenticated_web_period_in_seconds, class: 'form-control' diff --git a/app/views/admin/application_settings/_koding.html.haml b/app/views/admin/application_settings/_koding.html.haml index 17358cf775b..0532f49fd5b 100644 --- a/app/views/admin/application_settings/_koding.html.haml +++ b/app/views/admin/application_settings/_koding.html.haml @@ -1,20 +1,20 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :koding_enabled do = f.check_box :koding_enabled Enable Koding - .help-block + .form-text.text-muted Koding integration has been deprecated since GitLab 10.0. If you disable your Koding integration, you will not be able to enable it again. - .form-group - = f.label :koding_url, 'Koding URL', class: 'control-label col-sm-2' + .form-group.row + = f.label :koding_url, 'Koding URL', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :koding_url, class: 'form-control', placeholder: 'http://gitlab.your-koding-instance.com:8090' - .help-block + .form-text.text-muted Koding has integration enabled out of the box for the %strong gitlab team, and you need to provide that team's URL here. Learn more in the diff --git a/app/views/admin/application_settings/_logging.html.haml b/app/views/admin/application_settings/_logging.html.haml index 44a11ddc120..4341801b045 100644 --- a/app/views/admin/application_settings/_logging.html.haml +++ b/app/views/admin/application_settings/_logging.html.haml @@ -1,35 +1,35 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :sentry_enabled do = f.check_box :sentry_enabled Enable Sentry - .help-block + .form-text.text-muted %p This setting requires a restart to take effect. Sentry is an error reporting and logging tool which is currently not shipped with GitLab, get it here: %a{ href: 'https://getsentry.com', target: '_blank', rel: 'noopener noreferrer' } https://getsentry.com - .form-group - = f.label :sentry_dsn, 'Sentry DSN', class: 'control-label col-sm-2' + .form-group.row + = f.label :sentry_dsn, 'Sentry DSN', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :sentry_dsn, class: 'form-control' - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :clientside_sentry_enabled do = f.check_box :clientside_sentry_enabled Enable Clientside Sentry - .help-block + .form-text.text-muted Sentry can also be used for reporting and logging clientside exceptions. %a{ href: 'https://sentry.io/for/javascript/', target: '_blank', rel: 'noopener noreferrer' } https://sentry.io/for/javascript/ - .form-group - = f.label :clientside_sentry_dsn, 'Clientside Sentry DSN', class: 'control-label col-sm-2' + .form-group.row + = f.label :clientside_sentry_dsn, 'Clientside Sentry DSN', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :clientside_sentry_dsn, class: 'form-control' diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml index d10f609006d..176cdfe9e1a 100644 --- a/app/views/admin/application_settings/_outbound.html.haml +++ b/app/views/admin/application_settings/_outbound.html.haml @@ -1,10 +1,10 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :allow_local_requests_from_hooks_and_services do = f.check_box :allow_local_requests_from_hooks_and_services Allow requests to the local network from hooks and services diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml index b28ecf9a039..0100ef038e2 100644 --- a/app/views/admin/application_settings/_pages.html.haml +++ b/app/views/admin/application_settings/_pages.html.haml @@ -1,19 +1,19 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'control-label col-sm-2' + .form-group.row + = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :max_pages_size, class: 'form-control' - .help-block 0 for unlimited - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-text.text-muted 0 for unlimited + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :pages_domain_verification_enabled do = f.check_box :pages_domain_verification_enabled Require users to prove ownership of custom domains - .help-block + .form-text.text-muted Domain verification is an essential security measure for public GitLab sites. Users are required to demonstrate they control a domain before it is enabled diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml index 01d5a31aa9f..07d3a8b7cdf 100644 --- a/app/views/admin/application_settings/_performance.html.haml +++ b/app/views/admin/application_settings/_performance.html.haml @@ -1,14 +1,14 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :authorized_keys_enabled do = f.check_box :authorized_keys_enabled Write to "authorized_keys" file - .help-block + .form-text.text-muted By default, we write to the "authorized_keys" file to support Git over SSH without additional configuration. GitLab can be optimized to authenticate SSH keys via the database file. Only uncheck this diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml index 5344f030c97..8001b42e2f9 100644 --- a/app/views/admin/application_settings/_performance_bar.html.haml +++ b/app/views/admin/application_settings/_performance_bar.html.haml @@ -1,15 +1,15 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :performance_bar_enabled do = f.check_box :performance_bar_enabled Enable the Performance Bar - .form-group - = f.label :performance_bar_allowed_group_id, 'Allowed group', class: 'control-label col-sm-2' + .form-group.row + = f.label :performance_bar_allowed_group_id, 'Allowed group', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :performance_bar_allowed_group_id, class: 'form-control', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml index 56764b3fb81..ee6d1d1a888 100644 --- a/app/views/admin/application_settings/_plantuml.html.haml +++ b/app/views/admin/application_settings/_plantuml.html.haml @@ -1,18 +1,18 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :plantuml_enabled do = f.check_box :plantuml_enabled Enable PlantUML - .form-group - = f.label :plantuml_url, 'PlantUML URL', class: 'control-label col-sm-2' + .form-group.row + = f.label :plantuml_url, 'PlantUML URL', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :plantuml_url, class: 'form-control', placeholder: 'http://gitlab.your-plantuml-instance.com:8080' - .help-block + .form-text.text-muted Allow rendering of = link_to "PlantUML", "http://plantuml.com" diagrams in Asciidoc documents using an external PlantUML service. diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml index 48745db2991..8c95597e787 100644 --- a/app/views/admin/application_settings/_prometheus.html.haml +++ b/app/views/admin/application_settings/_prometheus.html.haml @@ -1,4 +1,4 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset @@ -11,14 +11,14 @@ = link_to 'restart', help_page_path('administration/restart_gitlab') to take effect. = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/index') - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :prometheus_metrics_enabled do = f.check_box :prometheus_metrics_enabled Enable Prometheus Metrics - unless Gitlab::Metrics.metrics_folder_present? - .help-block + .form-text.text-muted %strong.cred WARNING: Environment variable %code prometheus_multiproc_dir diff --git a/app/views/admin/application_settings/_realtime.html.haml b/app/views/admin/application_settings/_realtime.html.haml index 0a53a75119e..63a592cc2fd 100644 --- a/app/views/admin/application_settings/_realtime.html.haml +++ b/app/views/admin/application_settings/_realtime.html.haml @@ -1,12 +1,12 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'control-label col-sm-2' + .form-group.row + = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :polling_interval_multiplier, class: 'form-control' - .help-block + .form-text.text-muted Change this value to influence how frequently the GitLab UI polls for updates. If you set the value to 2 all polling intervals are multiplied by 2, which means that polling happens half as frequently. diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml index 3451ef62458..8524cbfe4d9 100644 --- a/app/views/admin/application_settings/_registry.html.haml +++ b/app/views/admin/application_settings/_registry.html.haml @@ -1,9 +1,9 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'control-label col-sm-2' + .form-group.row + = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :container_registry_token_expire_delay, class: 'form-control' diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml index fe335f30a62..739ed359e16 100644 --- a/app/views/admin/application_settings/_repository_check.html.haml +++ b/app/views/admin/application_settings/_repository_check.html.haml @@ -1,62 +1,62 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset .sub-section %h4 Repository checks - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :repository_checks_enabled do = f.check_box :repository_checks_enabled Enable Repository Checks - .help-block + .form-text.text-muted GitLab will periodically run %a{ href: 'https://git-scm.com/docs/git-fsck', target: 'blank' } 'git fsck' in all project and wiki repositories to look for silent disk corruption issues. - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 = link_to 'Clear all repository checks', clear_repository_check_states_admin_application_settings_path, data: { confirm: 'This will clear repository check states for ALL projects in the database. This cannot be undone. Are you sure?' }, method: :put, class: "btn btn-sm btn-remove" - .help-block + .form-text.text-muted If you got a lot of false alarms from repository checks you can choose to clear all repository check information from the database. .sub-section %h4 Housekeeping - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :housekeeping_enabled do = f.check_box :housekeeping_enabled Enable automatic repository housekeeping (git repack, git gc) - .help-block + .form-text.text-muted If you keep automatic housekeeping disabled for a long time Git repository access on your GitLab server will become slower and your repositories will use more disk space. We recommend to always leave this enabled. - .checkbox + .form-check = f.label :housekeeping_bitmaps_enabled do = f.check_box :housekeeping_bitmaps_enabled Enable Git pack file bitmap creation - .help-block + .form-text.text-muted Creating pack file bitmaps makes housekeeping take a little longer but bitmaps should accelerate 'git clone' performance. - .form-group - = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'control-label col-sm-2' + .form-group.row + = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :housekeeping_incremental_repack_period, class: 'form-control' - .help-block + .form-text.text-muted Number of Git pushes after which an incremental 'git repack' is run. - .form-group - = f.label :housekeeping_full_repack_period, 'Full repack period', class: 'control-label col-sm-2' + .form-group.row + = f.label :housekeeping_full_repack_period, 'Full repack period', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :housekeeping_full_repack_period, class: 'form-control' - .help-block + .form-text.text-muted Number of Git pushes after which a full 'git repack' is run. - .form-group - = f.label :housekeeping_gc_period, 'Git GC period', class: 'control-label col-sm-2' + .form-group.row + = f.label :housekeeping_gc_period, 'Git GC period', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :housekeeping_gc_period, class: 'form-control' - .help-block + .form-text.text-muted Number of Git pushes after which 'git gc' is run. = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml index 09183ec6260..9d05a5aa234 100644 --- a/app/views/admin/application_settings/_repository_mirrors_form.html.haml +++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml @@ -5,7 +5,7 @@ .form-group = f.label :mirror_available, 'Enable mirror configuration', class: 'control-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :mirror_available do = f.check_box :mirror_available Allow mirrors to be setup for projects diff --git a/app/views/admin/application_settings/_repository_storage.html.haml b/app/views/admin/application_settings/_repository_storage.html.haml index 4eebb59110a..be85210934c 100644 --- a/app/views/admin/application_settings/_repository_storage.html.haml +++ b/app/views/admin/application_settings/_repository_storage.html.haml @@ -1,58 +1,58 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset .sub-section - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :hashed_storage_enabled do = f.check_box :hashed_storage_enabled Create new projects using hashed storage paths - .help-block + .form-text.text-muted Enable immutable, hash-based paths and repository names to store repositories on disk. This prevents repositories from having to be moved or renamed when the Project URL changes and may improve disk I/O performance. %em (EXPERIMENTAL) - .form-group - = f.label :repository_storages, 'Storage paths for new projects', class: 'control-label col-sm-2' + .form-group.row + = f.label :repository_storages, 'Storage paths for new projects', class: 'col-form-label col-sm-2' .col-sm-10 = f.select :repository_storages, repository_storages_options_for_select(@application_setting.repository_storages), {include_hidden: false}, multiple: true, class: 'form-control' - .help-block + .form-text.text-muted Manage repository storage paths. Learn more in the = succeed "." do = link_to "repository storages documentation", help_page_path("administration/repository_storage_paths") .sub-section %h4 Circuit breaker - .form-group - = f.label :circuitbreaker_check_interval, _('Check interval'), class: 'control-label col-sm-2' + .form-group.row + = f.label :circuitbreaker_check_interval, _('Check interval'), class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :circuitbreaker_check_interval, class: 'form-control' - .help-block + .form-text.text-muted = circuitbreaker_check_interval_help_text - .form-group - = f.label :circuitbreaker_access_retries, _('Number of access attempts'), class: 'control-label col-sm-2' + .form-group.row + = f.label :circuitbreaker_access_retries, _('Number of access attempts'), class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :circuitbreaker_access_retries, class: 'form-control' - .help-block + .form-text.text-muted = circuitbreaker_access_retries_help_text - .form-group - = f.label :circuitbreaker_storage_timeout, _('Seconds to wait for a storage access attempt'), class: 'control-label col-sm-2' + .form-group.row + = f.label :circuitbreaker_storage_timeout, _('Seconds to wait for a storage access attempt'), class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :circuitbreaker_storage_timeout, class: 'form-control' - .help-block + .form-text.text-muted = circuitbreaker_storage_timeout_help_text - .form-group - = f.label :circuitbreaker_failure_count_threshold, _('Maximum git storage failures'), class: 'control-label col-sm-2' + .form-group.row + = f.label :circuitbreaker_failure_count_threshold, _('Maximum git storage failures'), class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :circuitbreaker_failure_count_threshold, class: 'form-control' - .help-block + .form-text.text-muted = circuitbreaker_failure_count_help_text - .form-group - = f.label :circuitbreaker_failure_reset_time, _('Seconds before reseting failure information'), class: 'control-label col-sm-2' + .form-group.row + = f.label :circuitbreaker_failure_reset_time, _('Seconds before reseting failure information'), class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :circuitbreaker_failure_reset_time, class: 'form-control' - .help-block + .form-text.text-muted = circuitbreaker_failure_reset_time_help_text = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml index 48331c40bca..4d74568d69a 100644 --- a/app/views/admin/application_settings/_signin.html.haml +++ b/app/views/admin/application_settings/_signin.html.haml @@ -1,60 +1,60 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :password_authentication_enabled_for_web do = f.check_box :password_authentication_enabled_for_web Password authentication enabled for web interface - .help-block + .form-text.text-muted When disabled, an external authentication provider must be used. - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :password_authentication_enabled_for_git do = f.check_box :password_authentication_enabled_for_git Password authentication enabled for Git over HTTP(S) - .help-block + .form-text.text-muted When disabled, a Personal Access Token - if Gitlab::Auth::LDAP::Config.enabled? or LDAP password must be used to authenticate. - if omniauth_enabled? && button_based_providers.any? - .form-group + .form-group.row = f.label :enabled_oauth_sign_in_sources, 'Enabled OAuth sign-in sources', class: 'control-label col-sm-2' = hidden_field_tag 'application_setting[enabled_oauth_sign_in_sources][]' .col-sm-10 .btn-group{ data: { toggle: 'buttons' } } - oauth_providers_checkboxes.each do |source| = source - .form-group - = f.label :two_factor_authentication, 'Two-factor authentication', class: 'control-label col-sm-2' + .form-group.row + = f.label :two_factor_authentication, 'Two-factor authentication', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :require_two_factor_authentication do = f.check_box :require_two_factor_authentication Require all users to setup Two-factor authentication - .form-group - = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'control-label col-sm-2' + .form-group.row + = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :two_factor_grace_period, min: 0, class: 'form-control', placeholder: '0' - .help-block Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication - .form-group - = f.label :home_page_url, 'Home page URL', class: 'control-label col-sm-2' + .form-text.text-muted Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication + .form-group.row + = f.label :home_page_url, 'Home page URL', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block' - %span.help-block#home_help_block We will redirect non-logged in users to this page - .form-group - = f.label :after_sign_out_path, class: 'control-label col-sm-2' + %span.form-text.text-muted#home_help_block We will redirect non-logged in users to this page + .form-group.row + = f.label :after_sign_out_path, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :after_sign_out_path, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'after_sign_out_path_help_block' - %span.help-block#after_sign_out_path_help_block We will redirect users to this page after they sign out - .form-group - = f.label :sign_in_text, class: 'control-label col-sm-2' + %span.form-text.text-muted#after_sign_out_path_help_block We will redirect users to this page after they sign out + .form-group.row + = f.label :sign_in_text, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :sign_in_text, class: 'form-control', rows: 4 - .help-block Markdown enabled + .form-text.text-muted Markdown enabled = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml index 85f311dd894..50c455f8686 100644 --- a/app/views/admin/application_settings/_signup.html.haml +++ b/app/views/admin/application_settings/_signup.html.haml @@ -1,58 +1,58 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :signup_enabled do = f.check_box :signup_enabled Sign-up enabled - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :send_user_confirmation_email do = f.check_box :send_user_confirmation_email Send confirmation email on sign-up - .form-group - = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'control-label col-sm-2' + .form-group.row + = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :domain_whitelist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8 - .help-block ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com - .form-group - = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'control-label col-sm-2' + .form-text.text-muted ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com + .form-group.row + = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :domain_blacklist_enabled do = f.check_box :domain_blacklist_enabled Enable domain blacklist for sign ups - .form-group - .col-sm-offset-2.col-sm-10 - .radio + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = label_tag :blacklist_type_file do = radio_button_tag :blacklist_type, :file .option-title Upload blacklist file - .radio + .form-check = label_tag :blacklist_type_raw do = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank? .option-title Enter blacklist manually - .form-group.blacklist-file - = f.label :domain_blacklist_file, 'Blacklist file', class: 'control-label col-sm-2' + .form-group.row.blacklist-file + = f.label :domain_blacklist_file, 'Blacklist file', class: 'col-form-label col-sm-2' .col-sm-10 = f.file_field :domain_blacklist_file, class: 'form-control', accept: '.txt,.conf' - .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries. - .form-group.blacklist-raw - = f.label :domain_blacklist, 'Blacklisted domains for sign-ups', class: 'control-label col-sm-2' + .form-text.text-muted Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries. + .form-group.row.blacklist-raw + = f.label :domain_blacklist, 'Blacklisted domains for sign-ups', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :domain_blacklist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8 - .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com + .form-text.text-muted Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com - .form-group - = f.label :after_sign_up_text, class: 'control-label col-sm-2' + .form-group.row + = f.label :after_sign_up_text, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :after_sign_up_text, class: 'form-control', rows: 4 - .help-block Markdown enabled + .form-text.text-muted Markdown enabled = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_spam.html.haml b/app/views/admin/application_settings/_spam.html.haml index 25e89097dfe..58543a0359a 100644 --- a/app/views/admin/application_settings/_spam.html.haml +++ b/app/views/admin/application_settings/_spam.html.haml @@ -1,65 +1,65 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :recaptcha_enabled do = f.check_box :recaptcha_enabled Enable reCAPTCHA - %span.help-block#recaptcha_help_block Helps prevent bots from creating accounts + %span.form-text.text-muted#recaptcha_help_block Helps prevent bots from creating accounts - .form-group - = f.label :recaptcha_site_key, 'reCAPTCHA Site Key', class: 'control-label col-sm-2' + .form-group.row + = f.label :recaptcha_site_key, 'reCAPTCHA Site Key', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :recaptcha_site_key, class: 'form-control' - .help-block + .form-text.text-muted Generate site and private keys at %a{ href: 'http://www.google.com/recaptcha', target: 'blank' } http://www.google.com/recaptcha - .form-group - = f.label :recaptcha_private_key, 'reCAPTCHA Private Key', class: 'control-label col-sm-2' + .form-group.row + = f.label :recaptcha_private_key, 'reCAPTCHA Private Key', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :recaptcha_private_key, class: 'form-control' - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :akismet_enabled do = f.check_box :akismet_enabled Enable Akismet - %span.help-block#akismet_help_block Helps prevent bots from creating issues + %span.form-text.text-muted#akismet_help_block Helps prevent bots from creating issues - .form-group - = f.label :akismet_api_key, 'Akismet API Key', class: 'control-label col-sm-2' + .form-group.row + = f.label :akismet_api_key, 'Akismet API Key', class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :akismet_api_key, class: 'form-control' - .help-block + .form-text.text-muted Generate API key at %a{ href: 'http://www.akismet.com', target: 'blank' } http://www.akismet.com - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :unique_ips_limit_enabled do = f.check_box :unique_ips_limit_enabled Limit sign in from multiple ips - %span.help-block#unique_ip_help_block + %span.form-text.text-muted#unique_ip_help_block Helps prevent malicious users hide their activity - .form-group - = f.label :unique_ips_limit_per_user, 'IPs per user', class: 'control-label col-sm-2' + .form-group.row + = f.label :unique_ips_limit_per_user, 'IPs per user', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :unique_ips_limit_per_user, class: 'form-control' - .help-block + .form-text.text-muted Maximum number of unique IPs per user - .form-group - = f.label :unique_ips_limit_time_window, 'IP expiration time', class: 'control-label col-sm-2' + .form-group.row + = f.label :unique_ips_limit_time_window, 'IP expiration time', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :unique_ips_limit_time_window, class: 'form-control' - .help-block + .form-text.text-muted How many seconds an IP will be counted towards the limit = f.submit 'Save changes', class: "btn btn-success" diff --git a/app/views/admin/application_settings/_terminal.html.haml b/app/views/admin/application_settings/_terminal.html.haml index 36d8838803f..ae02d07e556 100644 --- a/app/views/admin/application_settings/_terminal.html.haml +++ b/app/views/admin/application_settings/_terminal.html.haml @@ -1,12 +1,12 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :terminal_max_session_time, 'Max session time', class: 'control-label col-sm-2' + .form-group.row + = f.label :terminal_max_session_time, 'Max session time', class: 'col-form-label col-sm-2' .col-sm-10 = f.number_field :terminal_max_session_time, class: 'form-control' - .help-block + .form-text.text-muted Maximum time for web terminal websocket connection (in seconds). 0 for unlimited. diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml index 724246ab7e7..32b060972ec 100644 --- a/app/views/admin/application_settings/_terms.html.haml +++ b/app/views/admin/application_settings/_terms.html.haml @@ -4,7 +4,7 @@ %fieldset .form-group .col-sm-12 - .checkbox + .form-check = f.label :enforce_terms do = f.check_box :enforce_terms = _("Require all users to accept Terms of Service when they access GitLab.") diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml index 7684e2cfdd1..316c8b04dea 100644 --- a/app/views/admin/application_settings/_usage.html.haml +++ b/app/views/admin/application_settings/_usage.html.haml @@ -1,25 +1,25 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :version_check_enabled do = f.check_box :version_check_enabled Enable version check - .help-block + .form-text.text-muted GitLab will inform you if a new version is available. = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "version-check") about what information is shared with GitLab Inc. - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 - can_be_configured = @application_setting.usage_ping_can_be_configured? - .checkbox + .form-check = f.label :usage_ping_enabled do = f.check_box :usage_ping_enabled, disabled: !can_be_configured Enable usage ping - .help-block + .form-text.text-muted - if can_be_configured To help improve GitLab and its user experience, GitLab will periodically collect usage information. diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml index a75dd90fe6b..c37a89237f0 100644 --- a/app/views/admin/application_settings/_visibility_and_access.html.haml +++ b/app/views/admin/application_settings/_visibility_and_access.html.haml @@ -1,41 +1,41 @@ -= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f| += form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f| = form_errors(@application_setting) %fieldset - .form-group - = f.label :default_branch_protection, class: 'control-label col-sm-2' + .form-group.row + = f.label :default_branch_protection, class: 'col-form-label col-sm-2' .col-sm-10 = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, @application_setting.default_branch_protection), {}, class: 'form-control' - .form-group.visibility-level-setting - = f.label :default_project_visibility, class: 'control-label col-sm-2' + .form-group.row.visibility-level-setting + = f.label :default_project_visibility, class: 'col-form-label col-sm-2' .col-sm-10 = render('shared/visibility_radios', model_method: :default_project_visibility, form: f, selected_level: @application_setting.default_project_visibility, form_model: Project.new) - .form-group.visibility-level-setting - = f.label :default_snippet_visibility, class: 'control-label col-sm-2' + .form-group.row.visibility-level-setting + = f.label :default_snippet_visibility, class: 'col-form-label col-sm-2' .col-sm-10 = render('shared/visibility_radios', model_method: :default_snippet_visibility, form: f, selected_level: @application_setting.default_snippet_visibility, form_model: ProjectSnippet.new) - .form-group.visibility-level-setting - = f.label :default_group_visibility, class: 'control-label col-sm-2' + .form-group.row.visibility-level-setting + = f.label :default_group_visibility, class: 'col-form-label col-sm-2' .col-sm-10 = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new) - .form-group - = f.label :restricted_visibility_levels, class: 'control-label col-sm-2' + .form-group.row + = f.label :restricted_visibility_levels, class: 'col-form-label col-sm-2' .col-sm-10 - checkbox_name = 'application_setting[restricted_visibility_levels][]' = hidden_field_tag(checkbox_name) - restricted_level_checkboxes('restricted-visibility-help', checkbox_name).each do |level| - .checkbox + .form-check = level - %span.help-block#restricted-visibility-help + %span.form-text.text-muted#restricted-visibility-help Selected levels cannot be used by non-admin users for projects or snippets. If the public level is restricted, user profiles are only visible to logged in users. - .form-group - = f.label :import_sources, class: 'control-label col-sm-2' + .form-group.row + = f.label :import_sources, class: 'col-form-label col-sm-2' .col-sm-10 = hidden_field_tag 'application_setting[import_sources][]' - import_sources_checkboxes('import-sources-help').each do |source| - .checkbox= source - %span.help-block#import-sources-help + .form-check= source + %span.form-text.text-muted#import-sources-help Enabled sources for code import during project creation. OmniAuth must be configured for GitHub = link_to "(?)", help_page_path("integration/github") , Bitbucket @@ -43,24 +43,24 @@ and GitLab.com = link_to "(?)", help_page_path("integration/gitlab") - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.label :project_export_enabled do = f.check_box :project_export_enabled Project export enabled - .form-group - %label.control-label.col-sm-2 Enabled Git access protocols + .form-group.row + %label.col-form-label.col-sm-2 Enabled Git access protocols .col-sm-10 = select(:application_setting, :enabled_git_access_protocol, [['Both SSH and HTTP(S)', nil], ['Only SSH', 'ssh'], ['Only HTTP(S)', 'http']], {}, class: 'form-control') - %span.help-block#clone-protocol-help + %span.form-text.text-muted#clone-protocol-help Allow only the selected protocols to be used for Git access. - ApplicationSetting::SUPPORTED_KEY_TYPES.each do |type| - field_name = :"#{type}_key_restriction" - .form-group - = f.label field_name, "#{type.upcase} SSH keys", class: 'control-label col-sm-2' + .form-group.row + = f.label field_name, "#{type.upcase} SSH keys", class: 'col-form-label col-sm-2' .col-sm-10 = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control' diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml index 93827d6a1ab..b5d79e1da13 100644 --- a/app/views/admin/applications/_form.html.haml +++ b/app/views/admin/applications/_form.html.haml @@ -1,34 +1,34 @@ -= form_for [:admin, @application], url: @url, html: {class: 'form-horizontal', role: 'form'} do |f| += form_for [:admin, @application], url: @url, html: {role: 'form'} do |f| = form_errors(application) = content_tag :div, class: 'form-group' do - = f.label :name, class: 'col-sm-2 control-label' + = f.label :name, class: 'col-sm-2 col-form-label' .col-sm-10 = f.text_field :name, class: 'form-control' = doorkeeper_errors_for application, :name = content_tag :div, class: 'form-group' do - = f.label :redirect_uri, class: 'col-sm-2 control-label' + = f.label :redirect_uri, class: 'col-sm-2 col-form-label' .col-sm-10 = f.text_area :redirect_uri, class: 'form-control' = doorkeeper_errors_for application, :redirect_uri - %span.help-block + %span.form-text.text-muted Use one line per URI - if Doorkeeper.configuration.native_redirect_uri - %span.help-block + %span.form-text.text-muted Use %code= Doorkeeper.configuration.native_redirect_uri for local tests = content_tag :div, class: 'form-group' do - = f.label :trusted, class: 'col-sm-2 control-label' + = f.label :trusted, class: 'col-sm-2 col-form-label' .col-sm-10 = f.check_box :trusted - %span.help-block + %span.form-text.text-muted Trusted applications are automatically authorized on GitLab OAuth flow. - .form-group - = f.label :scopes, class: 'col-sm-2 control-label' + .form-group.row + = f.label :scopes, class: 'col-sm-2 col-form-label' .col-sm-10 = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes diff --git a/app/views/admin/applications/show.html.haml b/app/views/admin/applications/show.html.haml index 5125aa21b06..593a6d816e3 100644 --- a/app/views/admin/applications/show.html.haml +++ b/app/views/admin/applications/show.html.haml @@ -32,5 +32,5 @@ = render "shared/tokens/scopes_list", token: @application .form-actions - = link_to 'Edit', edit_admin_application_path(@application), class: 'btn btn-primary wide pull-left' + = link_to 'Edit', edit_admin_application_path(@application), class: 'btn btn-primary wide float-left' = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10' diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml index f0cc4d7ee62..faa5854bb40 100644 --- a/app/views/admin/background_jobs/show.html.haml +++ b/app/views/admin/background_jobs/show.html.haml @@ -7,9 +7,9 @@ %hr - .panel.panel-default - .panel-heading Sidekiq running processes - .panel-body + .card + .card-header Sidekiq running processes + .card-body - if @sidekiq_processes.empty? %h4.cred %i.fa.fa-exclamation-triangle @@ -41,5 +41,5 @@ - .panel.panel-default + .card %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" } diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml index 813ad451b44..7f34357f147 100644 --- a/app/views/admin/broadcast_messages/_form.html.haml +++ b/app/views/admin/broadcast_messages/_form.html.haml @@ -6,32 +6,32 @@ - else Your message here -= form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-quick-submit js-requires-input'} do |f| += form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form js-quick-submit js-requires-input'} do |f| = form_errors(@broadcast_message) - .form-group - = f.label :message, class: 'control-label' + .form-group.row + = f.label :message, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :message, class: "form-control js-autosize", required: true, data: { preview_path: preview_admin_broadcast_messages_path } - .form-group.js-toggle-colors-container - .col-sm-10.col-sm-offset-2 + .form-group.row.js-toggle-colors-container + .col-sm-10.offset-sm-2 = link_to 'Customize colors', '#', class: 'js-toggle-colors-link' - .form-group.js-toggle-colors-container.hide - = f.label :color, "Background Color", class: 'control-label' + .form-group.row.js-toggle-colors-container.toggle-colors.hide + = f.label :color, "Background Color", class: 'col-form-label col-sm-2' .col-sm-10 = f.color_field :color, class: "form-control" - .form-group.js-toggle-colors-container.hide - = f.label :font, "Font Color", class: 'control-label' + .form-group.row.js-toggle-colors-container.toggle-colors.hide + = f.label :font, "Font Color", class: 'col-form-label col-sm-2' .col-sm-10 = f.color_field :font, class: "form-control" - .form-group - = f.label :starts_at, _("Starts at (UTC)"), class: 'control-label' + .form-group.row + = f.label :starts_at, _("Starts at (UTC)"), class: 'col-form-label col-sm-2' .col-sm-10.datetime-controls = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline' - .form-group - = f.label :ends_at, _("Ends at (UTC)"), class: 'control-label' + .form-group.row + = f.label :ends_at, _("Ends at (UTC)"), class: 'col-form-label col-sm-2' .col-sm-10.datetime-controls = f.datetime_select :ends_at, {}, class: 'form-control form-control-inline' .form-actions diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml index b806882eee3..9ef58faf8cc 100644 --- a/app/views/admin/broadcast_messages/index.html.haml +++ b/app/views/admin/broadcast_messages/index.html.haml @@ -32,7 +32,7 @@ %td = message.ends_at %td - = link_to icon('pencil-square-o'), edit_admin_broadcast_message_path(message), title: 'Edit', class: 'btn btn-xs' - = link_to icon('times'), admin_broadcast_message_path(message), method: :delete, remote: true, title: 'Remove', class: 'js-remove-tr btn btn-xs btn-danger' + = link_to icon('pencil-square-o'), edit_admin_broadcast_message_path(message), title: 'Edit', class: 'btn btn-sm' + = link_to icon('times'), admin_broadcast_message_path(message), method: :delete, remote: true, title: 'Remove', class: 'js-remove-tr btn btn-sm btn-danger' = paginate @broadcast_messages, theme: 'gitlab' diff --git a/app/views/admin/conversational_development_index/_card.html.haml b/app/views/admin/conversational_development_index/_card.html.haml index 6c8688e06ae..57eda06630b 100644 --- a/app/views/admin/conversational_development_index/_card.html.haml +++ b/app/views/admin/conversational_development_index/_card.html.haml @@ -3,20 +3,20 @@ .convdev-card-title %h3 = card.title - .text-light + .light-text = card.description - .card-scores - .card-score - .card-score-value + .board-card-scores + .board-card-score + .board-card-score-value = format_score(card.instance_score) - .card-score-name You - .card-score - .card-score-value + .board-card-score-name You + .board-card-score + .board-card-score-value = format_score(card.leader_score) - .card-score-name Lead - .card-score-big + .board-card-score-name Lead + .board-card-score-big = number_to_percentage(card.percentage_score, precision: 1) - .card-buttons + .board-card-buttons - if card.blog %a{ href: card.blog } = icon('info-circle', 'aria-hidden' => 'true') diff --git a/app/views/admin/conversational_development_index/_disabled.html.haml b/app/views/admin/conversational_development_index/_disabled.html.haml index 975d7df3da6..0a741b50960 100644 --- a/app/views/admin/conversational_development_index/_disabled.html.haml +++ b/app/views/admin/conversational_development_index/_disabled.html.haml @@ -1,5 +1,5 @@ .container.convdev-empty - .col-sm-6.col-sm-push-3.text-center + .col-sm-12.justify-content-center.text-center = custom_icon('convdev_no_index') %h4 Usage ping is not enabled %p diff --git a/app/views/admin/conversational_development_index/_no_data.html.haml b/app/views/admin/conversational_development_index/_no_data.html.haml index b23d2b5ec3a..d69c46194b4 100644 --- a/app/views/admin/conversational_development_index/_no_data.html.haml +++ b/app/views/admin/conversational_development_index/_no_data.html.haml @@ -1,5 +1,5 @@ .container.convdev-empty - .col-sm-6.col-sm-push-3.text-center + .col-sm-12.justify-content-center.text-center = custom_icon('convdev_no_data') %h4 Data is still calculating... %p diff --git a/app/views/admin/conversational_development_index/show.html.haml b/app/views/admin/conversational_development_index/show.html.haml index ed40e7b4d00..e3d1aa31dc2 100644 --- a/app/views/admin/conversational_development_index/show.html.haml +++ b/app/views/admin/conversational_development_index/show.html.haml @@ -21,11 +21,11 @@ score = link_to icon('question-circle', 'aria-hidden' => 'true'), help_page_path('user/admin_area/monitoring/convdev') - .convdev-cards.card-container + .convdev-cards.board-card-container - @metric.cards.each do |card| = render 'card', card: card - .convdev-steps.visible-lg + .convdev-steps.d-none.d-lg-block.d-xl-block - @metric.idea_to_production_steps.each_with_index do |step, index| .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" } = custom_icon("i2p_step_#{index + 1}") diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml index dd1800eff01..3df4ce93fa8 100644 --- a/app/views/admin/dashboard/index.html.haml +++ b/app/views/admin/dashboard/index.html.haml @@ -41,35 +41,35 @@ %h4 Statistics %p Forks - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(ForkedProjectLink) %p Issues - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(Issue) %p Merge Requests - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(MergeRequest) %p Notes - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(Note) %p Snippets - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(Snippet) %p SSH Keys - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(Key) %p Milestones - %span.light.pull-right + %span.light.float-right = approximate_count_with_delimiters(Milestone) %p Active Users - %span.light.pull-right + %span.light.float-right = number_with_delimiter(User.active.count) .col-md-4 .info-well @@ -78,27 +78,27 @@ - sign_up = "Sign up" %p{ "aria-label" => "#{sign_up}: status " + (allow_signup? ? "on" : "off") } = sign_up - %span.light.pull-right + %span.light.float-right = boolean_to_icon allow_signup? - ldap = "LDAP" %p{ "aria-label" => "#{ldap}: status " + (Gitlab.config.ldap.enabled ? "on" : "off") } = ldap - %span.light.pull-right + %span.light.float-right = boolean_to_icon Gitlab.config.ldap.enabled - gravatar = "Gravatar" %p{ "aria-label" => "#{gravatar}: status " + (gravatar_enabled? ? "on" : "off") } = gravatar - %span.light.pull-right + %span.light.float-right = boolean_to_icon gravatar_enabled? - omniauth = "OmniAuth" %p{ "aria-label" => "#{omniauth}: status " + (Gitlab.config.omniauth.enabled ? "on" : "off") } = omniauth - %span.light.pull-right + %span.light.float-right = boolean_to_icon Gitlab.config.omniauth.enabled - reply_email = "Reply by email" %p{ "aria-label" => "#{reply_email}: status " + (Gitlab::IncomingEmail.enabled? ? "on" : "off") } = reply_email - %span.light.pull-right + %span.light.float-right = boolean_to_icon Gitlab::IncomingEmail.enabled? = render_if_exists 'elastic_and_geo' @@ -106,19 +106,19 @@ - container_reg = "Container Registry" %p{ "aria-label" => "#{container_reg}: status " + (Gitlab.config.registry.enabled ? "on" : "off") } = container_reg - %span.light.pull-right + %span.light.float-right = boolean_to_icon Gitlab.config.registry.enabled - gitlab_pages = 'GitLab Pages' - gitlab_pages_enabled = Gitlab.config.pages.enabled %p{ "aria-label" => "#{gitlab_pages}: status " + (gitlab_pages_enabled ? "on" : "off") } = gitlab_pages - %span.light.pull-right + %span.light.float-right = boolean_to_icon gitlab_pages_enabled - gitlab_shared_runners = 'Shared Runners' - gitlab_shared_runners_enabled = Gitlab.config.gitlab_ci.shared_runners_enabled %p{ "aria-label" => "#{gitlab_shared_runners}: status " + (gitlab_shared_runners_enabled ? "on" : "off") } = gitlab_shared_runners - %span.light.pull-right + %span.light.float-right = boolean_to_icon gitlab_shared_runners_enabled .col-md-4 .info-well @@ -126,44 +126,44 @@ %h4 Components - if Gitlab::CurrentSettings.version_check_enabled - .pull-right + .float-right = version_status_badge %p GitLab - %span.pull-right + %span.float-right = Gitlab::VERSION = "(#{Gitlab.revision})" %p GitLab Shell - %span.pull-right + %span.float-right = Gitlab::Shell.new.version %p GitLab Workhorse - %span.pull-right + %span.float-right = gitlab_workhorse_version %p GitLab API - %span.pull-right + %span.float-right = API::API::version - if Gitlab.config.pages.enabled %p GitLab Pages - %span.pull-right + %span.float-right = Gitlab::Pages::VERSION = render_if_exists 'geo' %p Ruby - %span.pull-right + %span.float-right #{RUBY_VERSION}p#{RUBY_PATCHLEVEL} %p Rails - %span.pull-right + %span.float-right #{Rails::VERSION::STRING} %p = Gitlab::Database.adapter_name - %span.pull-right + %span.float-right = Gitlab::Database.version %p = link_to "Gitaly Servers", admin_gitaly_servers_path @@ -175,7 +175,7 @@ - @projects.each do |project| %p = link_to project.full_name, [:admin, project.namespace.becomes(Namespace), project], class: 'str-truncated-60' - %span.light.pull-right + %span.light.float-right #{time_ago_with_tooltip(project.created_at)} .col-md-4 .info-well @@ -185,7 +185,7 @@ %p = link_to [:admin, user], class: 'str-truncated-60' do = user.name - %span.light.pull-right + %span.light.float-right #{time_ago_with_tooltip(user.created_at)} .col-md-4 .info-well @@ -195,5 +195,5 @@ %p = link_to [:admin, group], class: 'str-truncated-60' do = group.full_name - %span.light.pull-right + %span.light.float-right #{time_ago_with_tooltip(group.created_at)} diff --git a/app/views/admin/deploy_keys/edit.html.haml b/app/views/admin/deploy_keys/edit.html.haml index 3a59282e578..b50adef362f 100644 --- a/app/views/admin/deploy_keys/edit.html.haml +++ b/app/views/admin/deploy_keys/edit.html.haml @@ -3,7 +3,7 @@ %hr %div - = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form form-horizontal' } do |f| + = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f| = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key } .form-actions = f.submit 'Save changes', class: 'btn-save btn' diff --git a/app/views/admin/deploy_keys/index.html.haml b/app/views/admin/deploy_keys/index.html.haml index 1420163fd5a..52ab8bae119 100644 --- a/app/views/admin/deploy_keys/index.html.haml +++ b/app/views/admin/deploy_keys/index.html.haml @@ -2,7 +2,7 @@ %h3.page-title.deploy-keys-title Public deploy keys (#{@deploy_keys.count}) - .pull-right + .float-right = link_to 'New deploy key', new_admin_deploy_key_path, class: 'btn btn-new btn-sm btn-inverted' - if @deploy_keys.any? @@ -29,6 +29,6 @@ %span.cgray added #{time_ago_with_tooltip(deploy_key.created_at)} %td - .pull-right + .float-right = link_to 'Edit', edit_admin_deploy_key_path(deploy_key), class: 'btn btn-sm' = link_to 'Remove', admin_deploy_key_path(deploy_key), data: { confirm: 'Are you sure?'}, method: :delete, class: 'btn btn-sm btn-remove delete-key' diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml index 13f5259698f..d4f8e340b69 100644 --- a/app/views/admin/deploy_keys/new.html.haml +++ b/app/views/admin/deploy_keys/new.html.haml @@ -3,7 +3,7 @@ %hr %div - = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form form-horizontal' } do |f| + = form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f| = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key } .form-actions = f.submit 'Create', class: 'btn-create btn' diff --git a/app/views/admin/gitaly_servers/index.html.haml b/app/views/admin/gitaly_servers/index.html.haml index 231f94dc95d..d0cf5761726 100644 --- a/app/views/admin/gitaly_servers/index.html.haml +++ b/app/views/admin/gitaly_servers/index.html.haml @@ -6,7 +6,7 @@ - if @gitaly_servers.any? .table-holder %table.table.responsive-table - %thead.hidden-sm.hidden-xs + %thead.d-none.d-sm-none.d-md-block %tr %th= _("Storage") %th= n_("Gitaly|Address") diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml index d9f05003904..dc4dccc9e0d 100644 --- a/app/views/admin/groups/_form.html.haml +++ b/app/views/admin/groups/_form.html.haml @@ -1,23 +1,23 @@ -= form_for [:admin, @group], html: { class: "form-horizontal" } do |f| += form_for [:admin, @group] do |f| = form_errors(@group) = render 'shared/group_form', f: f - .form-group.group-description-holder - = f.label :avatar, "Group avatar", class: 'control-label' + .form-group.row.group-description-holder + = f.label :avatar, "Group avatar", class: 'col-form-label col-sm-2' .col-sm-10 = render 'shared/choose_group_avatar_button', f: f = render 'shared/visibility_level', f: f, visibility_level: visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 = render 'shared/allow_request_access', form: f = render 'groups/group_admin_settings', f: f - if @group.new_record? - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 .alert.alert-info = render 'shared/group_tips' .form-actions diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml index 47cc2d4d27e..e7c70a6f187 100644 --- a/app/views/admin/groups/_group.html.haml +++ b/app/views/admin/groups/_group.html.haml @@ -5,7 +5,7 @@ = link_to 'Edit', admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'btn' = link_to 'Delete', [:admin, group], data: { confirm: "Are you sure you want to remove #{group.name}?" }, method: :delete, class: 'btn btn-remove' .stats - %span.badge + %span.badge.badge-pill = storage_counter(group.storage_size) %span @@ -20,7 +20,7 @@ = visibility_level_icon(group.visibility_level, fw: false) .avatar-container.s40 - = group_icon(group, class: "avatar s40 hidden-xs") + = group_icon(group, class: "avatar s40 d-none d-sm-block") .title = link_to [:admin, group], class: 'group-name' do = group.full_name diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml index 324f3c0a22f..5ec612d0c72 100644 --- a/app/views/admin/groups/show.html.haml +++ b/app/views/admin/groups/show.html.haml @@ -4,14 +4,14 @@ %h3.page-title Group: #{@group.full_name} - = link_to admin_group_edit_path(@group), class: "btn pull-right" do + = link_to admin_group_edit_path(@group), class: "btn float-right" do %i.fa.fa-pencil-square-o Edit %hr .row .col-md-6 - .panel.panel-default - .panel-heading + .card + .card-header Group info: %ul.well-list %li @@ -58,46 +58,46 @@ = group_lfs_status(@group) = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs') - .panel.panel-default - .panel-heading - %h3.panel-title + .card + .card-header + %h3.card-title Projects - %span.badge + %span.badge.badge-pill #{@group.projects.count} %ul.well-list - @projects.each do |project| %li %strong = link_to project.full_name, [:admin, project.namespace.becomes(Namespace), project] - %span.badge + %span.badge.badge-pill = storage_counter(project.statistics.storage_size) - %span.pull-right.light + %span.float-right.light %span.monospace= project.full_path + '.git' - .panel-footer + .card-footer = paginate @projects, param_name: 'projects_page', theme: 'gitlab' - if @group.shared_projects.any? - .panel.panel-default - .panel-heading + .card + .card-header Projects shared with #{@group.name} - %span.badge + %span.badge.badge-pill #{@group.shared_projects.count} %ul.well-list - @group.shared_projects.sort_by(&:name).each do |project| %li %strong = link_to project.full_name, [:admin, project.namespace.becomes(Namespace), project] - %span.badge + %span.badge.badge-pill = storage_counter(project.statistics.storage_size) - %span.pull-right.light + %span.float-right.light %span.monospace= project.full_path + '.git' .col-md-6 - if can?(current_user, :admin_group_member, @group) - .panel.panel-default - .panel-heading + .card + .card-header Add user(s) to the group: - .panel-body.form-holder + .card-body.form-holder %p.light Read more about project permissions %strong= link_to "here", help_page_path("user/permissions"), class: "vlink" @@ -111,14 +111,14 @@ = button_tag 'Add users to group', class: "btn btn-create" = render 'shared/members/requests', membership_source: @group, requesters: @requesters, force_mobile_view: true - .panel.panel-default - .panel-heading + .card + .card-header %strong= @group.name group members - %span.badge= @group.members.size - .pull-right - = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-xs" + %span.badge.badge-pill= @group.members.size + .float-right + = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-sm" %ul.well-list.group-users-list.content-list.members-list = render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false } - .panel-footer + .card-footer = paginate @members, param_name: 'members_page', theme: 'gitlab' diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml index e31fb58b205..d51ac854b04 100644 --- a/app/views/admin/health_check/show.html.haml +++ b/app/views/admin/health_check/show.html.haml @@ -5,7 +5,7 @@ %div{ class: container_class } %h3.page-title= page_title .bs-callout.clearfix - .pull-left + .float-left %p #{ s_('HealthCheck|Access token is') } %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token @@ -25,8 +25,8 @@ %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token) %hr - .panel.panel-default - .panel-heading + .card + .card-header Current Status: - if no_errors = icon('circle', class: 'cgreen') @@ -34,7 +34,7 @@ - else = icon('warning', class: 'cred') #{ s_('HealthCheck|Unhealthy') } - .panel-body + .card-body - if no_errors #{ s_('HealthCheck|No Health Problems Detected') } - else diff --git a/app/views/admin/hook_logs/_index.html.haml b/app/views/admin/hook_logs/_index.html.haml index 91a8c0c62fe..1d7c9930b6a 100644 --- a/app/views/admin/hook_logs/_index.html.haml +++ b/app/views/admin/hook_logs/_index.html.haml @@ -18,8 +18,8 @@ %tr %td = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log } - %td.hidden-xs - %span.label.label-gray.deploy-project-label + %td.d-none.d-sm-block + %span.badge.badge-gray.deploy-project-label = hook_log.trigger.singularize.titleize %td = truncate(hook_log.url, length: 50) diff --git a/app/views/admin/hook_logs/show.html.haml b/app/views/admin/hook_logs/show.html.haml index 56127bacda2..2eb3ac85722 100644 --- a/app/views/admin/hook_logs/show.html.haml +++ b/app/views/admin/hook_logs/show.html.haml @@ -4,7 +4,7 @@ %hr -= link_to 'Resend Request', retry_admin_hook_hook_log_path(@hook, @hook_log), class: "btn btn-default pull-right prepend-left-10" += link_to 'Resend Request', retry_admin_hook_hook_log_path(@hook, @hook_log), class: "btn btn-default float-right prepend-left-10" = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log } diff --git a/app/views/admin/hooks/_form.html.haml b/app/views/admin/hooks/_form.html.haml index a6324a97fd5..e54dbd20ef4 100644 --- a/app/views/admin/hooks/_form.html.haml +++ b/app/views/admin/hooks/_form.html.haml @@ -6,39 +6,39 @@ .form-group = form.label :token, 'Secret Token', class: 'label-light' = form.text_field :token, class: 'form-control' - %p.help-block + %p.form-text.text-muted Use this token to validate received payloads .form-group = form.label :url, 'Trigger', class: 'label-light' %ul.list-unstyled %li - .help-block + .form-text.text-muted System hook will be triggered on set of events like creating project or adding ssh key. But you can also enable extra triggers like Push events. .prepend-top-default - = form.check_box :repository_update_events, class: 'pull-left' + = form.check_box :repository_update_events, class: 'float-left' .prepend-left-20 = form.label :repository_update_events, class: 'list-label' do %strong Repository update events %p.light This URL will be triggered when repository is updated %li - = form.check_box :push_events, class: 'pull-left' + = form.check_box :push_events, class: 'float-left' .prepend-left-20 = form.label :push_events, class: 'list-label' do %strong Push events %p.light This URL will be triggered for each branch updated to the repository %li - = form.check_box :tag_push_events, class: 'pull-left' + = form.check_box :tag_push_events, class: 'float-left' .prepend-left-20 = form.label :tag_push_events, class: 'list-label' do %strong Tag push events %p.light This URL will be triggered when a new tag is pushed to the repository %li - = form.check_box :merge_requests_events, class: 'pull-left' + = form.check_box :merge_requests_events, class: 'float-left' .prepend-left-20 = form.label :merge_requests_events, class: 'list-label' do %strong Merge request events @@ -46,7 +46,7 @@ This URL will be triggered when a merge request is created/updated/merged .form-group = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox' - .checkbox + .form-check = form.label :enable_ssl_verification do = form.check_box :enable_ssl_verification %strong Enable SSL verification diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml index 629b1a9940f..b9a650e1f1f 100644 --- a/app/views/admin/hooks/edit.html.haml +++ b/app/views/admin/hooks/edit.html.haml @@ -9,12 +9,12 @@ %hr -= form_for @hook, as: :hook, url: admin_hook_path, html: { class: 'form-horizontal' } do |f| += form_for @hook, as: :hook, url: admin_hook_path do |f| = render partial: 'form', locals: { form: f, hook: @hook } .form-actions = f.submit 'Save changes', class: 'btn btn-create' = render 'shared/web_hooks/test_button', triggers: SystemHook.triggers, hook: @hook - = link_to 'Remove', admin_hook_path(@hook), method: :delete, class: 'btn btn-remove pull-right', data: { confirm: 'Are you sure?' } + = link_to 'Remove', admin_hook_path(@hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: 'Are you sure?' } %hr diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml index d9e2ce5e74c..87f9b0e86a7 100644 --- a/app/views/admin/hooks/index.html.haml +++ b/app/views/admin/hooks/index.html.haml @@ -15,8 +15,8 @@ %hr - if @hooks.any? - .panel.panel-default - .panel-heading + .card + .card-header System hooks (#{@hooks.count}) %ul.content-list - @hooks.each do |hook| @@ -29,7 +29,7 @@ %div - SystemHook.triggers.each_value do |event| - if hook.public_send(event) - %span.label.label-gray= event.to_s.titleize - %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'} + %span.badge.badge-gray= event.to_s.titleize + %span.badge.badge-gray SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'} = render 'shared/plugins/index' diff --git a/app/views/admin/identities/_form.html.haml b/app/views/admin/identities/_form.html.haml index 5381b854f5c..231c0f70882 100644 --- a/app/views/admin/identities/_form.html.haml +++ b/app/views/admin/identities/_form.html.haml @@ -1,13 +1,13 @@ -= form_for [:admin, @user, @identity], html: { class: 'form-horizontal fieldset-form' } do |f| += form_for [:admin, @user, @identity], html: { class: 'fieldset-form' } do |f| = form_errors(@identity) - .form-group - = f.label :provider, class: 'control-label' + .form-group.row + = f.label :provider, class: 'col-form-label col-sm-2' .col-sm-10 - values = Gitlab::Auth::OAuth::Provider.providers.map { |name| ["#{Gitlab::Auth::OAuth::Provider.label_for(name)} (#{name})", name] } = f.select :provider, values, { allow_blank: false }, class: 'form-control' - .form-group - = f.label :extern_uid, "Identifier", class: 'control-label' + .form-group.row + = f.label :extern_uid, "Identifier", class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :extern_uid, class: 'form-control', required: true diff --git a/app/views/admin/identities/_identity.html.haml b/app/views/admin/identities/_identity.html.haml index ef5a3f1d969..50fe9478a78 100644 --- a/app/views/admin/identities/_identity.html.haml +++ b/app/views/admin/identities/_identity.html.haml @@ -4,9 +4,9 @@ %td = identity.extern_uid %td - = link_to edit_admin_user_identity_path(@user, identity), class: 'btn btn-xs btn-grouped' do + = link_to edit_admin_user_identity_path(@user, identity), class: 'btn btn-sm btn-grouped' do Edit = link_to [:admin, @user, identity], method: :delete, - class: 'btn btn-xs btn-danger', + class: 'btn btn-sm btn-danger', data: { confirm: "Are you sure you want to remove this identity?" } do Delete diff --git a/app/views/admin/identities/index.html.haml b/app/views/admin/identities/index.html.haml index ff67e59cdac..ee51fb3fda1 100644 --- a/app/views/admin/identities/index.html.haml +++ b/app/views/admin/identities/index.html.haml @@ -1,7 +1,7 @@ - page_title "Identities", @user.name, "Users" = render 'admin/users/head' -= link_to 'New identity', new_admin_user_identity_path, class: 'pull-right btn btn-new' += link_to 'New identity', new_admin_user_identity_path, class: 'float-right btn btn-new' - if @identities.present? .table-holder %table.table diff --git a/app/views/admin/labels/_form.html.haml b/app/views/admin/labels/_form.html.haml index d5e6bede36a..ee51b44e83e 100644 --- a/app/views/admin/labels/_form.html.haml +++ b/app/views/admin/labels/_form.html.haml @@ -1,21 +1,22 @@ -= form_for [:admin, @label], html: { class: 'form-horizontal label-form js-requires-input' } do |f| += form_for [:admin, @label], html: { class: 'label-form js-requires-input' } do |f| = form_errors(@label) - .form-group - = f.label :title, class: 'control-label' + .form-group.row + = f.label :title, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :title, class: "form-control", required: true - .form-group - = f.label :description, class: 'control-label' + .form-group.row + = f.label :description, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :description, class: "form-control js-quick-submit" - .form-group - = f.label :color, "Background color", class: 'control-label' + .form-group.row + = f.label :color, "Background color", class: 'col-form-label col-sm-2' .col-sm-10 .input-group - .input-group-addon.label-color-preview + .input-group-prepend + .input-group-text.label-color-preview = f.text_field :color, class: "form-control" - .help-block + .form-text.text-muted Choose any color. %br Or you can choose one of suggested colors below diff --git a/app/views/admin/labels/_label.html.haml b/app/views/admin/labels/_label.html.haml index 77b174fbb27..009a47dd517 100644 --- a/app/views/admin/labels/_label.html.haml +++ b/app/views/admin/labels/_label.html.haml @@ -2,6 +2,6 @@ .label-row = render_colored_label(label, tooltip: false) = markdown_field(label, :description) - .pull-right + .float-right = link_to 'Edit', edit_admin_label_path(label), class: 'btn btn-sm' = link_to 'Delete', admin_label_path(label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Delete this label? Are you sure?"} diff --git a/app/views/admin/labels/destroy.js.haml b/app/views/admin/labels/destroy.js.haml index 9d51762890f..7a0dcbdd1c6 100644 --- a/app/views/admin/labels/destroy.js.haml +++ b/app/views/admin/labels/destroy.js.haml @@ -1,2 +1,2 @@ - if @labels.size == 0 - $('.labels').load(document.URL + ' .light-well').hide().fadeIn(1000) + $('.labels').load(document.URL + ' .card.bg-light').hide().fadeIn(1000) diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml index 05d6b9ed238..add38fb333e 100644 --- a/app/views/admin/labels/index.html.haml +++ b/app/views/admin/labels/index.html.haml @@ -1,7 +1,7 @@ - page_title "Labels" %div - = link_to new_admin_label_path, class: "pull-right btn btn-nr btn-new" do + = link_to new_admin_label_path, class: "float-right btn btn-nr btn-new" do New label %h3.page-title Labels @@ -13,6 +13,6 @@ = render @labels = paginate @labels, theme: 'gitlab' - else - .light-well + .card.bg-light .nothing-here-block There are no labels yet diff --git a/app/views/admin/logs/show.html.haml b/app/views/admin/logs/show.html.haml index 78757b6384f..a6c436cd1f4 100644 --- a/app/views/admin/logs/show.html.haml +++ b/app/views/admin/logs/show.html.haml @@ -2,7 +2,7 @@ - page_title "Logs" %div{ class: container_class } - %ul.nav-links.log-tabs + %ul.nav-links.log-tabs.nav.nav-tabs - @loggers.each do |klass| %li{ class: active_when(klass == @loggers.first) }> = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' } @@ -15,7 +15,7 @@ .js-file-title.file-title %i.fa.fa-file = klass.file_name - .pull-right + .float-right = link_to '#', class: 'log-bottom' do %i.fa.fa-arrow-down Scroll down diff --git a/app/views/admin/projects/_projects.html.haml b/app/views/admin/projects/_projects.html.haml index b5d7b889504..00933d726d9 100644 --- a/app/views/admin/projects/_projects.html.haml +++ b/app/views/admin/projects/_projects.html.haml @@ -12,10 +12,10 @@ = s_('AdminProjects|Delete') .stats - %span.badge + %span.badge.badge-pill = storage_counter(project.statistics.storage_size) - if project.archived - %span.label.label-warning archived + %span.badge.badge-warning archived .title = link_to [:admin, project.namespace.becomes(Namespace), project] do .dash-project-avatar diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml index c37d8ac45b9..57de792f92d 100644 --- a/app/views/admin/projects/index.html.haml +++ b/app/views/admin/projects/index.html.haml @@ -15,7 +15,7 @@ - namespace = Namespace.find(params[:namespace_id]) - toggle_text = "#{namespace.kind}: #{namespace.full_path}" = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' }) - .dropdown-menu.dropdown-select.dropdown-menu-align-right + .dropdown-menu.dropdown-select.dropdown-menu-right = dropdown_title('Namespaces') = dropdown_filter("Search for Namespace") = dropdown_content @@ -25,7 +25,7 @@ New Project = button_tag "Search", class: "btn btn-primary btn-search hide" - %ul.nav-links + %ul.nav-links.nav.nav-tabs - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path } = nav_link(opts) do = link_to admin_projects_path do diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml index 75ca5106fd5..29ec712b6b7 100644 --- a/app/views/admin/projects/show.html.haml +++ b/app/views/admin/projects/show.html.haml @@ -3,15 +3,15 @@ - page_title @project.full_name, "Projects" %h3.page-title Project: #{@project.full_name} - = link_to edit_project_path(@project), class: "btn btn-nr pull-right" do + = link_to edit_project_path(@project), class: "btn btn-nr float-right" do %i.fa.fa-pencil-square-o Edit %hr - if @project.last_repository_check_failed? .row .col-md-12 - .panel - .panel-heading.alert.alert-danger + .card + .card-header.alert.alert-danger Last repository check = "(#{time_ago_with_tooltip(@project.last_repository_check_at)})" failed. See @@ -19,8 +19,8 @@ for error messages. .row .col-md-6 - .panel.panel-default - .panel-heading + .card + .card-header Project info: %ul.well-list %li @@ -110,13 +110,13 @@ = visibility_level_icon(@project.visibility_level) = visibility_level_label(@project.visibility_level) - .panel.panel-default - .panel-heading + .card + .card-header Transfer project - .panel-body - = form_for @project, url: transfer_admin_project_path(@project), method: :put, html: { class: 'form-horizontal' } do |f| - .form-group - = f.label :new_namespace_id, "Namespace", class: 'control-label' + .card-body + = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f| + .form-group.row + = f.label :new_namespace_id, "Namespace", class: 'col-form-label col-sm-2' .col-sm-10 .dropdown = dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id' }, { toggle_class: 'js-namespace-select large' }) @@ -126,14 +126,14 @@ = dropdown_content = dropdown_loading - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 = f.submit 'Transfer', class: 'btn btn-primary' - .panel.panel-default.repository-check - .panel-heading + .card.repository-check + .card-header Repository check - .panel-body + .card-body = form_for @project, url: repository_check_admin_project_path(@project), method: :post do |f| .form-group - if @project.last_repository_check_at.nil? @@ -158,29 +158,29 @@ .col-md-6 - if @group - .panel.panel-default - .panel-heading + .card + .card-header %strong= @group.name group members - %span.badge= @group_members.size - .pull-right - = link_to admin_group_path(@group), class: 'btn btn-xs' do + %span.badge.badge-pill= @group_members.size + .float-right + = link_to admin_group_path(@group), class: 'btn btn-sm' do = icon('pencil-square-o', text: 'Manage access') %ul.well-list.content-list.members-list = render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false } - .panel-footer + .card-footer = paginate @group_members, param_name: 'group_members_page', theme: 'gitlab' = render 'shared/members/requests', membership_source: @project, requesters: @requesters, force_mobile_view: true - .panel.panel-default - .panel-heading + .card + .card-header %strong= @project.name project members - %span.badge= @project.users.size - .pull-right - = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-xs" + %span.badge.badge-pill= @project.users.size + .float-right + = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-sm" %ul.well-list.project_members.content-list.members-list = render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false } - .panel-footer + .card-footer = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab' diff --git a/app/views/admin/requests_profiles/index.html.haml b/app/views/admin/requests_profiles/index.html.haml index cb02a750490..adfc67d66d0 100644 --- a/app/views/admin/requests_profiles/index.html.haml +++ b/app/views/admin/requests_profiles/index.html.haml @@ -13,8 +13,8 @@ - if @profiles.present? .prepend-top-default - @profiles.each do |path, profiles| - .panel.panel-default.panel-small - .panel-heading + .card.card-small + .card-header %code= path %ul.content-list - profiles.each do |profile| diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml index 99fbbaec487..a6cd39edcf0 100644 --- a/app/views/admin/runners/_runner.html.haml +++ b/app/views/admin/runners/_runner.html.haml @@ -1,15 +1,15 @@ %tr{ id: dom_id(runner) } %td - if runner.shared? - %span.label.label-success shared + %span.badge.badge-success shared - elsif runner.group_type? - %span.label.label-success group + %span.badge.badge-success group - else - %span.label.label-info specific + %span.badge.badge-info specific - if runner.locked? - %span.label.label-warning locked + %span.badge.badge-warning locked - unless runner.active? - %span.label.label-danger paused + %span.badge.badge-danger paused %td = link_to admin_runner_path(runner) do @@ -29,7 +29,7 @@ #{runner.builds.count(:all)} %td - runner.tag_list.sort.each do |tag| - %span.label.label-primary + %span.badge.badge-primary = tag %td - if runner.contacted_at @@ -37,7 +37,7 @@ - else Never %td.admin-runner-btn-group-cell - .pull-right.btn-group + .float-right.btn-group = link_to admin_runner_path(runner), class: 'btn btn-sm btn-default has-tooltip', title: 'Edit', ref: 'tooltip', aria: { label: 'Edit' }, data: { placement: 'top', container: 'body'} do = icon('pencil') diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml index e49bf1cffc8..f38aeb151df 100644 --- a/app/views/admin/runners/index.html.haml +++ b/app/views/admin/runners/index.html.haml @@ -14,23 +14,23 @@ %span Each Runner can be in one of the following states: %ul %li - %span.label.label-success shared + %span.badge.badge-success shared \- Runner runs jobs from all unassigned projects %li - %span.label.label-success group + %span.badge.badge-success group \- Runner runs jobs from all unassigned projects in its group %li - %span.label.label-info specific + %span.badge.badge-info specific \- Runner runs jobs from assigned projects %li - %span.label.label-warning locked + %span.badge.badge-warning locked \- Runner cannot be assigned to other projects %li - %span.label.label-danger paused + %span.badge.badge-danger paused \- Runner will not receive any new jobs .bs-callout.clearfix - .pull-left + .float-left %p You can reset runners registration token by pressing a button below. .prepend-top-10 @@ -42,13 +42,13 @@ locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token } .append-bottom-20.clearfix - .pull-left + .float-left = form_tag admin_runners_path, id: 'runners-search', class: 'form-inline', method: :get do .form-group = search_field_tag :search, params[:search], class: 'form-control input-short', placeholder: 'Runner description or token', spellcheck: false = submit_tag 'Search', class: 'btn' - .pull-right.light + .float-right.light Runners with last contact more than a minute ago: #{@active_runners_cnt} %br diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml index 73fadc042b1..8a0c2bf4c5f 100644 --- a/app/views/admin/runners/show.html.haml +++ b/app/views/admin/runners/show.html.haml @@ -1,7 +1,7 @@ = content_for :title do %h3.project-title Runner ##{@runner.id} - .pull-right + .float-right - if @runner.shared? %span.runner-state.runner-state-shared Shared @@ -48,8 +48,8 @@ %strong = project.full_name %td - .pull-right - = link_to 'Disable', [:admin, project.namespace.becomes(Namespace), project, runner_project], method: :delete, class: 'btn btn-danger btn-xs' + .float-right + = link_to 'Disable', [:admin, project.namespace.becomes(Namespace), project, runner_project], method: :delete, class: 'btn btn-danger btn-sm' %table.table.unassigned-projects %thead @@ -70,10 +70,10 @@ %td = project.full_name %td - .pull-right + .float-right = form_for [:admin, project.namespace.becomes(Namespace), project, project.runner_projects.new] do |f| = f.hidden_field :runner_id, value: @runner.id - = f.submit 'Enable', class: 'btn btn-xs' + = f.submit 'Enable', class: 'btn btn-sm' = paginate @projects, theme: "gitlab" .col-md-6 diff --git a/app/views/admin/services/_form.html.haml b/app/views/admin/services/_form.html.haml index e5b8ebdf613..144dceacbdd 100644 --- a/app/views/admin/services/_form.html.haml +++ b/app/views/admin/services/_form.html.haml @@ -3,7 +3,7 @@ %p #{@service.description} template -= form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'form-horizontal fieldset-form' } do |form| += form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'fieldset-form' } do |form| = render 'shared/service_settings', form: form, subject: @service .footer-block.row-content-block diff --git a/app/views/admin/spam_logs/_spam_log.html.haml b/app/views/admin/spam_logs/_spam_log.html.haml index ea6a0c4fb77..9d47dc1cce5 100644 --- a/app/views/admin/spam_logs/_spam_log.html.haml +++ b/app/views/admin/spam_logs/_spam_log.html.haml @@ -24,16 +24,16 @@ %td - if user = link_to 'Remove user', admin_spam_log_path(spam_log, remove_user: true), - data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "btn btn-xs btn-remove" + data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "btn btn-sm btn-remove" %td - if spam_log.submitted_as_ham? - .btn.btn-xs.disabled + .btn.btn-sm.disabled Submitted as ham - else - = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'btn btn-xs btn-warning' + = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'btn btn-sm btn-warning' - if user && !user.blocked? - = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-xs" + = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-sm" - else - .btn.btn-xs.disabled + .btn.btn-sm.disabled Already blocked - = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "btn btn-xs btn-close js-remove-tr" + = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "btn btn-sm btn-close js-remove-tr" diff --git a/app/views/admin/system_info/show.html.haml b/app/views/admin/system_info/show.html.haml index 23f9927cfee..b19934e028d 100644 --- a/app/views/admin/system_info/show.html.haml +++ b/app/views/admin/system_info/show.html.haml @@ -5,7 +5,7 @@ .prepend-top-default .row .col-sm-4 - .light-well + .card.bg-light.light-well %h4 CPU .data - if @cpus @@ -14,7 +14,7 @@ = icon('warning', class: 'text-warning') Unable to collect CPU info .col-sm-4 - .light-well + .card.bg-light.light-well %h4 Memory Usage .data - if @memory @@ -23,7 +23,7 @@ = icon('warning', class: 'text-warning') Unable to collect memory info .col-sm-4 - .light-well + .card.bg-light.light-well %h4 Disk Usage .data - @disks.each do |disk| @@ -31,7 +31,7 @@ %p= disk[:disk_name] %p= disk[:mount_path] .col-sm-4 - .light-well + .card.bg-light.light-well %h4 Uptime .data %h1= distance_of_time_in_words_to_now(Rails.application.config.booted_at) diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml index 794aaec89bd..35a331283ab 100644 --- a/app/views/admin/users/_access_levels.html.haml +++ b/app/views/admin/users/_access_levels.html.haml @@ -1,15 +1,15 @@ %fieldset %legend Access .form-group - = f.label :projects_limit, class: 'control-label' + = f.label :projects_limit, class: 'col-form-label' .col-sm-10= f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control' .form-group - = f.label :can_create_group, class: 'control-label' + = f.label :can_create_group, class: 'col-form-label' .col-sm-10= f.check_box :can_create_group .form-group - = f.label :access_level, class: 'control-label' + = f.label :access_level, class: 'col-form-label' .col-sm-10 - editing_current_user = (current_user == @user) @@ -29,7 +29,7 @@ You cannot remove your own admin rights. .form-group - = f.label :external, class: 'control-label' + = f.label :external, class: 'col-form-label' .col-sm-10 = f.check_box :external do External diff --git a/app/views/admin/users/_form.html.haml b/app/views/admin/users/_form.html.haml index e911af3f6f9..010cb2ac354 100644 --- a/app/views/admin/users/_form.html.haml +++ b/app/views/admin/users/_form.html.haml @@ -1,21 +1,21 @@ .user_new - = form_for [:admin, @user], html: { class: 'form-horizontal fieldset-form' } do |f| + = form_for [:admin, @user], html: { class: 'fieldset-form' } do |f| = form_errors(@user) %fieldset %legend Account - .form-group - = f.label :name, class: 'control-label' + .form-group.row + = f.label :name, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control' %span.help-inline * required - .form-group - = f.label :username, class: 'control-label' + .form-group.row + = f.label :username, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control' %span.help-inline * required - .form-group - = f.label :email, class: 'control-label' + .form-group.row + = f.label :email, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control' %span.help-inline * required @@ -23,8 +23,8 @@ - if @user.new_record? %fieldset %legend Password - .form-group - = f.label :password, class: 'control-label' + .form-group.row + = f.label :password, class: 'col-form-label col-sm-2' .col-sm-10 %strong Reset link will be generated and sent to the user. @@ -33,33 +33,33 @@ - else %fieldset %legend Password - .form-group - = f.label :password, class: 'control-label' + .form-group.row + = f.label :password, class: 'col-form-label col-sm-2' .col-sm-10= f.password_field :password, disabled: f.object.force_random_password, class: 'form-control' - .form-group - = f.label :password_confirmation, class: 'control-label' + .form-group.row + = f.label :password_confirmation, class: 'col-form-label col-sm-2' .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control' = render partial: 'access_levels', locals: { f: f } %fieldset %legend Profile - .form-group - = f.label :avatar, class: 'control-label' + .form-group.row + = f.label :avatar, class: 'col-form-label col-sm-2' .col-sm-10 = f.file_field :avatar - .form-group - = f.label :skype, class: 'control-label' + .form-group.row + = f.label :skype, class: 'col-form-label col-sm-2' .col-sm-10= f.text_field :skype, class: 'form-control' - .form-group - = f.label :linkedin, class: 'control-label' + .form-group.row + = f.label :linkedin, class: 'col-form-label col-sm-2' .col-sm-10= f.text_field :linkedin, class: 'form-control' - .form-group - = f.label :twitter, class: 'control-label' + .form-group.row + = f.label :twitter, class: 'col-form-label' .col-sm-10= f.text_field :twitter, class: 'form-control' - .form-group - = f.label :website_url, 'Website', class: 'control-label' + .form-group.row + = f.label :website_url, 'Website', class: 'col-form-label col-sm-2' .col-sm-10= f.text_field :website_url, class: 'form-control' .form-actions diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml index be41c33b853..bfbc16d37a0 100644 --- a/app/views/admin/users/_head.html.haml +++ b/app/views/admin/users/_head.html.haml @@ -7,14 +7,14 @@ - if @user.admin %span.cred (Admin) - .pull-right + .float-right - if @user != current_user && @user.can?(:log_in) = link_to 'Impersonate', impersonate_admin_user_path(@user), method: :post, class: "btn btn-nr btn-grouped btn-info" = link_to edit_admin_user_path(@user), class: "btn btn-nr btn-grouped" do %i.fa.fa-pencil-square-o Edit %hr -%ul.nav-links +%ul.nav-links.nav.nav-tabs = nav_link(path: 'users#show') do = link_to "Account", admin_user_path(@user) = nav_link(path: 'users#projects') do diff --git a/app/views/admin/users/_profile.html.haml b/app/views/admin/users/_profile.html.haml index 6bc217f84cc..af22652e07c 100644 --- a/app/views/admin/users/_profile.html.haml +++ b/app/views/admin/users/_profile.html.haml @@ -1,5 +1,5 @@ -.panel.panel-default - .panel-heading +.card + .card-header Profile %ul.well-list %li diff --git a/app/views/admin/users/_projects.html.haml b/app/views/admin/users/_projects.html.haml index a126a858ea8..81cfb71af16 100644 --- a/app/views/admin/users/_projects.html.haml +++ b/app/views/admin/users/_projects.html.haml @@ -1,13 +1,13 @@ - if local_assigns.has_key?(:contributed_projects) && contributed_projects.present? - .panel.panel-default.contributed-projects - .panel-heading Projects contributed to + .card.contributed-projects + .card-header Projects contributed to = render 'shared/projects/list', projects: contributed_projects.sort_by(&:star_count).reverse, projects_limit: 5, stars: true, avatar: false - if local_assigns.has_key?(:projects) && projects.present? - .panel.panel-default - .panel-heading Personal projects + .card + .card-header Personal projects = render 'shared/projects/list', projects: projects.sort_by(&:star_count).reverse, projects_limit: 10, stars: true, avatar: false diff --git a/app/views/admin/users/_user.html.haml b/app/views/admin/users/_user.html.haml index badf3dd74b3..5e176b61d68 100644 --- a/app/views/admin/users/_user.html.haml +++ b/app/views/admin/users/_user.html.haml @@ -5,11 +5,11 @@ .user-name.row-title.str-truncated-100 = link_to user.name, [:admin, user] - if user.blocked? - %span.label.label-danger blocked + %span.badge.badge-danger blocked - if user.admin? - %span.label.label-success Admin + %span.badge.badge-success Admin - if user.external? - %span.label.label-default External + %span.badge.badge-secondary External - if user == current_user %span It's you! .row-second-line.str-truncated-100 @@ -21,7 +21,7 @@ %a.dropdown-new.btn.btn-default#project-settings-button{ href: '#', data: { toggle: 'dropdown' } } = icon('cog') = icon('caret-down') - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right %li.dropdown-header Settings %li @@ -38,7 +38,7 @@ %li.divider - if user.can_be_removed? %li - %button.delete-user-button.btn.text-danger{ data: { toggle: 'modal', + %button.delete-user-button.btn.btn-danger{ data: { toggle: 'modal', target: '#delete-user-modal', delete_user_url: admin_user_path(user), block_user_url: block_admin_user_path(user), @@ -47,7 +47,7 @@ = s_('AdminUsers|Delete user') %li - %button.delete-user-button.btn.text-danger{ data: { toggle: 'modal', + %button.delete-user-button.btn.btn-danger{ data: { toggle: 'modal', target: '#delete-user-modal', delete_user_url: admin_user_path(user, hard_delete: true), block_user_url: block_admin_user_path(user), diff --git a/app/views/admin/users/index.html.haml b/app/views/admin/users/index.html.haml index 10b8bf5d565..faeb82656ba 100644 --- a/app/views/admin/users/index.html.haml +++ b/app/views/admin/users/index.html.haml @@ -13,7 +13,7 @@ .dropdown - toggle_text = if @sort.present? then sort_options_hash[@sort] else sort_title_name end = dropdown_toggle(toggle_text, { toggle: 'dropdown' }) - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right %li.dropdown-header Sort by %li @@ -38,35 +38,35 @@ = icon('angle-left') .fade-right = icon('angle-right') - %ul.nav-links.scrolling-tabs + %ul.nav-links.nav.nav-tabs.scrolling-tabs = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do = link_to admin_users_path do Active - %small.badge= limited_counter_with_delimiter(User.active) + %small.badge.badge-pill= limited_counter_with_delimiter(User.active) = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do = link_to admin_users_path(filter: "admins") do Admins - %small.badge= limited_counter_with_delimiter(User.admins) + %small.badge.badge-pill= limited_counter_with_delimiter(User.admins) = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do = link_to admin_users_path(filter: 'two_factor_enabled') do 2FA Enabled - %small.badge= limited_counter_with_delimiter(User.with_two_factor) + %small.badge.badge-pill= limited_counter_with_delimiter(User.with_two_factor) = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do = link_to admin_users_path(filter: 'two_factor_disabled') do 2FA Disabled - %small.badge= limited_counter_with_delimiter(User.without_two_factor) + %small.badge.badge-pill= limited_counter_with_delimiter(User.without_two_factor) = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do = link_to admin_users_path(filter: 'external') do External - %small.badge= limited_counter_with_delimiter(User.external) + %small.badge.badge-pill= limited_counter_with_delimiter(User.external) = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do = link_to admin_users_path(filter: "blocked") do Blocked - %small.badge= limited_counter_with_delimiter(User.blocked) + %small.badge.badge-pill= limited_counter_with_delimiter(User.blocked) = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do = link_to admin_users_path(filter: "wop") do Without projects - %small.badge= limited_counter_with_delimiter(User.without_projects) + %small.badge.badge-pill= limited_counter_with_delimiter(User.without_projects) %ul.flex-list.content-list - if @users.empty? diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml index 96835ee9af5..469a7bd9715 100644 --- a/app/views/admin/users/projects.html.haml +++ b/app/views/admin/users/projects.html.haml @@ -2,19 +2,19 @@ = render 'admin/users/head' - if @user.groups.any? - .panel.panel-default - .panel-heading Group projects - %ul.well-list + .card + .card-header Group projects + %ul.card-body-list - @user.group_members.includes(:source).each do |group_member| - group = group_member.group %li.group_member %strong= link_to group.name, admin_group_path(group) – access to #{pluralize(group.projects.count, 'project')} - .pull-right + .float-right %span.light.vertical-align-middle= group_member.human_access - unless group_member.owner? - = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-xs btn btn-remove prepend-left-10", title: 'Remove user from group' do + = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-sm btn btn-remove prepend-left-10", title: 'Remove user from group' do %i.fa.fa-times.fa-inverse .row @@ -26,9 +26,9 @@ .col-md-6 - .panel.panel-default - .panel-heading Joined projects (#{@joined_projects.count}) - %ul.well-list + .card + .card-header Joined projects (#{@joined_projects.count}) + %ul.card-body-list - @joined_projects.sort_by(&:full_name).each do |project| - member = project.team.find_member(@user.id) %li.project_member @@ -37,12 +37,12 @@ = project.full_name - if member - .pull-right + .float-right - if member.owner? %span.light Owner - else %span.light.vertical-align-middle= member.human_access - if member.respond_to? :project - = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-xs btn btn-remove prepend-left-10", title: 'Remove user from project' do + = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-sm btn btn-remove prepend-left-10", title: 'Remove user from project' do %i.fa.fa-times diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml index 814ccdae8f3..a74fcea65d8 100644 --- a/app/views/admin/users/show.html.haml +++ b/app/views/admin/users/show.html.haml @@ -5,8 +5,8 @@ .row .col-md-6 - .panel.panel-default - .panel-heading + .card + .card-header = @user.name %ul.well-list %li @@ -18,8 +18,8 @@ = @user.username = render 'admin/users/profile', user: @user - .panel.panel-default - .panel-heading + .card + .card-header Account: %ul.well-list %li @@ -37,7 +37,7 @@ %li %span.light Secondary email: %strong= email.email - = link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn-xs btn btn-remove pull-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do + = link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn-sm btn btn-remove float-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do %i.fa.fa-times %li.two-factor-status @@ -45,7 +45,7 @@ %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' } - if @user.two_factor_enabled? Enabled - = link_to 'Disable', disable_two_factor_admin_user_path(@user), data: {confirm: 'Are you sure?'}, method: :patch, class: 'btn btn-xs btn-remove pull-right', title: 'Disable Two-factor Authentication' + = link_to 'Disable', disable_two_factor_admin_user_path(@user), data: {confirm: 'Are you sure?'}, method: :patch, class: 'btn btn-sm btn-remove float-right', title: 'Disable Two-factor Authentication' - else Disabled @@ -128,20 +128,20 @@ .col-md-6 - unless @user == current_user - unless @user.confirmed? - .panel.panel-info - .panel-heading + .card.bg-info + .card-header Confirm user - .panel-body + .card-body - if @user.unconfirmed_email.present? - email = " (#{@user.unconfirmed_email})" %p This user has an unconfirmed email address#{email}. You may force a confirmation. %br = link_to 'Confirm user', confirm_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' } - if @user.blocked? - .panel.panel-info - .panel-heading + .card.bg-info + .card-header This user is blocked - .panel-body + .card-body %p A blocked user cannot: %ul %li Log in @@ -149,10 +149,10 @@ %br = link_to 'Unblock user', unblock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' } - else - .panel.panel-warning - .panel-heading + .card.bg-warning + .card-header Block this user - .panel-body + .card-body %p Blocking user has the following effects: %ul %li User will not be able to login @@ -162,23 +162,23 @@ %br = link_to 'Block user', block_admin_user_path(@user), data: { confirm: 'USER WILL BE BLOCKED! Are you sure?' }, method: :put, class: "btn btn-warning" - if @user.access_locked? - .panel.panel-info - .panel-heading + .card.bg-info + .card-header This account has been locked - .panel-body + .card-body %p This user has been temporarily locked due to excessive number of failed logins. You may manually unlock the account. %br = link_to 'Unlock user', unlock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' } - .panel.panel-danger - .panel-heading + .card.bg-danger + .card-header = s_('AdminUsers|Delete user') - .panel-body + .card-body - if @user.can_be_removed? && can?(current_user, :destroy_user, @user) %p Deleting a user has the following effects: = render 'users/deletion_guidance', user: @user %br - %button.delete-user-button.btn.text-danger{ data: { toggle: 'modal', + %button.delete-user-button.btn.btn-danger{ data: { toggle: 'modal', target: '#delete-user-modal', delete_user_url: admin_user_path(@user), block_user_url: block_admin_user_path(@user), @@ -196,10 +196,10 @@ %p You don't have access to delete this user. - .panel.panel-danger - .panel-heading + .card.bg-danger + .card-header = s_('AdminUsers|Delete user and contributions') - .panel-body + .card-body - if can?(current_user, :destroy_user, @user) %p This option deletes the user and any contributions that @@ -210,7 +210,7 @@ the user, and projects in them, will also be removed. Commits to other projects are unaffected. %br - %button.delete-user-button.btn.text-danger{ data: { toggle: 'modal', + %button.delete-user-button.btn.btn-danger{ data: { toggle: 'modal', target: '#delete-user-modal', delete_user_url: admin_user_path(@user, hard_delete: true), block_user_url: block_admin_user_path(@user), diff --git a/app/views/ci/lints/show.html.haml b/app/views/ci/lints/show.html.haml index 22f149d1caa..d4455749803 100644 --- a/app/views/ci/lints/show.html.haml +++ b/app/views/ci/lints/show.html.haml @@ -1,8 +1,8 @@ .row.empty-state - .col-xs-12 + .col-12 .svg-content = image_tag 'illustrations/feature_moved.svg' - .col-xs-12 + .col-12 .text-content.text-center %h4= _("GitLab CI Linter has been moved") %p diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml index d828f6f971d..8b0463db000 100644 --- a/app/views/ci/status/_dropdown_graph_badge.html.haml +++ b/app/views/ci/status/_dropdown_graph_badge.html.haml @@ -6,12 +6,12 @@ - tooltip = "#{subject.name} - #{status.status_tooltip}" - if status.has_details? - = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, html: true, container: 'body' } do + = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, html: 'true', container: 'body' } do %span{ class: klass }= sprite_icon(status.icon) %span.ci-build-text= subject.name - else - .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', html: true, title: tooltip, container: 'body' } } + .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', html: 'true', title: tooltip, container: 'body' } } %span{ class: klass }= sprite_icon(status.icon) %span.ci-build-text= subject.name diff --git a/app/views/dashboard/_activity_head.html.haml b/app/views/dashboard/_activity_head.html.haml index 7a3f3667ac1..7503548fa3d 100644 --- a/app/views/dashboard/_activity_head.html.haml +++ b/app/views/dashboard/_activity_head.html.haml @@ -1,5 +1,5 @@ .top-area - %ul.nav-links + %ul.nav-links.nav.nav-tabs %li{ class: active_when(params[:filter].nil?) }> = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do Your projects diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml index 617c20b9635..d8f1e50544c 100644 --- a/app/views/dashboard/_groups_head.html.haml +++ b/app/views/dashboard/_groups_head.html.haml @@ -1,5 +1,5 @@ .top-area - %ul.nav-links.mobile-separator + %ul.nav-links.mobile-separator.nav.nav-tabs = nav_link(page: dashboard_groups_path) do = link_to dashboard_groups_path, title: _("Your groups") do Your groups diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 449a2ce625e..9b1d9b659f9 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -4,7 +4,7 @@ .top-area.scrolling-tabs-container.inner-page-scroll-tabs .fade-left= icon('angle-left') .fade-right= icon('angle-right') - %ul.nav-links.scrolling-tabs.mobile-separator + %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs = nav_link(page: [dashboard_projects_path, root_path]) do = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do Your projects diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml index a9488df07bd..e7e323a8683 100644 --- a/app/views/dashboard/_snippets_head.html.haml +++ b/app/views/dashboard/_snippets_head.html.haml @@ -1,5 +1,5 @@ .top-area - %ul.nav-links + %ul.nav-links.nav.nav-tabs = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do Your snippets @@ -8,5 +8,5 @@ Explore snippets - if current_user - .nav-controls.hidden-xs + .nav-controls.d-none.d-sm-block = link_to "New snippet", new_snippet_path, class: "btn btn-new", title: "New snippet" diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml index 97f854cc5f0..da3cf5807b0 100644 --- a/app/views/dashboard/projects/_nav.html.haml +++ b/app/views/dashboard/projects/_nav.html.haml @@ -1,5 +1,5 @@ .nav-block - %ul.nav-links.mobile-separator + %ul.nav-links.mobile-separator.nav.nav-tabs = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do = link_to s_('DashboardProjects|All'), dashboard_projects_path = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml index b1efe59aadc..8933d9e31ff 100644 --- a/app/views/dashboard/projects/starred.html.haml +++ b/app/views/dashboard/projects/starred.html.haml @@ -11,5 +11,5 @@ - if params[:filter_projects] || any_projects?(@projects) = render 'projects' - else - %h3 You don't have starred projects yet + %h3.page-title You don't have starred projects yet %p.slead Visit project page and press on star icon and it will appear on this page. diff --git a/app/views/dashboard/snippets/index.html.haml b/app/views/dashboard/snippets/index.html.haml index e86b1ab3116..4391624196b 100644 --- a/app/views/dashboard/snippets/index.html.haml +++ b/app/views/dashboard/snippets/index.html.haml @@ -5,7 +5,7 @@ = render 'dashboard/snippets_head' = render partial: 'snippets/snippets_scope_menu', locals: { include_private: true } -.visible-xs +.d-block.d-sm-none = link_to new_snippet_path, class: "btn btn-new btn-block", title: "New snippet" do New snippet diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml index 664966989db..d5a9cc646a6 100644 --- a/app/views/dashboard/todos/index.html.haml +++ b/app/views/dashboard/todos/index.html.haml @@ -4,18 +4,18 @@ - if current_user.todos.any? .top-area - %ul.nav-links.mobile-separator + %ul.nav-links.mobile-separator.nav.nav-tabs %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }> = link_to todos_filter_path(state: 'pending') do %span Todos - %span.badge + %span.badge.badge-pill = number_with_delimiter(todos_pending_count) %li.todos-done{ class: active_when(params[:state] == 'done') }> = link_to todos_filter_path(state: 'done') do %span Done - %span.badge + %span.badge.badge-pill = number_with_delimiter(todos_done_count) .nav-controls @@ -35,7 +35,7 @@ - if params[:project_id].present? = hidden_field_tag(:project_id, params[:project_id]) = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit', - placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project' } }) + placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project', display: 'static' } }) .filter-item.inline - if params[:author_id].present? = hidden_field_tag(:author_id, params[:author_id]) @@ -60,7 +60,7 @@ - else = sort_title_recently_created = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-sort + %ul.dropdown-menu.dropdown-menu-sort.dropdown-menu-right %li = link_to todos_filter_path(sort: sort_value_label_priority) do = sort_title_label_priority @@ -73,7 +73,7 @@ - if @todos.any? .js-todos-list-container .js-todos-options{ data: { per_page: @todos.limit_value, current_page: @todos.current_page, total_pages: @todos.total_pages } } - .panel.panel-default.panel-without-border.panel-without-margin + .card.card-without-border.card-without-margin %ul.content-list.todos-list = render @todos = paginate @todos, theme: "gitlab" diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml index 41462f503cb..c45d2214592 100644 --- a/app/views/devise/sessions/_new_base.html.haml +++ b/app/views/devise/sessions/_new_base.html.haml @@ -6,11 +6,11 @@ = f.label :password = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required." - if devise_mapping.rememberable? - .remember-me.checkbox + .remember-me %label{ for: "user_remember_me" } = f.check_box :remember_me, class: 'remember-me-checkbox' %span Remember me - .pull-right.forgot-password + .float-right.forgot-password = link_to "Forgot your password?", new_password_path(:user) .submit-container.move-submit-down = f.submit "Sign in", class: "btn btn-save" diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml index 2556cb6f59b..36ff42090be 100644 --- a/app/views/devise/sessions/_new_crowd.html.haml +++ b/app/views/devise/sessions/_new_crowd.html.haml @@ -6,7 +6,7 @@ = label_tag :password = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true } - if devise_mapping.rememberable? - .remember-me.checkbox + .remember-me %label{ for: "remember_me" } = check_box_tag :remember_me, '1', false, id: 'remember_me' %span Remember me diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml index 3159d21598a..6bf7349f602 100644 --- a/app/views/devise/sessions/_new_ldap.html.haml +++ b/app/views/devise/sessions/_new_ldap.html.haml @@ -6,7 +6,7 @@ = label_tag :password = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true } - if devise_mapping.rememberable? - .remember-me.checkbox + .remember-me %label{ for: "remember_me" } = check_box_tag :remember_me, '1', false, id: 'remember_me' %span Remember me diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml index 6e54b9b5645..ba168c4eab8 100644 --- a/app/views/devise/sessions/two_factor.html.haml +++ b/app/views/devise/sessions/two_factor.html.haml @@ -9,7 +9,7 @@ %div = f.label 'Two-Factor Authentication code', name: :otp_attempt = f.text_field :otp_attempt, class: 'form-control', required: true, autofocus: true, autocomplete: 'off', title: 'This field is required.' - %p.help-block.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes. + %p.form-text.text-muted.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes. .prepend-top-20 = f.submit "Verify code", class: "btn btn-save" diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml index 546cec4d565..3723814debe 100644 --- a/app/views/devise/shared/_omniauth_box.html.haml +++ b/app/views/devise/shared/_omniauth_box.html.haml @@ -7,7 +7,7 @@ %span.light - has_icon = provider_has_icon?(provider) = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: 'oauth-login' + (has_icon ? ' oauth-image-link' : ' btn'), id: "oauth-login-#{provider}" - %fieldset.prepend-top-10.checkbox.remember-me + %fieldset.prepend-top-10.remember-me %label = check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox' %span diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml index 7bd414d64c3..5683b4207b4 100644 --- a/app/views/devise/shared/_tab_single.html.haml +++ b/app/views/devise/shared/_tab_single.html.haml @@ -1,3 +1,3 @@ -%ul.nav-links.new-session-tabs.single-tab - %li.active - %a= tab_title +%ul.nav-links.new-session-tabs.single-tab.nav-tabs.nav + %li.nav-item + %a.nav-link.active= tab_title diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml index f50e0724e09..087af61235b 100644 --- a/app/views/devise/shared/_tabs_ldap.html.haml +++ b/app/views/devise/shared/_tabs_ldap.html.haml @@ -1,13 +1,13 @@ -%ul.nav-links.new-session-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) } +%ul.nav-links.new-session-tabs.nav-tabs.nav{ class: ('custom-provider-tabs' if form_based_providers.any?) } - if crowd_enabled? - %li.active - = link_to "Crowd", "#crowd", 'data-toggle' => 'tab' + %li.nav-item + = link_to "Crowd", "#crowd", class: 'nav-link active', 'data-toggle' => 'tab' - @ldap_servers.each_with_index do |server, i| - %li{ class: active_when(i.zero? && !crowd_enabled?) } - = link_to server['label'], "##{server['provider_name']}", 'data-toggle' => 'tab' + %li.nav-item{ class: active_when(i.zero? && !crowd_enabled?) } + = link_to server['label'], "##{server['provider_name']}", class: 'nav-link', 'data-toggle' => 'tab' - if password_authentication_enabled_for_web? - %li - = link_to 'Standard', '#login-pane', 'data-toggle' => 'tab' + %li.nav-item + = link_to 'Standard', '#login-pane', class: 'nav-link', 'data-toggle' => 'tab' - if allow_signup? - %li - = link_to 'Register', '#register-pane', 'data-toggle' => 'tab' + %li.nav-item + = link_to 'Register', '#register-pane', class: 'nav-link', 'data-toggle' => 'tab' diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml index fa3c3df7f60..284d4fa1b89 100644 --- a/app/views/devise/shared/_tabs_normal.html.haml +++ b/app/views/devise/shared/_tabs_normal.html.haml @@ -1,6 +1,6 @@ -%ul.nav-links.new-session-tabs{ role: 'tablist' } - %li.active{ role: 'presentation' } - %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in +%ul.nav-links.new-session-tabs.nav-tabs.nav{ role: 'tablist' } + %li.nav-item{ role: 'presentation' } + %a.nav-link.active{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in - if allow_signup? - %li{ role: 'presentation' } - %a{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab' } Register + %li.nav-item{ role: 'presentation' } + %a.nav-link{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab' } Register diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml index ebe8c327079..1765251c93d 100644 --- a/app/views/discussions/_discussion.html.haml +++ b/app/views/discussions/_discussion.html.haml @@ -51,5 +51,5 @@ - if discussion.diff_discussion? && discussion.diff_file = render "discussions/diff_with_notes", discussion: discussion - else - .panel.panel-default + .card = render partial: "discussions/notes", locals: { discussion: discussion, disable_collapse_class: true } diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml index 1cc227428e9..30b00ca86b3 100644 --- a/app/views/discussions/_notes.html.haml +++ b/app/views/discussions/_notes.html.haml @@ -11,7 +11,7 @@ - if discussion.try(:on_image?) && show_toggle %button.diff-notes-collapse.js-diff-notes-toggle{ type: 'button' } = sprite_icon('collapse', css_class: 'collapse-icon') - %button.btn-transparent.badge.js-diff-notes-toggle{ type: 'button' } + %button.btn-transparent.badge.badge-pill.js-diff-notes-toggle{ type: 'button' } = badge_counter = render partial: "shared/notes/note", collection: discussion.notes, as: :note, locals: { badge_counter: badge_counter, show_image_comment_badge: show_image_comment_badge } @@ -22,7 +22,7 @@ - if discussion.potentially_resolvable? - line_type = local_assigns.fetch(:line_type, nil) - .btn-group-justified.discussion-with-resolve-btn{ role: "group" } + .btn-group.discussion-with-resolve-btn{ role: "group" } .btn-group{ role: "group" } = link_to_reply_discussion(discussion, line_type) diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/doorkeeper/applications/_form.html.haml index cf0e0de1ca4..be0935b8313 100644 --- a/app/views/doorkeeper/applications/_form.html.haml +++ b/app/views/doorkeeper/applications/_form.html.haml @@ -9,10 +9,10 @@ = f.label :redirect_uri, class: 'label-light' = f.text_area :redirect_uri, class: 'form-control', required: true - %span.help-block + %span.form-text.text-muted Use one line per URI - if Doorkeeper.configuration.native_redirect_uri - %span.help-block + %span.form-text.text-muted Use %code= Doorkeeper.configuration.native_redirect_uri for local tests diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml index d1237d7bf6f..cdf3ff81bd9 100644 --- a/app/views/doorkeeper/applications/index.html.haml +++ b/app/views/doorkeeper/applications/index.html.haml @@ -73,7 +73,7 @@ %tr %td Anonymous - .help-block + .form-text.text-muted %em Authorization was granted by entering your username and password in the application. %td= token.created_at %td= token.scopes diff --git a/app/views/doorkeeper/applications/show.html.haml b/app/views/doorkeeper/applications/show.html.haml index 6364f0be4a3..89ad626f73f 100644 --- a/app/views/doorkeeper/applications/show.html.haml +++ b/app/views/doorkeeper/applications/show.html.haml @@ -30,5 +30,5 @@ = render "shared/tokens/scopes_list", token: @application .form-actions - = link_to 'Edit', edit_oauth_application_path(@application), class: 'btn btn-primary wide pull-left' + = link_to 'Edit', edit_oauth_application_path(@application), class: 'btn btn-primary wide float-left' = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10' diff --git a/app/views/doorkeeper/authorized_applications/index.html.haml b/app/views/doorkeeper/authorized_applications/index.html.haml index c8a585560a2..30c9d02b72e 100644 --- a/app/views/doorkeeper/authorized_applications/index.html.haml +++ b/app/views/doorkeeper/authorized_applications/index.html.haml @@ -1,4 +1,4 @@ -%header.page-header +%header %h1 Your authorized applications %main{ :role => "main" } .table-holder diff --git a/app/views/events/_event_push.atom.haml b/app/views/events/_event_push.atom.haml index e3c5fd55f08..bc1d32607e4 100644 --- a/app/views/events/_event_push.atom.haml +++ b/app/views/events/_event_push.atom.haml @@ -6,7 +6,7 @@ at = event.created_at.to_s(:short) - unless event.rm_ref? - %blockquote= markdown(escape_once(event.commit_title), pipeline: :atom, project: event.project, author: event.author) + .blockquote= markdown(escape_once(event.commit_title), pipeline: :atom, project: event.project, author: event.author) - if event.commits_count > 1 %p %i diff --git a/app/views/explore/groups/_nav.html.haml b/app/views/explore/groups/_nav.html.haml index c8d95b52156..ab4787c6d05 100644 --- a/app/views/explore/groups/_nav.html.haml +++ b/app/views/explore/groups/_nav.html.haml @@ -1,5 +1,5 @@ .top-area - %ul.nav-links + %ul.nav-links.nav.nav-tabs = nav_link(page: explore_groups_path) do = link_to explore_groups_path do Explore Groups diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml index efa8b2706da..0643b9cfbc5 100644 --- a/app/views/explore/groups/index.html.haml +++ b/app/views/explore/groups/index.html.haml @@ -9,7 +9,7 @@ = render 'nav' - if cookies[:explore_groups_landing_dismissed] != 'true' - .explore-groups.landing.content-block.js-explore-groups-landing.hidden + .explore-groups.landing.content-block.js-explore-groups-landing.hide %button.dismiss-button{ type: 'button', 'aria-label' => 'Dismiss' }= icon('times') .svg-container = custom_icon('icon_explore_groups_splash') diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml index f630f1effdc..845f4046d0d 100644 --- a/app/views/explore/projects/_filter.html.haml +++ b/app/views/explore/projects/_filter.html.haml @@ -8,7 +8,7 @@ - else Any = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right %li = link_to filter_projects_path(visibility_level: nil) do Any diff --git a/app/views/explore/projects/_nav.html.haml b/app/views/explore/projects/_nav.html.haml index e0a2a1e9c96..558cd26f1e0 100644 --- a/app/views/explore/projects/_nav.html.haml +++ b/app/views/explore/projects/_nav.html.haml @@ -1,5 +1,5 @@ .top-area - %ul.nav-links + %ul.nav-links.nav.nav-tabs = nav_link(page: [trending_explore_projects_path, explore_root_path]) do = link_to trending_explore_projects_path do Trending diff --git a/app/views/groups/_create_chat_team.html.haml b/app/views/groups/_create_chat_team.html.haml index 20de1b4c973..9a3ff0313b5 100644 --- a/app/views/groups/_create_chat_team.html.haml +++ b/app/views/groups/_create_chat_team.html.haml @@ -1,10 +1,10 @@ .form-group - = f.label :create_chat_team, class: 'control-label' do + = f.label :create_chat_team, class: 'col-form-label' do %span.mattermost-icon = custom_icon('icon_mattermost') Mattermost .col-sm-10 - .checkbox.js-toggle-container + .form-check.js-toggle-container = f.label :create_chat_team do .js-toggle-button= f.check_box(:create_chat_team, { checked: true }, true, false) Create a Mattermost team for this group diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml index 65e95f3aeef..3cd3fb32b9c 100644 --- a/app/views/groups/_group_admin_settings.html.haml +++ b/app/views/groups/_group_admin_settings.html.haml @@ -1,7 +1,7 @@ -.form-group - = f.label :lfs_enabled, 'Large File Storage', class: 'control-label' +.form-group.row + = f.label :lfs_enabled, 'Large File Storage', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :lfs_enabled do = f.check_box :lfs_enabled, checked: @group.lfs_enabled? %strong @@ -10,17 +10,17 @@ %br/ %span.descr This setting can be overridden in each project. -.form-group - = f.label :require_two_factor_authentication, 'Two-factor authentication', class: 'control-label col-sm-2' +.form-group.row + = f.label :require_two_factor_authentication, 'Two-factor authentication', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.label :require_two_factor_authentication do = f.check_box :require_two_factor_authentication %strong Require all users in this group to setup Two-factor authentication = link_to icon('question-circle'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group') -.form-group - .col-sm-offset-2.col-sm-10 - .checkbox +.form-group.row + .offset-sm-2.col-sm-10 + .form-check = f.text_field :two_factor_grace_period, class: 'form-control' - .help-block Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication + .form-text.text-muted Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml index 3375e01b3a1..96ed63937fa 100644 --- a/app/views/groups/edit.html.haml +++ b/app/views/groups/edit.html.haml @@ -1,16 +1,16 @@ - breadcrumb_title "General Settings" - @content_class = "limit-container-width" unless fluid_layout -.panel.panel-default.prepend-top-default - .panel-heading +.card.prepend-top-default + .card-header Group settings - .panel-body - = form_for @group, html: { multipart: true, class: "form-horizontal gl-show-field-errors" }, authenticity_token: true do |f| + .card-body + = form_for @group, html: { multipart: true, class: "gl-show-field-errors" }, authenticity_token: true do |f| = form_errors(@group) = render 'shared/group_form', f: f - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 .avatar-container.s160 = group_icon(@group, alt: '', class: 'avatar group-avatar s160') %p.light @@ -25,15 +25,15 @@ = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 = render 'shared/allow_request_access', form: f - .form-group - %label.control-label + .form-group.row + %label.col-form-label.col-sm-2 = s_("GroupSettings|Share with group lock") .col-sm-10 - .checkbox + .form-check = f.label :share_with_group_lock do = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group) %strong @@ -47,9 +47,9 @@ .form-actions = f.submit 'Save group', class: "btn btn-save" -.panel.panel-danger - .panel-heading Remove group - .panel-body +.card.bg-danger + .card-header Remove group + .card-body = form_tag(@group, method: :delete) do %p Removing group will cause all child projects and resources to be removed. @@ -60,9 +60,9 @@ = button_to 'Remove group', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_group_message(@group) } - if supports_nested_groups? - .panel.panel-warning - .panel-heading Transfer group - .panel-body + .card.bg-warning + .card-header Transfer group + .card-body = form_for @group, url: transfer_group_path(@group), method: :put do |f| .form-group = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: "Search groups", data: { data: parent_group_options(@group) } }) diff --git a/app/views/groups/group_members/_new_group_member.html.haml b/app/views/groups/group_members/_new_group_member.html.haml index 5b1a4630c56..aa03f8365f9 100644 --- a/app/views/groups/group_members/_new_group_member.html.haml +++ b/app/views/groups/group_members/_new_group_member.html.haml @@ -2,12 +2,12 @@ .row .col-md-4.col-lg-6 = users_select_tag(:user_ids, multiple: true, class: 'input-clamp', scope: :all, email_user: true) - .help-block.append-bottom-10 + .form-text.text-muted.append-bottom-10 Search for members by name, username, or email, or invite new ones using their email address. .col-md-3.col-lg-2 = select_tag :access_level, options_for_select(GroupMember.access_level_roles, @group_member.access_level), class: "form-control project-access-select" - .help-block.append-bottom-10 + .form-text.text-muted.append-bottom-10 = link_to "Read more", help_page_path("user/permissions"), class: "vlink" about role permissions @@ -15,7 +15,7 @@ .clearable-input = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date' %i.clear-icon.js-clear-input - .help-block.append-bottom-10 + .form-text.text-muted.append-bottom-10 On this date, the member(s) will automatically lose access to this group and all of its projects. .col-md-2 diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml index c8addc49117..6a0321bcd2b 100644 --- a/app/views/groups/group_members/index.html.haml +++ b/app/views/groups/group_members/index.html.haml @@ -17,8 +17,8 @@ .clearfix %h5.member.existing-title Existing members - .panel.panel-default - .panel-heading.flex-project-members-panel + .card + .card-header.flex-project-members-panel %span.flex-project-title Members with access to %strong= @group.name diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml index a1be0d3220a..6d35457a0ec 100644 --- a/app/views/groups/milestones/_form.html.haml +++ b/app/views/groups/milestones/_form.html.haml @@ -1,14 +1,14 @@ -= form_for [@group, @milestone], html: { class: 'form-horizontal milestone-form common-note-form js-quick-submit js-requires-input' } do |f| += form_for [@group, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f| .row = form_errors(@milestone) .col-md-6 - .form-group - = f.label :title, "Title", class: "control-label" + .form-group.row + = f.label :title, "Title", class: "col-form-label col-sm-2" .col-sm-10 = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true - .form-group.milestone-description - = f.label :description, "Description", class: "control-label" + .form-group.row.milestone-description + = f.label :description, "Description", class: "col-form-label col-sm-2" .col-sm-10 = render layout: 'projects/md_preview', locals: { url: group_preview_markdown_path } do = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...', supports_autocomplete: false diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml index e9daac95ca1..1e72d88db1e 100644 --- a/app/views/groups/new.html.haml +++ b/app/views/groups/new.html.haml @@ -8,12 +8,12 @@ New Group %hr -= form_for @group, html: { class: 'group-form form-horizontal gl-show-field-errors' } do |f| += form_for @group, html: { class: 'group-form gl-show-field-errors' } do |f| = form_errors(@group) = render 'shared/group_form', f: f, autofocus: true - .form-group.group-description-holder - = f.label :avatar, "Group avatar", class: 'control-label' + .form-group.row.group-description-holder + = f.label :avatar, "Group avatar", class: 'col-form-label col-sm-2' .col-sm-10 = render 'shared/choose_group_avatar_button', f: f @@ -21,8 +21,8 @@ = render 'create_chat_team', f: f if Gitlab.config.mattermost.enabled - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 = render 'shared/group_tips' .form-actions diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml index ef181b425bc..cd07b95155c 100644 --- a/app/views/groups/projects.html.haml +++ b/app/views/groups/projects.html.haml @@ -1,7 +1,7 @@ - breadcrumb_title "Projects" -.panel.panel-default.prepend-top-default - .panel-heading +.card.prepend-top-default + .card-header %strong= @group.name projects: - if can? current_user, :admin_group, @group @@ -15,10 +15,10 @@ %span{ class: visibility_level_color(project.visibility_level) } = visibility_level_icon(project.visibility_level) %strong= link_to project.full_name, project - .pull-right + .float-right - if project.archived - %span.label.label-warning archived - %span.badge + %span.badge.badge-warning archived + %span.badge.badge-pill = storage_counter(project.statistics.storage_size) = link_to 'Members', project_project_members_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-sm" = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-sm" diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml index 8e1dea4afc1..8b0ef3cd87a 100644 --- a/app/views/groups/show.html.haml +++ b/app/views/groups/show.html.haml @@ -20,7 +20,7 @@ %input.btn.btn-success.dropdown-primary.js-new-group-child{ type: "button", value: new_project_label, data: { action: "new-project" } } %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown" } } = icon("caret-down", class: "dropdown-btn-icon") - %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } } + %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-right{ data: { dropdown: true } } %li.droplab-item-selected{ role: "button", data: { value: "new-project", text: new_project_label } } .menu-item .icon-container diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml index c7a64d77a6a..6391a13dd25 100644 --- a/app/views/help/index.html.haml +++ b/app/views/help/index.html.haml @@ -33,8 +33,8 @@ .documentation-index.wiki = markdown(@help_index) .col-md-4 - .panel.panel-default - .panel-heading + .card + .card-header Quick help %ul.well-list %li= link_to 'See our website for getting help', support_url diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml index 7908a04c2eb..94b012d39a3 100644 --- a/app/views/help/ui.html.haml +++ b/app/views/help/ui.html.haml @@ -129,8 +129,8 @@ .lead List inside panel .example - .panel.panel-default - .panel-heading Your list + .card + .card-header Your list %ul.well-list %li One item @@ -174,7 +174,7 @@ .example .top-area - %ul.nav-links + %ul.nav-links.nav.nav-tabs %li.active %a Open %li @@ -205,7 +205,7 @@ %h2#buttons Buttons .example - %button.btn.btn-default{ :type => "button" } Default + %button.btn.btn-default{ :type => "button" } Secondary %button.btn.btn-primary{ :type => "button" } Primary %button.btn.btn-success{ :type => "button" } Success %button.btn.btn-info{ :type => "button" } Info @@ -217,7 +217,7 @@ .example .clearfix - .dropdown.inline.pull-left + .dropdown.inline.float-left %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown = icon('chevron-down') @@ -225,11 +225,11 @@ %li %a{ href: "#" } Dropdown option - .dropdown.inline.pull-right + .dropdown.inline.float-right %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right %li %a{ href: "#" } Dropdown option @@ -415,26 +415,26 @@ .row .col-md-6 - .panel.panel-success - .panel-heading Success - .panel-body + .card.bg-success + .card-header Success + .card-body = lorem - .panel.panel-primary - .panel-heading Primary - .panel-body + .card.bg-primary + .card-header Primary + .card-body = lorem - .panel.panel-info - .panel-heading Info - .panel-body + .card.bg-info + .card-header Info + .card-body = lorem .col-md-6 - .panel.panel-warning - .panel-heading Warning - .panel-body + .card.bg-warning + .card-header Warning + .card-body = lorem - .panel.panel-danger - .panel-heading Danger - .panel-body + .card.bg-danger + .card-header Danger + .card-body = lorem %h2#alerts Alerts @@ -460,23 +460,23 @@ %code form.horizontal-form .example - %form.form-horizontal - .form-group - %label.col-sm-2.control-label{ :for => "inputEmail3" } Email + %form + .form-group.row + %label.col-sm-2.col-form-label{ :for => "inputEmail3" } Email .col-sm-10 %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/ - .form-group - %label.col-sm-2.control-label{ :for => "inputPassword3" } Password + .form-group.row + %label.col-sm-2.col-form-label{ :for => "inputPassword3" } Password .col-sm-10 %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/ - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check %label %input{ :type => "checkbox" }/ Remember me - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 %button.btn.btn-default{ :type => "submit" } Sign in .lead @@ -491,7 +491,7 @@ .form-group %label{ :for => "exampleInputPassword1" } Password %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/ - .checkbox + .form-check %label %input{ :type => "checkbox" }/ Remember me diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml index 638c8b5a672..f7094375023 100644 --- a/app/views/import/_githubish_status.html.haml +++ b/app/views/import/_githubish_status.html.haml @@ -46,14 +46,15 @@ %td.import-target %fieldset.row .input-group - .project-path.input-group-btn + .project-path.input-group-prepend - if current_user.can_select_namespace? - selected = params[:namespace_id] || :current_user - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {} - = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 } + = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace', tabindex: 1 } - else - = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true - %span.input-group-addon / + = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true + %span.input-group-prepend + .input-group-text / = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true %td.import-actions.job-status = button_tag class: "btn btn-import js-add-to-import" do diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml index 9589e0956f4..4e8f715db4f 100644 --- a/app/views/import/bitbucket/status.html.haml +++ b/app/views/import/bitbucket/status.html.haml @@ -54,14 +54,15 @@ %td.import-target %fieldset.row .input-group - .project-path.input-group-btn + .project-path.input-group-prepend - if current_user.can_select_namespace? - selected = params[:namespace_id] || :current_user - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner, path: repo.owner) } : {} - = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 } + = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace', tabindex: 1 } - else - = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true - %span.input-group-addon / + = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true + %span.input-group-prepend + .input-group-text / = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true %td.import-actions.job-status = button_tag class: 'btn btn-import js-add-to-import' do @@ -73,7 +74,7 @@ = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: '_blank', rel: 'noopener noreferrer' %td.import-target %td.import-actions-job-status - = label_tag 'Incompatible Project', nil, class: 'label label-danger' + = label_tag 'Incompatible Project', nil, class: 'label badge-danger' - if @incompatible_repos.any? %p diff --git a/app/views/import/fogbugz/new.html.haml b/app/views/import/fogbugz/new.html.haml index 5515fad6f48..d5a37095365 100644 --- a/app/views/import/fogbugz/new.html.haml +++ b/app/views/import/fogbugz/new.html.haml @@ -5,21 +5,21 @@ Import projects from FogBugz %hr -= form_tag callback_import_fogbugz_path, class: 'form-horizontal' do += form_tag callback_import_fogbugz_path do %p To get started you enter your FogBugz URL and login information below. In the next steps, you'll be able to map users and select the projects you want to import. - .form-group - = label_tag :uri, 'FogBugz URL', class: 'control-label' + .form-group.row + = label_tag :uri, 'FogBugz URL', class: 'col-form-label col-sm-8' .col-sm-4 = text_field_tag :uri, nil, placeholder: 'https://mycompany.fogbugz.com', class: 'form-control' - .form-group - = label_tag :email, 'FogBugz Email', class: 'control-label' + .form-group.row + = label_tag :email, 'FogBugz Email', class: 'col-form-label col-sm-8' .col-sm-4 = text_field_tag :email, nil, class: 'form-control' - .form-group - = label_tag :password, 'FogBugz Password', class: 'control-label' + .form-group.row + = label_tag :password, 'FogBugz Password', class: 'col-form-label col-sm-8' .col-sm-4 = password_field_tag :password, nil, class: 'form-control' .form-actions diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml index 84e0009487f..d27c5d3c36d 100644 --- a/app/views/import/fogbugz/new_user_map.html.haml +++ b/app/views/import/fogbugz/new_user_map.html.haml @@ -5,7 +5,7 @@ Import projects from FogBugz %hr -= form_tag create_user_map_import_fogbugz_path, class: 'form-horizontal' do += form_tag create_user_map_import_fogbugz_path do %p Customize how FogBugz email addresses and usernames are imported into GitLab. In the next step, you'll be able to select the projects you want to import. diff --git a/app/views/import/gitea/new.html.haml b/app/views/import/gitea/new.html.haml index 02a116f996b..eb9790c7903 100644 --- a/app/views/import/gitea/new.html.haml +++ b/app/views/import/gitea/new.html.haml @@ -10,13 +10,13 @@ = succeed '.' do = link_to 'Personal Access Token', 'https://github.com/gogits/go-gogs-client/wiki#access-token' -= form_tag personal_access_token_import_gitea_path, class: 'form-horizontal' do - .form-group - = label_tag :gitea_host_url, 'Gitea Host URL', class: 'control-label' += form_tag personal_access_token_import_gitea_path do + .form-group.row + = label_tag :gitea_host_url, 'Gitea Host URL', class: 'col-form-label col-sm-8' .col-sm-4 = text_field_tag :gitea_host_url, nil, placeholder: 'https://try.gitea.io', class: 'form-control' - .form-group - = label_tag :personal_access_token, 'Personal Access Token', class: 'control-label' + .form-group.row + = label_tag :personal_access_token, 'Personal Access Token', class: 'col-form-label col-sm-8' .col-sm-4 = text_field_tag :personal_access_token, nil, class: 'form-control' .form-actions diff --git a/app/views/import/gitlab_projects/new.html.haml b/app/views/import/gitlab_projects/new.html.haml index dec85368d10..2d059e78490 100644 --- a/app/views/import/gitlab_projects/new.html.haml +++ b/app/views/import/gitlab_projects/new.html.haml @@ -8,20 +8,22 @@ = form_tag import_gitlab_project_path, class: 'new_project', multipart: true do .row - .form-group.col-xs-12.col-sm-6 + .form-group.col-12.col-sm-6 = label_tag :namespace_id, 'Project path', class: 'label-light' .form-group .input-group - if current_user.can_select_namespace? - .input-group-addon.has-tooltip{ title: root_url } - = root_url + .input-group-prepend.has-tooltip{ title: root_url } + .input-group-text + = root_url = select_tag :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), class: 'select2 js-select-namespace', tabindex: 1 - else - .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' } - #{user_url(current_user.username)}/ + .input-group-prepend.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' } + .input-group-text + #{user_url(current_user.username)}/ = hidden_field_tag :namespace_id, value: current_user.namespace_id - .form-group.col-xs-12.col-sm-6.project-path + .form-group.col-12.col-sm-6.project-path = label_tag :path, 'Project name', class: 'label-light' = text_field_tag :path, @path, placeholder: "my-awesome-project", class: "js-path-name form-control", tabindex: 2, autofocus: true, required: true diff --git a/app/views/import/google_code/new.html.haml b/app/views/import/google_code/new.html.haml index c5800a1cca0..2f1fb8d9c56 100644 --- a/app/views/import/google_code/new.html.haml +++ b/app/views/import/google_code/new.html.haml @@ -5,7 +5,7 @@ Import projects from Google Code %hr -= form_tag callback_import_google_code_path, class: 'form-horizontal', multipart: true do += form_tag callback_import_google_code_path, multipart: true do %p Follow the steps below to export your Google Code project data. In the next step, you'll be able to select the projects you want to import. diff --git a/app/views/import/google_code/new_user_map.html.haml b/app/views/import/google_code/new_user_map.html.haml index 0738b3db1eb..91c774f575c 100644 --- a/app/views/import/google_code/new_user_map.html.haml +++ b/app/views/import/google_code/new_user_map.html.haml @@ -5,7 +5,7 @@ Import projects from Google Code %hr -= form_tag create_user_map_import_google_code_path, class: 'form-horizontal' do += form_tag create_user_map_import_google_code_path do %p Customize how Google Code email addresses and usernames are imported into GitLab. In the next step, you'll be able to select the projects you want to import. @@ -36,7 +36,7 @@ will add "By <a href="#">johnsmith@example.com</a>" to all issues and comments originally created by johnsmith@example.com. By default, the email address or username is masked to ensure the user's privacy. Use this option if you want to show the full email address. - .form-group + .form-group.row .col-sm-12 = text_area_tag :user_map, JSON.pretty_generate(@user_map), class: 'form-control', rows: 15 diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml index bc61aeece72..acf7a108cb0 100644 --- a/app/views/import/google_code/status.html.haml +++ b/app/views/import/google_code/status.html.haml @@ -66,7 +66,7 @@ = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank", rel: 'noopener noreferrer' %td.import-target %td.import-actions-job-status - = label_tag "Incompatible Project", nil, class: "label label-danger" + = label_tag "Incompatible Project", nil, class: "label badge-danger" - if @incompatible_repos.any? %p diff --git a/app/views/kaminari/gitlab/_first_page.html.haml b/app/views/kaminari/gitlab/_first_page.html.haml index e7a70e3bb28..369165da02a 100644 --- a/app/views/kaminari/gitlab/_first_page.html.haml +++ b/app/views/kaminari/gitlab/_first_page.html.haml @@ -5,5 +5,5 @@ -# total_pages: total number of pages -# per_page: number of items to fetch per page -# remote: data-remote -%li.first - = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote +%li.first.page-item + = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link' diff --git a/app/views/kaminari/gitlab/_gap.html.haml b/app/views/kaminari/gitlab/_gap.html.haml index 889514c4755..6eec30212d1 100644 --- a/app/views/kaminari/gitlab/_gap.html.haml +++ b/app/views/kaminari/gitlab/_gap.html.haml @@ -4,6 +4,5 @@ -# total_pages: total number of pages -# per_page: number of items to fetch per page -# remote: data-remote -%li - %span.gap - = raw(t 'views.pagination.truncate') +%li.page-item.disabled + = link_to raw(t 'views.pagination.truncate'), '#', class: 'page-link' diff --git a/app/views/kaminari/gitlab/_last_page.html.haml b/app/views/kaminari/gitlab/_last_page.html.haml index 53f780d1d1b..8b49db58281 100644 --- a/app/views/kaminari/gitlab/_last_page.html.haml +++ b/app/views/kaminari/gitlab/_last_page.html.haml @@ -5,5 +5,5 @@ -# total_pages: total number of pages -# per_page: number of items to fetch per page -# remote: data-remote -%li.last - = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote} +%li.last.page-item + = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote, class: 'page-link'} diff --git a/app/views/kaminari/gitlab/_next_page.html.haml b/app/views/kaminari/gitlab/_next_page.html.haml index c93dc7a50e8..05f151555ad 100644 --- a/app/views/kaminari/gitlab/_next_page.html.haml +++ b/app/views/kaminari/gitlab/_next_page.html.haml @@ -5,9 +5,8 @@ -# total_pages: total number of pages -# per_page: number of items to fetch per page -# remote: data-remote -- if current_page.last? - %li.next.disabled - %span= raw(t 'views.pagination.next') -- else - %li.next - = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote + +- page_url = current_page.last? ? '#' : url + +%li.page-item{ class: ('disabled' if current_page.last?) } + = link_to raw(t 'views.pagination.next'), page_url, rel: 'next', remote: remote, class: 'page-link' diff --git a/app/views/kaminari/gitlab/_page.html.haml b/app/views/kaminari/gitlab/_page.html.haml index 5c5be03a7cd..8a40e13a537 100644 --- a/app/views/kaminari/gitlab/_page.html.haml +++ b/app/views/kaminari/gitlab/_page.html.haml @@ -6,5 +6,5 @@ -# total_pages: total number of pages -# per_page: number of items to fetch per page -# remote: data-remote -%li.page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] } - = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil } +%li.page-item.js-pagination-page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] } + = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, class: 'page-link' } diff --git a/app/views/kaminari/gitlab/_paginator.html.haml b/app/views/kaminari/gitlab/_paginator.html.haml index 8fe6bd653ae..a6435deb4bf 100644 --- a/app/views/kaminari/gitlab/_paginator.html.haml +++ b/app/views/kaminari/gitlab/_paginator.html.haml @@ -7,7 +7,7 @@ -# paginator: the paginator that renders the pagination tags inside = paginator.render do .gl-pagination - %ul.pagination.clearfix + %ul.pagination.justify-content-center - unless current_page.first? = first_page_tag unless total_pages < 5 # As kaminari will always show the first 5 pages = prev_page_tag diff --git a/app/views/kaminari/gitlab/_prev_page.html.haml b/app/views/kaminari/gitlab/_prev_page.html.haml index b7c6caf7ff4..f4a11a449b7 100644 --- a/app/views/kaminari/gitlab/_prev_page.html.haml +++ b/app/views/kaminari/gitlab/_prev_page.html.haml @@ -5,9 +5,8 @@ -# total_pages: total number of pages -# per_page: number of items to fetch per page -# remote: data-remote -- if current_page.first? - %li.prev.disabled - %span= raw(t 'views.pagination.previous') -- else - %li.prev - = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote + +- page_url = current_page.first? ? '#' : url + +%li.page-item{ class: ('disabled' if current_page.first?) } + = link_to raw(t 'views.pagination.previous'), page_url, rel: 'prev', remote: remote, class: 'page-link' diff --git a/app/views/kaminari/gitlab/_without_count.html.haml b/app/views/kaminari/gitlab/_without_count.html.haml index 250029c4475..1425a809052 100644 --- a/app/views/kaminari/gitlab/_without_count.html.haml +++ b/app/views/kaminari/gitlab/_without_count.html.haml @@ -1,8 +1,8 @@ .gl-pagination %ul.pagination.clearfix - if previous_path - %li.prev - = link_to(t('views.pagination.previous'), previous_path, rel: 'prev') + %li.page-item.prev + = link_to(t('views.pagination.previous'), previous_path, rel: 'prev', class: 'page-link') - if next_path - %li.next - = link_to(t('views.pagination.next'), next_path, rel: 'next') + %li.page-item.next + = link_to(t('views.pagination.next'), next_path, rel: 'next', class: 'page-link') diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index 52587760ba4..91f796adb2e 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -7,7 +7,7 @@ - if @project && @project.persisted? - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: project_issues_path(@project), mr_path: project_merge_requests_path(@project), issues_disabled: !@project.issues_enabled? } .search.search-form{ class: "#{'has-location-badge' if label.present?}" } - = form_tag search_path, method: :get, class: 'navbar-form' do |f| + = form_tag search_path, method: :get, class: 'form-inline' do |f| .search-input-container - if label.present? .location-badge= label diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml index 6513b719199..82ca7252424 100644 --- a/app/views/layouts/devise.html.haml +++ b/app/views/layouts/devise.html.haml @@ -10,9 +10,7 @@ .content = render "layouts/flash" .row - .col-sm-5.pull-right.new-session-forms-container - = yield - .col-sm-7.brand-holder.pull-left + .col-sm-7.brand-holder %h1 = brand_title = brand_image @@ -28,6 +26,8 @@ - if Gitlab::CurrentSettings.sign_in_text.present? = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text) + .col-sm-5.new-session-forms-container + = yield %hr.footer-fixed .container.footer-container diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index dc121812406..1bca837a311 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-gitlab.qa-navbar +%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content .container-fluid .header-content @@ -8,7 +8,7 @@ = brand_header_logo - logo_text = brand_header_logo_type - if logo_text.present? - %span.logo-text.hidden-xs + %span.logo-text.d-none.d-sm-block = logo_text - if current_user @@ -21,9 +21,9 @@ - if current_user = render 'layouts/header/new_dropdown' - if header_link?(:search) - %li.hidden-sm.hidden-xs + %li.nav-item.d-none.d-sm-none.d-md-block = render 'layouts/search' unless current_controller?(:search) - %li.visible-sm-inline-block.visible-xs-inline-block + %li.nav-item.d-inline-block.d-sm-none.d-md-none = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = sprite_icon('search', size: 16) @@ -32,38 +32,38 @@ = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = sprite_icon('issues', size: 16) - issues_count = assigned_issuables_count(:issues) - %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) } + %span.badge.badge-pill.issues-count{ class: ('hidden' if issues_count.zero?) } = number_with_delimiter(issues_count) - if header_link?(:merge_requests) = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do = link_to assigned_mrs_dashboard_path, title: 'Merge requests', class: 'dashboard-shortcuts-merge_requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = sprite_icon('git-merge', size: 16) - merge_requests_count = assigned_issuables_count(:merge_requests) - %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) } + %span.badge.badge-pill.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) } = number_with_delimiter(merge_requests_count) - if header_link?(:todos) = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do = sprite_icon('todo-done', size: 16) - %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) } + %span.badge.badge-pill.todos-count{ class: ('hidden' if todos_pending_count.zero?) } = todos_count_format(todos_pending_count) - if header_link?(:user_dropdown) - %li.header-user.dropdown + %li.nav-item.header-user.dropdown = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar" = sprite_icon('angle-down', css_class: 'caret-down') - .dropdown-menu-nav.dropdown-menu-align-right + .dropdown-menu.dropdown-menu-right = render 'layouts/header/current_user_dropdown' - if header_link?(:admin_impersonation) - %li.impersonation - = link_to admin_impersonation_path, class: 'impersonation-btn', method: :delete, title: "Stop impersonation", aria: { label: 'Stop impersonation' }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do + %li.nav-item.impersonation + = link_to admin_impersonation_path, class: 'nav-link impersonation-btn', method: :delete, title: "Stop impersonation", aria: { label: 'Stop impersonation' }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do = icon('user-secret') - if header_link?(:sign_in) - %li + %li.nav-item %div - = link_to "Sign in / Register", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in' + = link_to "Sign in / Register", new_session_path(:user, redirect_to_referer: 'yes'), class: 'nav-link btn btn-sign-in' - %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' } + %button.navbar-toggler.d-block.d-sm-none{ type: 'button' } %span.sr-only Toggle navigation = sprite_icon('more', size: 12, css_class: 'more-icon js-navbar-toggle-right') = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left') diff --git a/app/views/layouts/header/_empty.html.haml b/app/views/layouts/header/_empty.html.haml index 2ed4edb1136..2dfc787b7a8 100644 --- a/app/views/layouts/header/_empty.html.haml +++ b/app/views/layouts/header/_empty.html.haml @@ -1,4 +1,4 @@ -%header.navbar.navbar-fixed-top.navbar-empty +%header.navbar.fixed-top.navbar-empty .container - .center-logo + .mx-auto = brand_header_logo diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.haml index 6f53f5ac1ae..db8137cc248 100644 --- a/app/views/layouts/header/_new_dropdown.haml +++ b/app/views/layouts/header/_new_dropdown.haml @@ -2,7 +2,7 @@ = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do = sprite_icon('plus-square', size: 16) = sprite_icon('angle-down', css_class: 'caret-down') - .dropdown-menu-nav.dropdown-menu-align-right + .dropdown-menu.dropdown-menu-right %ul - if @group&.persisted? - create_group_project = can?(current_user, :create_projects, @group) diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml index f773bd0832d..7647e25e804 100644 --- a/app/views/layouts/nav/_dashboard.html.haml +++ b/app/views/layouts/nav/_dashboard.html.haml @@ -8,34 +8,34 @@ = render "layouts/nav/projects_dropdown/show" - if dashboard_nav_link?(:groups) - = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "hidden-xs" }) do + = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-none d-sm-block" }) do = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups qa-groups-link', title: 'Groups' do Groups - if dashboard_nav_link?(:activity) - = nav_link(path: 'dashboard#activity', html_options: { class: "visible-lg" }) do + = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block d-xl-block" }) do = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do Activity - if dashboard_nav_link?(:milestones) - = nav_link(controller: 'dashboard/milestones', html_options: { class: "visible-lg" }) do + = nav_link(controller: 'dashboard/milestones', html_options: { class: "d-none d-lg-block d-xl-block" }) do = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: 'Milestones' do Milestones - if dashboard_nav_link?(:snippets) - = nav_link(controller: 'dashboard/snippets', html_options: { class: "visible-lg" }) do + = nav_link(controller: 'dashboard/snippets', html_options: { class: "d-none d-lg-block d-xl-block" }) do = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: 'Snippets' do Snippets - if any_dashboard_nav_link?([:groups, :milestones, :activity, :snippets]) - %li.header-more.dropdown.hidden-lg + %li.header-more.dropdown.d-lg-none.d-xl-none %a{ href: "#", data: { toggle: "dropdown" } } More = sprite_icon('angle-down', css_class: 'caret-down') .dropdown-menu %ul - if dashboard_nav_link?(:groups) - = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "visible-xs" }) do + = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-block d-sm-none" }) do = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do Groups @@ -61,13 +61,13 @@ Projects - if current_controller?('ide') - %li.line-separator.hidden-xs + %li.line-separator.d-none.d-sm-block = nav_link(controller: 'ide') do = link_to '#', class: 'dashboard-shortcuts-web-ide', title: 'Web IDE' do Web IDE - if current_user.admin? || Gitlab::Sherlock.enabled? - %li.line-separator.hidden-xs + %li.line-separator.d-none.d-sm-block - if current_user.admin? = nav_link(controller: 'admin/dashboard') do = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: 'Admin area', aria: { label: "Admin area" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml index dd086f70641..62402c32e08 100644 --- a/app/views/layouts/nav/sidebar/_admin.html.haml +++ b/app/views/layouts/nav/sidebar/_admin.html.haml @@ -127,13 +127,13 @@ = sprite_icon('slight-frown') %span.nav-item-name Abuse Reports - %span.badge.count= number_with_delimiter(AbuseReport.count(:all)) + %span.badge.badge-pill.count= number_with_delimiter(AbuseReport.count(:all)) %ul.sidebar-sub-level-items.is-fly-out-only = nav_link(controller: :abuse_reports, html_options: { class: "fly-out-top-item" } ) do = link_to admin_abuse_reports_path do %strong.fly-out-top-item-name #{ _('Abuse Reports') } - %span.badge.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(AbuseReport.count(:all)) + %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(AbuseReport.count(:all)) - if akismet_enabled? = nav_link(controller: :spam_logs) do diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml index 517d9aa3d99..39a033337ff 100644 --- a/app/views/layouts/nav/sidebar/_group.html.haml +++ b/app/views/layouts/nav/sidebar/_group.html.haml @@ -43,14 +43,14 @@ = sprite_icon('issues') %span.nav-item-name Issues - %span.badge.count= number_with_delimiter(issues_count) + %span.badge.badge-pill.count= number_with_delimiter(issues_count) %ul.sidebar-sub-level-items = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index'], html_options: { class: "fly-out-top-item" } ) do = link_to issues_group_path(@group) do %strong.fly-out-top-item-name #{ _('Issues') } - %span.badge.count.issue_counter.fly-out-badge= number_with_delimiter(issues_count) + %span.badge.badge-pill.count.issue_counter.fly-out-badge= number_with_delimiter(issues_count) %li.divider.fly-out-top-item = nav_link(path: 'groups#issues', html_options: { class: 'home' }) do @@ -83,13 +83,13 @@ = sprite_icon('git-merge') %span.nav-item-name Merge Requests - %span.badge.count= number_with_delimiter(merge_requests_count) + %span.badge.badge-pill.count= number_with_delimiter(merge_requests_count) %ul.sidebar-sub-level-items.is-fly-out-only = nav_link(path: 'groups#merge_requests', html_options: { class: "fly-out-top-item" } ) do = link_to merge_requests_group_path(@group) do %strong.fly-out-top-item-name #{ _('Merge Requests') } - %span.badge.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(merge_requests_count) + %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(merge_requests_count) - if group_sidebar_link?(:group_members) = nav_link(path: 'group_members#index') do diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml index 99e4113bd5a..fdb07ce6fc5 100644 --- a/app/views/layouts/nav/sidebar/_project.html.haml +++ b/app/views/layouts/nav/sidebar/_project.html.haml @@ -88,7 +88,7 @@ %span.nav-item-name = _('Issues') - if @project.issues_enabled? - %span.badge.count.issue_counter + %span.badge.badge-pill.count.issue_counter = number_with_delimiter(@project.open_issues_count(current_user)) %ul.sidebar-sub-level-items @@ -97,7 +97,7 @@ %strong.fly-out-top-item-name = _('Issues') - if @project.issues_enabled? - %span.badge.count.issue_counter.fly-out-badge + %span.badge.badge-pill.count.issue_counter.fly-out-badge = number_with_delimiter(@project.open_issues_count(current_user)) %li.divider.fly-out-top-item = nav_link(controller: :issues, action: :index) do @@ -140,14 +140,14 @@ = sprite_icon('git-merge') %span.nav-item-name = _('Merge Requests') - %span.badge.count.merge_counter.js-merge-counter + %span.badge.badge-pill.count.merge_counter.js-merge-counter = number_with_delimiter(@project.open_merge_requests_count) %ul.sidebar-sub-level-items.is-fly-out-only = nav_link(controller: :merge_requests, html_options: { class: "fly-out-top-item" } ) do = link_to project_merge_requests_path(@project) do %strong.fly-out-top-item-name = _('Merge Requests') - %span.badge.count.merge_counter.js-merge-counter.fly-out-badge + %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge = number_with_delimiter(@project.open_merge_requests_count) - if project_nav_tab? :pipelines @@ -234,7 +234,7 @@ = link_to 'Auto DevOps', help_page_path('topics/autodevops/index.md') %span= _('uses Kubernetes clusters to deploy your code!') %hr - %button.btn.btn-create.btn-xs.dismiss-feature-highlight{ type: 'button' } + %button.btn.btn-create.btn-sm.dismiss-feature-highlight{ type: 'button' } %span= _("Got it!") = sprite_icon('thumb-up') diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml index 87f4151f241..a8964b19ba1 100644 --- a/app/views/layouts/terms.html.haml +++ b/app/views/layouts/terms.html.haml @@ -29,6 +29,6 @@ = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar" = sprite_icon('angle-down', css_class: 'caret-down') - .dropdown-menu-nav.dropdown-menu-align-right + .dropdown-menu.dropdown-menu-right = render 'layouts/header/current_user_dropdown' = yield diff --git a/app/views/notify/pipeline_failed_email.html.haml b/app/views/notify/pipeline_failed_email.html.haml index 38dab104eb5..baafaa6e3a0 100644 --- a/app/views/notify/pipeline_failed_email.html.haml +++ b/app/views/notify/pipeline_failed_email.html.haml @@ -12,7 +12,7 @@ %tr.section %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" } - %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" } + %table.table-info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" } %tbody %tr %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project @@ -114,7 +114,7 @@ = failed.size failed #{'build'.pluralize(failed.size)}. -%tr.warning +%tr.table-warning %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;border:1px solid #ededed;border-bottom:0;border-radius:3px 3px 0 0;overflow:hidden;background-color:#fdf4f6;color:#d22852;font-size:14px;line-height:1.4;text-align:center;padding:8px 15px;" } Logs may contain sensitive data. Please consider before forwarding this email. %tr.section diff --git a/app/views/notify/pipeline_success_email.html.haml b/app/views/notify/pipeline_success_email.html.haml index 7b06e8afa0b..4fe3c4c8269 100644 --- a/app/views/notify/pipeline_success_email.html.haml +++ b/app/views/notify/pipeline_success_email.html.haml @@ -1,4 +1,4 @@ -%tr.success +%tr.table-success %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;color:#ffffff;background-color:#31af64;" } %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" } %tbody @@ -12,7 +12,7 @@ %tr.section %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" } - %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" } + %table.table-info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" } %tbody %tr %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project diff --git a/app/views/profiles/_event_table.html.haml b/app/views/profiles/_event_table.html.haml index d0ad90ac6cc..37466f7c821 100644 --- a/app/views/profiles/_event_table.html.haml +++ b/app/views/profiles/_event_table.html.haml @@ -9,6 +9,6 @@ Signed in with = event.details[:with] authentication - %span.pull-right= time_ago_with_tooltip(event.created_at) + %span.float-right= time_ago_with_tooltip(event.created_at) = paginate events, theme: "gitlab" diff --git a/app/views/profiles/active_sessions/_active_session.html.haml b/app/views/profiles/active_sessions/_active_session.html.haml index d40b771f48b..d198bfc80db 100644 --- a/app/views/profiles/active_sessions/_active_session.html.haml +++ b/app/views/profiles/active_sessions/_active_session.html.haml @@ -1,6 +1,6 @@ - is_current_session = active_session.current?(session) -%li +%li.list-group-item .pull-left.append-right-10{ data: { toggle: 'tooltip' }, title: active_session.human_device_type } = active_session_device_type_icon(active_session) diff --git a/app/views/profiles/active_sessions/index.html.haml b/app/views/profiles/active_sessions/index.html.haml index d0250bb4eab..8688a52843d 100644 --- a/app/views/profiles/active_sessions/index.html.haml +++ b/app/views/profiles/active_sessions/index.html.haml @@ -10,5 +10,6 @@ .col-lg-8 .append-bottom-default - %ul.well-list - = render partial: 'profiles/active_sessions/active_session', collection: @sessions + .card.border-0 + %ul.list-group.list-group-flush + = render partial: 'profiles/active_sessions/active_session', collection: @sessions diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml index c7094800fb2..9e82e47c1e1 100644 --- a/app/views/profiles/chat_names/_chat_name.html.haml +++ b/app/views/profiles/chat_names/_chat_name.html.haml @@ -24,4 +24,4 @@ Never %td - = link_to 'Remove', profile_chat_name_path(chat_name), method: :delete, class: 'btn btn-danger pull-right', data: { confirm: 'Are you sure you want to revoke this nickname?' } + = link_to 'Remove', profile_chat_name_path(chat_name), method: :delete, class: 'btn btn-danger float-right', data: { confirm: 'Are you sure you want to revoke this nickname?' } diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml index 5bf22aa94f1..d86941b7a29 100644 --- a/app/views/profiles/chat_names/new.html.haml +++ b/app/views/profiles/chat_names/new.html.haml @@ -9,7 +9,7 @@ .actions = form_tag profile_chat_names_path, method: :post do = hidden_field_tag :token, @chat_name_token.token - = submit_tag "Authorize", class: "btn btn-success wide pull-left" + = submit_tag "Authorize", class: "btn btn-success wide float-left" = form_tag deny_profile_chat_names_path, method: :delete do = hidden_field_tag :token, @chat_name_token.token = submit_tag "Deny", class: "btn btn-danger prepend-left-10" diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml index e3c2bd1150e..914bd4eb57c 100644 --- a/app/views/profiles/emails/index.html.haml +++ b/app/views/profiles/emails/index.html.haml @@ -32,20 +32,20 @@ %ul.well-list %li = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? } - %span.pull-right - %span.label.label-success Primary email + %span.float-right + %span.badge.badge-success Primary email - if @primary_email === current_user.public_email - %span.label.label-info Public email + %span.badge.badge-info Public email - if @primary_email === current_user.notification_email - %span.label.label-info Notification email + %span.badge.badge-info Notification email - @emails.each do |email| %li = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? } - %span.pull-right + %span.float-right - if email.email === current_user.public_email - %span.label.label-info Public email + %span.badge.badge-info Public email - if email.email === current_user.notification_email - %span.label.label-info Notification email + %span.badge.badge-info Notification email - unless email.confirmed? - confirm_title = "#{email.confirmation_sent_at ? 'Resend' : 'Send'} confirmation email" = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'btn btn-sm btn-warning prepend-left-10' diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml index 5ed517c1ef6..d1fd7bc8e71 100644 --- a/app/views/profiles/gpg_keys/_key.html.haml +++ b/app/views/profiles/gpg_keys/_key.html.haml @@ -1,6 +1,6 @@ %li.key-list-item - .pull-left.append-right-10 - = icon 'key', class: "settings-list-icon hidden-xs" + .float-left.append-right-10 + = icon 'key', class: "settings-list-icon d-none d-sm-block" .key-list-item-info - key.emails_with_verified_status.map do |email, verified| = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified } @@ -14,7 +14,7 @@ - key.subkeys.each do |subkey| %li %code= subkey.fingerprint - .pull-right + .float-right %span.key-created-at created #{time_ago_with_tooltip(key.created_at)} = link_to profile_gpg_key_path(key), data: { confirm: 'Are you sure? Removing this GPG key does not affect already signed commits.' }, method: :delete, class: "btn btn-danger prepend-left-10" do diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml index 103446243e5..ce20994b0f4 100644 --- a/app/views/profiles/keys/_key.html.haml +++ b/app/views/profiles/keys/_key.html.haml @@ -1,9 +1,9 @@ %li.key-list-item - .pull-left.append-right-10 + .float-left.append-right-10 - if key.valid? - = icon 'key', class: 'settings-list-icon hidden-xs' + = icon 'key', class: 'settings-list-icon d-none d-sm-block' - else - = icon 'exclamation-triangle', class: 'settings-list-icon hidden-xs has-tooltip', + = icon 'exclamation-triangle', class: 'settings-list-icon d-none d-sm-block has-tooltip', title: key.errors.full_messages.join(', ') @@ -15,7 +15,7 @@ .last-used-at last used: = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : 'n/a' - .pull-right + .float-right %span.key-created-at created #{time_ago_with_tooltip(key.created_at)} = link_to path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent prepend-left-10" do diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml index 77521417f47..02d5b08f7a3 100644 --- a/app/views/profiles/keys/_key_details.html.haml +++ b/app/views/profiles/keys/_key_details.html.haml @@ -1,8 +1,8 @@ - is_admin = defined?(admin) ? true : false .row.prepend-top-default .col-md-4 - .panel.panel-default - .panel-heading + .card + .card-header SSH Key %ul.well-list %li @@ -23,5 +23,5 @@ %pre.well-pre = @key.key .col-md-12 - .pull-right + .float-right = link_to 'Remove', path_to_key(@key, is_admin), data: {confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove delete-key" diff --git a/app/views/profiles/notifications/_group_settings.html.haml b/app/views/profiles/notifications/_group_settings.html.haml index 537bba21f4a..a12246bcdcc 100644 --- a/app/views/profiles/notifications/_group_settings.html.haml +++ b/app/views/profiles/notifications/_group_settings.html.haml @@ -8,5 +8,5 @@ %span.str-truncated = link_to group.name, group_path(group) - .pull-right + .float-right = render 'shared/notifications/button', notification_setting: setting diff --git a/app/views/profiles/notifications/_project_settings.html.haml b/app/views/profiles/notifications/_project_settings.html.haml index 5b2a69b8891..823fec3fab4 100644 --- a/app/views/profiles/notifications/_project_settings.html.haml +++ b/app/views/profiles/notifications/_project_settings.html.haml @@ -8,5 +8,5 @@ %span.str-truncated = link_to_project(project) - .pull-right + .float-right = render 'shared/notifications/button', notification_setting: setting diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml index 8f099aa6dd7..71ea625e5d5 100644 --- a/app/views/profiles/notifications/show.html.haml +++ b/app/views/profiles/notifications/show.html.haml @@ -29,7 +29,7 @@ = label_tag :global_notification_level, "Global notification level", class: "label-light" %br .clearfix - .form-group.pull-left.global-notification-setting + .form-group.float-left.global-notification-setting = render 'shared/notifications/button', notification_setting: @global_notification_setting .clearfix diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml index c606b5a1e6c..8a51a30191a 100644 --- a/app/views/profiles/passwords/edit.html.haml +++ b/app/views/profiles/passwords/edit.html.haml @@ -20,7 +20,7 @@ .form-group = f.label :current_password, class: 'label-light' = f.password_field :current_password, required: true, class: 'form-control' - %p.help-block + %p.form-text.text-muted You must provide your current password in order to change it. .form-group = f.label :password, 'New password', class: 'label-light' diff --git a/app/views/profiles/passwords/new.html.haml b/app/views/profiles/passwords/new.html.haml index 2eb9fac57c3..2176d7f8a31 100644 --- a/app/views/profiles/passwords/new.html.haml +++ b/app/views/profiles/passwords/new.html.haml @@ -2,7 +2,7 @@ - header_title "New Password" %h3.page-title Setup new password %hr -= form_for @user, url: profile_password_path, method: :post, html: { class: 'form-horizontal '} do |f| += form_for @user, url: profile_password_path, method: :post do |f| %p.slead Please set a new password before proceeding. %br @@ -11,14 +11,14 @@ = form_errors(@user) - unless @user.password_automatically_set? - .form-group - = f.label :current_password, class: 'control-label' + .form-group.row + = f.label :current_password, class: 'col-form-label col-sm-2' .col-sm-10= f.password_field :current_password, required: true, class: 'form-control' - .form-group - = f.label :password, class: 'control-label' + .form-group.row + = f.label :password, class: 'col-form-label col-sm-2' .col-sm-10= f.password_field :password, required: true, class: 'form-control' - .form-group - = f.label :password_confirmation, class: 'control-label' + .form-group.row + = f.label :password_confirmation, class: 'col-form-label col-sm-2' .col-sm-10 = f.password_field :password_confirmation, required: true, class: 'form-control' .form-actions diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml index 9b87a7aaca8..d253e8e456e 100644 --- a/app/views/profiles/personal_access_tokens/index.html.haml +++ b/app/views/profiles/personal_access_tokens/index.html.haml @@ -20,9 +20,9 @@ .form-group .input-group = text_field_tag 'created-personal-access-token', @new_personal_access_token, readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block" - %span.input-group-btn - = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left", class: "btn-default btn-clipboard") - %span#created-personal-access-token-help-block.help-block.text-danger Make sure you save it - you won't be able to access it again. + %span.input-group-append + = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left", class: "input-group-text btn-default btn-clipboard") + %span#created-personal-access-token-help-block.form-text.text-muted.text-danger Make sure you save it - you won't be able to access it again. %hr @@ -42,7 +42,7 @@ .col-lg-8.rss-token-reset = label_tag :rss_token, 'RSS token', class: "label-light" = text_field_tag :rss_token, current_user.rss_token, class: 'form-control', readonly: true, onclick: 'this.select()' - %p.help-block + %p.form-text.text-muted Keep this token secret. Anyone who gets ahold of it can read activity and issue RSS feeds as if they were you. You should = link_to 'reset it', [:reset, :rss_token, :profile], method: :put, data: { confirm: 'Are you sure? Any RSS URLs currently in use will stop working.' } @@ -61,7 +61,7 @@ .col-lg-8.incoming-email-token-reset = label_tag :incoming_email_token, 'Incoming email token', class: "label-light" = text_field_tag :incoming_email_token, current_user.incoming_email_token, class: 'form-control', readonly: true, onclick: 'this.select()' - %p.help-block + %p.form-text.text-muted Keep this token secret. Anyone who gets ahold of it can create issues as if they were you. You should = link_to 'reset it', [:reset, :incoming_email_token, :profile], method: :put, data: { confirm: 'Are you sure? Any issue email addresses currently in use will stop working.' } diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml index 6aefd97bb96..ab5565cfdaf 100644 --- a/app/views/profiles/preferences/show.html.haml +++ b/app/views/profiles/preferences/show.html.haml @@ -51,7 +51,7 @@ = f.label :layout, class: 'label-light' do Layout width = f.select :layout, layout_choices, {}, class: 'form-control' - .help-block + .form-text.text-muted Choose between fixed (max. 1200px) and fluid (100%) application layout. .form-group = f.label :dashboard, class: 'label-light' do @@ -61,7 +61,7 @@ = f.label :project_view, class: 'label-light' do Project overview content = f.select :project_view, project_view_choices, {}, class: 'form-control' - .help-block + .form-text.text-muted Choose what content you want to see on a project’s overview page .form-group = f.submit 'Save changes', class: 'btn btn-save' diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml index e497eab32e0..fbb29e7a0d9 100644 --- a/app/views/profiles/show.html.haml +++ b/app/views/profiles/show.html.haml @@ -26,7 +26,7 @@ %button.btn.js-choose-user-avatar-button{ type: 'button' }= _("Choose file...") %span.avatar-file-name.prepend-left-default.js-avatar-filename= _("No file chosen") = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*' - .help-block= _("The maximum file size allowed is 200KB.") + .form-text.text-muted= _("The maximum file size allowed is 200KB.") - if @user.avatar? %hr = link_to _('Remove avatar'), profile_avatar_path, data: { confirm: _('Avatar will be removed. Are you sure?') }, method: :delete, class: 'btn btn-danger btn-inverted' diff --git a/app/views/profiles/two_factor_auths/_codes.html.haml b/app/views/profiles/two_factor_auths/_codes.html.haml index 43b58be7f98..93722d7b034 100644 --- a/app/views/profiles/two_factor_auths/_codes.html.haml +++ b/app/views/profiles/two_factor_auths/_codes.html.haml @@ -4,7 +4,7 @@ %b will lose access to your account. -.codes.well +.codes.card %ul - @codes.each do |code| %li diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml index d1eae05c46c..e35ebdea435 100644 --- a/app/views/profiles/two_factor_auths/show.html.haml +++ b/app/views/profiles/two_factor_auths/show.html.haml @@ -86,7 +86,7 @@ %tr %td= registration.name.presence || "<no name set>" %td= registration.created_at.to_date.to_s(:medium) - %td= link_to "Delete", profile_u2f_registration_path(registration), method: :delete, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to delete this device? This action cannot be undone." } + %td= link_to "Delete", profile_u2f_registration_path(registration), method: :delete, class: "btn btn-danger float-right", data: { confirm: "Are you sure you want to delete this device? This action cannot be undone." } - else .settings-message.text-center diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml index 043057e79ee..075badb9e56 100644 --- a/app/views/projects/_home_panel.html.haml +++ b/app/views/projects/_home_panel.html.haml @@ -37,7 +37,7 @@ = render 'projects/buttons/star' = render 'projects/buttons/fork' - %span.hidden-xs + %span.d-none.d-sm-inline - if can?(current_user, :download_code, @project) .project-clone-holder = render "shared/clone_panel" diff --git a/app/views/projects/_issuable_by_email.html.haml b/app/views/projects/_issuable_by_email.html.haml index c137e38ed50..e3dc0677bd6 100644 --- a/app/views/projects/_issuable_by_email.html.haml +++ b/app/views/projects/_issuable_by_email.html.haml @@ -17,8 +17,8 @@ You can create a new #{name} inside this project by sending an email to the following email address: .email-modal-input-group.input-group = text_field_tag :issuable_email, email, class: "monospace js-select-on-focus form-control", readonly: true - .input-group-btn - = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard btn-transparent hidden-xs') + .input-group-append + = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard input-group-text btn-transparent d-none d-sm-block') = mail_to email, class: 'btn btn-clipboard btn-transparent', subject: _("Enter the #{name} title"), body: _("Enter the #{name} description"), diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml index f6d396c8127..3b66fdbdf1a 100644 --- a/app/views/projects/_last_push.html.haml +++ b/app/views/projects/_last_push.html.haml @@ -1,6 +1,6 @@ - event = last_push_event - if event && show_last_push_widget?(event) - .row-content-block.top-block.hidden-xs.white + .row-content-block.top-block.d-none.d-sm-block.white .event-last-push .event-last-push-text %span= s_("LastPushEvent|You pushed to") diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml index 8212ab9a31e..8fb6aa55436 100644 --- a/app/views/projects/_md_preview.html.haml +++ b/app/views/projects/_md_preview.html.haml @@ -9,7 +9,7 @@ .md-area .md-header - %ul.nav-links.clearfix + %ul.nav.nav-tabs.nav-links.clearfix %li.md-header-tab.active %a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 } Write diff --git a/app/views/projects/_merge_request_fast_forward_settings.html.haml b/app/views/projects/_merge_request_fast_forward_settings.html.haml index f455522d17c..2f08a28e26e 100644 --- a/app/views/projects/_merge_request_fast_forward_settings.html.haml +++ b/app/views/projects/_merge_request_fast_forward_settings.html.haml @@ -1,7 +1,7 @@ - form = local_assigns.fetch(:form) - project = local_assigns.fetch(:project) -.radio +.form-check = label_tag :project_merge_method_ff do = form.radio_button :merge_method, :ff, class: "js-merge-method-radio qa-radio-button-merge-ff" %strong Fast-forward merge diff --git a/app/views/projects/_merge_request_merge_settings.html.haml b/app/views/projects/_merge_request_merge_settings.html.haml index f6e5712ce81..762a263656d 100644 --- a/app/views/projects/_merge_request_merge_settings.html.haml +++ b/app/views/projects/_merge_request_merge_settings.html.haml @@ -1,7 +1,7 @@ - form = local_assigns.fetch(:form) .form-group - .checkbox.builds-feature{ class: ("hidden" if @project && @project.project_feature.send(:builds_access_level) == 0) } + .form-check.builds-feature{ class: ("hidden" if @project && @project.project_feature.send(:builds_access_level) == 0) } = form.label :only_allow_merge_if_pipeline_succeeds do = form.check_box :only_allow_merge_if_pipeline_succeeds %strong Only allow merge requests to be merged if the pipeline succeeds @@ -9,15 +9,15 @@ %span.descr Pipelines need to be configured to enable this feature. = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds', anchor: 'only-allow-merge-requests-to-be-merged-if-the-pipeline-succeeds'), target: '_blank' - .checkbox + .form-check = form.label :only_allow_merge_if_all_discussions_are_resolved do = form.check_box :only_allow_merge_if_all_discussions_are_resolved %strong Only allow merge requests to be merged if all discussions are resolved - .checkbox + .form-check = form.label :resolve_outdated_diff_discussions do = form.check_box :resolve_outdated_diff_discussions %strong Automatically resolve merge request diff discussions when they become outdated - .checkbox + .form-check = form.label :printing_merge_request_link_enabled do = form.check_box :printing_merge_request_link_enabled %strong Show link to create/view merge request when pushing from the command line diff --git a/app/views/projects/_merge_request_rebase_settings.html.haml b/app/views/projects/_merge_request_rebase_settings.html.haml index 54e0b73d24c..93895a55435 100644 --- a/app/views/projects/_merge_request_rebase_settings.html.haml +++ b/app/views/projects/_merge_request_rebase_settings.html.haml @@ -1,6 +1,6 @@ - form = local_assigns.fetch(:form) -.radio +.form-check = label_tag :project_merge_method_rebase_merge do = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio" %strong Merge commit with semi-linear history diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml index fd0c419cdac..a9ddcd94865 100644 --- a/app/views/projects/_merge_request_settings.html.haml +++ b/app/views/projects/_merge_request_settings.html.haml @@ -3,7 +3,7 @@ .form-group = label_tag :merge_method_merge, class: 'label-light' do Merge method - .radio + .form-check = label_tag :project_merge_method_merge do = form.radio_button :merge_method, :merge, class: "js-merge-method-radio" %strong Merge commit diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml index 241bc3dbca0..6366a2f729a 100644 --- a/app/views/projects/_new_project_fields.html.haml +++ b/app/views/projects/_new_project_fields.html.haml @@ -9,13 +9,15 @@ Project path .input-group - if current_user.can_select_namespace? - .input-group-addon.has-tooltip{ title: root_url } - = root_url + .input-group-prepend.has-tooltip{ title: root_url } + .input-group-text + = root_url = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace qa-project-namespace-select', tabindex: 1} - else - .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' } - #{user_url(current_user.username)}/ + .input-group-prepend.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' } + .input-group-text + #{user_url(current_user.username)}/ = f.hidden_field :namespace_id, value: current_user.namespace_id .form-group.project-path.col-sm-6 = f.label :path, class: 'label-light' do @@ -23,7 +25,7 @@ Project name = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true - if current_user.can_create_group? - .help-block + .form-text.text-muted Want to house several dependent projects under the same namespace? = link_to "Create a group", new_group_path diff --git a/app/views/projects/_new_project_push_tip.html.haml b/app/views/projects/_new_project_push_tip.html.haml index 9bc69211d12..22e9522c0e7 100644 --- a/app/views/projects/_new_project_push_tip.html.haml +++ b/app/views/projects/_new_project_push_tip.html.haml @@ -3,9 +3,9 @@ = label_tag(:push_to_create_tip, _("Private projects can be created in your personal namespace with:"), class: "weight-normal") %p.input-group.project-tip-command - %span.input-group-btn + %span = text_field_tag :push_to_create_tip, push_to_create_project_command, class: "js-select-on-focus form-control monospace", readonly: true, aria: { label: _("Push project from command line") } - %span.input-group-btn - = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), placement: "right") + %span.input-group-append + = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), class: 'input-group-text', placement: "right") %p = link_to("What does this command do?", help_page_path("gitlab-basics/create-project", anchor: "push-to-create-a-new-project"), target: "_blank") diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml index d50175727be..9d27f51926e 100644 --- a/app/views/projects/_project_templates.html.haml +++ b/app/views/projects/_project_templates.html.haml @@ -14,11 +14,12 @@ %label.label-light Template .input-group.template-input-group - .input-group-addon - .selected-icon - - Gitlab::ProjectTemplate.all.each do |template| - = custom_icon(template.logo) - .selected-template + .input-group-prepend + .input-group-text + .selected-icon + - Gitlab::ProjectTemplate.all.each do |template| + = custom_icon(template.logo) + .selected-template %button.btn.btn-default.change-template{ type: "button" } Change template = render 'new_project_fields', f: f, project_name_id: "template-project-name" diff --git a/app/views/projects/_stat_anchor_list.html.haml b/app/views/projects/_stat_anchor_list.html.haml index a115b65938b..8bffd1396ae 100644 --- a/app/views/projects/_stat_anchor_list.html.haml +++ b/app/views/projects/_stat_anchor_list.html.haml @@ -1,8 +1,8 @@ - anchors = local_assigns.fetch(:anchors, []) - return unless anchors.any? -%ul.nav +%ul.nav.justify-content-center - anchors.each do |anchor| - %li - = link_to_if anchor.link, anchor.label, anchor.link, class: anchor.enabled ? 'stat-link' : "btn btn-#{anchor.class_modifier || 'missing'}" do + %li.nav-item + = link_to_if anchor.link, anchor.label, anchor.link, class: anchor.enabled ? 'nav-link stat-link' : "nav-link btn btn-#{anchor.class_modifier || 'missing'}" do %span.stat-text= anchor.label diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml index 2942d618a42..aac7a1870df 100644 --- a/app/views/projects/artifacts/file.html.haml +++ b/app/views/projects/artifacts/file.html.haml @@ -5,11 +5,11 @@ .tree-holder .nav-block %ul.breadcrumb.repo-breadcrumb - %li + %li.breadcrumb-item = link_to 'Artifacts', browse_project_job_artifacts_path(@project, @build) - path_breadcrumbs do |title, path| - title = truncate(title, length: 40) - %li + %li.breadcrumb-item - if path == @path = link_to file_project_job_artifacts_path(@project, @build, path) do %strong= title @@ -22,7 +22,7 @@ .js-file-title.file-title-flex-parent = render 'projects/blob/header_content', blob: blob - .file-actions.hidden-xs + .file-actions.d-none.d-sm-block = render 'projects/blob/viewer_switcher', blob: blob .btn-group{ role: "group" }< diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml index e45861ac08d..e90916e340d 100644 --- a/app/views/projects/blame/show.html.haml +++ b/app/views/projects/blame/show.html.haml @@ -22,7 +22,7 @@ .commit-row-title %span.item-title.str-truncated-100 = link_to_markdown commit.title, project_commit_path(@project, commit.id), class: "cdark", title: commit.title - .pull-right + .float-right = link_to commit.short_id, project_commit_path(@project, commit), class: "commit-sha" .light diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml index 849716a679b..a4b1b496b69 100644 --- a/app/views/projects/blob/_blob.html.haml +++ b/app/views/projects/blob/_blob.html.haml @@ -1,6 +1,6 @@ = render "projects/blob/breadcrumb", blob: blob -.info-well.hidden-xs +.info-well.d-none.d-sm-block .well-segment %ul.blob-commit-info = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml index 1c148de9678..a4fb5f6ba88 100644 --- a/app/views/projects/blob/_breadcrumb.html.haml +++ b/app/views/projects/blob/_breadcrumb.html.haml @@ -5,12 +5,12 @@ = render 'shared/ref_switcher', destination: 'blob', path: @path %ul.breadcrumb.repo-breadcrumb - %li + %li.breadcrumb-item = link_to project_tree_path(@project, @ref) do = @project.path - path_breadcrumbs do |title, path| - title = truncate(title, length: 40) - %li + %li.breadcrumb-item - if path == @path = link_to project_blob_path(@project, tree_join(@ref, path)) do %strong= title diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml index c9fa90acd11..8560b72fe85 100644 --- a/app/views/projects/blob/_editor.html.haml +++ b/app/views/projects/blob/_editor.html.haml @@ -16,7 +16,7 @@ = text_field_tag 'file_name', params[:file_name], placeholder: "File name", required: true, class: 'form-control new-file-name js-file-path-name-input' - .pull-right.file-buttons + .float-right.file-buttons = button_tag class: 'soft-wrap-toggle btn', type: 'button', tabindex: '-1' do %span.no-wrap = custom_icon('icon_no_wrap') diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml index 5d457a50c49..4bef45932d0 100644 --- a/app/views/projects/blob/_header_content.html.haml +++ b/app/views/projects/blob/_header_content.html.haml @@ -10,4 +10,4 @@ = number_to_human_size(blob.raw_size) - if blob.stored_externally? && blob.external_storage == :lfs - %span.label.label-lfs.append-right-5 LFS + %span.badge.label-lfs.append-right-5 LFS diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml index 48ff66900be..e7a4e3d67cb 100644 --- a/app/views/projects/blob/_new_dir.html.haml +++ b/app/views/projects/blob/_new_dir.html.haml @@ -5,9 +5,9 @@ %a.close{ href: "#", "data-dismiss" => "modal" } × %h3.page-title= _('Create New Directory') .modal-body - = form_tag project_create_dir_path(@project, @id), method: :post, remote: false, class: 'form-horizontal js-create-dir-form js-quick-submit js-requires-input' do - .form-group - = label_tag :dir_name, _('Directory name'), class: 'control-label' + = form_tag project_create_dir_path(@project, @id), method: :post, remote: false, class: 'js-create-dir-form js-quick-submit js-requires-input' do + .form-group.row + = label_tag :dir_name, _('Directory name'), class: 'col-form-label col-sm-2' .col-sm-10 = text_field_tag :dir_name, params[:dir_name], required: true, class: 'form-control' diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml index 750bdef3308..4628ecff3d6 100644 --- a/app/views/projects/blob/_remove.html.haml +++ b/app/views/projects/blob/_remove.html.haml @@ -6,10 +6,10 @@ %h3.page-title Delete #{@blob.name} .modal-body - = form_tag project_blob_path(@project, @id), method: :delete, class: 'form-horizontal js-delete-blob-form js-quick-submit js-requires-input' do + = form_tag project_blob_path(@project, @id), method: :delete, class: 'js-delete-blob-form js-quick-submit js-requires-input' do = render 'shared/new_commit_form', placeholder: "Delete #{@blob.name}" - .form-group - .col-sm-offset-2.col-sm-10 + .form-group.row + .offset-sm-2.col-sm-10 = button_tag 'Delete file', class: 'btn btn-remove btn-remove-file' = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal" diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml index 182d02376bf..60a49441ce8 100644 --- a/app/views/projects/blob/_upload.html.haml +++ b/app/views/projects/blob/_upload.html.haml @@ -5,7 +5,7 @@ %a.close{ href: "#", "data-dismiss" => "modal" } × %h3.page-title= title .modal-body - = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal', data: { method: method } do + = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form', data: { method: method } do .dropzone .dropzone-previews.blob-upload-dropzone-previews %p.dz-message.light diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml index 9d90251ab66..27cf040da7c 100644 --- a/app/views/projects/blob/edit.html.haml +++ b/app/views/projects/blob/edit.html.haml @@ -15,7 +15,7 @@ Edit file = render 'template_selectors' .file-editor - %ul.nav-links.no-bottom.js-edit-mode + %ul.nav-links.no-bottom.js-edit-mode.nav.nav-tabs %li.active = link_to '#editor' do Write @@ -24,7 +24,7 @@ = link_to '#preview', 'data-preview-url' => project_preview_blob_path(@project, @id) do = editing_preview_title(@blob.name) - = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'form-horizontal js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths) do + = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths) do = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}" = hidden_field_tag 'last_commit_sha', @last_commit_sha diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml index fa091d8f6ef..39442564a2b 100644 --- a/app/views/projects/blob/new.html.haml +++ b/app/views/projects/blob/new.html.haml @@ -7,7 +7,7 @@ New file = render 'template_selectors' .file-editor - = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'form-horizontal js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths) do + = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths) do = render 'projects/blob/editor', ref: @ref = render 'shared/new_commit_form', placeholder: "Add new file" diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml index 0e012b5a216..5b1f2d8953b 100644 --- a/app/views/projects/branches/_branch.html.haml +++ b/app/views/projects/branches/_branch.html.haml @@ -12,13 +12,13 @@ = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name prepend-left-8' do = branch.name - if branch.name == @repository.root_ref - %span.label.label-primary.prepend-left-5 default + %span.badge.badge-primary.prepend-left-5 default - elsif merged - %span.label.label-info.has-tooltip.prepend-left-5{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } } + %span.badge.badge-info.has-tooltip.prepend-left-5{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } } = s_('Branches|merged') - if protected_branch?(@project, branch) - %span.label.label-success.prepend-left-5 + %span.badge.badge-success.prepend-left-5 = s_('Branches|protected') .block-truncated @@ -28,7 +28,7 @@ = s_('Branches|Cant find HEAD commit for this branch') - if branch.name != @repository.root_ref - .divergence-graph.hidden-xs{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind), + .divergence-graph.d-none.d-sm-block{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind), default_branch: @repository.root_ref, number_commits_ahead: diverging_count_label(number_commits_ahead) } } .graph-side @@ -39,7 +39,7 @@ .bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" } %span.count.count-ahead= diverging_count_label(number_commits_ahead) - .controls.hidden-xs< + .controls.d-none.d-sm-block< - if merge_project && create_mr_button?(@repository.root_ref, branch.name) = link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-default' do = _('Merge request') diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml index 12e5a8e8d69..398f76d379a 100644 --- a/app/views/projects/branches/_panel.html.haml +++ b/app/views/projects/branches/_panel.html.haml @@ -7,13 +7,13 @@ - return unless branches.any? -.panel.panel-default.prepend-top-10 - .panel-heading - %h4.panel-title +.card.prepend-top-10 + .card-header + %h4.card-title = panel_title %ul.content-list.all-branches - branches.first(overview_max_branches).each do |branch| = render "projects/branches/branch", branch: branch, merged: project.repository.merged_to_root_ref?(branch) - if branches.size > overview_max_branches - .panel-footer.text-center + .card-footer.text-center = link_to show_more_text, project_branches_filtered_path(project, state: state), id: "state-#{state}", data: { state: state } diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml index 5dcc72d8263..d6568c9f64a 100644 --- a/app/views/projects/branches/index.html.haml +++ b/app/views/projects/branches/index.html.haml @@ -3,7 +3,7 @@ %div{ class: container_class } .top-area.adjust - %ul.nav-links.issues-state-filters + %ul.nav-links.issues-state-filters.nav.nav-tabs %li{ class: active_when(@mode == 'overview') }> = link_to s_('Branches|Overview'), project_branches_path(@project), title: s_('Branches|Show overview of the branches') @@ -26,7 +26,7 @@ %span.light = branches_sort_options_hash[@sort] = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable %li.dropdown-header = s_('Branches|Sort by') - branches_sort_options_hash.each do |value, title| diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml index c7fc5a98ca8..65b414c8af2 100644 --- a/app/views/projects/branches/new.html.haml +++ b/app/views/projects/branches/new.html.haml @@ -9,14 +9,14 @@ New Branch %hr -= form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "form-horizontal js-create-branch-form js-requires-input" do - .form-group - = label_tag :branch_name, nil, class: 'control-label' += form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "js-create-branch-form js-requires-input" do + .form-group.row + = label_tag :branch_name, nil, class: 'col-form-label col-sm-2' .col-sm-10 = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name' - .help-block.text-danger.js-branch-name-error - .form-group - = label_tag :ref, 'Create from', class: 'control-label' + .form-text.text-muted.text-danger.js-branch-name-error + .form-group.row + = label_tag :ref, 'Create from', class: 'col-form-label col-sm-2' .col-sm-10.create-from .dropdown = hidden_field_tag :ref, default_ref @@ -24,7 +24,7 @@ .text-left.dropdown-toggle-text= default_ref = icon('chevron-down') = render 'shared/ref_dropdown', dropdown_class: 'wide' - .help-block Existing branch name, tag, or commit SHA + .form-text.text-muted Existing branch name, tag, or commit SHA .form-actions = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3 = link_to 'Cancel', project_branches_path(@project), class: 'btn btn-cancel' diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml index f49f6e630d2..c75093c4c24 100644 --- a/app/views/projects/buttons/_download.html.haml +++ b/app/views/projects/buttons/_download.html.haml @@ -7,7 +7,7 @@ = sprite_icon('download') = icon("caret-down") %span.sr-only= _('Select Archive Format') - %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' } + %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' } %li.dropdown-header #{ _('Source code') } %li diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml index 2e86a7d36d7..84245d72f4a 100644 --- a/app/views/projects/buttons/_dropdown.html.haml +++ b/app/views/projects/buttons/_dropdown.html.haml @@ -11,7 +11,7 @@ %a.btn.dropdown-toggle.has-tooltip{ href: '#', title: _('Create new...'), 'data-toggle' => 'dropdown', 'data-container' => 'body', 'aria-label' => _('Create new...') } = icon('plus') = icon("caret-down") - %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown + %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown - if can_create_issue || merge_project || can_create_project_snippet %li.dropdown-header= _('This project') diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml index 9126476e79e..44c1453e239 100644 --- a/app/views/projects/ci/builds/_build.html.haml +++ b/app/views/projects/ci/builds/_build.html.haml @@ -41,14 +41,14 @@ .label-container - if job.tags.any? - job.tags.each do |tag| - %span.label.label-primary + %span.badge.badge-primary = tag - if job.try(:trigger_request) - %span.label.label-info triggered + %span.badge.badge-info triggered - if job.try(:allow_failure) - %span.label.label-danger allowed to fail + %span.badge.badge-danger allowed to fail - if job.action? - %span.label.label-info manual + %span.badge.badge-info manual - if pipeline_link %td @@ -93,7 +93,7 @@ #{job.coverage}% %td - .pull-right + .float-right - if can?(current_user, :read_build, job) && job.artifacts? = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do = sprite_icon('download') diff --git a/app/views/projects/ci/lints/show.html.haml b/app/views/projects/ci/lints/show.html.haml index 6ca8152183d..cbda6bf2107 100644 --- a/app/views/projects/ci/lints/show.html.haml +++ b/app/views/projects/ci/lints/show.html.haml @@ -3,22 +3,21 @@ - content_for :library_javascripts do = page_specific_javascript_tag('lib/ace.js') -%h2 Check your .gitlab-ci.yml +%h2.pt-3.pb-3 Check your .gitlab-ci.yml .project-ci-linter - .row - = form_tag project_ci_lint_path(@project), method: :post do - .form-group - .col-sm-12 - .file-holder - .js-file-title.file-title.clearfix - Content of .gitlab-ci.yml - #ci-editor.ci-editor= @content - = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true) + = form_tag project_ci_lint_path(@project), method: :post do + .row .col-sm-12 - .pull-left.prepend-top-10 + .file-holder + .js-file-title.file-title.clearfix + Content of .gitlab-ci.yml + #ci-editor.ci-editor= @content + = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true) + .col-sm-12 + .float-left.prepend-top-10 = submit_tag('Validate', class: 'btn btn-success submit-yml') - .pull-right.prepend-top-10 + .float-right.prepend-top-10 = button_tag('Clear', type: 'button', class: 'btn btn-default clear-yml') .row.prepend-top-20 diff --git a/app/views/projects/clusters/_advanced_settings.html.haml b/app/views/projects/clusters/_advanced_settings.html.haml index 14979bee714..e9bdc54364b 100644 --- a/app/views/projects/clusters/_advanced_settings.html.haml +++ b/app/views/projects/clusters/_advanced_settings.html.haml @@ -7,7 +7,7 @@ - link_gke = link_to(s_('ClusterIntegration|Google Kubernetes Engine'), @cluster.gke_cluster_url, target: '_blank', rel: 'noopener noreferrer') = s_('ClusterIntegration|Manage your Kubernetes cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke } - .well.form-group + .card.form-group %label.text-danger = s_('ClusterIntegration|Remove Kubernetes cluster integration') %p diff --git a/app/views/projects/clusters/_empty_state.html.haml b/app/views/projects/clusters/_empty_state.html.haml index 5f49d03b1bb..b8a3556a206 100644 --- a/app/views/projects/clusters/_empty_state.html.haml +++ b/app/views/projects/clusters/_empty_state.html.haml @@ -1,7 +1,7 @@ .row.empty-state - .col-xs-12 + .col-12 .svg-content= image_tag 'illustrations/clusters_empty.svg' - .col-xs-12 + .col-12 .text-content %h4.text-center= s_('ClusterIntegration|Integrate Kubernetes cluster automation') - link_to_help_page = link_to(_('Learn more about Kubernetes'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer') diff --git a/app/views/projects/clusters/gcp/_show.html.haml b/app/views/projects/clusters/gcp/_show.html.haml index 78cd687ef93..877e0cc876c 100644 --- a/app/views/projects/clusters/gcp/_show.html.haml +++ b/app/views/projects/clusters/gcp/_show.html.haml @@ -3,8 +3,8 @@ = s_('ClusterIntegration|Kubernetes cluster name') .input-group %input.form-control.cluster-name.js-select-on-focus{ value: @cluster.name, readonly: true } - %span.input-group-btn - = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'), class: 'btn-default') + %span.input-group-append + = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'), class: 'input-group-text btn-default') = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field| = form_errors(@cluster) @@ -14,22 +14,22 @@ = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL') .input-group = platform_kubernetes_field.text_field :api_url, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|API URL'), readonly: true - %span.input-group-btn - = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'btn-default') + %span.input-group-append + = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'input-group-text btn-default') .form-group = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate') .input-group = platform_kubernetes_field.text_area :ca_cert, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), readonly: true - %span.input-group-addon.clipboard-addon - = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'btn-blank') + %span.input-group-append.clipboard-addon + = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'input-group-text btn-blank') .form-group = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token') .input-group = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token js-select-on-focus', type: 'password', placeholder: s_('ClusterIntegration|Token'), readonly: true - %span.input-group-btn - %button.btn.btn-default.js-show-cluster-token{ type: 'button' } + %span.input-group-append + %button.btn.btn-default.input-group-text.js-show-cluster-token{ type: 'button' } = s_('ClusterIntegration|Show') = clipboard_button(text: @cluster.platform_kubernetes.token, title: s_('ClusterIntegration|Copy Token'), class: 'btn-default') diff --git a/app/views/projects/clusters/gcp/login.html.haml b/app/views/projects/clusters/gcp/login.html.haml index ff046c59a7a..f1771349a53 100644 --- a/app/views/projects/clusters/gcp/login.html.haml +++ b/app/views/projects/clusters/gcp/login.html.haml @@ -10,7 +10,7 @@ = render 'projects/clusters/dropdown', dropdown_text: s_('ClusterIntegration|Create Kubernetes cluster on Google Kubernetes Engine') = render 'header' .row - .col-sm-8.col-sm-offset-4.signin-with-google + .col-sm-8.offset-sm-4.signin-with-google - if @authorize_url = link_to @authorize_url do = image_tag('auth_buttons/signin_with_google.png', width: '191px') diff --git a/app/views/projects/clusters/user/_show.html.haml b/app/views/projects/clusters/user/_show.html.haml index ebbf7e775c7..77d7a055474 100644 --- a/app/views/projects/clusters/user/_show.html.haml +++ b/app/views/projects/clusters/user/_show.html.haml @@ -17,9 +17,10 @@ = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token') .input-group = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), autocomplete: 'off' - %span.input-group-addon.clipboard-addon - %button.js-show-cluster-token.btn-blank{ type: 'button' } - = s_('ClusterIntegration|Show') + %span.input-group-append.clipboard-addon + .input-group-text + %button.js-show-cluster-token.btn-blank{ type: 'button' } + = s_('ClusterIntegration|Show') .form-group = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)') diff --git a/app/views/projects/commit/_ajax_signature.html.haml b/app/views/projects/commit/_ajax_signature.html.haml index 36b28c731a1..eb677cff5f0 100644 --- a/app/views/projects/commit/_ajax_signature.html.haml +++ b/app/views/projects/commit/_ajax_signature.html.haml @@ -1,2 +1,2 @@ - if commit.has_signature? - %a{ href: 'javascript:void(0)', tabindex: 0, class: commit_signature_badge_classes('js-loading-gpg-badge'), data: { toggle: 'tooltip', placement: 'auto top', title: 'GPG signature (loading...)', 'commit-sha' => commit.sha } } + %a{ href: 'javascript:void(0)', tabindex: 0, class: commit_signature_badge_classes('js-loading-gpg-badge'), data: { toggle: 'tooltip', placement: 'top', title: 'GPG signature (loading...)', 'commit-sha' => commit.sha } } diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml index 21e4664d4e4..430bc8f59f9 100644 --- a/app/views/projects/commit/_change.html.haml +++ b/app/views/projects/commit/_change.html.haml @@ -20,9 +20,9 @@ .modal-body - if description %p.append-bottom-20= description - = form_tag [type.underscore, @project.namespace.becomes(Namespace), @project, commit], method: :post, remote: false, class: "form-horizontal js-#{type}-form js-requires-input" do - .form-group.branch - = label_tag 'start_branch', branch_label, class: 'control-label' + = form_tag [type.underscore, @project.namespace.becomes(Namespace), @project, commit], method: :post, remote: false, class: "js-#{type}-form js-requires-input" do + .form-group.row.branch + = label_tag 'start_branch', branch_label, class: 'col-form-label col-sm-2' .col-sm-10 = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch' = dropdown_tag(@project.default_branch, options: { title: s_("BranchSwitcherTitle|Switch branch"), filter: true, placeholder: s_("BranchSwitcherPlaceholder|Search branches"), toggle_class: 'js-project-refs-dropdown dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: project_branches_path(@project), submit_form_on_click: false } }) diff --git a/app/views/projects/commit/_ci_menu.html.haml b/app/views/projects/commit/_ci_menu.html.haml index 7338468967f..f6666921a25 100644 --- a/app/views/projects/commit/_ci_menu.html.haml +++ b/app/views/projects/commit/_ci_menu.html.haml @@ -1,10 +1,10 @@ -%ul.nav-links.no-top.no-bottom.commit-ci-menu +%ul.nav-links.no-top.no-bottom.commit-ci-menu.nav.nav-tabs = nav_link(path: 'commit#show') do = link_to project_commit_path(@project, @commit.id) do Changes - %span.badge= @diffs.size + %span.badge.badge-pill= @diffs.size - if can?(current_user, :read_pipeline, @project) = nav_link(path: 'commit#pipelines') do = link_to pipelines_project_commit_path(@project, @commit.id) do Pipelines - %span.badge.js-pipelines-mr-count= @commit.pipelines.size + %span.badge.badge-pill.js-pipelines-mr-count= @commit.pipelines.size diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml index 1bffb3e8bf0..886dd73c33b 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -7,7 +7,7 @@ #{ s_('CommitBoxTitle|Commit') } %span.commit-sha= @commit.short_id = clipboard_button(text: @commit.id, title: _("Copy commit SHA to clipboard")) - %span.hidden-xs authored + %span.d-none.d-sm-inline authored #{time_ago_with_tooltip(@commit.authored_date)} %span= s_('ByAuthor|by') = author_avatar(@commit, size: 24) @@ -21,17 +21,17 @@ .header-action-buttons - if defined?(@notes_count) && @notes_count > 0 - %span.btn.disabled.btn-grouped.hidden-xs.append-right-10 + %span.btn.disabled.btn-grouped.d-none.d-sm-block.append-right-10 = icon('comment') = @notes_count - = link_to project_tree_path(@project, @commit), class: "btn btn-default append-right-10 hidden-xs hidden-sm" do + = link_to project_tree_path(@project, @commit), class: "btn btn-default append-right-10 d-none d-sm-none d-md-inline" do #{ _('Browse files') } .dropdown.inline %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } } %span= _('Options') = icon('caret-down') - %ul.dropdown-menu.dropdown-menu-align-right - %li.visible-xs-block.visible-sm-block + %ul.dropdown-menu.dropdown-menu-right + %li.d-block.d-sm-none.d-md-none = link_to project_tree_path(@project, @commit) do #{ _('Browse Files') } - if can_collaborate && !@commit.has_been_reverted?(current_user) diff --git a/app/views/projects/commit/_signature_badge.html.haml b/app/views/projects/commit/_signature_badge.html.haml index aac020b42c5..c4d986ef742 100644 --- a/app/views/projects/commit/_signature_badge.html.haml +++ b/app/views/projects/commit/_signature_badge.html.haml @@ -24,5 +24,5 @@ = link_to('Learn more about signing commits', help_page_path('user/project/repository/gpg_signed_commits/index.md'), class: 'gpg-popover-help-link') -%a{ href: 'javascript:void(0)', tabindex: 0, class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'auto top', title: title, content: content } } +%a{ href: 'javascript:void(0)', tabindex: 0, class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } } = label diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index c390c9c4469..12b27eb9b66 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -18,7 +18,7 @@ = cache(cache_key, expires_in: 1.day) do %li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" } - .avatar-cell.hidden-xs + .avatar-cell.d-none.d-sm-block = author_avatar(commit, size: 36) .commit-detail.flex-list @@ -27,14 +27,14 @@ = link_to commit.title, project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "commit-row-message item-title" - else = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title") - %span.commit-row-message.visible-xs-inline + %span.commit-row-message.d-block.d-sm-none · = commit.short_id - if commit.status(ref) - .visible-xs-inline + .d-block.d-sm-none = render_commit_status(commit, ref: ref) - if commit.description? - %button.text-expander.hidden-xs.js-toggle-button{ type: "button" } ... + %button.text-expander.d-none.d-sm-inline-block.js-toggle-button{ type: "button" } ... .commiter - commit_author_link = commit_author_link(commit, avatar: false, size: 24) @@ -46,7 +46,7 @@ %pre.commit-row-description.js-toggle-content.prepend-top-8.append-bottom-8 = preserve(markdown_field(commit, :description)) - .commit-actions.flex-row.hidden-xs + .commit-actions.flex-row.d-none.d-sm-flex - if request.xhr? = render partial: 'projects/commit/signature', object: commit.signature - else diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml index 6f5835cb9be..8f8eb2c3d5a 100644 --- a/app/views/projects/commits/_commit_list.html.haml +++ b/app/views/projects/commits/_commit_list.html.haml @@ -1,8 +1,8 @@ - commits, hidden = limited_commits(@commits) - commits = Commit.decorate(commits, @project) -.panel.panel-default - .panel-heading +.card + .card-header Commits (#{@commits.count}) - if hidden > 0 %ul.content-list diff --git a/app/views/projects/commits/_inline_commit.html.haml b/app/views/projects/commits/_inline_commit.html.haml index 26385d2f534..caaff082cc3 100644 --- a/app/views/projects/commits/_inline_commit.html.haml +++ b/app/views/projects/commits/_inline_commit.html.haml @@ -4,5 +4,5 @@ %span.str-truncated = link_to_markdown_field(commit, :title, project_commit_path(project, commit.id), class: "commit-row-message") - .pull-right + .float-right #{time_ago_with_tooltip(commit.committed_date)} diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml index 483cca11df9..9d254463fb6 100644 --- a/app/views/projects/commits/show.html.haml +++ b/app/views/projects/commits/show.html.haml @@ -15,7 +15,7 @@ %ul.breadcrumb.repo-breadcrumb = commits_breadcrumbs - .tree-controls.hidden-xs.hidden-sm + .tree-controls.d-none.d-sm-none.d-md-block - if @merge_request.present? .control = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn' diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml index 40cdf96e76d..07112c98804 100644 --- a/app/views/projects/compare/_form.html.haml +++ b/app/views/projects/compare/_form.html.haml @@ -1,28 +1,29 @@ = form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input js-signature-container', data: { 'signatures-path' => signatures_namespace_project_compare_index_path } do - .clearfix - - if params[:to] && params[:from] - .compare-switch-container - = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions' - .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown - .input-group.inline-input-group - %span.input-group-addon + - if params[:to] && params[:from] + .compare-switch-container + = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions' + .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown + .input-group.inline-input-group + %span.input-group-prepend + .input-group-text = s_("CompareBranches|Source") - = hidden_field_tag :to, params[:to] - = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do - .dropdown-toggle-text.str-truncated= params[:to] || _("Select branch/tag") - = render 'shared/ref_dropdown' - .compare-ellipsis.inline ... - .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown - .input-group.inline-input-group - %span.input-group-addon + = hidden_field_tag :to, params[:to] + = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do + .dropdown-toggle-text.str-truncated= params[:to] || _("Select branch/tag") + = render 'shared/ref_dropdown' + .compare-ellipsis.inline ... + .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown + .input-group.inline-input-group + %span.input-group-prepend + .input-group-text = s_("CompareBranches|Target") - = hidden_field_tag :from, params[:from] - = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do - .dropdown-toggle-text.str-truncated= params[:from] || _("Select branch/tag") - = render 'shared/ref_dropdown' - - = button_tag s_("CompareBranches|Compare"), class: "btn btn-create commits-compare-btn" - - if @merge_request.present? - = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn' - - elsif create_mr_button? - = link_to _("Create merge request"), create_mr_path, class: 'prepend-left-10 btn' + = hidden_field_tag :from, params[:from] + = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do + .dropdown-toggle-text.str-truncated= params[:from] || _("Select branch/tag") + = render 'shared/ref_dropdown' + + = button_tag s_("CompareBranches|Compare"), class: "btn btn-create commits-compare-btn" + - if @merge_request.present? + = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn' + - elsif create_mr_button? + = link_to _("Create merge request"), create_mr_path, class: 'prepend-left-10 btn' diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml index 8da55664878..b6bebbabed0 100644 --- a/app/views/projects/compare/show.html.haml +++ b/app/views/projects/compare/show.html.haml @@ -10,7 +10,7 @@ = render "projects/commits/commit_list" = render "projects/diffs/diffs", diffs: @diffs, environment: @environment - else - .light-well + .card.bg-light .center %h4 = s_("CompareBranches|There isn't anything to compare.") diff --git a/app/views/projects/cycle_analytics/_overview.html.haml b/app/views/projects/cycle_analytics/_overview.html.haml index 9007f2c24ba..5b0d73b8c68 100644 --- a/app/views/projects/cycle_analytics/_overview.html.haml +++ b/app/views/projects/cycle_analytics/_overview.html.haml @@ -1,7 +1,7 @@ .cycle-analytics-overview .container .row - .col-md-10.col-md-offset-1 + .col-md-10.offset-md-1 .row.overview-details .col-md-6.overview-text %h4 Introducing Cycle Analytics diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 5041f322612..bdf021fd87f 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -8,21 +8,21 @@ "v-on:dismiss-overview-dialog" => "dismissOverviewDialog()" } = icon("spinner spin", "v-show" => "isLoading") .wrapper{ "v-show" => "!isLoading && !hasError" } - .panel.panel-default - .panel-heading + .card + .card-header {{ __('Pipeline Health') }} .content-block .container-fluid .row - .col-sm-3.col-xs-12.column{ "v-for" => "item in state.summary" } + .col-sm-3.col-12.column{ "v-for" => "item in state.summary" } %h3.header {{ item.value }} %p.text {{ item.title }} - .col-sm-3.col-xs-12.column + .col-sm-3.col-12.column .dropdown.inline.js-ca-dropdown %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" } %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }} %i.fa.fa-chevron-down - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right %li %a{ "href" => "#", "data-value" => "7" } {{ n__('Last %d day', 'Last %d days', 7) }} @@ -33,8 +33,8 @@ %a{ "href" => "#", "data-value" => "90" } {{ n__('Last %d day', 'Last %d days', 90) }} .stage-panel-container - .panel.panel-default.stage-panel - .panel-heading + .card.stage-panel + .card-header %nav.col-headers %ul %li.stage-header diff --git a/app/views/projects/deploy_keys/_form.html.haml b/app/views/projects/deploy_keys/_form.html.haml index c363180d0db..5ad8091a02b 100644 --- a/app/views/projects/deploy_keys/_form.html.haml +++ b/app/views/projects/deploy_keys/_form.html.haml @@ -1,24 +1,24 @@ -= form_for [@project.namespace.becomes(Namespace), @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input" } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input container" } do |f| = form_errors(@deploy_keys.new_key) - .form-group + .form-group.row = f.label :title, class: "label-light" = f.text_field :title, class: 'form-control', required: true - .form-group + .form-group.row = f.label :key, class: "label-light" = f.text_area :key, class: "form-control", rows: 5, required: true - .form-group + .form-group.row %p.light.append-bottom-0 Paste a machine public key here. Read more about how to generate it = link_to "here", help_page_path("ssh/README") = f.fields_for :deploy_keys_projects do |deploy_keys_project_form| - .form-group - .checkbox - = deploy_keys_project_form.label :can_push do - = deploy_keys_project_form.check_box :can_push - %strong Write access allowed - .form-group + .form-group.row + = deploy_keys_project_form.label :can_push do + = deploy_keys_project_form.check_box :can_push + %strong Write access allowed + .form-group.row %p.light.append-bottom-0 Allow this key to push to repository as well? (Default only allows pull access.) - = f.submit "Add key", class: "btn-create btn" + .form-group.row + = f.submit "Add key", class: "btn-create btn" diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml index cd910b82b57..e009b6fef0e 100644 --- a/app/views/projects/deploy_keys/edit.html.haml +++ b/app/views/projects/deploy_keys/edit.html.haml @@ -3,7 +3,7 @@ %hr %div - = form_for [@project.namespace.becomes(Namespace), @project, @deploy_key], html: { class: 'form-horizontal js-requires-input' } do |f| + = form_for [@project.namespace.becomes(Namespace), @project, @deploy_key], html: { class: 'js-requires-input' } do |f| = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key } .form-actions = f.submit 'Save changes', class: 'btn-save btn' diff --git a/app/views/projects/deploy_tokens/_revoke_modal.html.haml b/app/views/projects/deploy_tokens/_revoke_modal.html.haml index 085964fe22e..ace3480c815 100644 --- a/app/views/projects/deploy_tokens/_revoke_modal.html.haml +++ b/app/views/projects/deploy_tokens/_revoke_modal.html.haml @@ -2,7 +2,7 @@ .modal-dialog .modal-content .modal-header - %h4.modal-title.pull-left + %h4.modal-title.float-left = s_('DeployTokens|Revoke') %b #{token.name}? %button.close{ 'aria-label' => _('Close'), 'data-dismiss' => 'modal', type: 'button' } diff --git a/app/views/projects/deploy_tokens/_table.html.haml b/app/views/projects/deploy_tokens/_table.html.haml index 5013a9b250d..91466a6736b 100644 --- a/app/views/projects/deploy_tokens/_table.html.haml +++ b/app/views/projects/deploy_tokens/_table.html.haml @@ -24,7 +24,7 @@ - else %span.token-never-expires-label Never %td= token.scopes.present? ? token.scopes.join(", ") : "<no scopes selected>" - %td= link_to s_('DeployTokens|Revoke'), "#", class: "btn btn-danger pull-right", data: { toggle: "modal", target: "#revoke-modal-#{token.id}"} + %td= link_to s_('DeployTokens|Revoke'), "#", class: "btn btn-danger float-right", data: { toggle: "modal", target: "#revoke-modal-#{token.id}"} = render 'projects/deploy_tokens/revoke_modal', token: token, project: project - else .settings-message.text-center diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml index e2baaa625ae..e0ecf56525a 100644 --- a/app/views/projects/deployments/_actions.haml +++ b/app/views/projects/deployments/_actions.haml @@ -6,7 +6,7 @@ %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' } = custom_icon('icon_play') = icon('caret-down') - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right - actions.each do |action| - next unless can?(current_user, :update_build, action) %li diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml index 9f420ee86f7..077c6c68f7e 100644 --- a/app/views/projects/diffs/_diffs.html.haml +++ b/app/views/projects/diffs/_diffs.html.haml @@ -6,16 +6,16 @@ .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed{ class: ("diff-files-changed-merge-request" if merge_request) } .files-changed-inner - .inline-parallel-buttons.hidden-xs.hidden-sm + .inline-parallel-buttons.d-none.d-sm-none.d-md-block - if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? } = link_to 'Expand all', url_for(safe_params.merge(expanded: 1, format: nil)), class: 'btn btn-default' - if show_whitespace_toggle - if current_controller?(:commit) - = commit_diff_whitespace_link(diffs.project, @commit, class: 'hidden-xs') + = commit_diff_whitespace_link(diffs.project, @commit, class: 'd-none d-sm-inline-block') - elsif current_controller?('projects/merge_requests/diffs') - = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'hidden-xs') + = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'd-none d-sm-inline-block') - elsif current_controller?(:compare) - = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'hidden-xs') + = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-inline-block') .btn-group = inline_diff_btn = parallel_diff_btn diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml index 47bfcb21cf4..b4df654c839 100644 --- a/app/views/projects/diffs/_file.html.haml +++ b/app/views/projects/diffs/_file.html.haml @@ -10,7 +10,7 @@ - unless diff_file.submodule? - blob = diff_file.blob - .file-actions.hidden-xs + .file-actions.d-none.d-sm-block - if blob&.readable_text? = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file", disabled: @diff_notes_disabled do = icon('comment') diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml index dbeddf6689a..4cb04d744dc 100644 --- a/app/views/projects/diffs/_file_header.html.haml +++ b/app/views/projects/diffs/_file_header.html.haml @@ -37,4 +37,4 @@ #{diff_file.a_mode} → #{diff_file.b_mode} - if diff_file.stored_externally? && diff_file.external_storage == :lfs - %span.label.label-lfs.append-right-5 LFS + %span.badge.label-lfs.append-right-5 LFS diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml index 6fd6018dea3..aa1112c3313 100644 --- a/app/views/projects/diffs/_stats.html.haml +++ b/app/views/projects/diffs/_stats.html.haml @@ -2,7 +2,7 @@ - sum_removed_lines = diff_files.sum(&:removed_lines) .commit-stat-summary.dropdown Showing - %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown" } }< + %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown", display: "static" } }< = pluralize(diff_files.size, "changed file") = icon("caret-down", class: "prepend-left-5") %span.diff-stats-additions-deletions-expanded#diff-stats @@ -10,7 +10,7 @@ %strong.cgreen= pluralize(sum_added_lines, 'addition') and %strong.cred= pluralize(sum_removed_lines, 'deletion') - .diff-stats-additions-deletions-collapsed.pull-right.hidden-xs.hidden-sm{ "aria-hidden": "true", "aria-describedby": "diff-stats" } + .diff-stats-additions-deletions-collapsed.float-right.d-none.d-sm-none{ "aria-hidden": "true", "aria-describedby": "diff-stats" } %strong.cgreen< +#{sum_added_lines} %strong.cred< diff --git a/app/views/projects/diffs/_warning.html.haml b/app/views/projects/diffs/_warning.html.haml index da34a83d8e0..abe494f2974 100644 --- a/app/views/projects/diffs/_warning.html.haml +++ b/app/views/projects/diffs/_warning.html.haml @@ -1,7 +1,7 @@ .alert.alert-warning %h4 Too many changes to show. - .pull-right + .float-right - if current_controller?(:commit) = link_to "Plain diff", project_commit_path(@project, @commit, format: :diff), class: "btn btn-sm" = link_to "Email patch", project_commit_path(@project, @commit, format: :patch), class: "btn btn-sm" diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml index 0994498c6be..79b22766bc7 100644 --- a/app/views/projects/edit.html.haml +++ b/app/views/projects/edit.html.haml @@ -40,7 +40,7 @@ .form-group = f.label :tag_list, "Tags", class: 'label-light' = f.text_field :tag_list, value: @project.tag_list.sort.join(', '), maxlength: 2000, class: "form-control" - %p.help-block Separate tags with commas. + %p.form-text.text-muted Separate tags with commas. %fieldset.features %h5.prepend-top-0= _("Project avatar") .form-group @@ -54,7 +54,7 @@ %button.btn.js-choose-project-avatar-button{ type: 'button' }= _("Choose file...") %span.file_name.prepend-left-default.js-avatar-filename= _("No file chosen") = f.file_field :avatar, class: "js-project-avatar-input hidden" - .help-block= _("The maximum file size allowed is 200KB.") + .form-text.text-muted= _("The maximum file size allowed is 200KB.") - if @project.avatar? %hr = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _("Avatar will be removed. Are you sure?") }, method: :delete, class: "btn btn-danger btn-inverted" @@ -142,8 +142,9 @@ %span Path .form-group .input-group - .input-group-addon - #{URI.join(root_url, @project.namespace.full_path)}/ + .input-group-prepend + .input-group-text + #{URI.join(root_url, @project.namespace.full_path)}/ = f.text_field :path, class: 'form-control' %ul %li Be careful. Renaming a project's repository can have unintended side effects. diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml index 63fc5c6d05a..bf6fc8af12d 100644 --- a/app/views/projects/empty.html.haml +++ b/app/views/projects/empty.html.haml @@ -44,14 +44,14 @@ .git-empty %fieldset %h5 Git global setup - %pre.light-well + %pre.card.bg-light :preserve git config --global user.name "#{h git_user_name}" git config --global user.email "#{h git_user_email}" %fieldset %h5 Create a new repository - %pre.light-well + %pre.card.bg-light :preserve git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')} cd #{h @project.path} @@ -64,7 +64,7 @@ %fieldset %h5 Existing folder - %pre.light-well + %pre.card.bg-light :preserve cd existing_folder git init @@ -77,7 +77,7 @@ %fieldset %h5 Existing Git repository - %pre.light-well + %pre.card.bg-light :preserve cd existing_repo git remote rename origin old-origin @@ -89,4 +89,4 @@ - if can? current_user, :remove_project, @project .prepend-top-20 - = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove pull-right" + = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove float-right" diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml index a3467eb6f05..a966bfb2dd9 100644 --- a/app/views/projects/find_file/show.html.haml +++ b/app/views/projects/find_file/show.html.haml @@ -5,10 +5,10 @@ .tree-ref-holder = render 'shared/ref_switcher', destination: 'find_file', path: @path %ul.breadcrumb.repo-breadcrumb - %li + %li.breadcrumb-item = link_to project_tree_path(@project, @ref) do = @project.path - %li.file-finder + %li.file-finder.breadcrumb-item %input#file_find.form-control.file-finder-input{ type: "text", placeholder: _('Find by path'), autocomplete: 'off' } .tree-content-holder diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml index 21a4702a2a9..57afc7ac9c3 100644 --- a/app/views/projects/forks/index.html.haml +++ b/app/views/projects/forks/index.html.haml @@ -16,7 +16,7 @@ - else = sort_title_recently_created = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right + %ul.dropdown-menu.dropdown-menu-right %li - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id] = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml index 620fd1906ba..639efd34a74 100644 --- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml +++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml @@ -35,10 +35,10 @@ .label-container - if generic_commit_status.tags.any? - generic_commit_status.tags.each do |tag| - %span.label.label-primary + %span.badge.badge-primary = tag - if retried - %span.label.label-warning retried + %span.badge.badge-warning retried - if pipeline_link %td diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml index 14c47a5d91c..983cb187c2f 100644 --- a/app/views/projects/graphs/charts.html.haml +++ b/app/views/projects/graphs/charts.html.haml @@ -14,7 +14,7 @@ = icon('circle') = language[:label] - .pull-right + .float-right = language[:value] \% .col-md-8 diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml index c81ee6874e3..f1b14d4c4d1 100644 --- a/app/views/projects/graphs/show.html.haml +++ b/app/views/projects/graphs/show.html.haml @@ -24,4 +24,4 @@ .graphs.row #contributors-master #contributors.clearfix - %ol.contributors-list.clearfix + %ol.contributors-list.row diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml index 8096d9530c3..3e54c3ca9f8 100644 --- a/app/views/projects/hook_logs/_index.html.haml +++ b/app/views/projects/hook_logs/_index.html.haml @@ -18,8 +18,8 @@ %tr %td = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log } - %td.hidden-xs - %span.label.label-gray.deploy-project-label + %td.d-none.d-sm-block + %span.badge.badge-gray.deploy-project-label = hook_log.trigger.singularize.titleize %td = truncate(hook_log.url, length: 50) diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml index 1cf4105bd27..e51efa85df0 100644 --- a/app/views/projects/hook_logs/show.html.haml +++ b/app/views/projects/hook_logs/show.html.haml @@ -4,6 +4,6 @@ Request details .col-lg-9 - = link_to 'Resend Request', retry_project_hook_hook_log_path(@project, @hook, @hook_log), class: "btn btn-default pull-right prepend-left-10" + = link_to 'Resend Request', retry_project_hook_hook_log_path(@project, @hook, @hook_log), class: "btn btn-default float-right prepend-left-10" = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log } diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml index dcc1f0e3fbe..c31aef60453 100644 --- a/app/views/projects/hooks/edit.html.haml +++ b/app/views/projects/hooks/edit.html.haml @@ -13,7 +13,7 @@ = f.submit 'Save changes', class: 'btn btn-create' = render 'shared/web_hooks/test_button', triggers: ProjectHook.triggers, hook: @hook - = link_to 'Remove', project_hook_path(@project, @hook), method: :delete, class: 'btn btn-remove pull-right', data: { confirm: 'Are you sure?' } + = link_to 'Remove', project_hook_path(@project, @hook), method: :delete, class: 'btn btn-remove float-right', data: { confirm: 'Are you sure?' } %hr diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml index 778ff91362d..16c4f21279d 100644 --- a/app/views/projects/imports/new.html.haml +++ b/app/views/projects/imports/new.html.haml @@ -5,14 +5,14 @@ %hr - if @project.import_failed? - .panel.panel-danger - .panel-heading The repository could not be imported. - .panel-body + .card.bg-danger + .card-header The repository could not be imported. + .card-body %pre :preserve #{h(sanitize_repo_path(@project, @project.import_error))} -= form_for @project, url: project_import_path(@project), method: :post, html: { class: 'form-horizontal' } do |f| += form_for @project, url: project_import_path(@project), method: :post do |f| = render "shared/import_form", f: f .form-actions diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml index 8b011af78eb..2c5ffd85372 100644 --- a/app/views/projects/issues/_form.html.haml +++ b/app/views/projects/issues/_form.html.haml @@ -1,2 +1,2 @@ -= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form common-note-form js-quick-submit js-requires-input' } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'issue-form common-note-form js-quick-submit js-requires-input' } do |f| = render 'shared/issuable/form', f: f, issuable: @issue diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml index e27f5658e87..8a14146cb87 100644 --- a/app/views/projects/issues/_issue.html.haml +++ b/app/views/projects/issues/_issue.html.haml @@ -12,25 +12,25 @@ = confidential_icon(issue) = link_to issue.title, issue_path(issue) - if issue.tasks? - %span.task-status.hidden-xs + %span.task-status.d-none.d-sm-inline-block = issue.task_status .issuable-info %span.issuable-reference #{issuable_reference(issue)} - %span.issuable-authored.hidden-xs + %span.issuable-authored.d-none.d-sm-inline-block · opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')} by #{link_to_member(@project, issue.author, avatar: false)} - if issue.milestone - %span.issuable-milestone.hidden-xs + %span.issuable-milestone.d-none.d-sm-inline-block - = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 1, toggle: 'tooltip', title: milestone_tooltip_due_date(issue.milestone) } do + = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 'true', toggle: 'tooltip', title: milestone_tooltip_due_date(issue.milestone) } do = icon('clock-o') = issue.milestone.title - if issue.due_date - %span.issuable-due-date.hidden-xs.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') } + %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') } = icon('calendar') = issue.due_date.to_s(:medium) @@ -50,5 +50,5 @@ = render 'shared/issuable_meta_data', issuable: issue - .pull-right.issuable-updated-at.hidden-xs + .float-right.issuable-updated-at.d-none.d-sm-inline-block %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')} diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml index 4b8bf578b28..76438fae663 100644 --- a/app/views/projects/issues/_new_branch.html.haml +++ b/app/views/projects/issues/_new_branch.html.haml @@ -14,7 +14,7 @@ = icon('spinner', class: 'fa-spin') %span.text Checking branch availability… - .btn-group.available.hide + .btn-group.available.hidden %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } } = value @@ -22,7 +22,7 @@ = icon('caret-down') .droplab-dropdown - %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-align-right.gl-show-field-errors{ data: { dropdown: true } } + %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-right.gl-show-field-errors{ data: { dropdown: true } } - if can_create_merge_request %li.droplab-item-selected{ role: 'button', data: { value: 'create-mr', text: _('Create merge request') } } .menu-item @@ -40,13 +40,13 @@ %label{ for: 'new-branch-name' } = _('Branch name') %input#new-branch-name.js-branch-name.form-control{ type: 'text', placeholder: "#{@issue.to_branch_name}", value: "#{@issue.to_branch_name}" } - %span.js-branch-message.help-block + %span.js-branch-message.form-text.text-muted .form-group %label{ for: 'source-name' } = _('Source (branch or tag)') %input#source-name.js-ref.ref.form-control{ type: 'text', placeholder: "#{@project.default_branch}", value: "#{@project.default_branch}", data: { value: "#{@project.default_branch}" } } - %span.js-ref-message.help-block + %span.js-ref-message.form-text.text-muted .form-group %button.btn.btn-success.js-create-target{ type: 'button', data: { action: 'create-mr' } } diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index f1fc1c2316d..2d036bd4e3e 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -12,12 +12,12 @@ .detail-page-header .detail-page-header-body .issuable-status-box.status-box.status-box-issue-closed{ class: issue_button_visibility(@issue, false) } - = sprite_icon('mobile-issue-close', size: 16, css_class: 'hidden-sm hidden-md hidden-lg') - %span.hidden-xs + = sprite_icon('mobile-issue-close', size: 16, css_class: 'd-block d-sm-none') + %span.d-none.d-sm-block Closed .issuable-status-box.status-box.status-box-open{ class: issue_button_visibility(@issue, true) } - = sprite_icon('issue-open-m', size: 16, css_class: 'hidden-sm hidden-md hidden-lg') - %span.hidden-xs Open + = sprite_icon('issue-open-m', size: 16, css_class: 'd-block d-sm-none') + %span.d-none.d-sm-block Open .issuable-meta - if @issue.confidential @@ -26,15 +26,15 @@ .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon') = issuable_meta(@issue, @project, "Issue") - %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } + %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } = icon('angle-double-left') .detail-page-header-actions.js-issuable-actions .clearfix.issue-btn-group.dropdown - %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } + %button.btn.btn-default.float-left.d-md-none.d-lg-none.d-xl-none{ type: "button", data: { toggle: "dropdown" } } Options = icon('caret-down') - .dropdown-menu.dropdown-menu-align-right.hidden-lg + .dropdown-menu.dropdown-menu-right.d-lg-none.d-xl-none %ul - unless current_user == @issue.author %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue)) @@ -51,9 +51,9 @@ = render 'shared/issuable/close_reopen_button', issuable: @issue, can_update: can_update_issue - if can_report_spam - = link_to 'Submit as spam', mark_as_spam_project_issue_path(@project, @issue), method: :post, class: 'hidden-xs hidden-sm btn btn-grouped btn-spam', title: 'Submit as spam' + = link_to 'Submit as spam', mark_as_spam_project_issue_path(@project, @issue), method: :post, class: 'd-none d-sm-none d-md-block btn btn-grouped btn-spam', title: 'Submit as spam' - if can_create_issue - = link_to new_project_issue_path(@project), class: 'hidden-xs hidden-sm btn btn-grouped new-issue-link btn-new btn-inverted', title: 'New issue', id: 'new_issue_link' do + = link_to new_project_issue_path(@project), class: 'd-none d-sm-none d-md-block btn btn-grouped new-issue-link btn-new btn-inverted', title: 'New issue', id: 'new_issue_link' do New issue .issue-details.issuable-details diff --git a/app/views/projects/jobs/_empty_state.html.haml b/app/views/projects/jobs/_empty_state.html.haml index 311934d9c33..ea552c73c92 100644 --- a/app/views/projects/jobs/_empty_state.html.haml +++ b/app/views/projects/jobs/_empty_state.html.haml @@ -5,10 +5,10 @@ - action = local_assigns.fetch(:action, nil) .row.empty-state - .col-xs-12 + .col-12 .svg-content{ class: illustration_size } = image_tag illustration - .col-xs-12 + .col-12 .text-content %h4.text-center= title - if content diff --git a/app/views/projects/jobs/_header.html.haml b/app/views/projects/jobs/_header.html.haml index 83a2af1dc74..b83e8dddccb 100644 --- a/app/views/projects/jobs/_header.html.haml +++ b/app/views/projects/jobs/_header.html.haml @@ -27,5 +27,5 @@ = link_to "New issue", new_project_issue_path(@project, issue: build_failed_issue_options), class: 'btn btn-new btn-inverted' - if can?(current_user, :update_build, @build) && @build.retryable? = link_to "Retry job", retry_project_job_path(@project, @build), class: 'btn btn-inverted-secondary', method: :post - %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" } + %button.btn.btn-default.float-right.d-block.d-sm-none.d-md-none.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" } = icon('angle-double-left') diff --git a/app/views/projects/jobs/_sidebar.html.haml b/app/views/projects/jobs/_sidebar.html.haml index 826404c2008..9c9e4ef8fce 100644 --- a/app/views/projects/jobs/_sidebar.html.haml +++ b/app/views/projects/jobs/_sidebar.html.haml @@ -18,7 +18,7 @@ %span= time_ago_with_tooltip @build.artifacts_expire_at - if @build.artifacts? - .btn-group.btn-group-justified{ role: :group } + .btn-group.btn-group.d-flex{ role: :group } - if @build.has_expiring_artifacts? && can?(current_user, :update_build, @build) = link_to keep_project_job_artifacts_path(@project, @build), class: 'btn btn-sm btn-default', method: :post do Keep @@ -42,7 +42,7 @@ - if @build.trigger_variables.any? %p - %button.btn.group.btn-group-justified.js-reveal-variables Reveal Variables + %button.btn.group.btn-group.js-reveal-variables Reveal Variables %dl.js-build-variables.trigger-build-variables.hide - @build.trigger_variables.each do |trigger_variable| @@ -83,7 +83,7 @@ - builds.select{|build| build.status == build_status}.each do |build| .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } } - tooltip = build.tooltip_message - = link_to(project_job_path(@project, build), data: { toggle: 'tooltip', html: true, title: tooltip, container: 'body' }) do + = link_to(project_job_path(@project, build), data: { toggle: 'tooltip', html: 'true', title: tooltip, container: 'body' }) do = sprite_icon('arrow-right', size:16, css_class: 'icon-arrow-right') %span{ class: "ci-status-icon-#{build.status}" } = ci_icon_for_status(build.status) diff --git a/app/views/projects/jobs/_user.html.haml b/app/views/projects/jobs/_user.html.haml index 461d503f95d..90ce581a903 100644 --- a/app/views/projects/jobs/_user.html.haml +++ b/app/views/projects/jobs/_user.html.haml @@ -1,7 +1,7 @@ by %a{ href: user_path(@build.user) } - %span.hidden-xs + %span.d-none.d-sm-inline = image_tag avatar_icon_for_user(@build.user, 24), class: "avatar s24" %strong{ data: { toggle: 'tooltip', placement: 'top', title: @build.user.to_reference } } = @build.user.name - %strong.visible-xs-inline= @build.user.to_reference + %strong.d-inline.d-sm-none= @build.user.to_reference diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml index cbbcc8f1db5..ec9a04c0eab 100644 --- a/app/views/projects/jobs/show.html.haml +++ b/app/views/projects/jobs/show.html.haml @@ -15,7 +15,7 @@ - elsif @build.tags.any? This job is stuck, because you don't have any active runners online with any of these tags assigned to them: - @build.tags.each do |tag| - %span.label.label-primary + %span.badge.badge-primary = tag - else This job is stuck, because you don't have any active runners that can run this job. @@ -58,13 +58,13 @@ - if @build.running? || @build.has_trace? .build-trace-container.prepend-top-default .top-bar.js-top-bar - .js-truncated-info.truncated-info.hidden-xs.pull-left.hidden< + .js-truncated-info.truncated-info.d-none.d-sm-block.float-left.hidden< Showing last %span.js-truncated-info-size.truncated-info-size>< of log - %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw - .controllers.pull-right + .controllers.float-right - if @build.has_trace? = link_to raw_project_job_path(@project, @build), title: 'Show complete raw', diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml index 243dcfdc187..0377cd6586e 100644 --- a/app/views/projects/mattermosts/_no_teams.html.haml +++ b/app/views/projects/mattermosts/_no_teams.html.haml @@ -13,4 +13,4 @@ and try again. %hr .clearfix - = link_to 'Go back', edit_project_service_path(@project, @service), class: 'btn btn-lg pull-right' + = link_to 'Go back', edit_project_service_path(@project, @service), class: 'btn btn-lg float-right' diff --git a/app/views/projects/mattermosts/_team_selection.html.haml b/app/views/projects/mattermosts/_team_selection.html.haml index 20acd476f73..361d3c61d99 100644 --- a/app/views/projects/mattermosts/_team_selection.html.haml +++ b/app/views/projects/mattermosts/_team_selection.html.haml @@ -11,7 +11,7 @@ - options = options_for_select(mattermost_teams_options(@teams), selected_id) = f.select(:team_id, options, { include_blank: 'Select team...'}, { class: 'form-control', disabled: @teams.one?, selected: selected_id, required: true }) = f.hidden_field(:team_id, value: selected_id, required: true) if @teams.one? - .help-block + .form-text.text-muted - if @teams.one? This is the only available team. - else @@ -25,7 +25,7 @@ %h4 Command trigger word %p Choose the word that will trigger commands = f.text_field(:trigger, value: @project.path, class: 'form-control', required: true) - .help-block + .form-text.text-muted %p Trigger word must be unique, and can't begin with a slash or contain any spaces. Use the word that works best for your team. @@ -41,6 +41,6 @@ = icon('external-link') %hr .clearfix - .pull-right + .float-right = link_to 'Cancel', edit_project_service_path(@project, @service), class: 'btn btn-lg' = f.submit 'Install', class: 'btn btn-save btn-lg' diff --git a/app/views/projects/mattermosts/new.html.haml b/app/views/projects/mattermosts/new.html.haml index 15829a3f143..9e293d07cb7 100644 --- a/app/views/projects/mattermosts/new.html.haml +++ b/app/views/projects/mattermosts/new.html.haml @@ -1,7 +1,7 @@ - @body_class = 'card-content' .service-installation - .inline.pull-right + .inline.float-right = custom_icon('mattermost_logo', size: 48) %h3 Install Mattermost Command - if @teams.empty? diff --git a/app/views/projects/merge_requests/_form.html.haml b/app/views/projects/merge_requests/_form.html.haml index 9607a7b5d06..179c1fcc684 100644 --- a/app/views/projects/merge_requests/_form.html.haml +++ b/app/views/projects/merge_requests/_form.html.haml @@ -1,2 +1,2 @@ -= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f| = render 'shared/issuable/form', f: f, issuable: @merge_request diff --git a/app/views/projects/merge_requests/_how_to_merge.html.haml b/app/views/projects/merge_requests/_how_to_merge.html.haml index 779034fa173..5353fa8a88f 100644 --- a/app/views/projects/merge_requests/_how_to_merge.html.haml +++ b/app/views/projects/merge_requests/_how_to_merge.html.haml @@ -2,8 +2,8 @@ .modal-dialog .modal-content .modal-header - %a.close{ href: "#", "data-dismiss" => "modal" } × %h3 Check out, review, and merge locally + %a.close{ href: "#", "data-dismiss" => "modal" } × .modal-body %p %strong Step 1. diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml index 027a9ff1416..cd3d896fff2 100644 --- a/app/views/projects/merge_requests/_merge_request.html.haml +++ b/app/views/projects/merge_requests/_merge_request.html.haml @@ -9,21 +9,21 @@ %span.merge-request-title-text = link_to merge_request.title, merge_request_path(merge_request) - if merge_request.tasks? - %span.task-status.hidden-xs + %span.task-status.d-none.d-sm-inline-block = merge_request.task_status .issuable-info %span.issuable-reference #{issuable_reference(merge_request)} - %span.issuable-authored.hidden-xs + %span.issuable-authored.d-none.d-sm-inline-block · opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')} by #{link_to_member(@project, merge_request.author, avatar: false)} - if merge_request.milestone - %span.issuable-milestone.hidden-xs + %span.issuable-milestone.d-none.d-sm-inline-block - = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 1, toggle: 'tooltip', title: milestone_tooltip_due_date(merge_request.milestone) } do + = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 'true', toggle: 'tooltip', title: milestone_tooltip_due_date(merge_request.milestone) } do = icon('clock-o') = merge_request.milestone.title - if merge_request.target_project.default_branch != merge_request.target_branch @@ -40,17 +40,17 @@ .issuable-meta %ul.controls - if merge_request.merged? - %li.issuable-status.hidden-xs + %li.issuable-status.d-none.d-sm-inline-block MERGED - elsif merge_request.closed? - %li.issuable-status.hidden-xs + %li.issuable-status.d-none.d-sm-inline-block = icon('ban') CLOSED - if merge_request.head_pipeline - %li.issuable-pipeline-status.hidden-xs + %li.issuable-pipeline-status.d-none.d-sm-inline-block = render_pipeline_status(merge_request.head_pipeline) - if merge_request.open? && merge_request.broken? - %li.issuable-pipeline-broken.hidden-xs + %li.issuable-pipeline-broken.d-none.d-sm-inline-block = link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do = icon('exclamation-triangle') - if merge_request.assignee @@ -59,5 +59,5 @@ = render 'shared/issuable_meta_data', issuable: merge_request - .pull-right.issuable-updated-at.hidden-xs + .float-right.issuable-updated-at.d-none.d-sm-inline-block %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')} diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml index 22c8b6b513d..a58179091ae 100644 --- a/app/views/projects/merge_requests/_mr_title.html.haml +++ b/app/views/projects/merge_requests/_mr_title.html.haml @@ -7,8 +7,8 @@ .detail-page-header .detail-page-header-body .issuable-status-box.status-box{ class: status_box_class(@merge_request) } - = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'hidden-sm hidden-md hidden-lg') - %span.hidden-xs + = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'd-block d-sm-none') + %span.d-none.d-sm-block = @merge_request.state_human_name .issuable-meta @@ -16,15 +16,15 @@ .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon') = issuable_meta(@merge_request, @project, "Merge request") - %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } + %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } = icon('angle-double-left') .detail-page-header-actions.js-issuable-actions .clearfix.issue-btn-group.dropdown - %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } + %button.btn.btn-default.float-left.d-md-none.d-lg-none.d-xl-none{ type: "button", data: { toggle: "dropdown" } } Options = icon('caret-down') - .dropdown-menu.dropdown-menu-align-right.hidden-lg + .dropdown-menu.dropdown-menu-right.d-lg-none.d-xl-none %ul - if can_update_merge_request %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request) @@ -37,6 +37,6 @@ = link_to 'Reopen', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, class: 'reopen-mr-link', title: 'Reopen merge request' - if can_update_merge_request - = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "hidden-xs hidden-sm btn btn-grouped js-issuable-edit" + = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "d-none d-sm-none d-md-block btn btn-grouped js-issuable-edit" = render 'shared/issuable/close_reopen_button', issuable: @merge_request, can_update: can_update_merge_request diff --git a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml index b86a87a1fc6..4d84ee2488b 100644 --- a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml +++ b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml @@ -2,8 +2,8 @@ - translation =_('You can resolve the merge conflict using either the Interactive mode, by choosing %{use_ours} or %{use_theirs} buttons, or by editing the files directly. Commit these changes into %{branch_name}') % { use_ours: '<code>Use Ours</code>', use_theirs: '<code>Use Theirs</code>', branch_name: branch_name } %hr -.form-horizontal.resolve-conflicts-form - .form-group +.resolve-conflicts-form + .form-group.row .col-md-4 %h4= _('Resolve conflicts on source branch') .resolve-info @@ -14,11 +14,11 @@ .commit-message-container .max-width-marker %textarea.form-control.js-commit-message#commit-message{ "v-model" => "conflictsData.commitMessage", "rows" => "5" } - .form-group - .col-md-offset-4.col-md-8 + .form-group.row + .offset-md-4.col-md-8 .row - .col-xs-6 + .col-6 %button.btn.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" } %span {{commitButtonText}} - .col-xs-6.text-right + .col-6.text-right = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "btn btn-cancel" diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml index 773b12b4536..ca0f7d6098f 100644 --- a/app/views/projects/merge_requests/creations/_new_compare.html.haml +++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml @@ -1,14 +1,14 @@ %h3.page-title New Merge Request -= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form form-inline js-requires-input" } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form js-requires-input" } do |f| .hide.alert.alert-danger.mr-compare-errors .js-merge-request-new-compare.row{ 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) } .col-lg-6 - .panel.panel-default.panel-new-merge-request - .panel-heading + .card.card-new-merge-request + .card-header Source branch - .panel-body.clearfix + .card-body.clearfix .merge-request-select.dropdown = f.hidden_field :source_project_id = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", 'field-name': "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-source-project" } @@ -32,10 +32,10 @@ %ul.list-unstyled.mr_source_commit .col-lg-6 - .panel.panel-default.panel-new-merge-request - .panel-heading + .card.card-new-merge-request + .card-header Target branch - .panel-body.clearfix + .card-body.clearfix - projects = target_projects(@project) .merge-request-select.dropdown = f.hidden_field :target_project_id @@ -55,7 +55,7 @@ = dropdown_filter(_("Search branches")) = dropdown_content = dropdown_loading - .panel-footer + .card-footer .text-center= icon('spinner spin', class: "js-target-loading") %ul.list-unstyled.mr_target_commit diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml index 68780cedeb1..ebcd99f2a9b 100644 --- a/app/views/projects/merge_requests/creations/_new_submit.html.haml +++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml @@ -7,10 +7,10 @@ %span into %strong.ref-name= target_title - %span.pull-right + %span.float-right = link_to 'Change branches', mr_change_branches_path(@merge_request) %hr -= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f| = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits = f.hidden_field :source_project_id = f.hidden_field :source_branch @@ -24,20 +24,20 @@ There are no commits yet. = custom_icon ('illustration_no_commits') - else - %ul.merge-request-tabs.nav-links.no-top.no-bottom + %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom %li.commits-tab.active = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tab'} do Commits - %span.badge= @commits.size + %span.badge.badge-pill= @commits.size - if @pipelines.any? %li.builds-tab = link_to url_for(safe_params.merge(action: 'pipelines')), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tab'} do Pipelines - %span.badge= @pipelines.size + %span.badge.badge-pill= @pipelines.size %li.diffs-tab = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tab'} do Changes - %span.badge= @merge_request.diff_size + %span.badge.badge-pill= @merge_request.diff_size .tab-content #commits.commits.tab-pane.active diff --git a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml index 2e5594f8cbe..dab95b97346 100644 --- a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml +++ b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml @@ -1,5 +1,5 @@ - if @commit - .info-well.hidden-xs.prepend-top-default + .info-well.d-none.d-sm-block.prepend-top-default .well-segment %ul.blob-commit-info = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true diff --git a/app/views/projects/merge_requests/diffs/_diffs.html.haml b/app/views/projects/merge_requests/diffs/_diffs.html.haml index 986ba5ae02d..19659fe5140 100644 --- a/app/views/projects/merge_requests/diffs/_diffs.html.haml +++ b/app/views/projects/merge_requests/diffs/_diffs.html.haml @@ -5,9 +5,9 @@ - if @merge_request_diff&.empty? .row.empty-state.nothing-here-block - .col-xs-12 + .col-12 .svg-content= image_tag 'illustrations/merge_request_changes_empty.svg' - .col-xs-12 + .col-12 .text-content.text-center %p No changes between diff --git a/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml b/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml index 529fbb8547a..8d7138747fb 100644 --- a/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml +++ b/app/views/projects/merge_requests/diffs/_not_all_comments_displayed.html.haml @@ -11,7 +11,7 @@ comparing two versions of the diff - else viewing an old version of the diff - .pull-right + .float-right = link_to diffs_project_merge_request_path(@merge_request.project, @merge_request), class: 'btn btn-sm' do Show latest version = "of the diff" if @commit diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml index 6df19d6438b..749228a9664 100644 --- a/app/views/projects/merge_requests/invalid.html.haml +++ b/app/views/projects/merge_requests/invalid.html.haml @@ -10,13 +10,13 @@ - if @merge_request.for_fork? && !@merge_request.source_project fork project was removed - elsif !@merge_request.source_branch_exists? - %span.label.label-inverse= @merge_request.source_branch + %span.badge.badge-inverse= @merge_request.source_branch does not exist in - %span.label.label-info= @merge_request.source_project_path + %span.badge.badge-info= @merge_request.source_project_path - elsif !@merge_request.target_branch_exists? - %span.label.label-inverse= @merge_request.target_branch + %span.badge.badge-inverse= @merge_request.target_branch does not exist in - %span.label.label-info= @merge_request.target_project_path + %span.badge.badge-info= @merge_request.target_project_path - else of internal error diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index 15a0e4d7ef5..aa3fb623e58 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -30,26 +30,26 @@ .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller .fade-left= icon('angle-left') .fade-right= icon('angle-right') - .nav-links.scrolling-tabs - %ul.merge-request-tabs + .nav-links.scrolling-tabs.nav.nav-tabs + %ul.merge-request-tabs.nav-tabs.nav %li.notes-tab = tab_link_for @merge_request, :show, force_link: @commit.present? do Discussion - %span.badge= @merge_request.related_notes.user.count + %span.badge.badge-pill= @merge_request.related_notes.user.count - if @merge_request.source_project %li.commits-tab = tab_link_for @merge_request, :commits do Commits - %span.badge= @commits_count + %span.badge.badge-pill= @commits_count - if @pipelines.any? %li.pipelines-tab = tab_link_for @merge_request, :pipelines do Pipelines - %span.badge.js-pipelines-mr-count= @pipelines.size + %span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size %li.diffs-tab = tab_link_for @merge_request, :diffs do Changes - %span.badge= @merge_request.diff_size + %span.badge.badge-pill= @merge_request.diff_size - if has_vue_discussions_cookie? #js-vue-discussion-counter diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml index 2e74b1b83cb..4cc59718715 100644 --- a/app/views/projects/milestones/_form.html.haml +++ b/app/views/projects/milestones/_form.html.haml @@ -1,13 +1,13 @@ -= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form common-note-form js-quick-submit js-requires-input'} do |f| += form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'milestone-form common-note-form js-quick-submit js-requires-input'} do |f| = form_errors(@milestone) .row .col-md-6 - .form-group - = f.label :title, "Title", class: "control-label" + .form-group.row + = f.label :title, "Title", class: "col-form-label col-sm-2" .col-sm-10 = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true - .form-group.milestone-description - = f.label :description, "Description", class: "control-label" + .form-group.row.milestone-description + = f.label :description, "Description", class: "col-form-label col-sm-2" .col-sm-10 = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project) } do = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...' diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml index 5ec219fdf00..b478fbbb15e 100644 --- a/app/views/projects/milestones/show.html.haml +++ b/app/views/projects/milestones/show.html.haml @@ -56,7 +56,7 @@ #delete-milestone-modal - %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" } + %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: "#" } = icon('angle-double-left') .detail-page-description.milestone-detail diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml index 4b7be9a223f..75cb8245d36 100644 --- a/app/views/projects/network/show.html.haml +++ b/app/views/projects/network/show.html.haml @@ -9,7 +9,7 @@ = button_tag class: 'btn btn-success' do = icon('search') .inline.prepend-left-20 - .checkbox.light + .form-check.light = label_tag :filter_ref do = check_box_tag :filter_ref, 1, @options[:filter_ref] %span= _("Begin with the selected commit") diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml index 5beaa3c6d23..35a09f06bfa 100644 --- a/app/views/projects/new.html.haml +++ b/app/views/projects/new.html.haml @@ -28,19 +28,19 @@ %template.push-new-project-tip-template= render partial: "new_project_push_tip" .col-lg-9.js-toggle-container - %ul.nav-links.gitlab-tabs{ role: 'tablist' } + %ul.nav.nav-tabs.nav-links.gitlab-tabs{ role: 'tablist' } %li{ class: active_when(active_tab == 'blank'), role: 'presentation' } %a{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab' }, role: 'tab' } - %span.hidden-xs Blank project - %span.visible-xs Blank + %span.d-none.d-sm-block Blank project + %span.d-block.d-sm-none Blank %li{ class: active_when(active_tab == 'template'), role: 'presentation' } %a{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab' }, role: 'tab' } - %span.hidden-xs Create from template - %span.visible-xs Template + %span.d-none.d-sm-block Create from template + %span.d-block.d-sm-none Template %li{ class: active_when(active_tab == 'import'), role: 'presentation' } %a{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab' }, role: 'tab' } - %span.hidden-xs Import project - %span.visible-xs Import + %span.d-none.d-sm-block Import project + %span.d-block.d-sm-none Import .tab-content.gitlab-tab-content .tab-pane{ id: 'blank-project-pane', class: active_when(active_tab == 'blank'), role: 'tabpanel' } @@ -63,7 +63,7 @@ %h4 No import options available %p Contact an administrator to enable options for importing your project. -.save-project-loader.hide +.save-project-loader.d-none .center %h2 %i.fa.fa-spinner.fa-spin diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml index 14d880028c7..08772a0188b 100644 --- a/app/views/projects/no_repo.html.haml +++ b/app/views/projects/no_repo.html.haml @@ -21,4 +21,4 @@ - if can? current_user, :remove_project, @project .prepend-top-20 - = link_to _('Remove project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove pull-right" + = link_to _('Remove project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-inverted btn-remove float-right" diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml index 82e20eeebb3..73ea30e1d3d 100644 --- a/app/views/projects/pages/_access.html.haml +++ b/app/views/projects/pages/_access.html.haml @@ -1,8 +1,8 @@ - if @project.pages_deployed? - .panel.panel-default - .panel-heading + .card + .card-header Access pages - .panel-body + .card-body %p %strong Congratulations! Your pages are served under: diff --git a/app/views/projects/pages/_destroy.haml b/app/views/projects/pages/_destroy.haml index 7d6c30b7f8d..4ada19a1368 100644 --- a/app/views/projects/pages/_destroy.haml +++ b/app/views/projects/pages/_destroy.haml @@ -1,9 +1,9 @@ - if @project.pages_deployed? - if can?(current_user, :remove_pages, @project) - .panel.panel-default.panel.panel-danger - .panel-heading Remove pages + .card.bg-danger + .card-header Remove pages .errors-holder - .panel-body + .card-body %p Removing the pages will prevent from exposing them to outside world. .form-actions diff --git a/app/views/projects/pages/_https_only.html.haml b/app/views/projects/pages/_https_only.html.haml index 6a3ffce949f..57345edb90b 100644 --- a/app/views/projects/pages/_https_only.html.haml +++ b/app/views/projects/pages/_https_only.html.haml @@ -1,5 +1,5 @@ = form_for @project, url: namespace_project_pages_path(@project.namespace.becomes(Namespace), @project), html: { class: 'inline', title: pages_https_only_title } do |f| - = f.check_box :pages_https_only, class: 'pull-left', disabled: pages_https_only_disabled? + = f.check_box :pages_https_only, class: 'float-left', disabled: pages_https_only_disabled? .prepend-left-20 = f.label :pages_https_only, class: pages_https_only_label_class do diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml index 27bbe52a714..986ca852411 100644 --- a/app/views/projects/pages/_list.html.haml +++ b/app/views/projects/pages/_list.html.haml @@ -1,8 +1,8 @@ - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled? - if can?(current_user, :update_pages, @project) && @domains.any? - .panel.panel-default - .panel-heading + .card + .card-header Domains (#{@domains.count}) %ul.well-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) } - @domains.each do |domain| @@ -17,9 +17,9 @@ = icon('external-link') - if domain.subject %p - %span.label.label-gray Certificate: #{domain.subject} + %span.badge.badge-gray Certificate: #{domain.subject} - if domain.expired? - %span.label.label-danger Expired + %span.badge.badge-danger Expired %div = link_to 'Details', project_pages_domain_path(@project, domain), class: "btn btn-sm btn-grouped" = link_to 'Remove', project_pages_domain_path(@project, domain), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped" diff --git a/app/views/projects/pages/_no_domains.html.haml b/app/views/projects/pages/_no_domains.html.haml index 7cea5f3e70b..8c93cf7a8ad 100644 --- a/app/views/projects/pages/_no_domains.html.haml +++ b/app/views/projects/pages/_no_domains.html.haml @@ -1,6 +1,6 @@ - if can?(current_user, :update_pages, @project) - .panel.panel-default - .panel-heading + .card + .card-header Domains .nothing-here-block Support for domains and certificates is disabled. diff --git a/app/views/projects/pages/_use.html.haml b/app/views/projects/pages/_use.html.haml index e442e6e9a09..cd9177c0f9e 100644 --- a/app/views/projects/pages/_use.html.haml +++ b/app/views/projects/pages/_use.html.haml @@ -1,8 +1,8 @@ - unless @project.pages_deployed? - .panel.panel-info - .panel-heading + .card.bg-info + .card-header Configure pages - .panel-body + .card-body %p Learn how to upload your static site and have it served by GitLab by following the diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml index 6adaea799b2..7e1a3b9bea6 100644 --- a/app/views/projects/pages/show.html.haml +++ b/app/views/projects/pages/show.html.haml @@ -4,7 +4,7 @@ Pages - if can?(current_user, :update_pages, @project) && (Gitlab.config.pages.external_http || Gitlab.config.pages.external_https) - = link_to new_project_pages_domain_path(@project), class: 'btn btn-new pull-right', title: 'New Domain' do + = link_to new_project_pages_domain_path(@project), class: 'btn btn-new float-right', title: 'New Domain' do New Domain %p.light diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml index d81b07832bb..0d848f7899c 100644 --- a/app/views/projects/pages_domains/_form.html.haml +++ b/app/views/projects/pages_domains/_form.html.haml @@ -4,22 +4,22 @@ - @domain.errors.full_messages.each do |msg| %p= msg -.form-group - = f.label :domain, class: 'control-label' do +.form-group.row + = f.label :domain, class: 'col-form-label col-sm-2' do Domain .col-sm-10 = f.text_field :domain, required: true, autocomplete: 'off', class: 'form-control', disabled: @domain.persisted? - if Gitlab.config.pages.external_https - .form-group - = f.label :certificate, class: 'control-label' do + .form-group.row + = f.label :certificate, class: 'col-form-label col-sm-2' do Certificate (PEM) .col-sm-10 = f.text_area :certificate, rows: 5, class: 'form-control' %span.help-inline Upload a certificate for your domain with all intermediates - .form-group - = f.label :key, class: 'control-label' do + .form-group.row + = f.label :key, class: 'col-form-label col-sm-2' do Key (PEM) .col-sm-10 = f.text_area :key, rows: 5, class: 'form-control' diff --git a/app/views/projects/pages_domains/edit.html.haml b/app/views/projects/pages_domains/edit.html.haml index 6c404990492..ee70de22f13 100644 --- a/app/views/projects/pages_domains/edit.html.haml +++ b/app/views/projects/pages_domains/edit.html.haml @@ -5,7 +5,7 @@ = @domain.domain %hr.clearfix %div - = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'form-horizontal fieldset-form' } do |f| + = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f| = render 'form', { f: f } .form-actions = f.submit 'Save Changes', class: "btn btn-save" diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml index 269df803a2b..376ce3f68aa 100644 --- a/app/views/projects/pages_domains/new.html.haml +++ b/app/views/projects/pages_domains/new.html.haml @@ -4,9 +4,9 @@ New Pages Domain %hr.clearfix %div - = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'form-horizontal fieldset-form' } do |f| + = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f| = render 'form', { f: f } .form-actions = f.submit 'Create New Domain', class: "btn btn-save" - .pull-right + .float-right = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-cancel' diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml index 44d66f3b2d0..a8484187493 100644 --- a/app/views/projects/pages_domains/show.html.haml +++ b/app/views/projects/pages_domains/show.html.haml @@ -12,7 +12,7 @@ This domain is not verified. You will need to verify ownership before access is enabled. %h3.page-title.with-button - = link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success pull-right' + = link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success float-right' Pages Domain .table-holder @@ -30,9 +30,9 @@ %td .input-group = text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true - .input-group-btn - = clipboard_button(target: '#domain_dns', class: 'btn-default hidden-xs') - %p.help-block + .input-group-append + = clipboard_button(target: '#domain_dns', class: 'btn-default input-group-text d-none d-sm-block') + %p.form-text.text-muted To access this domain create a new DNS record - if verification_enabled @@ -43,16 +43,16 @@ %td = form_tag verify_project_pages_domain_path(@project, @domain) do .status-badge - - text, status = @domain.unverified? ? [_('Unverified'), 'label-danger'] : [_('Verified'), 'label-success'] - .label{ class: status } + - text, status = @domain.unverified? ? [_('Unverified'), 'badge-danger'] : [_('Verified'), 'badge-success'] + .badge{ class: status } = text %button.btn.has-tooltip{ type: "submit", data: { container: 'body' }, title: _("Retry verification") } = sprite_icon('redo') .input-group = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true - .input-group-btn - = clipboard_button(target: '#domain_verification', class: 'btn-default hidden-xs') - %p.help-block + .input-group-append + = clipboard_button(target: '#domain_verification', class: 'btn-default d-none d-sm-block') + %p.form-text.text-muted - help_link = help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record') To #{link_to 'verify ownership', help_link} of your domain, add the above key to a TXT record within to your DNS configuration. diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml index 160e325996a..1cdf981fcb4 100644 --- a/app/views/projects/pipeline_schedules/_form.html.haml +++ b/app/views/projects/pipeline_schedules/_form.html.haml @@ -1,24 +1,24 @@ -= form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "form-horizontal js-pipeline-schedule-form" } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "js-pipeline-schedule-form" } do |f| = form_errors(@schedule) - .form-group + .form-group.row .col-md-9 = f.label :description, _('Description'), class: 'label-light' = f.text_field :description, class: 'form-control', required: true, autofocus: true, placeholder: s_('PipelineSchedules|Provide a short description for this pipeline') - .form-group + .form-group.row .col-md-9 = f.label :cron, _('Interval Pattern'), class: 'label-light' #interval-pattern-input{ data: { initial_interval: @schedule.cron } } - .form-group + .form-group.row .col-md-9 = f.label :cron_timezone, _('Cron Timezone'), class: 'label-light' = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'btn js-timezone-dropdown', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } ) = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true - .form-group + .form-group.row .col-md-9 = f.label :ref, _('Target Branch'), class: 'label-light' = dropdown_tag(_("Select target branch"), options: { toggle_class: 'btn js-target-branch-dropdown', dropdown_class: 'git-revision-dropdown', title: _("Select target branch"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } ) = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true - .form-group.js-ci-variable-list-section + .form-group.row.js-ci-variable-list-section .col-md-9 %label.label-light #{ s_('PipelineSchedules|Variables') } @@ -32,7 +32,7 @@ = n_('Hide value', 'Hide values', @schedule.variables.size) - else = n_('Reveal value', 'Reveal values', @schedule.variables.size) - .form-group + .form-group.row .col-md-9 = f.label :active, s_('PipelineSchedules|Activated'), class: 'label-light' %div diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml index 55d0e8bb7f9..8d88f0be083 100644 --- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml +++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml @@ -25,7 +25,7 @@ = link_to user_path(pipeline_schedule.owner) do = pipeline_schedule.owner&.name %td - .pull-right.btn-group + .float-right.btn-group - if can?(current_user, :play_pipeline_schedule, pipeline_schedule) = link_to play_pipeline_schedule_path(pipeline_schedule), method: :post, title: s_('Play'), class: 'btn' do = icon('play') diff --git a/app/views/projects/pipeline_schedules/_tabs.html.haml b/app/views/projects/pipeline_schedules/_tabs.html.haml index 8996c1b3e38..61f6ad34052 100644 --- a/app/views/projects/pipeline_schedules/_tabs.html.haml +++ b/app/views/projects/pipeline_schedules/_tabs.html.haml @@ -1,18 +1,18 @@ -%ul.nav-links.mobile-separator +%ul.nav-links.mobile-separator.nav.nav-tabs %li{ class: active_when(scope.nil?) }> = link_to schedule_path_proc.call(nil) do = s_("PipelineSchedules|All") - %span.badge.js-totalbuilds-count + %span.badge.badge-pill.js-totalbuilds-count = number_with_delimiter(all_schedules.count(:id)) %li{ class: active_when(scope == 'active') }> = link_to schedule_path_proc.call('active') do = s_("PipelineSchedules|Active") - %span.badge + %span.badge.badge-pill = number_with_delimiter(all_schedules.active.count(:id)) %li{ class: active_when(scope == 'inactive') }> = link_to schedule_path_proc.call('inactive') do = s_("PipelineSchedules|Inactive") - %span.badge + %span.badge.badge-pill = number_with_delimiter(all_schedules.inactive.count(:id)) diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml index bcb6dddba1a..3677666070e 100644 --- a/app/views/projects/pipeline_schedules/index.html.haml +++ b/app/views/projects/pipeline_schedules/index.html.haml @@ -18,5 +18,5 @@ %ul.content-list = render partial: "table" - else - .light-well + .card.bg-light .nothing-here-block= _("No schedules") diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml index 9db30042bf4..aa53fc3ea28 100644 --- a/app/views/projects/pipelines/_info.html.haml +++ b/app/views/projects/pipelines/_info.html.haml @@ -27,7 +27,7 @@ .icon-container.commit-icon = custom_icon("icon_commit") = link_to @commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short" - = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do + = link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do %span.text-expander \... %span.js-details-content.hide diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml index 4dbf95be357..118391aac64 100644 --- a/app/views/projects/pipelines/_with_tabs.html.haml +++ b/app/views/projects/pipelines/_with_tabs.html.haml @@ -1,17 +1,17 @@ .tabs-holder - %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator + %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator.nav.nav-tabs %li.js-pipeline-tab-link = link_to project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do = _("Pipeline") %li.js-builds-tab-link = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do = _("Jobs") - %span.badge.js-builds-counter= pipeline.total_size + %span.badge.badge-pill.js-builds-counter= pipeline.total_size - if @pipeline.failed_builds.present? %li.js-failures-tab-link = link_to failures_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do = _("Failed Jobs") - %span.badge.js-failures-counter= @pipeline.failed_builds.count + %span.badge.badge-pill.js-failures-counter= @pipeline.failed_builds.count .tab-content #js-tab-pipeline.tab-pane diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml index 81984ee94b0..d1e8e9d0d60 100644 --- a/app/views/projects/pipelines/new.html.haml +++ b/app/views/projects/pipelines/new.html.haml @@ -6,9 +6,9 @@ = s_("Pipeline|Run Pipeline") %hr -= form_for @pipeline, as: :pipeline, url: project_pipelines_path(@project), html: { id: "new-pipeline-form", class: "form-horizontal js-new-pipeline-form js-requires-input" } do |f| += form_for @pipeline, as: :pipeline, url: project_pipelines_path(@project), html: { id: "new-pipeline-form", class: "js-new-pipeline-form js-requires-input" } do |f| = form_errors(@pipeline) - .form-group + .form-group.row .col-sm-12 = f.label :ref, s_('Pipeline|Create for') = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch @@ -16,7 +16,7 @@ options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle', filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: s_("Pipeline|Search branches"), data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } }) - .help-block + .form-text.text-muted = s_("Pipeline|Existing branch name or tag") .col-sm-12.prepend-top-10.js-ci-variable-list-section @@ -24,7 +24,7 @@ = s_('Pipeline|Variables') %ul.ci-variable-list = render 'ci/variables/variable_row', form_field: 'pipeline', only_key_value: true - .help-block + .form-text.text-muted = (s_("Pipeline|Specify variable values to be used in this run. The values specified in %{settings_link} will be used by default.") % {settings_link: settings_link}).html_safe .form-actions diff --git a/app/views/projects/project_members/_groups.html.haml b/app/views/projects/project_members/_groups.html.haml index fdeb5f21fbe..128f52ff648 100644 --- a/app/views/projects/project_members/_groups.html.haml +++ b/app/views/projects/project_members/_groups.html.haml @@ -1,7 +1,7 @@ -.panel.panel-default.project-members-groups - .panel-heading +.card.project-members-groups + .card-header Groups with access to %strong= @project.name - %span.badge= group_links.size + %span.badge.badge-pill= group_links.size %ul.content-list = render partial: 'shared/members/group', collection: group_links, as: :group_link diff --git a/app/views/projects/project_members/_new_project_member.html.haml b/app/views/projects/project_members/_new_project_member.html.haml index bf5b11ea30c..5064db8d5cd 100644 --- a/app/views/projects/project_members/_new_project_member.html.haml +++ b/app/views/projects/project_members/_new_project_member.html.haml @@ -9,7 +9,7 @@ .select-wrapper = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select select-control" = icon('chevron-down') - .help-block.append-bottom-10 + .form-text.text-muted.append-bottom-10 = link_to "Read more", help_page_path("user/permissions"), class: "vlink" about role permissions .form-group diff --git a/app/views/projects/project_members/_new_shared_group.html.haml b/app/views/projects/project_members/_new_shared_group.html.haml index c10ef648a8f..684219735e2 100644 --- a/app/views/projects/project_members/_new_shared_group.html.haml +++ b/app/views/projects/project_members/_new_shared_group.html.haml @@ -9,7 +9,7 @@ .select-wrapper = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control" = icon('chevron-down') - .help-block.append-bottom-10 + .form-text.text-muted.append-bottom-10 = link_to "Read more", help_page_path("user/permissions"), class: "vlink" about role permissions .form-group diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml index 16bcf671c25..a30870a241c 100644 --- a/app/views/projects/project_members/_team.html.haml +++ b/app/views/projects/project_members/_team.html.haml @@ -1,12 +1,12 @@ - project = local_assigns.fetch(:project) - members = local_assigns.fetch(:members) -.panel.panel-default - .panel-heading.flex-project-members-panel +.card + .card-header.flex-project-members-panel %span.flex-project-title Members of %strong= project.name - %span.badge= members.total_count + %span.badge.badge-pill= members.total_count = form_tag project_project_members_path(project), method: :get, class: 'form-inline member-search-form flex-project-members-form' do .form-group = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false } diff --git a/app/views/projects/project_members/import.html.haml b/app/views/projects/project_members/import.html.haml index 755128af565..6a52e72bfd8 100644 --- a/app/views/projects/project_members/import.html.haml +++ b/app/views/projects/project_members/import.html.haml @@ -5,9 +5,9 @@ %p.light Only project members will be imported. Group members will be skipped. %hr -= form_tag apply_import_project_project_members_path(@project), method: 'post', class: 'form-horizontal' do - .form-group - = label_tag :source_project_id, "Project", class: 'control-label' += form_tag apply_import_project_project_members_path(@project), method: 'post' do + .form-group.row + = label_tag :source_project_id, "Project", class: 'col-form-label col-sm-2' .col-sm-10= select_tag(:source_project_id, options_from_collection_for_select(@projects, :id, :name_with_namespace), prompt: "Select project", class: "select2 lg", required: true) .form-actions diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml index d81103c3a92..a56023e98cd 100644 --- a/app/views/projects/project_members/index.html.haml +++ b/app/views/projects/project_members/index.html.haml @@ -17,7 +17,7 @@ %i Owners .light - if can?(current_user, :admin_project_member, @project) - %ul.nav-links.gitlab-tabs{ role: 'tablist' } + %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' } %li.active{ role: 'presentation' } %a{ href: '#add-member-pane', id: 'add-member-tab', data: { toggle: 'tab' }, role: 'tab' } Add member - if @project.allowed_to_share_with_group? diff --git a/app/views/projects/protected_branches/shared/_branches_list.html.haml b/app/views/projects/protected_branches/shared/_branches_list.html.haml index d1ed438eb21..a2cd7752fc4 100644 --- a/app/views/projects/protected_branches/shared/_branches_list.html.haml +++ b/app/views/projects/protected_branches/shared/_branches_list.html.haml @@ -1,7 +1,7 @@ .protected-branches-list.js-protected-branches-list.qa-protected-branches-list - if @protected_branches.empty? - .panel-heading - %h3.panel-title + .card-header + %h3.card-title Protected branch (#{@protected_branches_count}) %p.settings-message.text-center There are currently no protected branches, protect a branch with the form above. diff --git a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml index 9f0c4f3b3a8..c2d6c034e35 100644 --- a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml +++ b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml @@ -1,33 +1,32 @@ = form_for [@project.namespace.becomes(Namespace), @project, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f| - .panel.panel-default - .panel-heading - %h3.panel-title + .card + .card-header + %h3.card-title Protect a branch - .panel-body - .form-horizontal - = form_errors(@protected_branch) - .form-group - = f.label :name, class: 'col-md-2 text-right' do - Branch: - .col-md-10 - = render partial: "projects/protected_branches/shared/dropdown", locals: { f: f } - .help-block - = link_to 'Wildcards', help_page_path('user/project/protected_branches', anchor: 'wildcard-protected-branches') - such as - %code *-stable - or - %code production/* - are supported - .form-group - %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' } - Allowed to merge: - .col-md-10 - = yield :merge_access_levels - .form-group - %label.col-md-2.text-right{ for: 'push_access_levels_attributes' } - Allowed to push: - .col-md-10 - = yield :push_access_levels + .card-body + = form_errors(@protected_branch) + .form-group.row + = f.label :name, class: 'col-md-2 text-right' do + Branch: + .col-md-10 + = render partial: "projects/protected_branches/shared/dropdown", locals: { f: f } + .form-text.text-muted + = link_to 'Wildcards', help_page_path('user/project/protected_branches', anchor: 'wildcard-protected-branches') + such as + %code *-stable + or + %code production/* + are supported + .form-group.row + %label.col-md-2.text-right{ for: 'merge_access_levels_attributes' } + Allowed to merge: + .col-md-10 + = yield :merge_access_levels + .form-group.row + %label.col-md-2.text-right{ for: 'push_access_levels_attributes' } + Allowed to push: + .col-md-10 + = yield :push_access_levels - .panel-footer + .card-footer = f.submit 'Protect', class: 'btn-create btn', disabled: true diff --git a/app/views/projects/protected_branches/shared/_matching_branch.html.haml b/app/views/projects/protected_branches/shared/_matching_branch.html.haml index 98793d632e6..2c76bf87945 100644 --- a/app/views/projects/protected_branches/shared/_matching_branch.html.haml +++ b/app/views/projects/protected_branches/shared/_matching_branch.html.haml @@ -3,7 +3,7 @@ = link_to matching_branch.name, project_ref_path(@project, matching_branch.name), class: 'ref-name' - if @project.root_ref?(matching_branch.name) - %span.label.label-info.prepend-left-5 default + %span.badge.badge-info.prepend-left-5 default %td - commit = @project.commit(matching_branch.name) = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha') diff --git a/app/views/projects/protected_branches/shared/_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_protected_branch.html.haml index 2d3b2af00c2..82ef08272d3 100644 --- a/app/views/projects/protected_branches/shared/_protected_branch.html.haml +++ b/app/views/projects/protected_branches/shared/_protected_branch.html.haml @@ -5,7 +5,7 @@ %span.ref-name.qa-protected-branch-name= protected_branch.name - if @project.root_ref?(protected_branch.name) - %span.label.label-info.prepend-left-5 default + %span.badge.badge-info.prepend-left-5 default %td - if protected_branch.wildcard? - matching_branches = protected_branch.matching(repository.branches) diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml index 5a53c704fcb..0ae5ca3ff36 100644 --- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml +++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml @@ -1,29 +1,28 @@ = form_for [@project.namespace.becomes(Namespace), @project, @protected_tag], html: { class: 'new-protected-tag js-new-protected-tag' } do |f| - .panel.panel-default - .panel-heading - %h3.panel-title + .card + .card-header + %h3.card-title Protect a tag - .panel-body - .form-horizontal - = form_errors(@protected_tag) - .form-group - = f.label :name, class: 'col-md-2 text-right' do - Tag: - .col-md-10.protected-tags-dropdown - = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f } - .help-block - = link_to 'Wildcards', help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags') - such as - %code v* - or - %code *-release - are supported - .form-group - %label.col-md-2.text-right{ for: 'create_access_levels_attributes' } - Allowed to create: - .col-md-10 - .create_access_levels-container - = yield :create_access_levels + .card-body + = form_errors(@protected_tag) + .form-group.row + = f.label :name, class: 'col-md-2 text-right' do + Tag: + .col-md-10.protected-tags-dropdown + = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f } + .form-text.text-muted + = link_to 'Wildcards', help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags') + such as + %code v* + or + %code *-release + are supported + .form-group.row + %label.col-md-2.text-right{ for: 'create_access_levels_attributes' } + Allowed to create: + .col-md-10 + .create_access_levels-container + = yield :create_access_levels - .panel-footer + .card-footer = f.submit 'Protect', class: 'btn-create btn', disabled: true diff --git a/app/views/projects/protected_tags/shared/_matching_tag.html.haml b/app/views/projects/protected_tags/shared/_matching_tag.html.haml index 05f102d1ca3..133c76cd2ad 100644 --- a/app/views/projects/protected_tags/shared/_matching_tag.html.haml +++ b/app/views/projects/protected_tags/shared/_matching_tag.html.haml @@ -3,7 +3,7 @@ = link_to matching_tag.name, project_ref_path(@project, matching_tag.name), class: 'ref-name' - if @project.root_ref?(matching_tag.name) - %span.label.label-info.prepend-left-5 default + %span.badge.badge-info.prepend-left-5 default %td - commit = @project.commit(matching_tag.name) = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha') diff --git a/app/views/projects/protected_tags/shared/_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_protected_tag.html.haml index c778f7b9781..1702e38df7e 100644 --- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml +++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml @@ -3,7 +3,7 @@ %span.ref-name= protected_tag.name - if @project.root_ref?(protected_tag.name) - %span.label.label-info.prepend-left-5 default + %span.badge.badge-info.prepend-left-5 default %td - if protected_tag.wildcard? - matching_tags = protected_tag.matching(repository.tags) diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml index 3ed82e51dbe..c3081d75fb4 100644 --- a/app/views/projects/protected_tags/shared/_tags_list.html.haml +++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml @@ -1,7 +1,7 @@ .protected-tags-list.js-protected-tags-list - if @protected_tags.empty? - .panel-heading - %h3.panel-title + .card-header + %h3.card-title Protected tag (#{@protected_tags_count}) %p.settings-message.text-center There are currently no protected tags, protect a tag with the form above. diff --git a/app/views/projects/registry/repositories/_tag.html.haml b/app/views/projects/registry/repositories/_tag.html.haml index 0223372bff8..a4cde53e8c6 100644 --- a/app/views/projects/registry/repositories/_tag.html.haml +++ b/app/views/projects/registry/repositories/_tag.html.haml @@ -24,7 +24,7 @@ \- - if can?(current_user, :update_container_image, @project) %td.content - .controls.hidden-xs.pull-right + .controls.d-none.d-sm-block.float-right = link_to project_registry_repository_tag_path(@project, tag.repository, tag.name), method: :delete, class: 'btn btn-remove has-tooltip', diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml index 2a683d5be0f..0426f2215ad 100644 --- a/app/views/projects/registry/repositories/index.html.haml +++ b/app/views/projects/registry/repositories/index.html.haml @@ -16,11 +16,11 @@ .row.prepend-top-10 .col-lg-12 - .panel.panel-default - .panel-heading - %h4.panel-title + .card + .card-header + %h4.card-title = s_('ContainerRegistry|How to use the Container Registry') - .panel-body + .card-body %p - link_token = link_to(_('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank') - link_2fa = link_to(_('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank') diff --git a/app/views/projects/releases/edit.html.haml b/app/views/projects/releases/edit.html.haml index 4d962f9433f..b4787032966 100644 --- a/app/views/projects/releases/edit.html.haml +++ b/app/views/projects/releases/edit.html.haml @@ -11,7 +11,7 @@ %strong= @tag.name - = form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name), html: { class: 'form-horizontal common-note-form release-form js-quick-submit' }) do |f| + = form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name), html: { class: 'common-note-form release-form js-quick-submit' }) do |f| = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here..." = render 'shared/notes/hints' diff --git a/app/views/projects/repositories/_feed.html.haml b/app/views/projects/repositories/_feed.html.haml index 87895a15239..ae0d9ab9908 100644 --- a/app/views/projects/repositories/_feed.html.haml +++ b/app/views/projects/repositories/_feed.html.haml @@ -14,5 +14,5 @@ = image_tag avatar_icon_for_email(commit.author_email), class: "", width: 16, alt: '' = markdown(truncate(commit.title, length: 40), pipeline: :single_line, author: commit.author) %td - %span.pull-right.cgray + %span.float-right.cgray = time_ago_with_tooltip(commit.committed_date) diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml index 69218f344f7..a23f5d6f0c3 100644 --- a/app/views/projects/runners/_runner.html.haml +++ b/app/views/projects/runners/_runner.html.haml @@ -15,7 +15,7 @@ %span.commit-sha = runner.short_sha - .pull-right + .float-right - if @project_runners.include?(runner) - if runner.active? = link_to _('Pause'), pause_project_runner_path(@project, runner), method: :post, class: 'btn btn-sm btn-danger', data: { confirm: _("Are you sure?") } @@ -30,7 +30,7 @@ = form_for [@project.namespace.becomes(Namespace), @project, @project.runner_projects.new] do |f| = f.hidden_field :runner_id, value: runner.id = f.submit _('Enable for this project'), class: 'btn btn-sm' - .pull-right + .float-right %small.light \##{runner.id} - if runner.description.present? @@ -39,5 +39,5 @@ - if runner.tag_list.present? %p - runner.tag_list.sort.each do |tag| - %span.label.label-primary + %span.badge.badge-primary = tag diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml index 684b082efbb..aa30ebdc3b8 100644 --- a/app/views/projects/services/_form.html.haml +++ b/app/views/projects/services/_form.html.haml @@ -9,7 +9,7 @@ - if @service.respond_to?(:detailed_description) %p= @service.detailed_description .col-lg-9 - = form_for(@service, as: :service, url: project_service_path(@project, @service.to_param), method: :put, html: { class: 'gl-show-field-errors form-horizontal integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form| + = form_for(@service, as: :service, url: project_service_path(@project, @service.to_param), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form| = render 'shared/service_settings', form: form, subject: @service - if @service.editable? .footer-block.row-content-block diff --git a/app/views/projects/services/_index.html.haml b/app/views/projects/services/_index.html.haml index dac7d4d1bbb..acbab8b85c9 100644 --- a/app/views/projects/services/_index.html.haml +++ b/app/views/projects/services/_index.html.haml @@ -8,13 +8,13 @@ %colgroup %col %col - %col.hidden-xs + %col.d-none.d-sm-block %col{ width: "120" } %thead %tr %th %th Service - %th.hidden-xs Description + %th.d-none.d-sm-block Description %th Last edit - @services.sort_by(&:title).each do |service| %tr @@ -23,7 +23,7 @@ %td = link_to edit_project_service_path(@project, service.to_param) do %strong= service.title - %td.hidden-xs + %td.d-none.d-sm-block = service.description %td.light - if service.updated_at.present? diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml index 2ab0227126a..209b9c71390 100644 --- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml +++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml @@ -18,22 +18,22 @@ .help-form .form-group - = label_tag :display_name, 'Display name', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#display_name') + = label_tag :display_name, 'Display name', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#display_name', class: 'input-group-text') .form-group - = label_tag :description, 'Description', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#description') + = label_tag :description, 'Description', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#description', class: 'input-group-text') .form-group - = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block + = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block %p Fill in the word that works best for your team. %p Suggestions: @@ -42,47 +42,47 @@ %code= @project.full_path .form-group - = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#request_url') + = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#request_url', class: 'input-group-text') .form-group - = label_tag nil, 'Request method', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block POST + = label_tag nil, 'Request method', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block POST .form-group - = label_tag :response_username, 'Response username', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :response_username, 'GitLab', class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#response_username') + = label_tag :response_username, 'Response username', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :response_username, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#response_username', class: 'input-group-text') .form-group - = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#response_icon') + = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#response_icon', class: 'input-group-text') .form-group - = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block Yes + = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block Yes .form-group - = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :autocomplete_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#autocomplete_hint') + = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :autocomplete_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#autocomplete_hint', class: 'input-group-text') .form-group - = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#autocomplete_description') + = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#autocomplete_description', class: 'input-group-text') %hr diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml index 2a1b9d4c465..62bef77be97 100644 --- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml +++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml @@ -1,6 +1,6 @@ - enabled = Gitlab.config.mattermost.enabled -.well +.card %p This service allows users to perform common operations on this project by entering slash commands in Mattermost. diff --git a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml index 44c0b7a90dc..2da8e5428ec 100644 --- a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml +++ b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml @@ -1,7 +1,7 @@ .services-installation-info - unless @service.activated? .row - .col-sm-9.col-sm-offset-3 + .col-sm-9.offset-sm-3 = link_to new_project_mattermost_path(@project), class: 'btn btn-lg' do = custom_icon('mattermost_logo', size: 15) Add to Mattermost diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/projects/services/prometheus/_help.html.haml index 88acb824ba7..15e7362c2ba 100644 --- a/app/views/projects/services/prometheus/_help.html.haml +++ b/app/views/projects/services/prometheus/_help.html.haml @@ -5,5 +5,5 @@ = s_('PrometheusService|Manual configuration') - unless @service.editable? - .well + .card = s_('PrometheusService|To enable manual configuration, uninstall Prometheus from your clusters') diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml index 43e6a173108..bda597cc02b 100644 --- a/app/views/projects/services/prometheus/_show.html.haml +++ b/app/views/projects/services/prometheus/_show.html.haml @@ -7,12 +7,12 @@ = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus') .col-lg-9 - .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } } - .panel-heading - %h3.panel-title + .card.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } } + .card-header + %h3.card-title = s_('PrometheusService|Common metrics') - %span.badge.js-monitored-count 0 - .panel-body + %span.badge.badge-pill.js-monitored-count 0 + .card-body .loading-metrics.js-loading-metrics %p.prepend-top-10.prepend-left-10 = icon('spinner spin', class: 'metrics-load-spinner') @@ -22,13 +22,13 @@ = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics') %ul.list-unstyled.metrics-list.hidden.js-metrics-list - .panel.panel-default.hidden.js-panel-missing-env-vars - .panel-heading - %h3.panel-title + .card.hidden.js-panel-missing-env-vars + .card-header + %h3.card-title = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel') = s_('PrometheusService|Missing environment variable') - %span.badge.js-env-var-count 0 - .panel-body.hidden + %span.badge.badge-pill.js-env-var-count 0 + .card-body.hidden .flash-container .flash-notice .flash-text diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml index d592a5e4663..44f58ad05e5 100644 --- a/app/views/projects/services/slack_slash_commands/_help.html.haml +++ b/app/views/projects/services/slack_slash_commands/_help.html.haml @@ -1,7 +1,7 @@ - pretty_name = defined?(@project) ? @project.full_name : 'namespace / path' - run_actions_text = "Perform common operations on GitLab project: #{pretty_name}" -.well +.card %p This service allows users to perform common operations on this project by entering slash commands in Slack. @@ -26,8 +26,8 @@ .help-form .form-group - = label_tag nil, 'Command', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block + = label_tag nil, 'Command', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block %p Fill in the word that works best for your team. %p Suggestions: @@ -36,53 +36,53 @@ %code= @project.full_path .form-group - = label_tag :url, 'URL', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#url') + = label_tag :url, 'URL', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#url', class: 'input-group-text') .form-group - = label_tag nil, 'Method', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block POST + = label_tag nil, 'Method', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block POST .form-group - = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :customize_name, 'GitLab', class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#customize_name') + = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#customize_name', class: 'input-group-text') .form-group - = label_tag nil, 'Customize icon', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block + = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36) = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer') .form-group - = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.text-block Show this command in the autocomplete list + = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.text-block Show this command in the autocomplete list .form-group - = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#autocomplete_description') + = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#autocomplete_description', class: 'input-group-text') .form-group - = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#autocomplete_usage_hint') + = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#autocomplete_usage_hint', class: 'input-group-text') .form-group - = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-xs-12 control-label' - .col-sm-10.col-xs-12.input-group - = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control input-sm', readonly: 'readonly' - .input-group-btn - = clipboard_button(target: '#descriptive_label') + = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 col-form-label' + .col-sm-10.col-12.input-group + = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control form-control-sm', readonly: 'readonly' + .input-group-append + = clipboard_button(target: '#descriptive_label', class: 'input-group-text') %hr diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml index 8cb6c446e18..988bcfb5265 100644 --- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml +++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml @@ -10,21 +10,21 @@ %p.settings-message.text-center = message.html_safe = f.fields_for :auto_devops_attributes, @auto_devops do |form| - .radio + .form-check = form.label :enabled_true do = form.radio_button :enabled, 'true' %strong= s_('CICD|Enable Auto DevOps') %br = s_('CICD|The Auto DevOps pipeline configuration will be used when there is no %{ci_file} in the project.').html_safe % { ci_file: ci_file_formatted } - .radio + .form-check = form.label :enabled_false do = form.radio_button :enabled, 'false' %strong= s_('CICD|Disable Auto DevOps') %br = s_('CICD|An explicit %{ci_file} needs to be specified before you can begin using Continuous Integration and Delivery.').html_safe % { ci_file: ci_file_formatted } - .radio + .form-check = form.label :enabled_ do = form.radio_button :enabled, '' %strong= s_('CICD|Instance default (%{state})') % { state: "#{Gitlab::CurrentSettings.auto_devops_enabled? ? _('enabled') : _('disabled')}" } diff --git a/app/views/projects/settings/ci_cd/_badge.html.haml b/app/views/projects/settings/ci_cd/_badge.html.haml index e8028059487..d14360913a4 100644 --- a/app/views/projects/settings/ci_cd/_badge.html.haml +++ b/app/views/projects/settings/ci_cd/_badge.html.haml @@ -2,15 +2,15 @@ .col-lg-12 %h4 = badge.title.capitalize - .panel.panel-default - .panel-heading + .card + .card-header %b = badge.title.capitalize · = badge.to_html - .pull-right + .float-right = render 'shared/ref_switcher', destination: 'badges', align_right: true - .panel-body + .card-body .row .col-md-2.text-center Markdown diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml index 80c226ad273..50175f5258c 100644 --- a/app/views/projects/settings/ci_cd/_form.html.haml +++ b/app/views/projects/settings/ci_cd/_form.html.haml @@ -7,8 +7,8 @@ = f.label :runners_token, "Runner token", class: 'label-light' .form-control.js-secret-value-placeholder = '*' * 20 - = f.text_field :runners_token, class: "form-control hide js-secret-value", placeholder: 'xEeFCaDAB89' - %p.help-block The secure token used by the Runner to checkout the project + = f.text_field :runners_token, class: "form-control hidden js-secret-value", placeholder: 'xEeFCaDAB89' + %p.form-text.text-muted The secure token used by the Runner to checkout the project %button.btn.btn-info.prepend-top-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: 'false' } } = _('Reveal value') @@ -19,14 +19,14 @@ %p Choose between <code>clone</code> or <code>fetch</code> to get the recent application code = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'git-strategy'), target: '_blank' - .radio + .form-check = f.label :build_allow_git_fetch_false do = f.radio_button :build_allow_git_fetch, 'false' %strong git clone %br %span.descr Slower but makes sure the project workspace is pristine as it clones the repository from scratch for every job - .radio + .form-check = f.label :build_allow_git_fetch_true do = f.radio_button :build_allow_git_fetch, 'true' %strong git fetch @@ -38,7 +38,7 @@ .form-group = f.label :build_timeout_human_readable, 'Timeout', class: 'label-light' = f.text_field :build_timeout_human_readable, class: 'form-control' - %p.help-block + %p.form-text.text-muted Per job. If a job passes this threshold, it will be marked as failed = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'timeout'), target: '_blank' @@ -46,17 +46,17 @@ .form-group = f.label :ci_config_path, 'Custom CI config path', class: 'label-light' = f.text_field :ci_config_path, class: 'form-control', placeholder: '.gitlab-ci.yml' - %p.help-block + %p.form-text.text-muted The path to CI config file. Defaults to <code>.gitlab-ci.yml</code> = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'custom-ci-config-path'), target: '_blank' %hr .form-group - .checkbox + .form-check = f.label :public_builds do = f.check_box :public_builds %strong Public pipelines - .help-block + .form-text.text-muted Allow public access to pipelines and job details, including output logs and artifacts = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'visibility-of-pipelines'), target: '_blank' .bs-callout.bs-callout-info @@ -74,11 +74,11 @@ %hr .form-group - .checkbox + .form-check = f.label :auto_cancel_pending_pipelines do = f.check_box :auto_cancel_pending_pipelines, {}, 'enabled', 'disabled' %strong Auto-cancel redundant, pending pipelines - .help-block + .form-text.text-muted New pipelines will cancel older, pending pipelines on the same branch = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'auto-cancel-pending-pipelines'), target: '_blank' @@ -86,10 +86,12 @@ .form-group = f.label :build_coverage_regex, "Test coverage parsing", class: 'label-light' .input-group - %span.input-group-addon / + %span.input-group-prepend + .input-group-text / = f.text_field :build_coverage_regex, class: 'form-control', placeholder: 'Regular expression' - %span.input-group-addon / - %p.help-block + %span.input-group-append + .input-group-text / + %p.form-text.text-muted A regular expression that will be used to find the test coverage output in the job trace. Leave blank to disable = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank' diff --git a/app/views/projects/settings/integrations/_project_hook.html.haml b/app/views/projects/settings/integrations/_project_hook.html.haml index cd003107d66..77d88aed883 100644 --- a/app/views/projects/settings/integrations/_project_hook.html.haml +++ b/app/views/projects/settings/integrations/_project_hook.html.haml @@ -5,7 +5,7 @@ %div - ProjectHook.triggers.each_value do |event| - if hook.public_send(event) - %span.label.label-gray.deploy-project-label= event.to_s.titleize + %span.badge.badge-gray.deploy-project-label= event.to_s.titleize .col-md-4.col-lg-5.text-right-lg.prepend-top-5 %span.append-right-10.inline SSL Verification: #{hook.enable_ssl_verification ? 'enabled' : 'disabled'} diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml index f09871c7fcc..b3a9fa9dd91 100644 --- a/app/views/projects/snippets/_actions.html.haml +++ b/app/views/projects/snippets/_actions.html.haml @@ -1,6 +1,6 @@ - return unless current_user -.hidden-xs +.d-none.d-sm-block - if can?(current_user, :update_project_snippet, @snippet) = link_to edit_project_snippet_path(@project, @snippet), class: "btn btn-grouped" do Edit @@ -13,7 +13,7 @@ - if @snippet.submittable_as_spam_by?(current_user) = link_to 'Submit as spam', mark_as_spam_project_snippet_path(@project, @snippet), method: :post, class: 'btn btn-grouped btn-spam', title: 'Submit as spam' - if can?(current_user, :create_project_snippet, @project) || can?(current_user, :update_project_snippet, @snippet) - .visible-xs-block.dropdown + .d-block.d-sm-none.dropdown %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } } Options = icon('caret-down') diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml index 98b4d6339da..f55202c2c5f 100644 --- a/app/views/projects/tags/_tag.html.haml +++ b/app/views/projects/tags/_tag.html.haml @@ -6,7 +6,7 @@ = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name prepend-left-4' - if protected_tag?(@project, tag) - %span.label.label-success.prepend-left-4 + %span.badge.badge-success.prepend-left-4 = s_('TagsPage|protected') - if tag.message.present? diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml index 10415d011d6..96ecac815c0 100644 --- a/app/views/projects/tags/index.html.haml +++ b/app/views/projects/tags/index.html.haml @@ -16,7 +16,7 @@ %span.light = tags_sort_options_hash[@sort] = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable %li.dropdown-header = s_('TagsPage|Sort by') - tags_sort_options_hash.each do |value, title| diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml index 1827a3d323c..b596748ca5f 100644 --- a/app/views/projects/tags/new.html.haml +++ b/app/views/projects/tags/new.html.haml @@ -10,35 +10,35 @@ = s_('TagsPage|New Tag') %hr -= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "form-horizontal common-note-form tag-form js-quick-submit js-requires-input" do - .form-group - = label_tag :tag_name, nil, class: 'control-label' += form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "common-note-form tag-form js-quick-submit js-requires-input" do + .form-group.row + = label_tag :tag_name, nil, class: 'col-form-label col-sm-2' .col-sm-10 = text_field_tag :tag_name, params[:tag_name], required: true, autofocus: true, class: 'form-control' - .form-group - = label_tag :ref, 'Create from', class: 'control-label' + .form-group.row + = label_tag :ref, 'Create from', class: 'col-form-label col-sm-2' .col-sm-10.create-from .dropdown = hidden_field_tag :ref, default_ref = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do .text-left.dropdown-toggle-text= default_ref = render 'shared/ref_dropdown', dropdown_class: 'wide' - .help-block + .form-text.text-muted = s_('TagsPage|Existing branch name, tag, or commit SHA') - .form-group - = label_tag :message, nil, class: 'control-label' + .form-group.row + = label_tag :message, nil, class: 'col-form-label col-sm-2' .col-sm-10 = text_area_tag :message, @message, required: false, class: 'form-control', rows: 5 - .help-block + .form-text.text-muted = s_('TagsPage|Optionally, add a message to the tag.') %hr - .form-group - = label_tag :release_description, s_('TagsPage|Release notes'), class: 'control-label' + .form-group.row + = label_tag :release_description, s_('TagsPage|Release notes'), class: 'col-form-label col-sm-2' .col-sm-10 = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do = render 'projects/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here...'), current_text: @release_description = render 'shared/notes/hints' - .help-block + .form-text.text-muted = s_('TagsPage|Optionally, add release notes to the tag. They will be stored in the GitLab database and displayed on the tags page.') .form-actions = button_tag s_('TagsPage|Create tag'), class: 'btn btn-create' diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml index 7a3469cdd26..15a960f81b8 100644 --- a/app/views/projects/tags/show.html.haml +++ b/app/views/projects/tags/show.html.haml @@ -11,7 +11,7 @@ = icon('tag') = @tag.name - if protected_tag?(@project, @tag) - %span.label.label-success + %span.badge.badge-success = s_('TagsPage|protected') - if @commit = render 'projects/branches/commit', commit: @commit, project: @project diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml index 8c1c532cb3e..f79f3af36d4 100644 --- a/app/views/projects/tree/_blob_item.html.haml +++ b/app/views/projects/tree/_blob_item.html.haml @@ -6,7 +6,7 @@ = link_to project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name)), class: 'str-truncated', title: file_name do %span= file_name - if is_lfs_blob - %span.label.label-lfs.prepend-left-5 LFS - %td.hidden-xs.tree-commit + %span.badge.label-lfs.prepend-left-5 LFS + %td.d-none.d-sm-table-cell.tree-commit %td.tree-time-ago.cgray.text-right = render 'projects/tree/spinner' diff --git a/app/views/projects/tree/_submodule_item.html.haml b/app/views/projects/tree/_submodule_item.html.haml index 04d52361db0..e563c8c4036 100644 --- a/app/views/projects/tree/_submodule_item.html.haml +++ b/app/views/projects/tree/_submodule_item.html.haml @@ -3,4 +3,4 @@ %i.fa.fa-archive.fa-fw = submodule_link(submodule_item, @ref) %td - %td.hidden-xs + %td.d-none.d-sm-table-cell diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml index 6ea78851b8d..587aeafa82f 100644 --- a/app/views/projects/tree/_tree_content.html.haml +++ b/app/views/projects/tree/_tree_content.html.haml @@ -4,15 +4,15 @@ %thead %tr %th= s_('ProjectFileTree|Name') - %th.hidden-xs - .pull-left= _('Last commit') + %th.d-none.d-sm-table-cell + .float-left= _('Last commit') %th.text-right= _('Last update') - if @path.present? %tr.tree-item %td.tree-item-file-name = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10' %td - %td.hidden-xs + %td.d-none.d-sm-table-cell = render_tree(tree) diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml index fc8ebfa1fb1..4fc1a284693 100644 --- a/app/views/projects/tree/_tree_header.html.haml +++ b/app/views/projects/tree/_tree_header.html.haml @@ -11,18 +11,18 @@ - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' } %ul.breadcrumb.repo-breadcrumb - %li + %li.breadcrumb-item = link_to project_tree_path(@project, @ref) do = @project.path - path_breadcrumbs do |title, path| - %li + %li.breadcrumb-item = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path)) - if can_collaborate || can_create_mr_from_fork - %li + %li.breadcrumb-item %a.btn.add-to-tree{ addtotree_toggle_attributes } - = sprite_icon('plus', size: 16, css_class: 'pull-left') - = sprite_icon('arrow-down', size: 16, css_class: 'pull-left') + = sprite_icon('plus', size: 16, css_class: 'float-left') + = sprite_icon('arrow-down', size: 16, css_class: 'float-left') - if on_top_of_branch? .add-to-tree-dropdown %ul.dropdown-menu diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml index af3816fc9f4..ce0cd95b468 100644 --- a/app/views/projects/tree/_tree_item.html.haml +++ b/app/views/projects/tree/_tree_item.html.haml @@ -4,6 +4,6 @@ - path = flatten_tree(@path, tree_item) = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), class: 'str-truncated', title: path do %span= path - %td.hidden-xs.tree-commit + %td.d-none.d-sm-table-cell.tree-commit %td.tree-time-ago.text-right = render 'projects/tree/spinner' diff --git a/app/views/projects/triggers/_content.html.haml b/app/views/projects/triggers/_content.html.haml index 6c2d603d95d..96a41aa066c 100644 --- a/app/views/projects/triggers/_content.html.haml +++ b/app/views/projects/triggers/_content.html.haml @@ -1,6 +1,6 @@ %p.append-bottom-default Triggers with the - %span.label.label-primary legacy + %span.badge.badge-primary legacy label do not have an associated user and only have access to the current project. %br = succeed '.' do diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml index 5f708b3a2ed..3539aea3580 100644 --- a/app/views/projects/triggers/_form.html.haml +++ b/app/views/projects/triggers/_form.html.haml @@ -4,7 +4,7 @@ - if @trigger.token .form-group %label.label-light Token - %p.form-control-static= @trigger.token + %p.form-control-plaintext= @trigger.token .form-group = f.label :key, "Description", class: "label-light" = f.text_field :description, class: "form-control", required: true, title: 'Trigger description is required.', placeholder: "Trigger description" diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml index 0f655e4ed83..a15bb4c4f3f 100644 --- a/app/views/projects/triggers/_index.html.haml +++ b/app/views/projects/triggers/_index.html.haml @@ -1,11 +1,11 @@ .row.prepend-top-default.append-bottom-default.triggers-container .col-lg-12 = render "projects/triggers/content" - .panel.panel-default - .panel-heading - %h4.panel-title + .card + .card-header + %h4.card-title Manage your project's triggers - .panel-body + .card-body = render "projects/triggers/form", btn_text: "Add trigger" %hr - if @triggers.any? @@ -26,7 +26,7 @@ %p.settings-message.text-center.append-bottom-default No triggers have been created yet. Add one using the form above. - .panel-footer + .card-footer %p In the following examples, you can see the exact API call you need to diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml index 9201680f119..7e4618e1a88 100644 --- a/app/views/projects/triggers/_trigger.html.haml +++ b/app/views/projects/triggers/_trigger.html.haml @@ -8,9 +8,9 @@ .label-container - if trigger.legacy? - %span.label.label-primary.has-tooltip{ title: "Trigger makes use of deprecated functionality" } legacy + %span.badge.badge-primary.has-tooltip{ title: "Trigger makes use of deprecated functionality" } legacy - if !trigger.can_access_project? - %span.label.label-danger.has-tooltip{ title: "Trigger user has insufficient permissions to project" } invalid + %span.badge.badge-danger.has-tooltip{ title: "Trigger user has insufficient permissions to project" } invalid %td - if trigger.description? && trigger.description.length > 15 diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml index d285251d06f..bcceb69954a 100644 --- a/app/views/projects/wikis/_form.html.haml +++ b/app/views/projects/wikis/_form.html.haml @@ -1,13 +1,13 @@ - commit_message = @page.persisted? ? s_("WikiPageEdit|Update %{page_title}") : s_("WikiPageCreate|Create %{page_title}") - commit_message = commit_message % { page_title: @page.title } -= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'form-horizontal wiki-form common-note-form prepend-top-default js-quick-submit' } do |f| += form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'wiki-form common-note-form prepend-top-default js-quick-submit' } do |f| = form_errors(@page) - if @page.persisted? = f.hidden_field :last_commit_sha, value: @page.last_commit_sha - .form-group + .form-group.row .col-sm-12= f.label :title, class: 'control-label-full-width' .col-sm-12 = f.text_field :title, class: 'form-control', value: @page.title @@ -16,12 +16,12 @@ = icon('lightbulb-o') = s_("WikiEditPageTip|Tip: You can move this page by adding the path to the beginning of the title.") = link_to icon('question-circle'), help_page_path('user/project/wiki/index', anchor: 'moving-a-wiki-page'), target: '_blank' - .form-group + .form-group.row .col-sm-12= f.label :format, class: 'control-label-full-width' .col-sm-12 = f.select :format, options_for_select(ProjectWiki::MARKUPS, {selected: @page.format}), {}, class: 'form-control' - .form-group + .form-group.row .col-sm-12= f.label :content, class: 'control-label-full-width' .col-sm-12 = render layout: 'projects/md_preview', locals: { url: project_wiki_preview_markdown_path(@project, @page.slug) } do @@ -31,7 +31,7 @@ .clearfix .error-alert - .help-block + .form-text.text-muted = succeed '.' do = (s_("WikiMarkdownTip|To link to a (new) page, simply type %{link_example}") % { link_example: '<code>[Link Title](page-slug)</code>' }).html_safe @@ -39,16 +39,16 @@ - markdown_link = link_to s_("WikiMarkdownDocs|documentation"), help_page_path('user/markdown', anchor: 'wiki-specific-markdown') = (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe - .form-group + .form-group.row .col-sm-12= f.label :commit_message, class: 'control-label-full-width' .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message .form-actions - if @page && @page.persisted? = f.submit _("Save changes"), class: 'btn-save btn' - .pull-right + .float-right = link_to _("Cancel"), project_wiki_path(@project, @page), class: 'btn btn-cancel btn-grouped' - else = f.submit s_("Wiki|Create page"), class: 'btn-create btn' - .pull-right + .float-right = link_to _("Cancel"), project_wiki_path(@project, :home), class: 'btn btn-cancel' diff --git a/app/views/projects/wikis/_pages_wiki_page.html.haml b/app/views/projects/wikis/_pages_wiki_page.html.haml index efa16d38f84..cbb441d7509 100644 --- a/app/views/projects/wikis/_pages_wiki_page.html.haml +++ b/app/views/projects/wikis/_pages_wiki_page.html.haml @@ -1,5 +1,5 @@ %li = link_to wiki_page.title, project_wiki_path(@project, wiki_page) %small (#{wiki_page.format}) - .pull-right + .float-right %small= (s_("Last edited %{date}") % { date: time_ago_with_tooltip(wiki_page.last_version.authored_date) }).html_safe diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml index 2c7551c6f8c..a23396dc0d8 100644 --- a/app/views/projects/wikis/_sidebar.html.haml +++ b/app/views/projects/wikis/_sidebar.html.haml @@ -1,7 +1,7 @@ %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } } .sidebar-container .block.wiki-sidebar-header.append-bottom-default - %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" } + %a.gutter-toggle.float-right.d-block.d-sm-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" } = icon('angle-double-right') - git_access_url = project_wikis_git_access_path(@project) diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml index 10dbbc0e42c..909987d8090 100644 --- a/app/views/projects/wikis/git_access.html.haml +++ b/app/views/projects/wikis/git_access.html.haml @@ -2,7 +2,7 @@ - page_title s_("WikiClone|Git Access"), _("Wiki") .wiki-page-header.has-sidebar-toggle - %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } + %button.btn.btn-default.d-block.d-sm-block.d-md-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') .git-access-header diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml index 7d43fd61081..ff9a7b53a86 100644 --- a/app/views/search/_category.html.haml +++ b/app/views/search/_category.html.haml @@ -1,80 +1,80 @@ .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller .fade-left= icon('angle-left') .fade-right= icon('angle-right') - %ul.nav-links.search-filter.scrolling-tabs + %ul.nav-links.search-filter.scrolling-tabs.nav.nav-tabs - if @project - if project_search_tabs?(:blobs) %li{ class: active_when(@scope == 'blobs') } = link_to search_filter_path(scope: 'blobs') do Code - %span.badge + %span.badge.badge-pill = @search_results.blobs_count - if project_search_tabs?(:issues) %li{ class: active_when(@scope == 'issues') } = link_to search_filter_path(scope: 'issues') do Issues - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_issues_count) - if project_search_tabs?(:merge_requests) %li{ class: active_when(@scope == 'merge_requests') } = link_to search_filter_path(scope: 'merge_requests') do Merge requests - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_merge_requests_count) - if project_search_tabs?(:milestones) %li{ class: active_when(@scope == 'milestones') } = link_to search_filter_path(scope: 'milestones') do Milestones - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_milestones_count) - if project_search_tabs?(:notes) %li{ class: active_when(@scope == 'notes') } = link_to search_filter_path(scope: 'notes') do Comments - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_notes_count) - if project_search_tabs?(:wiki) %li{ class: active_when(@scope == 'wiki_blobs') } = link_to search_filter_path(scope: 'wiki_blobs') do Wiki - %span.badge + %span.badge.badge-pill = @search_results.wiki_blobs_count - if project_search_tabs?(:commits) %li{ class: active_when(@scope == 'commits') } = link_to search_filter_path(scope: 'commits') do Commits - %span.badge + %span.badge.badge-pill = @search_results.commits_count - elsif @show_snippets %li{ class: active_when(@scope == 'snippet_blobs') } = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do Snippet Contents - %span.badge + %span.badge.badge-pill = @search_results.snippet_blobs_count %li{ class: active_when(@scope == 'snippet_titles') } = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do Titles and Filenames - %span.badge + %span.badge.badge-pill = @search_results.snippet_titles_count - else %li{ class: active_when(@scope == 'projects') } = link_to search_filter_path(scope: 'projects') do Projects - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_projects_count) %li{ class: active_when(@scope == 'issues') } = link_to search_filter_path(scope: 'issues') do Issues - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_issues_count) %li{ class: active_when(@scope == 'merge_requests') } = link_to search_filter_path(scope: 'merge_requests') do Merge requests - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_merge_requests_count) %li{ class: active_when(@scope == 'milestones') } = link_to search_filter_path(scope: 'milestones') do Milestones - %span.badge + %span.badge.badge-pill = limited_count(@search_results.limited_milestones_count) diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml index e4902d368e7..6837f64f132 100644 --- a/app/views/search/_filter.html.haml +++ b/app/views/search/_filter.html.haml @@ -11,7 +11,7 @@ - else Any = icon("chevron-down") - .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right + .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right = dropdown_title("Filter results by group") = dropdown_filter("Search groups") = dropdown_content @@ -26,7 +26,7 @@ - else Any = icon("chevron-down") - .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right + .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right = dropdown_title("Filter results by project") = dropdown_filter("Search projects") = dropdown_content diff --git a/app/views/search/results/_issue.html.haml b/app/views/search/results/_issue.html.haml index b7a27ef6be2..c413c3d4abb 100644 --- a/app/views/search/results/_issue.html.haml +++ b/app/views/search/results/_issue.html.haml @@ -4,8 +4,8 @@ = link_to [issue.project.namespace.becomes(Namespace), issue.project, issue] do %span.term.str-truncated= issue.title - if issue.closed? - %span.label.label-danger.prepend-left-5 Closed - .pull-right ##{issue.iid} + %span.badge.badge-danger.prepend-left-5 Closed + .float-right ##{issue.iid} - if issue.description.present? .description.term = search_md_sanitize(issue, :description) diff --git a/app/views/search/results/_merge_request.html.haml b/app/views/search/results/_merge_request.html.haml index 8b0fd74f680..519176af108 100644 --- a/app/views/search/results/_merge_request.html.haml +++ b/app/views/search/results/_merge_request.html.haml @@ -3,10 +3,10 @@ = link_to [merge_request.target_project.namespace.becomes(Namespace), merge_request.target_project, merge_request] do %span.term.str-truncated= merge_request.title - if merge_request.merged? - %span.label.label-primary.prepend-left-5 Merged + %span.badge.badge-primary.prepend-left-5 Merged - elsif merge_request.closed? - %span.label.label-danger.prepend-left-5 Closed - .pull-right= merge_request.to_reference + %span.badge.badge-danger.prepend-left-5 Closed + .float-right= merge_request.to_reference - if merge_request.description.present? .description.term = search_md_sanitize(merge_request, :description) diff --git a/app/views/search/results/_snippet_title.html.haml b/app/views/search/results/_snippet_title.html.haml index d46c4d11e51..9c8afb2165b 100644 --- a/app/views/search/results/_snippet_title.html.haml +++ b/app/views/search/results/_snippet_title.html.haml @@ -3,13 +3,13 @@ = link_to reliable_snippet_path(snippet_title) do = truncate(snippet_title.title, length: 60) - if snippet_title.private? - %span.label.label-gray + %span.badge.badge-gray %i.fa.fa-lock private - %span.cgray.monospace.tiny.pull-right.term + %span.cgray.monospace.tiny.float-right.term = snippet_title.file_name - %small.pull-right.cgray + %small.float-right.cgray - if snippet_title.project_id? = link_to snippet_title.project.full_name, project_path(snippet_title.project) diff --git a/app/views/shared/_allow_request_access.html.haml b/app/views/shared/_allow_request_access.html.haml index 53a99a736c0..0e698570d7d 100644 --- a/app/views/shared/_allow_request_access.html.haml +++ b/app/views/shared/_allow_request_access.html.haml @@ -1,4 +1,4 @@ -.checkbox +.form-check = form.label :request_access_enabled do = form.check_box :request_access_enabled %strong Allow users to request access diff --git a/app/views/shared/_choose_group_avatar_button.html.haml b/app/views/shared/_choose_group_avatar_button.html.haml index 75c65520350..0552fe62090 100644 --- a/app/views/shared/_choose_group_avatar_button.html.haml +++ b/app/views/shared/_choose_group_avatar_button.html.haml @@ -1,4 +1,4 @@ %button.btn.js-choose-group-avatar-button{ type: 'button' }= _("Choose File ...") %span.file_name.js-avatar-filename= _("No file chosen") = f.file_field :avatar, class: "js-group-avatar-input hidden" -.help-block= _("The maximum file size allowed is 200KB.") +.form-text.text-muted= _("The maximum file size allowed is 200KB.") diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml index 687cd4d1532..5fc02ba3160 100644 --- a/app/views/shared/_clone_panel.html.haml +++ b/app/views/shared/_clone_panel.html.haml @@ -1,13 +1,13 @@ - project = project || @project .git-clone-holder.input-group - .input-group-btn + .input-group-prepend - if allowed_protocols_present? - .clone-dropdown-btn.btn + .input-group-text.clone-dropdown-btn.btn %span = enabled_project_button(project, enabled_protocol) - else - %a#clone-dropdown.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } } + %a#clone-dropdown.input-group-text.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } } %span = default_clone_protocol.upcase = icon('caret-down') @@ -18,5 +18,5 @@ = http_clone_button(project) = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: 'Project clone URL' } - .input-group-btn - = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"), class: "btn-default btn-clipboard") + .input-group-append + = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"), class: "input-group-text btn-default btn-clipboard") diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml index 2329de9e11f..68c14c307ac 100644 --- a/app/views/shared/_commit_message_container.html.haml +++ b/app/views/shared/_commit_message_container.html.haml @@ -1,7 +1,7 @@ -.form-group.commit_message-group +.form-group.row.commit_message-group - nonce = SecureRandom.hex - descriptions = local_assigns.slice(:message_with_description, :message_without_description) - = label_tag "commit_message-#{nonce}", class: 'control-label' do + = label_tag "commit_message-#{nonce}", class: 'col-form-label col-sm-2' do #{ _('Commit message') } .col-sm-10 .commit-message-container diff --git a/app/views/shared/_commit_well.html.haml b/app/views/shared/_commit_well.html.haml index 50e3d80a84d..6f1fe9bfdc5 100644 --- a/app/views/shared/_commit_well.html.haml +++ b/app/views/shared/_commit_well.html.haml @@ -1,4 +1,4 @@ -.info-well.hidden-xs.project-last-commit.append-bottom-default +.info-well.d-none.d-sm-block.project-last-commit.append-bottom-default .well-segment %ul.blob-commit-info = render 'projects/commits/commit', commit: commit, ref: ref, project: project diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml index f94f8ffc604..7c326d36d99 100644 --- a/app/views/shared/_confirm_modal.html.haml +++ b/app/views/shared/_confirm_modal.html.haml @@ -2,9 +2,9 @@ .modal-dialog .modal-content .modal-header - %a.close{ href: "#", "data-dismiss" => "modal" } × %h3.page-title Confirmation required + %a.close{ href: "#", "data-dismiss" => "modal" } × .modal-body %p.text-danger.js-confirm-text diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml index e7fa7477e0c..ecb5b1c6ebc 100644 --- a/app/views/shared/_event_filter.html.haml +++ b/app/views/shared/_event_filter.html.haml @@ -1,7 +1,7 @@ .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller .fade-left= icon('angle-left') .fade-right= icon('angle-right') - %ul.nav-links.event-filter.scrolling-tabs + %ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs = event_filter_link EventFilter.all, _('All'), s_('EventFilterBy|Filter by all') - if event_filter_visible(:repository) = event_filter_link EventFilter.push, _('Push events'), s_('EventFilterBy|Filter by push events') diff --git a/app/views/shared/_field.html.haml b/app/views/shared/_field.html.haml index aea0a8fd8e0..0c8d90d92f5 100644 --- a/app/views/shared/_field.html.haml +++ b/app/views/shared/_field.html.haml @@ -11,9 +11,9 @@ .form-group - if type == "password" && value.present? - = form.label name, "Enter new #{title.downcase}", class: "control-label" + = form.label name, "Enter new #{title.downcase}", class: "col-form-label" - else - = form.label name, title, class: "control-label" + = form.label name, title, class: "col-form-label" .col-sm-10 - if type == 'text' = form.text_field name, class: "form-control", placeholder: placeholder, required: required, disabled: disabled @@ -26,4 +26,4 @@ - elsif type == 'password' = form.password_field name, autocomplete: "new-password", class: "form-control", required: value.blank? && required, disabled: disabled - if help - %span.help-block= help + %span.form-text.text-muted= help diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml index 403d22c79f8..dbed4b94d61 100644 --- a/app/views/shared/_group_form.html.haml +++ b/app/views/shared/_group_form.html.haml @@ -2,15 +2,16 @@ - group_path = root_url - group_path << parent.full_path + '/' if parent -.form-group - = f.label :path, class: 'control-label' do +.form-group.row + = f.label :path, class: 'col-form-label col-sm-2' do Group path .col-sm-10 .input-group.gl-field-error-anchor - .group-root-path.input-group-addon.has-tooltip{ title: group_path, :'data-placement' => 'bottom' } - %span>= root_url - - if parent - %strong= parent.full_path + '/' + .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' } + .input-group-text + %span>= root_url + - if parent + %strong= parent.full_path + '/' = f.hidden_field :parent_id = f.text_field :path, placeholder: 'open-source', class: 'form-control', autofocus: local_assigns[:autofocus] || false, required: true, @@ -24,8 +25,8 @@ = succeed '.' do = link_to 'Learn more', help_page_path('user/group/index', anchor: 'changing-a-groups-path'), target: '_blank' -.form-group.group-name-holder - = f.label :name, class: 'control-label' do +.form-group.row.group-name-holder + = f.label :name, class: 'col-form-label col-sm-2' do Group name .col-sm-10 = f.text_field :name, class: 'form-control', @@ -33,14 +34,14 @@ title: 'You can choose a descriptive name different from the path.' - if @group.persisted? - .form-group.group-name-holder - = f.label :id, class: 'control-label' do + .form-group.row.group-name-holder + = f.label :id, class: 'col-form-label col-sm-2' do = _("Group ID") .col-sm-10 = f.text_field :id, class: 'form-control', readonly: true -.form-group.group-description-holder - = f.label :description, class: 'control-label' +.form-group.row.group-description-holder + = f.label :description, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_area :description, maxlength: 250, class: 'form-control js-gfm-input', rows: 4 diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml index 3806ead6c87..35673303b85 100644 --- a/app/views/shared/_import_form.html.haml +++ b/app/views/shared/_import_form.html.haml @@ -1,13 +1,13 @@ - ci_cd_only = local_assigns.fetch(:ci_cd_only, false) -.form-group.import-url-data +.form-group.row.import-url-data = f.label :import_url, class: 'label-light' do %span = _('Git repository URL') = f.text_field :import_url, autocomplete: 'off', class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git', required: true - .well.prepend-top-20 + .card.prepend-top-20 %ul %li = _('The repository must be accessible over <code>http://</code>, <code>https://</code> or <code>git://</code>.').html_safe diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml index 430d9a9dd76..6cc8c485666 100644 --- a/app/views/shared/_issuable_meta_data.html.haml +++ b/app/views/shared/_issuable_meta_data.html.haml @@ -5,21 +5,21 @@ - issuable_mr = @issuable_meta_data[issuable.id].merge_requests_count - if issuable_mr > 0 - %li.issuable-mr.hidden-xs.has-tooltip{ title: _('Related merge requests') } + %li.issuable-mr.d-none.d-sm-block.has-tooltip{ title: _('Related merge requests') } = image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged') = issuable_mr - if upvotes > 0 - %li.issuable-upvotes.hidden-xs.has-tooltip{ title: _('Upvotes') } + %li.issuable-upvotes.d-none.d-sm-block.has-tooltip{ title: _('Upvotes') } = icon('thumbs-up') = upvotes - if downvotes > 0 - %li.issuable-downvotes.hidden-xs.has-tooltip{ title: _('Downvotes') } + %li.issuable-downvotes.d-none.d-sm-block.has-tooltip{ title: _('Downvotes') } = icon('thumbs-down') = downvotes -%li.issuable-comments.hidden-xs +%li.issuable-comments.d-none.d-sm-block = link_to issuable_url, class: ['has-tooltip', ('no-comments' if note_count.zero?)], title: _('Comments') do = icon('comments') = note_count diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml index 49555b6ff4e..987a5d4f13f 100644 --- a/app/views/shared/_issues.html.haml +++ b/app/views/shared/_issues.html.haml @@ -1,5 +1,5 @@ - if @issues.to_a.any? - .panel.panel-default.panel-small.panel-without-border + .card.card-small.card-without-border %ul.content-list.issues-list.issuable-list = render partial: 'projects/issues/issue', collection: @issues = paginate @issues, theme: "gitlab" diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml index 836df57a3a2..ba5b65a209d 100644 --- a/app/views/shared/_label.html.haml +++ b/app/views/shared/_label.html.haml @@ -8,11 +8,11 @@ %li.label-list-item{ id: label_css_id, data: { id: label.id } } = render "shared/label_row", label: label - .visible-xs.visible-sm-inline-block.dropdown + .d-inline-block.d-sm-none.dropdown %button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } } Options = icon('caret-down') - .dropdown-menu.dropdown-menu-align-right + .dropdown-menu.dropdown-menu-right %ul - if show_label_merge_requests_link %li @@ -46,7 +46,7 @@ data: {confirm: 'Remove this label? Are you sure?'}, class: 'text-danger' - .pull-right.hidden-xs.hidden-sm + .float-right.d-none.d-sm-none.d-md-block - if can?(current_user, :admin_label, label) - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group) %button.js-promote-project-label-button.btn.btn-transparent.btn-action.has-tooltip{ title: _('Promote to Group Label'), diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml index bd4f191502e..f1c1ca9b2c9 100644 --- a/app/views/shared/_label_row.html.haml +++ b/app/views/shared/_label_row.html.haml @@ -22,7 +22,7 @@ - if label.description.present? .description-text = markdown_field(label, :description) - .hidden-xs.hidden-sm + .d-none.d-sm-none.d-md-block - if show_label_issues_link = link_to_label(label, subject: subject) { 'Issues' } - if show_label_merge_requests_link diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml index 0517896cfbd..700ec4b606f 100644 --- a/app/views/shared/_merge_requests.html.haml +++ b/app/views/shared/_merge_requests.html.haml @@ -1,5 +1,5 @@ - if @merge_requests.to_a.any? - .panel.panel-default.panel-small.panel-without-border + .card.card-small.card-without-border %ul.content-list.mr-list.issuable-list = render partial: 'projects/merge_requests/merge_request', collection: @merge_requests diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml index 034b76b978f..6c1ac20d544 100644 --- a/app/views/shared/_milestones_filter.html.haml +++ b/app/views/shared/_milestones_filter.html.haml @@ -1,13 +1,13 @@ -%ul.nav-links.mobile-separator +%ul.nav-links.mobile-separator.nav.nav-tabs %li{ class: milestone_class_for_state(params[:state], 'opened', true) }> = link_to milestones_filter_path(state: 'opened') do Open - %span.badge= counts[:opened] + %span.badge.badge-pill= counts[:opened] %li{ class: milestone_class_for_state(params[:state], 'closed') }> = link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc') do Closed - %span.badge= counts[:closed] + %span.badge.badge-pill= counts[:closed] %li{ class: milestone_class_for_state(params[:state], 'all') }> = link_to milestones_filter_path(state: 'all', sort: 'due_date_desc') do All - %span.badge= counts[:all] + %span.badge.badge-pill= counts[:all] diff --git a/app/views/shared/_milestones_sort_dropdown.html.haml b/app/views/shared/_milestones_sort_dropdown.html.haml index 9b2f2fdcc93..a6ba3b59365 100644 --- a/app/views/shared/_milestones_sort_dropdown.html.haml +++ b/app/views/shared/_milestones_sort_dropdown.html.haml @@ -6,7 +6,7 @@ - else = sort_title_due_date_soon = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort %li = link_to page_filter_path(sort: sort_value_due_date_soon, label: true) do = sort_title_due_date_soon diff --git a/app/views/shared/_new_commit_form.html.haml b/app/views/shared/_new_commit_form.html.haml index 9221fd1e025..81c33eeea4f 100644 --- a/app/views/shared/_new_commit_form.html.haml +++ b/app/views/shared/_new_commit_form.html.haml @@ -7,8 +7,8 @@ = hidden_field_tag 'branch_name', @ref - else - if can?(current_user, :push_code, @project) - .form-group.branch - = label_tag 'branch_name', _('Target Branch'), class: 'control-label' + .form-group.row.branch + = label_tag 'branch_name', _('Target Branch'), class: 'col-form-label col-sm-2' .col-sm-10 = text_field_tag 'branch_name', branch_name, required: true, class: "form-control js-branch-name ref-name" diff --git a/app/views/shared/_new_merge_request_checkbox.html.haml b/app/views/shared/_new_merge_request_checkbox.html.haml index 133c31f09c4..8dbdf63f9f4 100644 --- a/app/views/shared/_new_merge_request_checkbox.html.haml +++ b/app/views/shared/_new_merge_request_checkbox.html.haml @@ -1,4 +1,4 @@ -.checkbox +.form-check - nonce = SecureRandom.hex = label_tag "create_merge_request-#{nonce}" do = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: "create_merge_request-#{nonce}" diff --git a/app/views/shared/_personal_access_tokens_table.html.haml b/app/views/shared/_personal_access_tokens_table.html.haml index c5e4d6e2871..cadac1cc99d 100644 --- a/app/views/shared/_personal_access_tokens_table.html.haml +++ b/app/views/shared/_personal_access_tokens_table.html.haml @@ -35,7 +35,7 @@ = text_field_tag 'impersonation-token-token', token.token, readonly: true, class: "form-control" = clipboard_button(text: token.token) - path = impersonation ? revoke_admin_user_impersonation_token_path(token.user, token) : revoke_profile_personal_access_token_path(token) - %td= link_to "Revoke", path, method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this #{type} Token? This action cannot be undone." } + %td= link_to "Revoke", path, method: :put, class: "btn btn-danger float-right", data: { confirm: "Are you sure you want to revoke this #{type} Token? This action cannot be undone." } - else .settings-message.text-center This user has no active #{type} Tokens. diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml index f4eb8e491b9..2c52eccccb6 100644 --- a/app/views/shared/_project_limit.html.haml +++ b/app/views/shared/_project_limit.html.haml @@ -1,8 +1,8 @@ - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0 - .project-limit-message.alert.alert-warning.hidden-xs + .project-limit-message.alert.alert-warning.d-none.d-sm-block You won't be able to create new projects because you have reached your project limit. - .pull-right + .float-right = link_to "Don't show again", profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link' | = link_to 'Remind later', '#', class: 'hide-project-limit-message alert-link' diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml index f1c39b9e923..4e7061eef1c 100644 --- a/app/views/shared/_ref_switcher.html.haml +++ b/app/views/shared/_ref_switcher.html.haml @@ -9,7 +9,7 @@ = hidden_field_tag key, value, id: nil .dropdown = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, sort: 'updated_desc'), field_name: 'ref', submit_form_on_click: true, visit: true }, { toggle_class: "js-project-refs-dropdown qa-branches-select" } - .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown.dropdown-menu-paging.qa-branches-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) } + .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown.dropdown-menu-paging.qa-branches-dropdown{ class: ("dropdown-menu-right" if local_assigns[:align_right]) } .dropdown-page-one = dropdown_title _("Switch branch/tag") = dropdown_filter _("Search branches and tags") diff --git a/app/views/shared/_service_settings.html.haml b/app/views/shared/_service_settings.html.haml index a41aaed66a3..0ebf365c7bd 100644 --- a/app/views/shared/_service_settings.html.haml +++ b/app/views/shared/_service_settings.html.haml @@ -3,24 +3,24 @@ - if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true) = render "projects/services/#{@service.to_param}/help", subject: subject - elsif @service.help.present? - .well + .card = markdown @service.help .service-settings - if @service.show_active_box? - .form-group - = form.label :active, "Active", class: "control-label" + .form-group.row + = form.label :active, "Active", class: "col-form-label col-sm-2" .col-sm-10 = form.check_box :active, disabled: disable_fields_service?(@service) - if @service.configurable_events.present? - .form-group - = form.label :url, "Trigger", class: 'control-label' + .form-group.row + = form.label :url, "Trigger", class: 'col-form-label col-sm-2' .col-sm-10 - @service.configurable_events.each do |event| %div - = form.check_box service_event_field_name(event), class: 'pull-left' + = form.check_box service_event_field_name(event), class: 'float-left' .prepend-left-20 = form.label service_event_field_name(event), class: 'list-label' do %strong diff --git a/app/views/shared/_sort_dropdown.html.haml b/app/views/shared/_sort_dropdown.html.haml index 7ff5e679f17..be6d4f1c32b 100644 --- a/app/views/shared/_sort_dropdown.html.haml +++ b/app/views/shared/_sort_dropdown.html.haml @@ -2,10 +2,10 @@ - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues' .dropdown.inline.prepend-left-10 - %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } } + %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } } = sorted_by = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable.dropdown-menu-sort + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort %li = sortable_item(sort_title_priority, page_filter_path(sort: sort_value_priority, label: true), sorted_by) = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_created_date, label: true), sorted_by) diff --git a/app/views/shared/_visibility_level.html.haml b/app/views/shared/_visibility_level.html.haml index 192d2502aaf..d67409ffe14 100644 --- a/app/views/shared/_visibility_level.html.haml +++ b/app/views/shared/_visibility_level.html.haml @@ -2,7 +2,7 @@ .form-group.visibility-level-setting - if with_label - = f.label :visibility_level, class: 'control-label' do + = f.label :visibility_level, class: 'col-form-label col-sm-2' do Visibility Level = link_to icon('question-circle'), help_page_path("public_access/public_access") %div{ :class => ("col-sm-10" if with_label) } diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml index 0ec7677a566..bdf550cd8b6 100644 --- a/app/views/shared/_visibility_radios.html.haml +++ b/app/views/shared/_visibility_radios.html.haml @@ -2,7 +2,7 @@ - disallowed = disallowed_visibility_level?(form_model, level) - restricted = restricted_visibility_levels.include?(level) - disabled = disallowed || restricted - .radio{ class: [('disabled' if disabled), ('restricted' if restricted)] } + .form-check.pl-0{ class: [('disabled' if disabled), ('restricted' if restricted)] } = form.label "#{model_method}_#{level}" do = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled = visibility_level_icon(level) diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml index dac60094686..496b94ec953 100644 --- a/app/views/shared/boards/_show.html.haml +++ b/app/views/shared/boards/_show.html.haml @@ -13,7 +13,7 @@ %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal #board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" } - .hidden-xs.hidden-sm + .d-none.d-sm-none.d-md-block = render 'shared/issuable/search_bar', type: :boards .boards-list diff --git a/app/views/shared/boards/components/_board.html.haml b/app/views/shared/boards/components/_board.html.haml index aea40df41b0..67476a3f573 100644 --- a/app/views/shared/boards/components/_board.html.haml +++ b/app/views/shared/boards/components/_board.html.haml @@ -14,7 +14,7 @@ %span.has-tooltip{ "v-if": "list.type === \"label\"", ":title" => '(list.label ? list.label.description : "")', data: { container: "body", placement: "bottom" }, - class: "label color-label title board-title-text", + class: "badge color-label title board-title-text", ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" } {{ list.title }} @@ -22,10 +22,10 @@ %board-delete{ "inline-template" => true, ":list" => "list", "v-if" => "!list.preset && list.id" } - %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" } + %button.board-delete.has-tooltip.float-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" } = icon("trash") .issue-count-badge.clearfix{ "v-if" => 'list.type !== "blank"' } - %span.issue-count-badge-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' } + %span.issue-count-badge-count.float-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' } {{ list.issuesSize }} - if can?(current_user, :admin_list, current_board_parent) %button.issue-count-badge-add-button.btn.btn-sm.btn-default.has-tooltip.js-no-trigger-collapse{ type: "button", diff --git a/app/views/shared/boards/components/_sidebar.html.haml b/app/views/shared/boards/components/_sidebar.html.haml index b385cc3f962..774dafe5f2c 100644 --- a/app/views/shared/boards/components/_sidebar.html.haml +++ b/app/views/shared/boards/components/_sidebar.html.haml @@ -3,14 +3,14 @@ %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" } .issuable-sidebar .block.issuable-sidebar-header - %span.issuable-header-text.hide-collapsed.pull-left + %span.issuable-header-text.hide-collapsed.float-left %strong {{ issue.title }} %br/ %span = precede "#" do {{ issue.iid }} - %a.gutter-toggle.pull-right{ role: "button", + %a.gutter-toggle.float-right{ role: "button", href: "#", "@click.prevent" => "closeSidebar", "aria-label" => "Toggle sidebar" } diff --git a/app/views/shared/boards/components/sidebar/_due_date.html.haml b/app/views/shared/boards/components/sidebar/_due_date.html.haml index d13b998e6f4..10217b6cbf0 100644 --- a/app/views/shared/boards/components/sidebar/_due_date.html.haml +++ b/app/views/shared/boards/components/sidebar/_due_date.html.haml @@ -3,7 +3,7 @@ Due date - if can_admin_issue? = icon("spinner spin", class: "block-loading") - = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right" + = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link float-right" .value .value-content %span.no-value{ "v-if" => "!issue.dueDate" } diff --git a/app/views/shared/boards/components/sidebar/_labels.html.haml b/app/views/shared/boards/components/sidebar/_labels.html.haml index 1c73534c642..a112a9f1f7e 100644 --- a/app/views/shared/boards/components/sidebar/_labels.html.haml +++ b/app/views/shared/boards/components/sidebar/_labels.html.haml @@ -3,13 +3,13 @@ Labels - if can_admin_issue? = icon("spinner spin", class: "block-loading") - = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right" + = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link float-right" .value.issuable-show-labels.dont-hide %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" } None %a{ href: "#", "v-for" => "label in issue.labels" } - %span.label.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" } + %span.badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" } {{ label.title }} - if can_admin_issue? .selectbox diff --git a/app/views/shared/boards/components/sidebar/_milestone.html.haml b/app/views/shared/boards/components/sidebar/_milestone.html.haml index f51c4a97f2b..f2bedd5e3c9 100644 --- a/app/views/shared/boards/components/sidebar/_milestone.html.haml +++ b/app/views/shared/boards/components/sidebar/_milestone.html.haml @@ -3,7 +3,7 @@ Milestone - if can_admin_issue? = icon("spinner spin", class: "block-loading") - = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link pull-right" + = link_to "Edit", "#", class: "js-sidebar-dropdown-toggle edit-link float-right" .value %span.no-value{ "v-if" => "!issue.milestone" } None diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml index 0b003125912..5c74e71b644 100644 --- a/app/views/shared/builds/_tabs.html.haml +++ b/app/views/shared/builds/_tabs.html.haml @@ -1,24 +1,24 @@ -%ul.nav-links.mobile-separator +%ul.nav-links.mobile-separator.nav.nav-tabs %li{ class: active_when(scope.nil?) }> = link_to build_path_proc.call(nil) do All - %span.badge.js-totalbuilds-count + %span.badge.badge-pill.js-totalbuilds-count = limited_counter_with_delimiter(all_builds) %li{ class: active_when(scope == 'pending') }> = link_to build_path_proc.call('pending') do Pending - %span.badge + %span.badge.badge-pill = limited_counter_with_delimiter(all_builds.pending) %li{ class: active_when(scope == 'running') }> = link_to build_path_proc.call('running') do Running - %span.badge + %span.badge.badge-pill = limited_counter_with_delimiter(all_builds.running) %li{ class: active_when(scope == 'finished') }> = link_to build_path_proc.call('finished') do Finished - %span.badge + %span.badge.badge-pill = limited_counter_with_delimiter(all_builds.finished) diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml index 87c2965bb21..913c065e188 100644 --- a/app/views/shared/deploy_keys/_form.html.haml +++ b/app/views/shared/deploy_keys/_form.html.haml @@ -5,26 +5,26 @@ = form_errors(deploy_key) .form-group - = form.label :title, class: 'control-label' + = form.label :title, class: 'col-form-label col-sm-2' .col-sm-10= form.text_field :title, class: 'form-control' .form-group - if deploy_key.new_record? - = form.label :key, class: 'control-label' + = form.label :key, class: 'col-form-label col-sm-2' .col-sm-10 %p.light Paste a machine public key here. Read more about how to generate it = link_to 'here', help_page_path('ssh/README') = form.text_area :key, class: 'form-control thin_area', rows: 5 - else - = form.label :fingerprint, class: 'control-label' + = form.label :fingerprint, class: 'col-form-label col-sm-2' .col-sm-10 = form.text_field :fingerprint, class: 'form-control', readonly: 'readonly' - if deploy_keys_project.present? = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form| .form-group - .control-label + .col-form-label.col-sm-2 .col-sm-10 = deploy_keys_project_form.label :can_push do = deploy_keys_project_form.check_box :can_push diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml index 62437f5fc9d..c7c33288e9d 100644 --- a/app/views/shared/empty_states/_issues.html.haml +++ b/app/views/shared/empty_states/_issues.html.haml @@ -3,10 +3,10 @@ - has_button = button_path || project_select_button .row.empty-state - .col-xs-12 + .col-12 .svg-content = image_tag 'illustrations/issues.svg' - .col-xs-12 + .col-12 .text-content - if current_user %h4 diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml index 04db9de3606..e8749ee3956 100644 --- a/app/views/shared/empty_states/_labels.html.haml +++ b/app/views/shared/empty_states/_labels.html.haml @@ -1,8 +1,8 @@ .row.empty-state.labels - .col-xs-12 + .col-12 .svg-content = image_tag 'illustrations/labels.svg' - .col-xs-12 + .col-12 .text-content %h4= _("Labels can be applied to issues and merge requests to categorize them.") %p= _("You can also star a label to make it a priority label.") diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml index 2edf3557df4..014220761a9 100644 --- a/app/views/shared/empty_states/_merge_requests.html.haml +++ b/app/views/shared/empty_states/_merge_requests.html.haml @@ -3,10 +3,10 @@ - has_button = button_path || project_select_button .row.empty-state.merge-requests - .col-xs-12 + .col-12 .svg-content = image_tag 'illustrations/merge_requests.svg' - .col-xs-12 + .col-12 .text-content - if has_button %h4 diff --git a/app/views/shared/form_elements/_description.html.haml b/app/views/shared/form_elements/_description.html.haml index 38e9899ca4b..e5dfa7dbf71 100644 --- a/app/views/shared/form_elements/_description.html.haml +++ b/app/views/shared/form_elements/_description.html.haml @@ -9,8 +9,8 @@ - else - preview_url = preview_markdown_path(project) -.form-group.detail-page-description - = form.label :description, 'Description', class: 'control-label' +.form-group.row.detail-page-description + = form.label :description, 'Description', class: 'col-form-label col-sm-2' .col-sm-10 = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml index 8607be9cd06..2237b93a10b 100644 --- a/app/views/shared/groups/_dropdown.html.haml +++ b/app/views/shared/groups/_dropdown.html.haml @@ -13,7 +13,7 @@ %span.dropdown-label = options_hash[default_sort_by] = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable %li.dropdown-header = _("Sort by") - options_hash.each do |value, title| diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index 90395600d4e..a1b901aaffa 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/app/views/shared/groups/_group.html.haml @@ -16,7 +16,7 @@ .avatar-container.s40 = link_to group do - = group_icon(group, class: "avatar s40 hidden-xs") + = group_icon(group, class: "avatar s40 d-none d-sm-block") .title = link_to group.full_name, group, class: 'group-name' diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml index c80b179d525..532712ee6d1 100644 --- a/app/views/shared/hook_logs/_content.html.haml +++ b/app/views/shared/hook_logs/_content.html.haml @@ -6,8 +6,8 @@ %p %strong Trigger: - %td.hidden-xs - %span.label.label-gray.deploy-project-label + %td.d-none.d-sm-block + %span.badge.badge-gray.deploy-project-label = hook_log.trigger.singularize.titleize %p %strong Elapsed time: diff --git a/app/views/shared/hook_logs/_status_label.html.haml b/app/views/shared/hook_logs/_status_label.html.haml index b4ea8e6f952..993880b7d6e 100644 --- a/app/views/shared/hook_logs/_status_label.html.haml +++ b/app/views/shared/hook_logs/_status_label.html.haml @@ -1,3 +1,3 @@ -- label_status = hook_log.success? ? 'label-success' : 'label-danger' +- label_status = hook_log.success? ? 'badge-success' : 'badge-danger' %span{ class: "label #{label_status}" } = hook_log.response_status diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml index 0d507cc7a6e..ca02424215c 100644 --- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml +++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml @@ -4,9 +4,9 @@ .issuable-sidebar.hidden = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: "bulk-update" do .block.issuable-sidebar-header - .filter-item.inline.update-issues-btn.pull-left + .filter-item.inline.update-issues-btn.float-left = button_tag "Update all", class: "btn update-selected-issues btn-info", disabled: true - = button_tag "Cancel", class: "btn btn-default js-bulk-update-menu-hide pull-right" + = button_tag "Cancel", class: "btn btn-default js-bulk-update-menu-hide float-right" .block .title Status diff --git a/app/views/shared/issuable/_close_reopen_button.html.haml b/app/views/shared/issuable/_close_reopen_button.html.haml index 9ef015047c9..933d4b2ea65 100644 --- a/app/views/shared/issuable/_close_reopen_button.html.haml +++ b/app/views/shared/issuable/_close_reopen_button.html.haml @@ -4,11 +4,11 @@ - if can_update && is_current_user = link_to "Close #{display_issuable_type}", close_issuable_path(issuable), method: button_method, - class: "hidden-xs hidden-sm btn btn-grouped btn-close js-btn-issue-action #{issuable_button_visibility(issuable, true)}", title: "Close #{display_issuable_type}" + class: "d-none d-sm-none d-md-block btn btn-grouped btn-close js-btn-issue-action #{issuable_button_visibility(issuable, true)}", title: "Close #{display_issuable_type}" = link_to "Reopen #{display_issuable_type}", reopen_issuable_path(issuable), method: button_method, - class: "hidden-xs hidden-sm btn btn-grouped btn-reopen js-btn-issue-action #{issuable_button_visibility(issuable, false)}", title: "Reopen #{display_issuable_type}" + class: "d-none d-sm-none d-md-block btn btn-grouped btn-reopen js-btn-issue-action #{issuable_button_visibility(issuable, false)}", title: "Reopen #{display_issuable_type}" - elsif can_update && !is_current_user = render 'shared/issuable/close_reopen_report_toggle', issuable: issuable - else = link_to 'Report abuse', new_abuse_report_path(user_id: issuable.author.id, ref_url: issuable_url(issuable)), - class: 'hidden-xs hidden-sm btn btn-grouped btn-close-color', title: 'Report abuse' + class: 'd-none d-sm-none d-md-block btn btn-grouped btn-close-color', title: 'Report abuse' diff --git a/app/views/shared/issuable/_close_reopen_report_toggle.html.haml b/app/views/shared/issuable/_close_reopen_report_toggle.html.haml index 39a5171c1d6..0d59c9304b4 100644 --- a/app/views/shared/issuable/_close_reopen_report_toggle.html.haml +++ b/app/views/shared/issuable/_close_reopen_report_toggle.html.haml @@ -1,12 +1,12 @@ - display_issuable_type = issuable_display_type(issuable) - button_action = issuable.closed? ? 'reopen' : 'close' - display_button_action = button_action.capitalize -- button_responsive_class = 'hidden-xs hidden-sm' +- button_responsive_class = 'd-none d-sm-none d-md-block' - button_class = "#{button_responsive_class} btn btn-grouped js-issuable-close-button js-btn-issue-action issuable-close-button" - toggle_class = "#{button_responsive_class} btn btn-nr dropdown-toggle js-issuable-close-toggle" - button_method = issuable_close_reopen_button_method(issuable) -.pull-left.btn-group.prepend-left-10.issuable-close-dropdown.droplab-dropdown.js-issuable-close-dropdown +.float-left.btn-group.prepend-left-10.issuable-close-dropdown.droplab-dropdown.js-issuable-close-dropdown = link_to "#{display_button_action} #{display_issuable_type}", close_reopen_issuable_path(issuable), method: button_method, class: "#{button_class} btn-#{button_action}", title: "#{display_button_action} #{display_issuable_type}" @@ -14,7 +14,7 @@ data: { 'dropdown-trigger' => '#issuable-close-menu' }, 'aria-label' => 'Toggle dropdown' do = icon('caret-down', class: 'toggle-icon icon') - %ul#issuable-close-menu.js-issuable-close-menu.dropdown-menu{ class: button_responsive_class, data: { dropdown: true } } + %ul#issuable-close-menu.js-issuable-close-menu.dropdown-menu{ data: { dropdown: true } } %li.close-item{ class: "#{issuable_button_visibility(issuable, true) || 'droplab-item-selected'}", data: { text: "Close #{display_issuable_type}", url: close_issuable_path(issuable), button_class: "#{button_class} btn-close", toggle_class: "#{toggle_class} btn-close-color", method: button_method } } diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml index 1bd5b4164b1..1cd8ce0826c 100644 --- a/app/views/shared/issuable/_filter.html.haml +++ b/app/views/shared/issuable/_filter.html.haml @@ -25,7 +25,7 @@ = render "shared/issuable/label_dropdown", selected: selected_labels, use_id: false, selected_toggle: params[:label_name], data_options: { field_name: "label_name[]" } - unless @no_filters_set - .pull-right + .float-right = render 'shared/sort_dropdown' - has_labels = @labels && @labels.any? diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml index 4c8f03f1498..fbc608b207a 100644 --- a/app/views/shared/issuable/_form.html.haml +++ b/app/views/shared/issuable/_form.html.haml @@ -11,8 +11,8 @@ = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), target: "_blank", rel: 'noopener noreferrer' and make sure your changes will not unintentionally remove theirs -.form-group - = form.label :title, class: 'control-label' +.form-group.row + = form.label :title, class: 'col-form-label col-sm-2' = render 'shared/issuable/form/template_selector', issuable: issuable = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?) @@ -20,9 +20,9 @@ = render 'shared/form_elements/description', model: issuable, form: form, project: project - if issuable.respond_to?(:confidential) - .form-group - .col-sm-offset-2.col-sm-10 - .checkbox + .form-group.row + .offset-sm-2.col-sm-10 + .form-check = form.label :confidential do = form.check_box :confidential This issue is confidential and should only be visible to team members with at least Reporter access. @@ -36,8 +36,8 @@ = render 'shared/issuable/form/contribution', issuable: issuable, form: form - if @merge_request_to_resolve_discussions_of - .form-group - .col-sm-10.col-sm-offset-2 + .form-group.row + .col-sm-10.offset-sm-2 = icon('info-circle') - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user) = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid @@ -57,7 +57,7 @@ - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?) .row-content-block{ class: (is_footer ? "footer-block" : "middle-block") } - .pull-right + .float-right - if issuable.new_record? = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class]), class: 'btn btn-cancel' - else diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml index 91aa329eb93..9f4021802df 100644 --- a/app/views/shared/issuable/_label_page_create.html.haml +++ b/app/views/shared/issuable/_label_page_create.html.haml @@ -12,7 +12,7 @@ .dropdown-label-color-preview.js-dropdown-label-color-preview %input#new_label_color.default-dropdown-input{ type: "text", placeholder: _('Assign custom color like #FF0000') } .clearfix - %button.btn.btn-primary.pull-left.js-new-label-btn{ type: "button" } + %button.btn.btn-primary.float-left.js-new-label-btn{ type: "button" } = _('Create') - %button.btn.btn-default.pull-right.js-cancel-label-btn{ type: "button" } + %button.btn.btn-default.float-right.js-cancel-label-btn{ type: "button" } = _('Cancel') diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml index a5f40ea934b..157637dbd11 100644 --- a/app/views/shared/issuable/_nav.html.haml +++ b/app/views/shared/issuable/_nav.html.haml @@ -2,7 +2,7 @@ - page_context_word = type.to_s.humanize(capitalize: false) - display_count = local_assigns.fetch(:display_count, :true) -%ul.nav-links.issues-state-filters.mobile-separator +%ul.nav-links.issues-state-filters.mobile-separator.nav.nav-tabs %li{ class: active_when(params[:state] == 'opened') }> = link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", data: { state: 'opened' } do #{issuables_state_counter_text(type, :opened, display_count)} diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml index fc6f71ef60f..644f7c4dd28 100644 --- a/app/views/shared/issuable/_search_bar.html.haml +++ b/app/views/shared/issuable/_search_bar.html.haml @@ -107,7 +107,7 @@ .dropdown.prepend-left-10#js-add-list %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: board_list_data } Add list - .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable + .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" } - if can?(current_user, :admin_label, board.parent) = render partial: "shared/issuable/label_page_create" diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 093033775a9..602729b172a 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -5,9 +5,9 @@ - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project) .block.issuable-sidebar-header - if current_user - %span.issuable-header-text.hide-collapsed.pull-left + %span.issuable-header-text.hide-collapsed.float-left = _('Todo') - %a.gutter-toggle.pull-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left' } } + %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } } = sidebar_gutter_toggle_icon - if current_user = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable @@ -19,7 +19,7 @@ .block.assignee = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present? .block.milestone - .sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 1, placement: 'left' } } + .sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } = icon('clock-o', 'aria-hidden': 'true') %span.milestone-title - if issuable.milestone @@ -30,10 +30,10 @@ = _('Milestone') = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') - if can_edit_issuable - = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' .value.hide-collapsed - if issuable.milestone - = link_to issuable.milestone.title, milestone_path(issuable.milestone), class: "bold has-tooltip", title: milestone_tooltip_due_date(issuable.milestone), data: { container: "body", html: 1 } + = link_to issuable.milestone.title, milestone_path(issuable.milestone), class: "bold has-tooltip", title: milestone_tooltip_due_date(issuable.milestone), data: { container: "body", html: 'true' } - else %span.no-value = _('None') @@ -49,7 +49,7 @@ = icon('spinner spin', 'aria-hidden': 'true') - if issuable.has_attribute?(:due_date) .block.due_date - .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 1 }, title: sidebar_due_date_tooltip_label(issuable) } + .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true', boundary: 'viewport' }, title: sidebar_due_date_tooltip_label(issuable) } = icon('calendar', 'aria-hidden': 'true') %span.js-due-date-sidebar-value = issuable.due_date.try(:to_s, :medium) || 'None' @@ -57,7 +57,7 @@ = _('Due date') = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' .value.hide-collapsed %span.value-content - if issuable.due_date @@ -86,7 +86,7 @@ - if @labels - selected_labels = issuable.labels .block.labels - .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } } + .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body", boundary: 'viewport' } } = icon('tags', 'aria-hidden': 'true') %span = selected_labels.size @@ -94,7 +94,7 @@ = _('Labels') = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') - if can_edit_issuable - = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' .value.issuable-show-labels.dont-hide.hide-collapsed{ class: ("has-labels" if selected_labels.any?) } - if selected_labels.any? - selected_labels.each do |label| @@ -133,7 +133,7 @@ - project_ref = cross_project_reference(@project, issuable) .block.project-reference .sidebar-collapsed-icon.dont-change-state - = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left") + = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left", boundary: 'viewport') .cross-project-reference.hide-collapsed %span = _('Reference:') @@ -142,11 +142,11 @@ = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left") - if current_user && issuable.can_move?(current_user) .block.js-sidebar-move-issue-block - .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body' }, title: _('Move issue') } + .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') } = custom_icon('icon_arrow_right') .dropdown.sidebar-move-issue-dropdown.hide-collapsed %button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button', - data: { toggle: 'dropdown' } } + data: { toggle: 'dropdown', display: 'static' } } = _('Move issue') .dropdown-menu.dropdown-menu-selectable = dropdown_title(_('Move issue')) diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml index 21006a76b28..e1cde527ad7 100644 --- a/app/views/shared/issuable/_sidebar_assignees.html.haml +++ b/app/views/shared/issuable/_sidebar_assignees.html.haml @@ -4,7 +4,7 @@ = _('Assignee') = icon('spinner spin') - else - .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: sidebar_assignee_tooltip_label(issuable) } + .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body", boundary: 'viewport' }, title: sidebar_assignee_tooltip_label(issuable) } - if issuable.assignee = link_to_member(@project, issuable.assignee, size: 24) - else @@ -13,15 +13,15 @@ = _('Assignee') = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') - if can_edit_issuable - = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' - if !signed_in - %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => _('Toggle sidebar') } + %a.gutter-toggle.float-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => _('Toggle sidebar') } = sidebar_gutter_toggle_icon .value.hide-collapsed - if issuable.assignee = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do - if !issuable.can_be_merged_by?(issuable.assignee) - %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: _('Not allowed to merge') } + %span.float-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: _('Not allowed to merge') } = icon('exclamation-triangle', 'aria-hidden': 'true') %span.username = issuable.assignee.to_reference diff --git a/app/views/shared/issuable/_sidebar_todo.html.haml b/app/views/shared/issuable/_sidebar_todo.html.haml index 74327fb1ba8..583b33a8a1b 100644 --- a/app/views/shared/issuable/_sidebar_todo.html.haml +++ b/app/views/shared/issuable/_sidebar_todo.html.haml @@ -3,7 +3,7 @@ - todo_content = is_collapsed ? icon('plus-square') : _('Add todo') %button.issuable-todo-btn.js-issuable-todo{ type: 'button', - class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn pull-right'), + class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn float-right'), title: (todo.nil? ? _('Add todo') : _('Mark todo as done')), 'aria-label' => (todo.nil? ? _('Add todo') : _('Mark todo as done')), data: issuable_todo_button_data(issuable, todo, is_collapsed) } diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml index 9a589387255..fbc96baa0f7 100644 --- a/app/views/shared/issuable/form/_branch_chooser.html.haml +++ b/app/views/shared/issuable/form/_branch_chooser.html.haml @@ -6,13 +6,13 @@ %hr - if issuable.new_record? - .form-group - = form.label :source_branch, class: 'control-label' + .form-group.row + = form.label :source_branch, class: 'col-form-label col-sm-2' .col-sm-10 .issuable-form-select-holder = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 ref-name', disabled: true }) -.form-group - = form.label :target_branch, class: 'control-label' +.form-group.row + = form.label :target_branch, class: 'col-form-label col-sm-2' .col-sm-10.target-branch-select-dropdown-container .issuable-form-select-holder = form.hidden_field(:target_branch, diff --git a/app/views/shared/issuable/form/_contribution.html.haml b/app/views/shared/issuable/form/_contribution.html.haml index de508278d7c..f12c23cbc64 100644 --- a/app/views/shared/issuable/form/_contribution.html.haml +++ b/app/views/shared/issuable/form/_contribution.html.haml @@ -8,13 +8,13 @@ %hr .form-group - .control-label + .col-form-label = _('Contribution') .col-sm-10 - .checkbox + .form-check = form.label :allow_maintainer_to_push do = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user) = _('Allow edits from maintainers.') = link_to 'About this feature', help_page_path('user/project/merge_requests/maintainer_access') - .help-block + .form-text.text-muted = allow_maintainer_push_unavailable_reason(issuable) diff --git a/app/views/shared/issuable/form/_issue_assignee.html.haml b/app/views/shared/issuable/form/_issue_assignee.html.haml index 9b2b6e572e7..0d13fccaf3e 100644 --- a/app/views/shared/issuable/form/_issue_assignee.html.haml +++ b/app/views/shared/issuable/form/_issue_assignee.html.haml @@ -11,7 +11,7 @@ Assignee = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') - if can_edit_issuable - = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' .value.hide-collapsed - if assignees.any? - assignees.each do |assignee| diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml index 8f6509a8ce8..1df881e4102 100644 --- a/app/views/shared/issuable/form/_merge_params.html.haml +++ b/app/views/shared/issuable/form/_merge_params.html.haml @@ -7,10 +7,10 @@ -# This comment and the following line should only exist in CE. - return unless issuable.can_remove_source_branch?(current_user) -.form-group - .col-sm-10.col-sm-offset-2 +.form-group.row + .col-sm-10.offset-sm-2 - if issuable.can_remove_source_branch?(current_user) - .checkbox + .form-check = label_tag 'merge_request[force_remove_source_branch]' do = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch? diff --git a/app/views/shared/issuable/form/_merge_request_assignee.html.haml b/app/views/shared/issuable/form/_merge_request_assignee.html.haml index d7740eddcca..05c03dedd91 100644 --- a/app/views/shared/issuable/form/_merge_request_assignee.html.haml +++ b/app/views/shared/issuable/form/_merge_request_assignee.html.haml @@ -9,12 +9,12 @@ Assignee = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') - if can_edit_issuable - = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to 'Edit', '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' .value.hide-collapsed - if merge_request.assignee = link_to_member(@project, merge_request.assignee, size: 32, extra_class: 'bold') do - unless merge_request.can_be_merged_by?(merge_request.assignee) - %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' } + %span.float-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' } = icon('exclamation-triangle', 'aria-hidden': 'true') %span.username = merge_request.assignee.to_reference diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml index 1608bd59cf1..1e27253aaeb 100644 --- a/app/views/shared/issuable/form/_metadata.html.haml +++ b/app/views/shared/issuable/form/_metadata.html.haml @@ -8,28 +8,28 @@ %hr .row - %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") } - .form-group.issue-assignee + %div{ class: (has_due_date ? "col-lg-6" : "col-12") } + .form-group.row.issue-assignee - if issuable.is_a?(Issue) = render "shared/issuable/form/metadata_issue_assignee", issuable: issuable, form: form, has_due_date: has_due_date - else = render "shared/issuable/form/metadata_merge_request_assignee", issuable: issuable, form: form, has_due_date: has_due_date - .form-group.issue-milestone - = form.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}" - .col-sm-10{ class: ("col-lg-8" if has_due_date) } + .form-group.row.issue-milestone + = form.label :milestone_id, "Milestone", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-2"}" + .col-10{ class: ("col-md-8" if has_due_date) } .issuable-form-select-holder = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone" - .form-group + .form-group.row - has_labels = @labels && @labels.any? - = form.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}" + = form.label :label_ids, "Labels", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-2"}" = form.hidden_field :label_ids, multiple: true, value: '' - .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" } + .col-10{ class: "#{"col-md-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" } .issuable-form-select-holder = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false}, dropdown_title: "Select label" - if has_due_date .col-lg-6 - .form-group - = form.label :due_date, "Due date", class: "control-label" - .col-sm-10 + .form-group.row + = form.label :due_date, "Due date", class: "col-form-label col-md-2 col-lg-4" + .col-8 .issuable-form-select-holder = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date" diff --git a/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml b/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml index 567cde764e2..6d4f9ccd66f 100644 --- a/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml +++ b/app/views/shared/issuable/form/_metadata_issue_assignee.html.haml @@ -1,5 +1,5 @@ -= form.label :assignee_ids, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}" -.col-sm-10{ class: ("col-lg-8" if has_due_date) } += form.label :assignee_ids, "Assignee", class: "col-form-label #{"col-md-2 col-lg-4" if has_due_date}" +.col-sm-10{ class: ("col-md-8" if has_due_date) } .issuable-form-select-holder.selectbox - issuable.assignees.each do |assignee| = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil, data: { meta: assignee.name, avatar_url: assignee.avatar_url, name: assignee.name, username: assignee.username } diff --git a/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml b/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml index d0ea4e149df..3521f71f409 100644 --- a/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml +++ b/app/views/shared/issuable/form/_metadata_merge_request_assignee.html.haml @@ -1,4 +1,4 @@ -= form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}" += form.label :assignee_id, "Assignee", class: "col-form-label #{has_due_date ? "col-lg-4" : "col-sm-2"}" .col-sm-10{ class: ("col-lg-8" if has_due_date) } .issuable-form-select-holder = form.hidden_field :assignee_id diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml index e81639f35ea..c4f30f5f4d9 100644 --- a/app/views/shared/issuable/form/_title.html.haml +++ b/app/views/shared/issuable/form/_title.html.haml @@ -9,7 +9,7 @@ autocomplete: 'off', class: 'form-control pad qa-issuable-form-title' - if issuable.respond_to?(:work_in_progress?) - %p.help-block + %p.form-text.text-muted .js-wip-explanation %a.js-toggle-wip{ href: '', tabindex: -1 } Remove the @@ -30,7 +30,7 @@ merge request from being merged before it's ready. - if no_issuable_templates && can?(current_user, :push_code, issuable.project) - %p.help-block + %p.form-text.text-muted Add = link_to 'description templates', help_page_path('user/project/description_templates'), tabindex: -1 to help your contributors communicate effectively! diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml index e8b04f56839..f79f66b144f 100644 --- a/app/views/shared/labels/_form.html.haml +++ b/app/views/shared/labels/_form.html.haml @@ -1,21 +1,22 @@ -= form_for @label, as: :label, url: url, html: { class: 'form-horizontal label-form js-quick-submit js-requires-input' } do |f| += form_for @label, as: :label, url: url, html: { class: 'label-form js-quick-submit js-requires-input' } do |f| = form_errors(@label) - .form-group - = f.label :title, class: 'control-label' + .form-group.row + = f.label :title, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :title, class: "form-control", required: true, autofocus: true - .form-group - = f.label :description, class: 'control-label' + .form-group.row + = f.label :description, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :description, class: "form-control js-quick-submit" - .form-group - = f.label :color, "Background color", class: 'control-label' + .form-group.row + = f.label :color, "Background color", class: 'col-form-label col-sm-2' .col-sm-10 .input-group - .input-group-addon.label-color-preview + .input-group-prepend + .input-group-text.label-color-preview = f.text_field :color, class: "form-control" - .help-block + .form-text.text-muted Choose any color. %br Or you can choose one of suggested colors below diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml index fc634856061..67b8843a27f 100644 --- a/app/views/shared/members/_group.html.haml +++ b/app/views/shared/members/_group.html.haml @@ -14,7 +14,7 @@ %span{ class: ('text-warning' if group_link.expires_soon?) } Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)} .controls.member-controls - = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'form-horizontal js-edit-member-form' do + = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form' do = hidden_field_tag "group_link[group_access]", group_link.group_access .member-form-control.dropdown.append-right-5 %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button", @@ -23,7 +23,7 @@ %span.dropdown-toggle-text = group_link.human_access = icon("chevron-down") - .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable + .dropdown-menu.dropdown-select.dropdown-menu-right.dropdown-menu-selectable = dropdown_title("Change permissions") .dropdown-content %ul @@ -40,6 +40,6 @@ method: :delete, data: { confirm: "Are you sure you want to remove #{group.name}?" }, class: 'btn btn-remove prepend-left-10' do - %span.visible-xs-block + %span.d-block.d-sm-none Delete - = icon('trash', class: 'hidden-xs') + = icon('trash', class: 'd-none d-sm-block') diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml index 1961ad6d616..42b2d27c44a 100644 --- a/app/views/shared/members/_member.html.haml +++ b/app/views/shared/members/_member.html.haml @@ -14,10 +14,10 @@ %span.cgray= user.to_reference - if user == current_user - %span.label.label-success.prepend-left-5 It's you + %span.badge.badge-success.prepend-left-5 It's you - if user.blocked? - %label.label.label-danger + %label.badge.badge-danger %strong Blocked - if user.two_factor_enabled? @@ -57,11 +57,11 @@ - if member.can_resend_invite? = link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]), method: :post, - class: 'btn btn-default prepend-left-10 hidden-xs', + class: 'btn btn-default prepend-left-10 d-none d-sm-block', title: 'Resend invite' - if user != current_user && member.can_update? - = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f| + = form_for member, remote: true, html: { class: 'js-edit-member-form form-horizontal' } do |f| = f.hidden_field :access_level .member-form-control.dropdown.append-right-5 %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button", @@ -69,7 +69,7 @@ %span.dropdown-toggle-text = member.human_access = icon("chevron-down") - .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable + .dropdown-menu.dropdown-select.dropdown-menu-right.dropdown-menu-selectable = dropdown_title("Change permissions") .dropdown-content %ul @@ -93,10 +93,10 @@ method: :post, class: 'btn btn-success prepend-left-10', title: 'Grant access' do - %span{ class: ('visible-xs-block' unless force_mobile_view) } + %span{ class: ('d-block d-sm-none' unless force_mobile_view) } Grant access - unless force_mobile_view - = icon('check inverse', class: 'hidden-xs') + = icon('check inverse', class: 'd-none d-sm-block') - if member.can_remove? - if current_user == user @@ -110,9 +110,9 @@ data: { confirm: remove_member_message(member) }, class: 'btn btn-remove prepend-left-10', title: remove_member_title(member) do - %span{ class: ('visible-xs-block' unless force_mobile_view) } + %span{ class: ('d-block d-sm-none' unless force_mobile_view) } Delete - unless force_mobile_view - = icon('trash', class: 'hidden-xs') + = icon('trash', class: 'd-none d-sm-block') - else %span.member-access-text= member.human_access diff --git a/app/views/shared/members/_requests.html.haml b/app/views/shared/members/_requests.html.haml index 1fbd6bcc4cb..54679ab86cc 100644 --- a/app/views/shared/members/_requests.html.haml +++ b/app/views/shared/members/_requests.html.haml @@ -4,10 +4,10 @@ - return if requesters.empty? -.panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) } - .panel-heading +.card.prepend-top-default{ class: ('card-mobile' if force_mobile_view ) } + .card-header Users requesting access to %strong= membership_source.name - %span.badge= requesters.size + %span.badge.badge-pill= requesters.size %ul.content-list.members-list = render partial: 'shared/members/member', collection: requesters, as: :member, locals: { force_mobile_view: force_mobile_view } diff --git a/app/views/shared/members/_sort_dropdown.html.haml b/app/views/shared/members/_sort_dropdown.html.haml index bad0891f9f2..56b8c8f033e 100644 --- a/app/views/shared/members/_sort_dropdown.html.haml +++ b/app/views/shared/members/_sort_dropdown.html.haml @@ -1,6 +1,6 @@ .dropdown.inline.member-sort-dropdown = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' }) - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable %li.dropdown-header Sort by - member_sort_options_hash.each do |value, title| diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml index a74cdbe274b..608dd35182d 100644 --- a/app/views/shared/milestones/_form_dates.html.haml +++ b/app/views/shared/milestones/_form_dates.html.haml @@ -1,12 +1,11 @@ .col-md-6 - .form-group - = f.label :start_date, "Start Date", class: "control-label" + .form-group.row + = f.label :start_date, "Start Date", class: "col-form-label col-sm-2" .col-sm-10 = f.text_field :start_date, class: "datepicker form-control", placeholder: "Select start date" - %a.inline.pull-right.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date -.col-md-6 - .form-group - = f.label :due_date, "Due Date", class: "control-label" + %a.inline.float-right.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date + .form-group.row + = f.label :due_date, "Due Date", class: "col-form-label col-sm-2" .col-sm-10 = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date" - %a.inline.pull-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date + %a.inline.float-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml index 7175e275f95..d8e4d2ff88c 100644 --- a/app/views/shared/milestones/_issuables.html.haml +++ b/app/views/shared/milestones/_issuables.html.haml @@ -1,9 +1,9 @@ - show_counter = local_assigns.fetch(:show_counter, false) - primary = local_assigns.fetch(:primary, false) -- panel_class = primary ? 'panel-primary' : 'panel-default' +- panel_class = primary ? 'bg-primary text-white' : '' -.panel{ class: panel_class } - .panel-heading +.card{ class: panel_class } + .card-header .title = title - if show_counter diff --git a/app/views/shared/milestones/_labels_tab.html.haml b/app/views/shared/milestones/_labels_tab.html.haml index a26b3b8009e..6797520650d 100644 --- a/app/views/shared/milestones/_labels_tab.html.haml +++ b/app/views/shared/milestones/_labels_tab.html.haml @@ -10,7 +10,7 @@ %span.prepend-description-left = markdown_field(label, :description) - .pull-right.hidden-xs.hidden-sm.hidden-md + .float-right.d-none.d-lg-block.d-xl-block = link_to milestones_label_path(options.merge(state: 'opened')), class: 'btn btn-transparent btn-action' do - pluralize milestone_issues_by_label_count(@milestone, label, state: :opened), 'open issue' = link_to milestones_label_path(options.merge(state: 'closed')), class: 'btn btn-transparent btn-action' do diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml index ac494814f55..09bbd04c2bf 100644 --- a/app/views/shared/milestones/_milestone.html.haml +++ b/app/views/shared/milestones/_milestone.html.haml @@ -11,7 +11,7 @@ %span - Project Milestone .col-sm-6 - .pull-right.light #{milestone.percent_complete(current_user)}% complete + .float-right.light #{milestone.percent_complete(current_user)}% complete .row .col-sm-6 = link_to pluralize(milestone.total_issues_count(current_user), 'Issue'), issues_path @@ -26,19 +26,19 @@ .projects - milestone.milestones.each do |milestone| = link_to milestone_path(milestone) do - %span.label.label-gray + %span.badge.badge-gray = dashboard ? milestone.project.full_name : milestone.project.name - if @group .col-sm-6.milestone-actions - if can?(current_user, :admin_milestones, @group) - if milestone.group_milestone? - = link_to edit_group_milestone_path(@group, milestone), class: "btn btn-xs btn-grouped" do + = link_to edit_group_milestone_path(@group, milestone), class: "btn btn-sm btn-grouped" do Edit \ - if milestone.closed? - = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-xs btn-grouped btn-reopen" + = link_to 'Reopen Milestone', group_milestone_route(milestone, {state_event: :activate }), method: :put, class: "btn btn-sm btn-grouped btn-reopen" - else - = link_to 'Close Milestone', group_milestone_route(milestone, {state_event: :close }), method: :put, class: "btn btn-xs btn-grouped btn-close" + = link_to 'Close Milestone', group_milestone_route(milestone, {state_event: :close }), method: :put, class: "btn btn-sm btn-grouped btn-close" - if @project .row @@ -46,12 +46,12 @@ = render('shared/milestone_expired', milestone: milestone) .col-sm-6.milestone-actions - if can?(current_user, :admin_milestone, milestone.project) and milestone.active? - = link_to edit_project_milestone_path(milestone.project, milestone), class: "btn btn-xs btn-grouped" do + = link_to edit_project_milestone_path(milestone.project, milestone), class: "btn btn-sm btn-grouped" do Edit \ - if @project.group - %button.js-promote-project-milestone-button.btn.btn-xs.btn-grouped.has-tooltip{ title: _('Promote to Group Milestone'), + %button.js-promote-project-milestone-button.btn.btn-sm.btn-grouped.has-tooltip{ title: _('Promote to Group Milestone'), disabled: true, type: 'button', data: { url: promote_project_milestone_path(milestone.project, milestone), @@ -62,9 +62,9 @@ toggle: 'modal' } } = _('Promote') - = link_to 'Close Milestone', project_milestone_path(@project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close btn-grouped" + = link_to 'Close Milestone', project_milestone_path(@project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-sm btn-close btn-grouped" - %button.js-delete-milestone-button.btn.btn-xs.btn-grouped.btn-danger{ data: { toggle: 'modal', + %button.js-delete-milestone-button.btn.btn-sm.btn-grouped.btn-danger{ data: { toggle: 'modal', target: '#delete-milestone-modal', milestone_id: milestone.id, milestone_title: markdown_field(milestone, :title), diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml index 8e9a1b56bb8..95138af3950 100644 --- a/app/views/shared/milestones/_sidebar.html.haml +++ b/app/views/shared/milestones/_sidebar.html.haml @@ -4,7 +4,7 @@ %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } .issuable-sidebar.milestone-sidebar .block.milestone-progress.issuable-sidebar-header - %a.gutter-toggle.pull-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left' } } + %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } } = sidebar_gutter_toggle_icon .title.hide-collapsed %strong.bold== #{milestone.percent_complete(current_user)}% @@ -14,7 +14,7 @@ = milestone_progress_bar(milestone) .block.milestone-progress.hide-expanded - .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 1, placement: 'left' } } + .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } %span== #{milestone.percent_complete(current_user)}% = milestone_progress_bar(milestone) @@ -22,7 +22,7 @@ .title Start date - if @project && can?(current_user, :admin_milestone, @project) - = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right' .value %span.value-content - if milestone.start_date @@ -36,29 +36,29 @@ %span.collapsed-milestone-date - if milestone.start_date && milestone.due_date - if milestone.start_date.year == milestone.due_date.year - .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 1, placement: 'left' } } + .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } = milestone.start_date.strftime('%b %-d') - else - .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 1, placement: 'left' } } + .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } = milestone.start_date.strftime('%b %-d %Y') .date-separator - - .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 1, placement: 'left' } } + .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } = milestone.due_date.strftime('%b %-d %Y') - elsif milestone.start_date From - .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 1, placement: 'left' } } + .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } = milestone.start_date.strftime('%b %-d %Y') - elsif milestone.due_date Until - .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 1, placement: 'left' } } + .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } = milestone.due_date.strftime('%b %-d %Y') - else - .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 1, placement: 'left' } } + .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } None .title.hide-collapsed Due date - if @project && can?(current_user, :admin_milestone, @project) - = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link pull-right' + = link_to 'Edit', edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right' .value.hide-collapsed %span.value-content - if milestone.due_date @@ -72,15 +72,15 @@ - if !project || can?(current_user, :read_issue, project) .block.issues - .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 1, placement: 'left' } } + .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } %strong = custom_icon('issues') %span= milestone.issues_visible_to_user(current_user).count .title.hide-collapsed Issues - %span.badge= milestone.issues_visible_to_user(current_user).count + %span.badg.badge-pille= milestone.issues_visible_to_user(current_user).count - if show_new_issue_link?(project) - = link_to new_project_issue_path(project, issue: { milestone_id: milestone.id }), class: "pull-right", title: "New Issue" do + = link_to new_project_issue_path(project, issue: { milestone_id: milestone.id }), class: "float-right", title: "New Issue" do New issue .value.hide-collapsed.bold %span.milestone-stat @@ -100,13 +100,13 @@ = icon('spinner spin') .block.merge-requests - .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 1, placement: 'left' } } + .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } } %strong = custom_icon('mr_bold') %span= milestone.merge_requests.count .title.hide-collapsed Merge requests - %span.badge= milestone.merge_requests.count + %span.badge.badge-pill= milestone.merge_requests.count .value.hide-collapsed.bold - if !project || can?(current_user, :read_merge_request, project) %span.milestone-stat @@ -136,10 +136,10 @@ - if milestone_ref.present? .block.reference .sidebar-collapsed-icon.dont-change-state - = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left") + = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport') .cross-project-reference.hide-collapsed %span Reference: %cite{ title: milestone_ref } = milestone_ref - = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left") + = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport') diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml index b95a4ea674d..e6a65161ed6 100644 --- a/app/views/shared/milestones/_tabs.html.haml +++ b/app/views/shared/milestones/_tabs.html.haml @@ -3,29 +3,29 @@ .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller .fade-left= icon('angle-left') .fade-right= icon('angle-right') - %ul.nav-links.scrolling-tabs.js-milestone-tabs + %ul.nav-links.scrolling-tabs.js-milestone-tabs.nav.nav-tabs - if issues_accessible %li.active = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do Issues - %span.badge= milestone.issues_visible_to_user(current_user).size + %span.badge.badge-pill= milestone.issues_visible_to_user(current_user).size %li = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do Merge Requests - %span.badge= milestone.merge_requests.size + %span.badge.badge-pill= milestone.merge_requests.size - else %li.active = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do Merge Requests - %span.badge= milestone.merge_requests.size + %span.badge.badge-pill= milestone.merge_requests.size %li = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do Participants - %span.badge= milestone.participants.count + %span.badge.badge-pill= milestone.participants.count %li = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do Labels - %span.badge= milestone.labels.count + %span.badge.badge-pill= milestone.labels.count - issues = milestone.sorted_issues(current_user) - show_project_name = local_assigns.fetch(:show_project_name, false) diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml index 797ff034bb2..ee0e35cedc6 100644 --- a/app/views/shared/milestones/_top.html.haml +++ b/app/views/shared/milestones/_top.html.haml @@ -5,7 +5,7 @@ - is_dynamic_milestone = milestone.legacy_group_milestone? || milestone.dashboard_milestone? .detail-page-header - %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" } + %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: "#" } = icon('angle-double-left') .status-box{ class: "status-box-#{milestone.closed? ? 'closed' : 'open'}" } @@ -22,7 +22,7 @@ · = milestone_date_range(milestone) - if group - .pull-right + .float-right - if can?(current_user, :admin_milestones, group) - if milestone.group_milestone? = link_to edit_group_milestone_path(group, milestone), class: "btn btn btn-grouped" do diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml index 4b9af78bc1a..ed336df4e9d 100644 --- a/app/views/shared/notes/_comment_button.html.haml +++ b/app/views/shared/notes/_comment_button.html.haml @@ -1,6 +1,6 @@ - noteable_name = @note.noteable.human_class_name -.pull-left.btn-group.append-right-10.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown +.float-left.btn-group.append-right-10.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown %input.btn.btn-nr.btn-create.comment-btn.js-comment-button.js-comment-submit-button{ type: 'submit', value: 'Comment' } - if @note.can_be_discussion_note? diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml index bc1ac3d8ac2..00eae553279 100644 --- a/app/views/shared/notes/_hints.html.haml +++ b/app/views/shared/notes/_hints.html.haml @@ -32,4 +32,4 @@ = icon('file-image-o', class: 'toolbar-button-icon') Attach a file - %button.btn.btn-default.btn-xs.hide.button-cancel-uploading-files{ type: 'button' } Cancel + %button.btn.btn-default.btn-sm.hide.button-cancel-uploading-files{ type: 'button' } Cancel diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml index d4e67b5e7e3..ca6e3602f05 100644 --- a/app/views/shared/notes/_note.html.haml +++ b/app/views/shared/notes/_note.html.haml @@ -25,7 +25,7 @@ - elsif note_counter == 0 - counter = badge_counter if local_assigns[:badge_counter] - badge_class = "hidden" if @fresh_discussion || counter.nil? - %span.badge{ class: badge_class } + %span.badge.badge-pill{ class: badge_class } = counter .timeline-content .note-header diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml index 1db7c4e67cf..b98d5339d2d 100644 --- a/app/views/shared/notes/_notes_with_form.html.haml +++ b/app/views/shared/notes/_notes_with_form.html.haml @@ -13,7 +13,7 @@ .timeline-entry-inner .flash-container.timeline-content - .timeline-icon.hidden-xs.hidden-sm + .timeline-icon.d-none.d-sm-none.d-md-block %a.author_link{ href: user_path(current_user) } = image_tag avatar_icon_for_user(current_user), alt: current_user.to_reference, class: 'avatar s40' .timeline-content.timeline-content-form diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml index 9186c2ba9c9..d830225d169 100644 --- a/app/views/shared/notifications/_custom_notifications.html.haml +++ b/app/views/shared/notifications/_custom_notifications.html.haml @@ -22,7 +22,7 @@ - NotificationSetting::EMAIL_EVENTS.each_with_index do |event, index| - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]" .form-group - .checkbox{ class: ("prepend-top-0" if index == 0) } + .form-check{ class: ("prepend-top-0" if index == 0) } %label{ for: field_id } = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event", checked: notification_setting.public_send(event)) %strong diff --git a/app/views/shared/plugins/_index.html.haml b/app/views/shared/plugins/_index.html.haml index fc643c3ecc2..7bcc54e7459 100644 --- a/app/views/shared/plugins/_index.html.haml +++ b/app/views/shared/plugins/_index.html.haml @@ -10,8 +10,8 @@ .col-lg-8.append-bottom-default - if plugins.any? - .panel.panel-default - .panel-heading + .card + .card-header Plugins (#{plugins.count}) %ul.content-list - plugins.each do |file| @@ -19,5 +19,5 @@ .monospace = File.basename(file) - else - %p.light-well.text-center + %p.card.bg-light.text-center No plugins found. diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml index 3d917346f6b..98b258d9275 100644 --- a/app/views/shared/projects/_dropdown.html.haml +++ b/app/views/shared/projects/_dropdown.html.haml @@ -1,8 +1,8 @@ - @sort ||= sort_value_latest_activity .dropdown.js-project-filter-dropdown-wrap - toggle_text = projects_sort_options_hash[@sort] - = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-projects-dropdown' }) - %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable + = dropdown_toggle(toggle_text, { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' }) + %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable %li.dropdown-header Sort by - projects_sort_options_hash.each do |value, title| diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index 0687f6d961d..88f0675f795 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/app/views/shared/projects/_project.html.haml @@ -46,7 +46,7 @@ .controls .prepend-top-0 - if project.archived - %span.prepend-left-10.label.label-warning archived + %span.prepend-left-10.badge.badge-warning archived - if can?(current_user, :read_cross_project) && project.pipeline_status.has_status? %span.prepend-left-10 = render_project_pipeline_status(project.pipeline_status) diff --git a/app/views/shared/runners/_form.html.haml b/app/views/shared/runners/_form.html.haml index 302a543cf12..660123d8b07 100644 --- a/app/views/shared/runners/_form.html.haml +++ b/app/views/shared/runners/_form.html.haml @@ -1,56 +1,56 @@ -= form_for runner, url: runner_form_url, html: { class: 'form-horizontal' } do |f| += form_for runner, url: runner_form_url do |f| = form_errors(runner) - .form-group - = label :active, "Active", class: 'control-label' + .form-group.row + = label :active, "Active", class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.check_box :active %span.light Paused Runners don't accept new jobs - .form-group - = label :protected, "Protected", class: 'control-label' + .form-group.row + = label :protected, "Protected", class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.check_box :access_level, {}, 'ref_protected', 'not_protected' %span.light This runner will only run on pipelines triggered on protected branches - .form-group - = label :run_untagged, 'Run untagged jobs', class: 'control-label' + .form-group.row + = label :run_untagged, 'Run untagged jobs', class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.check_box :run_untagged %span.light Indicates whether this runner can pick jobs without tags - unless runner.group_type? - .form-group - = label :locked, _('Lock to current projects'), class: 'control-label' + .form-group.row + = label :locked, _('Lock to current projects'), class: 'col-form-label col-sm-2' .col-sm-10 - .checkbox + .form-check = f.check_box :locked %span.light= _('When a runner is locked, it cannot be assigned to other projects') - .form-group - = label_tag :token, class: 'control-label' do + .form-group.row + = label_tag :token, class: 'col-form-label col-sm-2' do Token .col-sm-10 = f.text_field :token, class: 'form-control', readonly: true - .form-group - = label_tag :ip_address, class: 'control-label' do + .form-group.row + = label_tag :ip_address, class: 'col-form-label col-sm-2' do IP Address .col-sm-10 = f.text_field :ip_address, class: 'form-control', readonly: true - .form-group - = label_tag :description, class: 'control-label' do + .form-group.row + = label_tag :description, class: 'col-form-label col-sm-2' do Description .col-sm-10 = f.text_field :description, class: 'form-control' - .form-group - = label_tag :maximum_timeout_human_readable, class: 'control-label' do + .form-group.row + = label_tag :maximum_timeout_human_readable, class: 'col-form-label col-sm-2' do Maximum job timeout .col-sm-10 = f.text_field :maximum_timeout_human_readable, class: 'form-control' - .help-block This timeout will take precedence when lower than Project-defined timeout - .form-group - = label_tag :tag_list, class: 'control-label' do + .form-text.text-muted This timeout will take precedence when lower than Project-defined timeout + .form-group.row + = label_tag :tag_list, class: 'col-form-label col-sm-2' do Tags .col-sm-10 = f.text_field :tag_list, value: runner.tag_list.sort.join(', '), class: 'form-control' - .help-block You can setup jobs to only use Runners with specific tags. Separate tags with commas. + .form-text.text-muted You can setup jobs to only use Runners with specific tags. Separate tags with commas. .form-actions = f.submit 'Save changes', class: 'btn btn-save' diff --git a/app/views/shared/runners/_runner_description.html.haml b/app/views/shared/runners/_runner_description.html.haml index 1d59c2f7078..da5c032add5 100644 --- a/app/views/shared/runners/_runner_description.html.haml +++ b/app/views/shared/runners/_runner_description.html.haml @@ -9,8 +9,8 @@ %div %ul %li - %span.label.label-success active + %span.badge.badge-success active = _('- Runner is active and can process any new jobs') %li - %span.label.label-danger paused + %span.badge.badge-danger paused = _('- Runner is paused and will not receive any new jobs') diff --git a/app/views/shared/runners/show.html.haml b/app/views/shared/runners/show.html.haml index 93c6ba86640..e50b7fa68dd 100644 --- a/app/views/shared/runners/show.html.haml +++ b/app/views/shared/runners/show.html.haml @@ -2,7 +2,7 @@ %h3.page-title Runner ##{@runner.id} - .pull-right + .float-right - if @runner.shared? %span.runner-state.runner-state-shared Shared @@ -36,7 +36,7 @@ %td Tags %td - @runner.tag_list.sort.each do |tag| - %span.label.label-primary + %span.badge.badge-primary = tag %tr %td Name diff --git a/app/views/shared/snippets/_blob.html.haml b/app/views/shared/snippets/_blob.html.haml index 11f0fa7c49f..2132fcbccc5 100644 --- a/app/views/shared/snippets/_blob.html.haml +++ b/app/views/shared/snippets/_blob.html.haml @@ -2,7 +2,7 @@ .js-file-title.file-title-flex-parent = render 'projects/blob/header_content', blob: blob - .file-actions.hidden-xs + .file-actions.d-none.d-sm-block = render 'projects/blob/viewer_switcher', blob: blob .btn-group{ role: "group" }< diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml index 2d93e51a2d9..36f56fbad1a 100644 --- a/app/views/shared/snippets/_embed.html.haml +++ b/app/views/shared/snippets/_embed.html.haml @@ -15,7 +15,7 @@ %span.logo-text GitLab - .file-actions.hidden-xs + .file-actions.d-none.d-sm-block .btn-group{ role: "group" }< = embedded_snippet_raw_button diff --git a/app/views/shared/snippets/_form.html.haml b/app/views/shared/snippets/_form.html.haml index c75c882a693..858adc8be37 100644 --- a/app/views/shared/snippets/_form.html.haml +++ b/app/views/shared/snippets/_form.html.haml @@ -2,11 +2,11 @@ = page_specific_javascript_tag('lib/ace.js') .snippet-form-holder - = form_for @snippet, url: url, html: { class: "form-horizontal snippet-form js-requires-input js-quick-submit common-note-form" } do |f| + = form_for @snippet, url: url, html: { class: "snippet-form js-requires-input js-quick-submit common-note-form" } do |f| = form_errors(@snippet) - .form-group - = f.label :title, class: 'control-label' + .form-group.row + = f.label :title, class: 'col-form-label col-sm-2' .col-sm-10 = f.text_field :title, class: 'form-control', required: true, autofocus: true @@ -15,8 +15,8 @@ = render 'shared/visibility_level', f: f, visibility_level: @snippet.visibility_level, can_change_visibility_level: true, form_model: @snippet .file-editor - .form-group - = f.label :file_name, "File", class: 'control-label' + .form-group.row + = f.label :file_name, "File", class: 'col-form-label col-sm-2' .col-sm-10 .file-holder.snippet .js-file-title.file-title diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 9f55c10d19b..ddf54866b99 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -7,7 +7,7 @@ %span.creator Authored = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') - by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")} + by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "d-none d-sm-inline")} .detail-page-header-actions - if @snippet.project_id? diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml index 3acec88c2e3..e036b21b23f 100644 --- a/app/views/shared/snippets/_snippet.html.haml +++ b/app/views/shared/snippets/_snippet.html.haml @@ -1,13 +1,13 @@ - link_project = local_assigns.fetch(:link_project, false) %li.snippet-row - = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 hidden-xs", alt: '' + = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 d-none d-sm-block", alt: '' .title = link_to reliable_snippet_path(snippet) do = snippet.title - if snippet.file_name - %span.snippet-filename.monospace.hidden-xs + %span.snippet-filename.monospace.d-none.d-sm-inline-block = snippet.file_name %ul.controls @@ -28,10 +28,10 @@ = link_to user_snippets_path(snippet.author) do = snippet.author_name - if link_project && snippet.project_id? - %span.hidden-xs + %span.d-none.d-sm-block in = link_to project_path(snippet.project) do = snippet.project.full_name - .pull-right.snippet-updated-at + .float-right.snippet-updated-at %span updated #{time_ago_with_tooltip(snippet.updated_at, placement: 'bottom')} diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml index d36ca032558..0d1c007dd78 100644 --- a/app/views/shared/web_hooks/_form.html.haml +++ b/app/views/shared/web_hooks/_form.html.haml @@ -6,76 +6,76 @@ .form-group = form.label :token, 'Secret Token', class: 'label-light' = form.text_field :token, class: 'form-control', placeholder: '' - %p.help-block + %p.form-text.text-muted Use this token to validate received payloads. It will be sent with the request in the X-Gitlab-Token HTTP header. .form-group = form.label :url, 'Trigger', class: 'label-light' %ul.list-unstyled %li - = form.check_box :push_events, class: 'pull-left' + = form.check_box :push_events, class: 'float-left' .prepend-left-20 = form.label :push_events, class: 'list-label' do %strong Push events %p.light This URL will be triggered by a push to the repository %li - = form.check_box :tag_push_events, class: 'pull-left' + = form.check_box :tag_push_events, class: 'float-left' .prepend-left-20 = form.label :tag_push_events, class: 'list-label' do %strong Tag push events %p.light This URL will be triggered when a new tag is pushed to the repository %li - = form.check_box :note_events, class: 'pull-left' + = form.check_box :note_events, class: 'float-left' .prepend-left-20 = form.label :note_events, class: 'list-label' do %strong Comments %p.light This URL will be triggered when someone adds a comment %li - = form.check_box :confidential_note_events, class: 'pull-left' + = form.check_box :confidential_note_events, class: 'float-left' .prepend-left-20 = form.label :confidential_note_events, class: 'list-label' do %strong Confidential Comments %p.light This URL will be triggered when someone adds a comment on a confidential issue %li - = form.check_box :issues_events, class: 'pull-left' + = form.check_box :issues_events, class: 'float-left' .prepend-left-20 = form.label :issues_events, class: 'list-label' do %strong Issues events %p.light This URL will be triggered when an issue is created/updated/merged %li - = form.check_box :confidential_issues_events, class: 'pull-left' + = form.check_box :confidential_issues_events, class: 'float-left' .prepend-left-20 = form.label :confidential_issues_events, class: 'list-label' do %strong Confidential Issues events %p.light This URL will be triggered when a confidential issue is created/updated/merged %li - = form.check_box :merge_requests_events, class: 'pull-left' + = form.check_box :merge_requests_events, class: 'float-left' .prepend-left-20 = form.label :merge_requests_events, class: 'list-label' do %strong Merge request events %p.light This URL will be triggered when a merge request is created/updated/merged %li - = form.check_box :job_events, class: 'pull-left' + = form.check_box :job_events, class: 'float-left' .prepend-left-20 = form.label :job_events, class: 'list-label' do %strong Job events %p.light This URL will be triggered when the job status changes %li - = form.check_box :pipeline_events, class: 'pull-left' + = form.check_box :pipeline_events, class: 'float-left' .prepend-left-20 = form.label :pipeline_events, class: 'list-label' do %strong Pipeline events %p.light This URL will be triggered when the pipeline status changes %li - = form.check_box :wiki_page_events, class: 'pull-left' + = form.check_box :wiki_page_events, class: 'float-left' .prepend-left-20 = form.label :wiki_page_events, class: 'list-label' do %strong Wiki Page events @@ -83,7 +83,7 @@ This URL will be triggered when a wiki page is created/updated .form-group = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox' - .checkbox + .form-check = form.label :enable_ssl_verification do = form.check_box :enable_ssl_verification %strong Enable SSL verification diff --git a/app/views/shared/web_hooks/_test_button.html.haml b/app/views/shared/web_hooks/_test_button.html.haml index cf1d5e061c6..5ece8b1d4c7 100644 --- a/app/views/shared/web_hooks/_test_button.html.haml +++ b/app/views/shared/web_hooks/_test_button.html.haml @@ -6,7 +6,7 @@ %button.btn{ 'data-toggle' => 'dropdown', class: button_class } Test = icon('caret-down') - %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' } + %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' } - triggers.each_value do |event| %li = link_to_test_hook(hook, event) diff --git a/app/views/sherlock/file_samples/show.html.haml b/app/views/sherlock/file_samples/show.html.haml index 1a6e2542dc1..7255d352775 100644 --- a/app/views/sherlock/file_samples/show.html.haml +++ b/app/views/sherlock/file_samples/show.html.haml @@ -4,7 +4,7 @@ - header_title t('sherlock.title'), sherlock_transactions_path .row-content-block - .pull-right + .float-right = link_to(sherlock_transaction_path(@transaction), class: 'btn') do %i.fa.fa-arrow-left = t('sherlock.transaction') diff --git a/app/views/sherlock/queries/_backtrace.html.haml b/app/views/sherlock/queries/_backtrace.html.haml index 30e956e5f40..4f5146cefb9 100644 --- a/app/views/sherlock/queries/_backtrace.html.haml +++ b/app/views/sherlock/queries/_backtrace.html.haml @@ -1,6 +1,6 @@ .prepend-top-default - .panel.panel-default - .panel-heading + .card + .card-header %strong = t('sherlock.application_backtrace') %ul.well-list @@ -15,8 +15,8 @@ = t('sherlock.line') = location.line - .panel.panel-default - .panel-heading + .card + .card-header %strong = t('sherlock.full_backtrace') %ul.well-list diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml index 5a447f791dc..34c0cc4da39 100644 --- a/app/views/sherlock/queries/_general.html.haml +++ b/app/views/sherlock/queries/_general.html.haml @@ -1,6 +1,6 @@ .prepend-top-default - .panel.panel-default - .panel-heading + .card + .card-header %strong = t('sherlock.general') %ul.well-list @@ -23,10 +23,10 @@ = t('sherlock.line') = frame.line - .panel.panel-default - .panel-heading - .pull-right - %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button } + .card + .card-header + .float-right + %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button } %i.fa.fa-clipboard %pre.hidden = @query.formatted_query @@ -38,10 +38,10 @@ :preserve #{highlight("#{@query.id}.sql", @query.formatted_query)} - .panel.panel-default - .panel-heading - .pull-right - %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button } + .card + .card-header + .float-right + %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button } %i.fa.fa-clipboard %pre.hidden = @query.explain diff --git a/app/views/sherlock/queries/show.html.haml b/app/views/sherlock/queries/show.html.haml index c45da6ee9a4..413130a2907 100644 --- a/app/views/sherlock/queries/show.html.haml +++ b/app/views/sherlock/queries/show.html.haml @@ -1,7 +1,7 @@ - page_title t('sherlock.title'), t('sherlock.transaction'), t('sherlock.query') - header_title t('sherlock.title'), sherlock_transactions_path -%ul.nav-links +%ul.nav-links.nav.nav-tabs %li.active %a{ href: "#tab-general", data: { toggle: "tab" } } = t('sherlock.general') @@ -10,7 +10,7 @@ = t('sherlock.backtrace') .row-content-block - .pull-right + .float-right = link_to(sherlock_transaction_path(@transaction), class: 'btn') do %i.fa.fa-arrow-left = t('sherlock.transaction') diff --git a/app/views/sherlock/transactions/_file_samples.html.haml b/app/views/sherlock/transactions/_file_samples.html.haml index 4349c9b7ace..5b3448605f2 100644 --- a/app/views/sherlock/transactions/_file_samples.html.haml +++ b/app/views/sherlock/transactions/_file_samples.html.haml @@ -21,4 +21,4 @@ %td = link_to(t('sherlock.view'), sherlock_transaction_file_sample_path(@transaction, sample), - class: 'btn btn-xs') + class: 'btn btn-sm') diff --git a/app/views/sherlock/transactions/_general.html.haml b/app/views/sherlock/transactions/_general.html.haml index a37fb5d449a..7ec8dde8421 100644 --- a/app/views/sherlock/transactions/_general.html.haml +++ b/app/views/sherlock/transactions/_general.html.haml @@ -1,6 +1,6 @@ .prepend-top-default - .panel.panel-default - .panel-heading + .card + .card-header %strong = t('sherlock.general') %ul.well-list diff --git a/app/views/sherlock/transactions/_queries.html.haml b/app/views/sherlock/transactions/_queries.html.haml index b8d93e9ff45..c1ec4b91bb6 100644 --- a/app/views/sherlock/transactions/_queries.html.haml +++ b/app/views/sherlock/transactions/_queries.html.haml @@ -21,4 +21,4 @@ %td = link_to(t('sherlock.view'), sherlock_transaction_query_path(@transaction, query), - class: 'btn btn-xs') + class: 'btn btn-sm') diff --git a/app/views/sherlock/transactions/index.html.haml b/app/views/sherlock/transactions/index.html.haml index 6ed7e9e21a6..4d9df01ae31 100644 --- a/app/views/sherlock/transactions/index.html.haml +++ b/app/views/sherlock/transactions/index.html.haml @@ -2,7 +2,7 @@ - header_title t('sherlock.title'), sherlock_transactions_path .row-content-block - .pull-right + .float-right = link_to(destroy_all_sherlock_transactions_path, class: 'btn btn-danger', method: :delete) do @@ -37,5 +37,5 @@ %td = time_ago_with_tooltip trans.finished_at %td - = link_to(sherlock_transaction_path(trans), class: 'btn btn-xs') do + = link_to(sherlock_transaction_path(trans), class: 'btn btn-sm') do = t('sherlock.view') diff --git a/app/views/sherlock/transactions/show.html.haml b/app/views/sherlock/transactions/show.html.haml index eab91e8fbe4..565b337d446 100644 --- a/app/views/sherlock/transactions/show.html.haml +++ b/app/views/sherlock/transactions/show.html.haml @@ -1,23 +1,23 @@ - page_title t('sherlock.title'), t('sherlock.transaction') - header_title t('sherlock.title'), sherlock_transactions_path -%ul.nav-links +%ul.nav-links.nav.nav-tabs %li.active %a{ href: "#tab-general", data: { toggle: "tab" } } = t('sherlock.general') %li %a{ href: "#tab-queries", data: { toggle: "tab" } } = t('sherlock.queries') - %span.badge + %span.badge.badge-pill #{@transaction.queries.length} %li %a{ href: "#tab-file-samples", data: { toggle: "tab" } } = t('sherlock.file_samples') - %span.badge + %span.badge.badge-pill #{@transaction.file_samples.length} .row-content-block - .pull-right + .float-right = link_to(sherlock_transactions_path, class: 'btn') do %i.fa.fa-arrow-left = t('sherlock.all_transactions') diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml index a7f118d3f7d..ae69d0d07c7 100644 --- a/app/views/snippets/_actions.html.haml +++ b/app/views/snippets/_actions.html.haml @@ -1,6 +1,6 @@ - return unless current_user -.hidden-xs +.d-none.d-sm-block - if can?(current_user, :update_personal_snippet, @snippet) = link_to edit_snippet_path(@snippet), class: "btn btn-grouped" do Edit @@ -11,7 +11,7 @@ New snippet - if @snippet.submittable_as_spam_by?(current_user) = link_to 'Submit as spam', mark_as_spam_snippet_path(@snippet), method: :post, class: 'btn btn-grouped btn-spam', title: 'Submit as spam' -.visible-xs-block.dropdown +.d-block.d-sm-none.dropdown %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } } Options = icon('caret-down') diff --git a/app/views/snippets/_snippets_scope_menu.html.haml b/app/views/snippets/_snippets_scope_menu.html.haml index 65aa4fbc757..dc4b0fd9ba0 100644 --- a/app/views/snippets/_snippets_scope_menu.html.haml +++ b/app/views/snippets/_snippets_scope_menu.html.haml @@ -1,11 +1,11 @@ - subject = local_assigns.fetch(:subject, current_user) - include_private = local_assigns.fetch(:include_private, false) -.nav-links.snippet-scope-menu.mobile-separator +.nav-links.snippet-scope-menu.mobile-separator.nav.nav-tabs %li{ class: active_when(params[:scope].nil?) } = link_to subject_snippets_path(subject) do All - %span.badge + %span.badge.badge-pill - if include_private = subject.snippets.count - else @@ -15,17 +15,17 @@ %li{ class: active_when(params[:scope] == "are_private") } = link_to subject_snippets_path(subject, scope: 'are_private') do Private - %span.badge + %span.badge.badge-pill = subject.snippets.are_private.count %li{ class: active_when(params[:scope] == "are_internal") } = link_to subject_snippets_path(subject, scope: 'are_internal') do Internal - %span.badge + %span.badge.badge-pill = subject.snippets.are_internal.count %li{ class: active_when(params[:scope] == "are_public") } = link_to subject_snippets_path(subject, scope: 'are_public') do Public - %span.badge + %span.badge.badge-pill = subject.snippets.are_public.count diff --git a/app/views/snippets/index.html.haml b/app/views/snippets/index.html.haml index 7e4918a6085..9b4a7dbe68d 100644 --- a/app/views/snippets/index.html.haml +++ b/app/views/snippets/index.html.haml @@ -1,12 +1,12 @@ - page_title "By #{@user.name}", "Snippets" %ol.breadcrumb - %li + %li.breadcrumb-item = link_to snippets_path do Snippets - %li + %li.breadcrumb-item = @user.name - .pull-right.hidden-xs + .float-right.d-none.d-sm-block = link_to user_path(@user) do #{@user.name} profile page diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index fb909237b9a..b2ec7166832 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -81,7 +81,7 @@ .scrolling-tabs-container .fade-left= icon('angle-left') .fade-right= icon('angle-right') - %ul.nav-links.user-profile-nav.scrolling-tabs + %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs - if profile_tab?(:activity) %li.js-activity-tab = link_to user_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do @@ -107,7 +107,7 @@ .tab-content - if profile_tab?(:activity) #activity.tab-pane - .row-content-block.calender-block.white.second-block.hidden-xs + .row-content-block.calender-block.white.second-block.d-none.d-sm-block .user-calendar{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } } %h4.center.light %i.fa.fa-spinner.fa-spin diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index 04dfe418dbe..284b4b53334 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -632,7 +632,7 @@ Useful links: // good <span title="tooltip text">Foo</span> - $('span').tooltip('fixTitle'); + $('span').tooltip('_fixTitle'); ``` ### The Javascript/Vue Accord diff --git a/package.json b/package.json index 68e5e0a9b6a..13be495b702 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "babel-preset-latest": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "blackst0ne-mermaid": "^7.1.0-fixed", - "bootstrap-sass": "^3.3.6", + "bootstrap": "4.1", "brace-expansion": "^1.1.8", "cache-loader": "^1.2.2", "chart.js": "1.0.2", @@ -66,6 +66,7 @@ "monaco-editor": "0.10.0", "mousetrap": "^1.4.6", "pikaday": "^1.6.1", + "popper.js": "^1.14.3", "prismjs": "^1.6.0", "raphael": "^2.2.7", "raven-js": "^3.22.1", @@ -74,6 +75,7 @@ "select2": "3.5.2-browserify", "sha1": "^1.1.1", "sql.js": "^0.4.0", + "stickyfilljs": "^2.0.5", "style-loader": "^0.21.0", "svg4everybody": "2.1.9", "three": "^0.84.0", diff --git a/qa/qa/page/menu/main.rb b/qa/qa/page/menu/main.rb index d3562effaab..644fedecc90 100644 --- a/qa/qa/page/menu/main.rb +++ b/qa/qa/page/menu/main.rb @@ -10,7 +10,7 @@ module QA view 'app/views/layouts/header/_default.html.haml' do element :navbar element :user_avatar - element :user_menu, '.dropdown-menu-nav' + element :user_menu, '.dropdown-menu' end view 'app/views/layouts/nav/_dashboard.html.haml' do @@ -70,7 +70,7 @@ module QA within_top_menu do click_element :user_avatar - page.within('.dropdown-menu-nav') do + page.within('.dropdown-menu') do yield end end diff --git a/spec/features/admin/admin_abuse_reports_spec.rb b/spec/features/admin/admin_abuse_reports_spec.rb index 766cd4b0090..d8fcdebfc6d 100644 --- a/spec/features/admin/admin_abuse_reports_spec.rb +++ b/spec/features/admin/admin_abuse_reports_spec.rb @@ -45,7 +45,7 @@ describe "Admin::AbuseReports", :js do visit admin_abuse_reports_path expect(page).to have_selector('.pagination') - expect(page).to have_selector('.pagination .page', count: (report_count.to_f / AbuseReport.default_per_page).ceil) + expect(page).to have_selector('.pagination .js-pagination-page', count: (report_count.to_f / AbuseReport.default_per_page).ceil) end end end diff --git a/spec/features/admin/admin_projects_spec.rb b/spec/features/admin/admin_projects_spec.rb index 6d8350e99f1..328e8f25f89 100644 --- a/spec/features/admin/admin_projects_spec.rb +++ b/spec/features/admin/admin_projects_spec.rb @@ -34,7 +34,7 @@ describe "Admin::Projects" do expect(page).to have_content(project.name) expect(page).to have_content(archived_project.name) - expect(page).to have_xpath("//span[@class='label label-warning']", text: 'archived') + expect(page).to have_xpath("//span[@class='badge badge-warning']", text: 'archived') end it 'renders only archived projects', :js do diff --git a/spec/features/admin/admin_requests_profiles_spec.rb b/spec/features/admin/admin_requests_profiles_spec.rb index 380cd5d7703..2503fc9067d 100644 --- a/spec/features/admin/admin_requests_profiles_spec.rb +++ b/spec/features/admin/admin_requests_profiles_spec.rb @@ -33,12 +33,12 @@ describe 'Admin::RequestsProfilesController' do visit admin_requests_profiles_path - within('.panel', text: '/gitlab-org/gitlab-ce') do + within('.card', text: '/gitlab-org/gitlab-ce') do expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile1)}']", text: time1.to_s(:long)) expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile2)}']", text: time2.to_s(:long)) end - within('.panel', text: '/gitlab-com/infrastructure') do + within('.card', text: '/gitlab-com/infrastructure') do expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile3)}']", text: time3.to_s(:long)) end end diff --git a/spec/features/admin/admin_runners_spec.rb b/spec/features/admin/admin_runners_spec.rb index 3465ccfc423..c33014cbb31 100644 --- a/spec/features/admin/admin_runners_spec.rb +++ b/spec/features/admin/admin_runners_spec.rb @@ -68,7 +68,7 @@ describe "Admin Runners" do visit admin_runners_path within "#runner_#{runner.id}" do - expect(page).to have_selector '.label', text: 'group' + expect(page).to have_selector '.badge', text: 'group' expect(page).to have_text 'n/a' end end @@ -81,7 +81,7 @@ describe "Admin Runners" do visit admin_runners_path within "#runner_#{runner.id}" do - expect(page).to have_selector '.label', text: 'shared' + expect(page).to have_selector '.badge', text: 'shared' expect(page).to have_text 'n/a' end end @@ -95,7 +95,7 @@ describe "Admin Runners" do visit admin_runners_path within "#runner_#{runner.id}" do - expect(page).to have_selector '.label', text: 'specific' + expect(page).to have_selector '.badge', text: 'specific' expect(page).to have_text '1' end end diff --git a/spec/features/admin/admin_users_spec.rb b/spec/features/admin/admin_users_spec.rb index 8fc57f4b4c3..9e3221577c7 100644 --- a/spec/features/admin/admin_users_spec.rb +++ b/spec/features/admin/admin_users_spec.rb @@ -283,14 +283,14 @@ describe "Admin::Users" do end it "lists group projects" do - within(:css, '.append-bottom-default + .panel') do + within(:css, '.append-bottom-default + .card') do expect(page).to have_content 'Group projects' expect(page).to have_link group.name, href: admin_group_path(group) end end it 'allows navigation to the group details' do - within(:css, '.append-bottom-default + .panel') do + within(:css, '.append-bottom-default + .card') do click_link group.name end within(:css, 'h3.page-title') do @@ -300,7 +300,7 @@ describe "Admin::Users" do end it 'shows the group access level' do - within(:css, '.append-bottom-default + .panel') do + within(:css, '.append-bottom-default + .card') do expect(page).to have_content 'Developer' end end diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb index 18901a954cc..7a14a441088 100644 --- a/spec/features/boards/add_issues_modal_spec.rb +++ b/spec/features/boards/add_issues_modal_spec.rb @@ -81,7 +81,7 @@ describe 'Issue Boards add issue modal', :js do expect(page).to have_content('2') end - expect(page).to have_selector('.card', count: 2) + expect(page).to have_selector('.board-card', count: 2) end end @@ -89,7 +89,7 @@ describe 'Issue Boards add issue modal', :js do page.within('.add-issues-modal') do click_link 'Selected issues' - expect(page).not_to have_selector('.card') + expect(page).not_to have_selector('.board-card') end end @@ -122,7 +122,7 @@ describe 'Issue Boards add issue modal', :js do wait_for_requests - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -133,7 +133,7 @@ describe 'Issue Boards add issue modal', :js do wait_for_requests - expect(page).not_to have_selector('.card') + expect(page).not_to have_selector('.board-card') expect(page).not_to have_content("You haven't added any issues to your project yet") end end @@ -142,7 +142,7 @@ describe 'Issue Boards add issue modal', :js do context 'selecing issues' do it 'selects single issue' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click page.within('.nav-links') do expect(page).to have_content('Selected issues 1') @@ -152,7 +152,7 @@ describe 'Issue Boards add issue modal', :js do it 'changes button text' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue') end @@ -160,7 +160,7 @@ describe 'Issue Boards add issue modal', :js do it 'changes button text with plural' do page.within('.add-issues-modal') do - all('.card .card-number').each do |el| + all('.board-card .board-card-number').each do |el| el.click end @@ -170,11 +170,11 @@ describe 'Issue Boards add issue modal', :js do it 'shows only selected issues on selected tab' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click click_link 'Selected issues' - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -200,7 +200,7 @@ describe 'Issue Boards add issue modal', :js do it 'selects all that arent already selected' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click expect(page).to have_selector('.is-active', count: 1) @@ -212,11 +212,11 @@ describe 'Issue Boards add issue modal', :js do it 'unselects from selected tab' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click click_link 'Selected issues' - first('.card .card-number').click + first('.board-card .board-card-number').click expect(page).not_to have_selector('.is-active') end @@ -226,19 +226,19 @@ describe 'Issue Boards add issue modal', :js do context 'adding issues' do it 'adds to board' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click click_button 'Add 1 issue' end page.within(find('.board:nth-child(2)')) do - expect(page).to have_selector('.card') + expect(page).to have_selector('.board-card') end end it 'adds to second list' do page.within('.add-issues-modal') do - first('.card .card-number').click + first('.board-card .board-card-number').click click_button planning.title @@ -248,7 +248,7 @@ describe 'Issue Boards add issue modal', :js do end page.within(find('.board:nth-child(3)')) do - expect(page).to have_selector('.card') + expect(page).to have_selector('.board-card') end end end diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb index 52ff47d57f9..e414345ac23 100644 --- a/spec/features/boards/boards_spec.rb +++ b/spec/features/boards/boards_spec.rb @@ -92,9 +92,9 @@ describe 'Issue Boards', :js do wait_for_requests expect(page).to have_selector('.board', count: 4) - expect(find('.board:nth-child(2)')).to have_selector('.card') - expect(find('.board:nth-child(3)')).to have_selector('.card') - expect(find('.board:nth-child(4)')).to have_selector('.card') + expect(find('.board:nth-child(2)')).to have_selector('.board-card') + expect(find('.board:nth-child(3)')).to have_selector('.board-card') + expect(find('.board:nth-child(4)')).to have_selector('.board-card') end it 'shows description tooltip on list title' do @@ -120,9 +120,9 @@ describe 'Issue Boards', :js do wait_for_requests - expect(find('.board:nth-child(2)')).to have_selector('.card', count: 0) - expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0) - expect(find('.board:nth-child(4)')).to have_selector('.card', count: 1) + expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 0) + expect(find('.board:nth-child(3)')).to have_selector('.board-card', count: 0) + expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 1) end it 'search list' do @@ -131,9 +131,9 @@ describe 'Issue Boards', :js do wait_for_requests - expect(find('.board:nth-child(2)')).to have_selector('.card', count: 1) - expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0) - expect(find('.board:nth-child(4)')).to have_selector('.card', count: 0) + expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 1) + expect(find('.board:nth-child(3)')).to have_selector('.board-card', count: 0) + expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 0) end it 'allows user to delete board' do @@ -171,21 +171,21 @@ describe 'Issue Boards', :js do page.within(find('.board:nth-child(2)')) do expect(page.find('.board-header')).to have_content('58') - expect(page).to have_selector('.card', count: 20) + expect(page).to have_selector('.board-card', count: 20) expect(page).to have_content('Showing 20 of 58 issues') find('.board .board-list') evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight") wait_for_requests - expect(page).to have_selector('.card', count: 40) + expect(page).to have_selector('.board-card', count: 40) expect(page).to have_content('Showing 40 of 58 issues') find('.board .board-list') evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight") wait_for_requests - expect(page).to have_selector('.card', count: 58) + expect(page).to have_selector('.board-card', count: 58) expect(page).to have_content('Showing all issues') end end @@ -204,7 +204,7 @@ describe 'Issue Boards', :js do wait_for_board_cards(4, 2) expect(find('.board:nth-child(2)')).not_to have_content(issue9.title) - expect(find('.board:nth-child(4)')).to have_selector('.card', count: 2) + expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 2) expect(find('.board:nth-child(4)')).to have_content(issue9.title) expect(find('.board:nth-child(4)')).not_to have_content(planning.title) end @@ -242,7 +242,7 @@ describe 'Issue Boards', :js do wait_for_board_cards(4, 1) expect(find('.board:nth-child(3)')).to have_content(issue6.title) - expect(find('.board:nth-child(3)').all('.card').last).to have_content(development.title) + expect(find('.board:nth-child(3)').all('.board-card').last).to have_content(development.title) end it 'issue moves between lists' do @@ -253,7 +253,7 @@ describe 'Issue Boards', :js do wait_for_board_cards(4, 1) expect(find('.board:nth-child(2)')).to have_content(issue7.title) - expect(find('.board:nth-child(2)').all('.card').first).to have_content(planning.title) + expect(find('.board:nth-child(2)').all('.board-card').first).to have_content(planning.title) end it 'issue moves from closed' do @@ -335,7 +335,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(page).to have_css('#js-add-list.open') + expect(page).to have_css('#js-add-list.show') end it 'creates new list from a new label' do @@ -425,12 +425,12 @@ describe 'Issue Boards', :js do page.within(find('.board:nth-child(2)')) do expect(page.find('.board-header')).to have_content('1') - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end page.within(find('.board:nth-child(3)')) do expect(page.find('.board-header')).to have_content('0') - expect(page).to have_selector('.card', count: 0) + expect(page).to have_selector('.board-card', count: 0) end end @@ -460,19 +460,19 @@ describe 'Issue Boards', :js do page.within(find('.board:nth-child(2)')) do expect(page.find('.board-header')).to have_content('51') - expect(page).to have_selector('.card', count: 20) + expect(page).to have_selector('.board-card', count: 20) expect(page).to have_content('Showing 20 of 51 issues') find('.board .board-list') evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight") - expect(page).to have_selector('.card', count: 40) + expect(page).to have_selector('.board-card', count: 40) expect(page).to have_content('Showing 40 of 51 issues') find('.board .board-list') evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight") - expect(page).to have_selector('.card', count: 51) + expect(page).to have_selector('.board-card', count: 51) expect(page).to have_content('Showing all issues') end end @@ -494,8 +494,8 @@ describe 'Issue Boards', :js do it 'filters by clicking label button on issue' do page.within(find('.board:nth-child(2)')) do - expect(page).to have_selector('.card', count: 8) - expect(find('.card', match: :first)).to have_content(bug.title) + expect(page).to have_selector('.board-card', count: 8) + expect(find('.board-card', match: :first)).to have_content(bug.title) click_button(bug.title) wait_for_requests end @@ -512,13 +512,13 @@ describe 'Issue Boards', :js do it 'removes label filter by clicking label button on issue' do page.within(find('.board:nth-child(2)')) do - page.within(find('.card', match: :first)) do + page.within(find('.board-card', match: :first)) do click_button(bug.title) end wait_for_requests - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end wait_for_requests @@ -589,7 +589,7 @@ describe 'Issue Boards', :js do def wait_for_board_cards(board_number, expected_cards) page.within(find(".board:nth-child(#{board_number})")) do expect(page.find('.board-header')).to have_content(expected_cards.to_s) - expect(page).to have_selector('.card', count: expected_cards) + expect(page).to have_selector('.board-card', count: expected_cards) end end diff --git a/spec/features/boards/issue_ordering_spec.rb b/spec/features/boards/issue_ordering_spec.rb index 5abd02dbb48..193b1dfabbd 100644 --- a/spec/features/boards/issue_ordering_spec.rb +++ b/spec/features/boards/issue_ordering_spec.rb @@ -30,7 +30,7 @@ describe 'Issue Boards', :js do it 'has un-ordered issue as last issue' do page.within(find('.board:nth-child(2)')) do - expect(all('.card').last).to have_content(issue4.title) + expect(all('.board-card').last).to have_content(issue4.title) end end @@ -40,7 +40,7 @@ describe 'Issue Boards', :js do wait_for_requests page.within(find('.board:nth-child(2)')) do - expect(first('.card')).to have_content(issue4.title) + expect(first('.board-card')).to have_content(issue4.title) end end end @@ -58,7 +58,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(first('.card')).to have_content(issue2.title) + expect(first('.board-card')).to have_content(issue2.title) end it 'moves from middle to bottom' do @@ -66,7 +66,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(all('.card').last).to have_content(issue2.title) + expect(all('.board-card').last).to have_content(issue2.title) end it 'moves from top to bottom' do @@ -74,7 +74,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(all('.card').last).to have_content(issue3.title) + expect(all('.board-card').last).to have_content(issue3.title) end it 'moves from bottom to top' do @@ -82,7 +82,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(first('.card')).to have_content(issue1.title) + expect(first('.board-card')).to have_content(issue1.title) end it 'moves from top to middle' do @@ -90,7 +90,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(first('.card')).to have_content(issue2.title) + expect(first('.board-card')).to have_content(issue2.title) end it 'moves from bottom to middle' do @@ -98,7 +98,7 @@ describe 'Issue Boards', :js do wait_for_requests - expect(all('.card').last).to have_content(issue2.title) + expect(all('.board-card').last).to have_content(issue2.title) end end @@ -121,11 +121,11 @@ describe 'Issue Boards', :js do wait_for_requests - expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2) - expect(all('.board')[2]).to have_selector('.card', count: 4) + expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2) + expect(all('.board')[2]).to have_selector('.board-card', count: 4) page.within(all('.board')[2]) do - expect(first('.card')).to have_content(issue3.title) + expect(first('.board-card')).to have_content(issue3.title) end end @@ -134,11 +134,11 @@ describe 'Issue Boards', :js do wait_for_requests - expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2) - expect(all('.board')[2]).to have_selector('.card', count: 4) + expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2) + expect(all('.board')[2]).to have_selector('.board-card', count: 4) page.within(all('.board')[2]) do - expect(all('.card').last).to have_content(issue3.title) + expect(all('.board-card').last).to have_content(issue3.title) end end @@ -147,11 +147,11 @@ describe 'Issue Boards', :js do wait_for_requests - expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2) - expect(all('.board')[2]).to have_selector('.card', count: 4) + expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2) + expect(all('.board')[2]).to have_selector('.board-card', count: 4) page.within(all('.board')[2]) do - expect(all('.card')[1]).to have_content(issue3.title) + expect(all('.board-card')[1]).to have_content(issue3.title) end end end diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb index 5907bb0840f..be9c6a51c29 100644 --- a/spec/features/boards/modal_filter_spec.rb +++ b/spec/features/boards/modal_filter_spec.rb @@ -38,7 +38,7 @@ describe 'Issue Boards add issue modal filtering', :js do page.within('.add-issues-modal') do wait_for_requests - expect(page).to have_selector('.card', count: 0) + expect(page).to have_selector('.board-card', count: 0) click_button 'Cancel' end @@ -48,7 +48,7 @@ describe 'Issue Boards add issue modal filtering', :js do page.within('.add-issues-modal') do wait_for_requests - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -62,13 +62,13 @@ describe 'Issue Boards add issue modal filtering', :js do page.within('.add-issues-modal') do wait_for_requests - expect(page).to have_selector('.card', count: 0) + expect(page).to have_selector('.board-card', count: 0) find('.clear-search').click wait_for_requests - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -90,7 +90,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: user2.name) - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end end @@ -113,7 +113,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: 'none') - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -126,7 +126,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: user2.name) - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end end @@ -148,7 +148,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: 'upcoming') - expect(page).to have_selector('.card', count: 0) + expect(page).to have_selector('.board-card', count: 0) end end @@ -161,7 +161,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: milestone.name) - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end end @@ -183,7 +183,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: 'none') - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -196,7 +196,7 @@ describe 'Issue Boards add issue modal filtering', :js do wait_for_requests expect(page).to have_selector('.js-visual-token', text: label.title) - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end end diff --git a/spec/features/boards/new_issue_spec.rb b/spec/features/boards/new_issue_spec.rb index e880f0096c1..7a95f5cf871 100644 --- a/spec/features/boards/new_issue_spec.rb +++ b/spec/features/boards/new_issue_spec.rb @@ -64,7 +64,7 @@ describe 'Issue Boards new issue', :js do expect(page).to have_content('1') end - page.within(first('.card')) do + page.within(first('.board-card')) do issue = project.issues.find_by_title('bug') expect(page).to have_content(issue.to_reference) diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb index 4d31123a699..a03aa681827 100644 --- a/spec/features/boards/sidebar_spec.rb +++ b/spec/features/boards/sidebar_spec.rb @@ -15,7 +15,7 @@ describe 'Issue Boards', :js do let!(:issue2) { create(:labeled_issue, project: project, labels: [development, stretch], relative_position: 1) } let(:board) { create(:board, project: project) } let!(:list) { create(:list, board: board, label: development, position: 0) } - let(:card) { find('.board:nth-child(2)').first('.card') } + let(:card) { find('.board:nth-child(2)').first('.board-card') } around do |example| Timecop.freeze { example.run } @@ -75,7 +75,7 @@ describe 'Issue Boards', :js do wait_for_requests page.within(find('.board:nth-child(2)')) do - expect(page).to have_selector('.card', count: 1) + expect(page).to have_selector('.board-card', count: 1) end end @@ -86,11 +86,11 @@ describe 'Issue Boards', :js do visit project_board_path(project, board) wait_for_requests - click_card(find('.board:nth-child(1)').first('.card')) + click_card(find('.board:nth-child(1)').first('.board-card')) expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board' - click_card(find('.board:nth-child(3)').first('.card')) + click_card(find('.board:nth-child(3)').first('.board-card')) expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board' end @@ -117,7 +117,7 @@ describe 'Issue Boards', :js do end it 'removes the assignee' do - card_two = find('.board:nth-child(2)').find('.card:nth-child(2)') + card_two = find('.board:nth-child(2)').find('.board-card:nth-child(2)') click_card(card_two) page.within('.assignee') do @@ -171,7 +171,7 @@ describe 'Issue Boards', :js do end page.within(find('.board:nth-child(2)')) do - find('.card:nth-child(2)').click + find('.board-card:nth-child(2)').click end page.within('.assignee') do @@ -246,7 +246,7 @@ describe 'Issue Boards', :js do wait_for_requests page.within('.value') do - expect(page).to have_selector('.label', count: 2) + expect(page).to have_selector('.badge', count: 2) expect(page).to have_content(development.title) expect(page).to have_content(stretch.title) end @@ -268,12 +268,12 @@ describe 'Issue Boards', :js do find('.dropdown-menu-close-icon').click page.within('.value') do - expect(page).to have_selector('.label', count: 3) + expect(page).to have_selector('.badge', count: 3) expect(page).to have_content(bug.title) end end - expect(card).to have_selector('.label', count: 3) + expect(card).to have_selector('.badge', count: 3) expect(card).to have_content(bug.title) end @@ -293,13 +293,13 @@ describe 'Issue Boards', :js do find('.dropdown-menu-close-icon').click page.within('.value') do - expect(page).to have_selector('.label', count: 4) + expect(page).to have_selector('.badge', count: 4) expect(page).to have_content(bug.title) expect(page).to have_content(regression.title) end end - expect(card).to have_selector('.label', count: 4) + expect(card).to have_selector('.badge', count: 4) expect(card).to have_content(bug.title) expect(card).to have_content(regression.title) end @@ -321,12 +321,12 @@ describe 'Issue Boards', :js do find('.dropdown-menu-close-icon').click page.within('.value') do - expect(page).to have_selector('.label', count: 1) + expect(page).to have_selector('.badge', count: 1) expect(page).not_to have_content(stretch.title) end end - expect(card).to have_selector('.label', count: 1) + expect(card).to have_selector('.badge', count: 1) expect(card).not_to have_content(stretch.title) end diff --git a/spec/features/boards/sub_group_project_spec.rb b/spec/features/boards/sub_group_project_spec.rb index 5fdb8044db2..271c610dcc8 100644 --- a/spec/features/boards/sub_group_project_spec.rb +++ b/spec/features/boards/sub_group_project_spec.rb @@ -20,7 +20,7 @@ describe 'Sub-group project issue boards', :js do end it 'creates new label from sidebar' do - find('.card').click + find('.board-card').click page.within '.labels' do click_link 'Edit' diff --git a/spec/features/dashboard/todos/todos_spec.rb b/spec/features/dashboard/todos/todos_spec.rb index 94133c62b5c..5ed20b02a6e 100644 --- a/spec/features/dashboard/todos/todos_spec.rb +++ b/spec/features/dashboard/todos/todos_spec.rb @@ -246,7 +246,7 @@ feature 'Dashboard Todos' do it 'is has the right number of pages' do visit dashboard_todos_path - expect(page).to have_selector('.gl-pagination .page', count: 2) + expect(page).to have_selector('.gl-pagination .js-pagination-page', count: 2) end describe 'mark all as done', :js do diff --git a/spec/features/explore/new_menu_spec.rb b/spec/features/explore/new_menu_spec.rb index 8d5233d0c0f..2516db5422f 100644 --- a/spec/features/explore/new_menu_spec.rb +++ b/spec/features/explore/new_menu_spec.rb @@ -66,7 +66,7 @@ feature 'Top Plus Menu', :js do page.within '.header-content' do find('.header-new-dropdown-toggle').click - expect(page).to have_selector('.header-new.dropdown.open', count: 1) + expect(page).to have_selector('.header-new.dropdown.show', count: 1) find('.header-new-project-snippet a').click end @@ -88,7 +88,7 @@ feature 'Top Plus Menu', :js do page.within '.header-content' do find('.header-new-dropdown-toggle').click - expect(page).to have_selector('.header-new.dropdown.open', count: 1) + expect(page).to have_selector('.header-new.dropdown.show', count: 1) find('.header-new-group-project a').click end @@ -156,7 +156,7 @@ feature 'Top Plus Menu', :js do def click_topmenuitem(item_name) page.within '.header-content' do find('.header-new-dropdown-toggle').click - expect(page).to have_selector('.header-new.dropdown.open', count: 1) + expect(page).to have_selector('.header-new.dropdown.show', count: 1) click_link item_name end end diff --git a/spec/features/groups/members/search_members_spec.rb b/spec/features/groups/members/search_members_spec.rb index 31fbbcf562c..e7efdf7dfef 100644 --- a/spec/features/groups/members/search_members_spec.rb +++ b/spec/features/groups/members/search_members_spec.rb @@ -22,7 +22,7 @@ describe 'Search group member' do find('.member-search-btn').click end - group_members_list = find(".panel .content-list") + group_members_list = find(".card .content-list") expect(group_members_list).to have_content(member.name) expect(group_members_list).not_to have_content(user.name) end diff --git a/spec/features/groups/settings/group_badges_spec.rb b/spec/features/groups/settings/group_badges_spec.rb index 92217294446..a99da4a119b 100644 --- a/spec/features/groups/settings/group_badges_spec.rb +++ b/spec/features/groups/settings/group_badges_spec.rb @@ -21,7 +21,7 @@ feature 'Group Badges' do page.within '.badge-settings' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 expect(rows[0]).to have_content badge_1.link_url expect(rows[1]).to have_content badge_2.link_url @@ -48,7 +48,7 @@ feature 'Group Badges' do click_button 'Add badge' wait_for_requests - within '.panel-body' do + within '.card-body' do expect(find('a')[:href]).to eq badge_link_url expect(find('a img')[:src]).to eq badge_image_url end @@ -60,7 +60,7 @@ feature 'Group Badges' do it 'form is shown when clicking edit button in list' do page.within '.badge-settings' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 rows[1].find('[aria-label="Edit"]').click @@ -74,7 +74,7 @@ feature 'Group Badges' do it 'updates a badge when submitting the edit form' do page.within '.badge-settings' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 rows[1].find('[aria-label="Edit"]').click within 'form' do @@ -85,7 +85,7 @@ feature 'Group Badges' do wait_for_requests end - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 expect(rows[1]).to have_content badge_link_url end @@ -99,7 +99,7 @@ feature 'Group Badges' do it 'shows a modal when deleting a badge' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 click_delete_button(rows[1]) @@ -109,14 +109,14 @@ feature 'Group Badges' do it 'deletes a badge when confirming the modal' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 click_delete_button(rows[1]) find('.modal .btn-danger').click wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 1 expect(rows[0]).to have_content badge_1.link_url end diff --git a/spec/features/groups/user_browse_projects_group_page_spec.rb b/spec/features/groups/user_browse_projects_group_page_spec.rb index e81c3180e78..916363c41dd 100644 --- a/spec/features/groups/user_browse_projects_group_page_spec.rb +++ b/spec/features/groups/user_browse_projects_group_page_spec.rb @@ -21,7 +21,7 @@ describe 'User browse group projects page' do visit projects_group_path(group) expect(page).to have_link project.name - expect(page).to have_xpath("//span[@class='label label-warning']", text: 'archived') + expect(page).to have_xpath("//span[@class='badge badge-warning']", text: 'archived') end end end diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb index 08ba91a2682..483122ae463 100644 --- a/spec/features/issues/filtered_search/filter_issues_spec.rb +++ b/spec/features/issues/filtered_search/filter_issues_spec.rb @@ -248,7 +248,7 @@ describe 'Filter issues', :js do context 'issue label clicked' do it 'filters and displays in search bar' do - find('.issues-list .issue .issue-main-info .issuable-info a .label', text: multiple_words_label.title).click + find('.issues-list .issue .issue-main-info .issuable-info a .badge', text: multiple_words_label.title).click expect_issues_list_count(1) expect_tokens([label_token("\"#{multiple_words_label.title}\"")]) diff --git a/spec/features/issues/user_creates_branch_and_merge_request_spec.rb b/spec/features/issues/user_creates_branch_and_merge_request_spec.rb index 539d7e9ff01..3dfcbc2fcb8 100644 --- a/spec/features/issues/user_creates_branch_and_merge_request_spec.rb +++ b/spec/features/issues/user_creates_branch_and_merge_request_spec.rb @@ -139,8 +139,8 @@ describe 'User creates branch and merge request on issue page', :js do end it 'disables the create branch button' do - expect(page).to have_css('.create-mr-dropdown-wrap .unavailable:not(.hide)') - expect(page).to have_css('.create-mr-dropdown-wrap .available.hide', visible: false) + expect(page).to have_css('.create-mr-dropdown-wrap .unavailable:not(.hidden)') + expect(page).to have_css('.create-mr-dropdown-wrap .available.hidden', visible: false) expect(page).to have_content /1 Related Merge Request/ end end diff --git a/spec/features/labels_hierarchy_spec.rb b/spec/features/labels_hierarchy_spec.rb index ae41f611ddc..4700ada1aae 100644 --- a/spec/features/labels_hierarchy_spec.rb +++ b/spec/features/labels_hierarchy_spec.rb @@ -34,7 +34,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do wait_for_requests - expect(page).to have_selector('span.label', text: label.title) + expect(page).to have_selector('span.badge', text: label.title) end end @@ -45,7 +45,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do wait_for_requests - expect(page).not_to have_selector('span.label', text: child_group_label.title) + expect(page).not_to have_selector('span.badge', text: child_group_label.title) end end @@ -57,7 +57,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do wait_for_requests if board - expect(page).to have_selector('.card-title') do |card| + expect(page).to have_selector('.board-card-title') do |card| expect(card).to have_selector('a', text: labeled_issue.title) end else @@ -96,11 +96,11 @@ feature 'Labels Hierarchy', :js, :nested_groups do wait_for_requests if board - expect(page).to have_selector('.card-title') do |card| + expect(page).to have_selector('.board-card-title') do |card| expect(card).to have_selector('a', text: labeled_issue.title) end - expect(page).to have_selector('.card-title') do |card| + expect(page).to have_selector('.board-card-title') do |card| expect(card).to have_selector('a', text: labeled_issue_2.title) end else @@ -118,11 +118,11 @@ feature 'Labels Hierarchy', :js, :nested_groups do select_label_on_dropdown(group_label_3.title) if board - expect(page).to have_selector('.card-title') do |card| + expect(page).to have_selector('.board-card-title') do |card| expect(card).not_to have_selector('a', text: labeled_issue_2.title) end - expect(page).to have_selector('.card-title') do |card| + expect(page).to have_selector('.board-card-title') do |card| expect(card).to have_selector('a', text: labeled_issue_3.title) end else @@ -159,9 +159,9 @@ feature 'Labels Hierarchy', :js, :nested_groups do find('.btn-create').click expect(page.find('.issue-details h2.title')).to have_content('new created issue') - expect(page).to have_selector('span.label', text: grandparent_group_label.title) - expect(page).to have_selector('span.label', text: parent_group_label.title) - expect(page).to have_selector('span.label', text: project_label_1.title) + expect(page).to have_selector('span.badge', text: grandparent_group_label.title) + expect(page).to have_selector('span.badge', text: parent_group_label.title) + expect(page).to have_selector('span.badge', text: project_label_1.title) end end @@ -188,7 +188,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do wait_for_requests - find('.card').click + find('.board-card').click end it_behaves_like 'assigning labels from sidebar' @@ -204,7 +204,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do wait_for_requests - find('.card').click + find('.board-card').click end it_behaves_like 'assigning labels from sidebar' diff --git a/spec/features/milestone_spec.rb b/spec/features/milestone_spec.rb index 6c51e4bbe26..b0db6870ddf 100644 --- a/spec/features/milestone_spec.rb +++ b/spec/features/milestone_spec.rb @@ -119,7 +119,7 @@ feature 'Milestone' do find('.milestone-deprecation-message .js-popover-link').click - expect(page).to have_selector('.milestone-deprecation-message .popover') + expect(page).to have_selector('.popover') end end end diff --git a/spec/features/projects/issues/user_sorts_issues_spec.rb b/spec/features/projects/issues/user_sorts_issues_spec.rb index c3d63000dac..db5936a30cb 100644 --- a/spec/features/projects/issues/user_sorts_issues_spec.rb +++ b/spec/features/projects/issues/user_sorts_issues_spec.rb @@ -18,7 +18,7 @@ describe "User sorts issues" do it "sorts by popularity" do find("button.dropdown-toggle").click - page.within(".content ul.dropdown-menu.dropdown-menu-align-right li") do + page.within(".content ul.dropdown-menu.dropdown-menu-right li") do click_link("Popularity") end diff --git a/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb b/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb index d8d9f7e2a8c..305658f1b5d 100644 --- a/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb +++ b/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb @@ -18,7 +18,7 @@ describe 'User sorts merge requests' do it 'keeps the sort option' do find('button.dropdown-toggle').click - page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do + page.within('.content ul.dropdown-menu.dropdown-menu-right li') do click_link('Last updated') end @@ -43,7 +43,7 @@ describe 'User sorts merge requests' do it 'sorts by popularity' do find('button.dropdown-toggle').click - page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do + page.within('.content ul.dropdown-menu.dropdown-menu-right li') do click_link('Popularity') end diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb index a29c21f6fef..af2a9567a47 100644 --- a/spec/features/projects/pipelines/pipeline_spec.rb +++ b/spec/features/projects/pipelines/pipeline_spec.rb @@ -165,7 +165,7 @@ describe 'Pipeline', :js do end it 'shows Pipeline tab as active' do - expect(page).to have_css('.js-pipeline-tab-link.active') + expect(page).to have_css('.js-pipeline-tab-link .active') end context 'without permission to access builds' do @@ -271,7 +271,7 @@ describe 'Pipeline', :js do end it 'shows Jobs tab as active' do - expect(page).to have_css('li.js-builds-tab-link.active') + expect(page).to have_css('li.js-builds-tab-link .active') end end diff --git a/spec/features/projects/settings/project_badges_spec.rb b/spec/features/projects/settings/project_badges_spec.rb index cc3551a4c21..4893bef8884 100644 --- a/spec/features/projects/settings/project_badges_spec.rb +++ b/spec/features/projects/settings/project_badges_spec.rb @@ -22,7 +22,7 @@ feature 'Project Badges' do page.within '.badge-settings' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 expect(rows[0]).to have_content group_badge.link_url expect(rows[1]).to have_content project_badge.link_url @@ -49,7 +49,7 @@ feature 'Project Badges' do click_button 'Add badge' wait_for_requests - within '.panel-body' do + within '.card-body' do expect(find('a')[:href]).to eq badge_link_url expect(find('a img')[:src]).to eq badge_image_url end @@ -61,7 +61,7 @@ feature 'Project Badges' do it 'form is shown when clicking edit button in list' do page.within '.badge-settings' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 rows[1].find('[aria-label="Edit"]').click @@ -75,7 +75,7 @@ feature 'Project Badges' do it 'updates a badge when submitting the edit form' do page.within '.badge-settings' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 rows[1].find('[aria-label="Edit"]').click within 'form' do @@ -86,7 +86,7 @@ feature 'Project Badges' do wait_for_requests end - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 expect(rows[1]).to have_content badge_link_url end @@ -100,7 +100,7 @@ feature 'Project Badges' do it 'shows a modal when deleting a badge' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 click_delete_button(rows[1]) @@ -110,14 +110,14 @@ feature 'Project Badges' do it 'deletes a badge when confirming the modal' do wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 2 click_delete_button(rows[1]) find('.modal .btn-danger').click wait_for_requests - rows = all('.panel-body > div') + rows = all('.card-body > div') expect(rows.length).to eq 1 expect(rows[0]).to have_content group_badge.link_url end diff --git a/spec/features/protected_branches_spec.rb b/spec/features/protected_branches_spec.rb index 43cabd3b9f2..0c28a853b54 100644 --- a/spec/features/protected_branches_spec.rb +++ b/spec/features/protected_branches_spec.rb @@ -68,8 +68,10 @@ feature 'Protected Branches', :js do within form do find(".js-allowed-to-merge").click + wait_for_requests click_link 'No one' find(".js-allowed-to-push").click + wait_for_requests click_link 'Developers + Masters' end diff --git a/spec/features/signed_commits_spec.rb b/spec/features/signed_commits_spec.rb index 6088b831c14..db141ef7096 100644 --- a/spec/features/signed_commits_spec.rb +++ b/spec/features/signed_commits_spec.rb @@ -96,10 +96,11 @@ describe 'GPG signed commits', :js do within(find('.commit', text: 'signed commit by bette cartwright')) do click_on 'Unverified' - within '.popover' do - expect(page).to have_content 'This commit was signed with an unverified signature.' - expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}" - end + end + + within '.popover' do + expect(page).to have_content 'This commit was signed with an unverified signature.' + expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}" end end @@ -110,12 +111,13 @@ describe 'GPG signed commits', :js do within(find('.commit', text: 'signed and authored commit by bette cartwright, different email')) do click_on 'Unverified' - within '.popover' do - expect(page).to have_content 'This commit was signed with a verified signature, but the committer email is not verified to belong to the same user.' - expect(page).to have_content 'Bette Cartwright' - expect(page).to have_content '@bette.cartwright' - expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}" - end + end + + within '.popover' do + expect(page).to have_content 'This commit was signed with a verified signature, but the committer email is not verified to belong to the same user.' + expect(page).to have_content 'Bette Cartwright' + expect(page).to have_content '@bette.cartwright' + expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}" end end @@ -126,12 +128,13 @@ describe 'GPG signed commits', :js do within(find('.commit', text: 'signed commit by bette cartwright')) do click_on 'Unverified' - within '.popover' do - expect(page).to have_content "This commit was signed with a different user's verified signature." - expect(page).to have_content 'Bette Cartwright' - expect(page).to have_content '@bette.cartwright' - expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}" - end + end + + within '.popover' do + expect(page).to have_content "This commit was signed with a different user's verified signature." + expect(page).to have_content 'Bette Cartwright' + expect(page).to have_content '@bette.cartwright' + expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}" end end @@ -142,12 +145,13 @@ describe 'GPG signed commits', :js do within(find('.commit', text: 'signed and authored commit by nannie bernhard')) do click_on 'Verified' - within '.popover' do - expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.' - expect(page).to have_content 'Nannie Bernhard' - expect(page).to have_content '@nannie.bernhard' - expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}" - end + end + + within '.popover' do + expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.' + expect(page).to have_content 'Nannie Bernhard' + expect(page).to have_content '@nannie.bernhard' + expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}" end end @@ -167,12 +171,13 @@ describe 'GPG signed commits', :js do within(find('.commit', text: 'signed and authored commit by nannie bernhard')) do click_on 'Verified' - within '.popover' do - expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.' - expect(page).to have_content 'Nannie Bernhard' - expect(page).to have_content 'nannie.bernhard@example.com' - expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}" - end + end + + within '.popover' do + expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.' + expect(page).to have_content 'Nannie Bernhard' + expect(page).to have_content 'nannie.bernhard@example.com' + expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}" end end end diff --git a/spec/features/triggers_spec.rb b/spec/features/triggers_spec.rb index 19784120108..6be2606fd0d 100644 --- a/spec/features/triggers_spec.rb +++ b/spec/features/triggers_spec.rb @@ -23,7 +23,7 @@ feature 'Triggers', :js do click_button 'Add trigger' # See if input has error due to empty value - expect(page.find('form.gl-show-field-errors .gl-field-error')['style']).to eq 'display: block;' + expect(page.find('form.gl-show-field-errors .gl-field-error')).to be_visible end scenario 'adds new trigger with description' do diff --git a/spec/features/users/login_spec.rb b/spec/features/users/login_spec.rb index 6f968a2c590..1f8d31a5c88 100644 --- a/spec/features/users/login_spec.rb +++ b/spec/features/users/login_spec.rb @@ -394,7 +394,7 @@ feature 'Login' do end def ensure_one_active_tab - expect(page).to have_selector('ul.new-session-tabs > li.active', count: 1) + expect(page).to have_selector('ul.new-session-tabs > li > a.active', count: 1) end def ensure_one_active_pane diff --git a/spec/helpers/issuables_helper_spec.rb b/spec/helpers/issuables_helper_spec.rb index 7b59fde999d..cddb49b320f 100644 --- a/spec/helpers/issuables_helper_spec.rb +++ b/spec/helpers/issuables_helper_spec.rb @@ -45,22 +45,22 @@ describe IssuablesHelper do it 'returns "Open" when state is :opened' do expect(helper.issuables_state_counter_text(:issues, :opened, true)) - .to eq('<span>Open</span> <span class="badge">42</span>') + .to eq('<span>Open</span> <span class="badge badge-pill">42</span>') end it 'returns "Closed" when state is :closed' do expect(helper.issuables_state_counter_text(:issues, :closed, true)) - .to eq('<span>Closed</span> <span class="badge">42</span>') + .to eq('<span>Closed</span> <span class="badge badge-pill">42</span>') end it 'returns "Merged" when state is :merged' do expect(helper.issuables_state_counter_text(:merge_requests, :merged, true)) - .to eq('<span>Merged</span> <span class="badge">42</span>') + .to eq('<span>Merged</span> <span class="badge badge-pill">42</span>') end it 'returns "All" when state is :all' do expect(helper.issuables_state_counter_text(:merge_requests, :all, true)) - .to eq('<span>All</span> <span class="badge">42</span>') + .to eq('<span>All</span> <span class="badge badge-pill">42</span>') end end end diff --git a/spec/javascripts/badges/components/badge_list_spec.js b/spec/javascripts/badges/components/badge_list_spec.js index 9439c578973..02e59ae0843 100644 --- a/spec/javascripts/badges/components/badge_list_spec.js +++ b/spec/javascripts/badges/components/badge_list_spec.js @@ -33,7 +33,7 @@ describe('BadgeList component', () => { }); it('renders a header with the badge count', () => { - const header = vm.$el.querySelector('.panel-heading'); + const header = vm.$el.querySelector('.card-header'); expect(header).toHaveText(new RegExp(`Your badges\\s+${numberOfDummyBadges}`)); }); diff --git a/spec/javascripts/badges/components/badge_settings_spec.js b/spec/javascripts/badges/components/badge_settings_spec.js index 3db02982ad4..59367c85125 100644 --- a/spec/javascripts/badges/components/badge_settings_spec.js +++ b/spec/javascripts/badges/components/badge_settings_spec.js @@ -60,7 +60,7 @@ describe('BadgeSettings component', () => { }); it('displays badge list', () => { - const badgeListElement = vm.$el.querySelector('.panel'); + const badgeListElement = vm.$el.querySelector('.card'); expect(badgeListElement).not.toBe(null); expect(badgeListElement).toBeVisible(); expect(badgeListElement).toContainText('Your badges'); @@ -87,7 +87,7 @@ describe('BadgeSettings component', () => { }); it('displays no badge list', () => { - const badgeListElement = vm.$el.querySelector('.panel'); + const badgeListElement = vm.$el.querySelector('.card'); expect(badgeListElement).toBeHidden(); }); }); diff --git a/spec/javascripts/behaviors/secret_values_spec.js b/spec/javascripts/behaviors/secret_values_spec.js index 38d9bba6868..95122fcf30f 100644 --- a/spec/javascripts/behaviors/secret_values_spec.js +++ b/spec/javascripts/behaviors/secret_values_spec.js @@ -9,7 +9,7 @@ function generateValueMarkup( <div class="${placeholderClass}"> *** </div> - <div class="hide ${valueClass}"> + <div class="hidden ${valueClass}"> ${secret} </div> `; diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js index aa87956109f..cb0f2ba686d 100644 --- a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js +++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js @@ -257,9 +257,9 @@ describe('BalsamiqViewer', () => { name = 'name'; resource = 'resource'; template = ` - <div class="panel panel-default"> - <div class="panel-heading">name</div> - <div class="panel-body"> + <div class="card"> + <div class="card-header">name</div> + <div class="card-body"> <img class="img-thumbnail" src="data:image/png;base64,image"/> </div> </div> diff --git a/spec/javascripts/blob/sketch/index_spec.js b/spec/javascripts/blob/sketch/index_spec.js index 79f40559817..e062a068a92 100644 --- a/spec/javascripts/blob/sketch/index_spec.js +++ b/spec/javascripts/blob/sketch/index_spec.js @@ -82,7 +82,7 @@ describe('Sketch viewer', () => { const img = document.querySelector('#js-sketch-viewer img'); expect(img).not.toBeNull(); - expect(img.classList.contains('img-responsive')).toBeTruthy(); + expect(img.classList.contains('img-fluid')).toBeTruthy(); }); it('renders link to image', () => { diff --git a/spec/javascripts/boards/board_list_spec.js b/spec/javascripts/boards/board_list_spec.js index 03df6c06691..c06b2f60813 100644 --- a/spec/javascripts/boards/board_list_spec.js +++ b/spec/javascripts/boards/board_list_spec.js @@ -83,13 +83,13 @@ describe('Board list component', () => { it('renders issues', () => { expect( - component.$el.querySelectorAll('.card').length, + component.$el.querySelectorAll('.board-card').length, ).toBe(1); }); it('sets data attribute with issue id', () => { expect( - component.$el.querySelector('.card').getAttribute('data-issue-id'), + component.$el.querySelector('.board-card').getAttribute('data-issue-id'), ).toBe('1'); }); diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js index be1ea0b57b4..abeef272c68 100644 --- a/spec/javascripts/boards/issue_card_spec.js +++ b/spec/javascripts/boards/issue_card_spec.js @@ -70,19 +70,19 @@ describe('Issue card component', () => { it('renders issue title', () => { expect( - component.$el.querySelector('.card-title').textContent, + component.$el.querySelector('.board-card-title').textContent, ).toContain(issue.title); }); it('includes issue base in link', () => { expect( - component.$el.querySelector('.card-title a').getAttribute('href'), + component.$el.querySelector('.board-card-title a').getAttribute('href'), ).toContain('/test'); }); it('includes issue title on link', () => { expect( - component.$el.querySelector('.card-title a').getAttribute('title'), + component.$el.querySelector('.board-card-title a').getAttribute('title'), ).toBe(issue.title); }); @@ -105,14 +105,14 @@ describe('Issue card component', () => { it('renders issue ID with #', () => { expect( - component.$el.querySelector('.card-number').textContent, + component.$el.querySelector('.board-card-number').textContent, ).toContain(`#${issue.id}`); }); describe('assignee', () => { it('does not render assignee', () => { expect( - component.$el.querySelector('.card-assignee .avatar'), + component.$el.querySelector('.board-card-assignee .avatar'), ).toBeNull(); }); @@ -125,25 +125,25 @@ describe('Issue card component', () => { it('renders assignee', () => { expect( - component.$el.querySelector('.card-assignee .avatar'), + component.$el.querySelector('.board-card-assignee .avatar'), ).not.toBeNull(); }); it('sets title', () => { expect( - component.$el.querySelector('.card-assignee img').getAttribute('data-original-title'), + component.$el.querySelector('.board-card-assignee img').getAttribute('data-original-title'), ).toContain(`Assigned to ${user.name}`); }); it('sets users path', () => { expect( - component.$el.querySelector('.card-assignee a').getAttribute('href'), + component.$el.querySelector('.board-card-assignee a').getAttribute('href'), ).toBe('/test'); }); it('renders avatar', () => { expect( - component.$el.querySelector('.card-assignee img'), + component.$el.querySelector('.board-card-assignee img'), ).not.toBeNull(); }); }); @@ -161,10 +161,10 @@ describe('Issue card component', () => { it('displays defaults avatar if users avatar is null', () => { expect( - component.$el.querySelector('.card-assignee img'), + component.$el.querySelector('.board-card-assignee img'), ).not.toBeNull(); expect( - component.$el.querySelector('.card-assignee img').getAttribute('src'), + component.$el.querySelector('.board-card-assignee img').getAttribute('src'), ).toBe('default_avatar'); }); }); @@ -197,7 +197,7 @@ describe('Issue card component', () => { }); it('renders all four assignees', () => { - expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(4); + expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(4); }); describe('more than four assignees', () => { @@ -213,11 +213,11 @@ describe('Issue card component', () => { }); it('renders more avatar counter', () => { - expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('+2'); + expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('+2'); }); it('renders three assignees', () => { - expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(3); + expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(3); }); it('renders 99+ avatar counter', (done) => { @@ -232,7 +232,7 @@ describe('Issue card component', () => { } Vue.nextTick(() => { - expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('99+'); + expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('99+'); done(); }); }); @@ -248,13 +248,13 @@ describe('Issue card component', () => { it('renders list label', () => { expect( - component.$el.querySelectorAll('.label').length, + component.$el.querySelectorAll('.badge').length, ).toBe(2); }); it('renders label', () => { const nodes = []; - component.$el.querySelectorAll('.label').forEach((label) => { + component.$el.querySelectorAll('.badge').forEach((label) => { nodes.push(label.title); }); @@ -265,13 +265,13 @@ describe('Issue card component', () => { it('sets label description as title', () => { expect( - component.$el.querySelector('.label').getAttribute('title'), + component.$el.querySelector('.badge').getAttribute('title'), ).toContain(label1.description); }); it('sets background color of button', () => { const nodes = []; - component.$el.querySelectorAll('.label').forEach((label) => { + component.$el.querySelectorAll('.badge').forEach((label) => { nodes.push(label.style.backgroundColor); }); @@ -288,7 +288,7 @@ describe('Issue card component', () => { Vue.nextTick() .then(() => { expect( - component.$el.querySelectorAll('.label').length, + component.$el.querySelectorAll('.badge').length, ).toBe(2); expect( component.$el.textContent, diff --git a/spec/javascripts/fixtures/event_filter.html.haml b/spec/javascripts/fixtures/event_filter.html.haml index 5477c6075f0..aa7af61c7eb 100644 --- a/spec/javascripts/fixtures/event_filter.html.haml +++ b/spec/javascripts/fixtures/event_filter.html.haml @@ -1,4 +1,4 @@ -%ul.nav-links.event-filter.scrolling-tabs +%ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs %li.active %a.event-filter-link{ id: "all_event_filter", title: "Filter by all", href: "/dashboard/activity"} %span diff --git a/spec/javascripts/fixtures/issue_sidebar_label.html.haml b/spec/javascripts/fixtures/issue_sidebar_label.html.haml index 397bdc85c67..06ce248dc9c 100644 --- a/spec/javascripts/fixtures/issue_sidebar_label.html.haml +++ b/spec/javascripts/fixtures/issue_sidebar_label.html.haml @@ -1,7 +1,7 @@ .block.labels .sidebar-collapsed-icon.js-sidebar-labels-tooltip .title.hide-collapsed - %a.edit-link.pull-right{ href: "#" } + %a.edit-link.float-right{ href: "#" } Edit .selectbox.hide-collapsed{ style: "display: none;" } .dropdown diff --git a/spec/javascripts/fixtures/linked_tabs.html.haml b/spec/javascripts/fixtures/linked_tabs.html.haml index c38fe8b1f25..632606e0536 100644 --- a/spec/javascripts/fixtures/linked_tabs.html.haml +++ b/spec/javascripts/fixtures/linked_tabs.html.haml @@ -1,9 +1,9 @@ -%ul.nav-links.new-session-tabs.linked-tabs - %li - %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } } +%ul.nav.nav-tabs.new-session-tabs.linked-tabs + %li.nav-item + %a.nav-link{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } } Tab 1 - %li - %a{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } } + %li.nav-item + %a.nav-link{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } } Tab 2 .tab-content diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js index 7f9c4811fba..175f386b60e 100644 --- a/spec/javascripts/gl_dropdown_spec.js +++ b/spec/javascripts/gl_dropdown_spec.js @@ -70,9 +70,9 @@ describe('glDropdown', function describeDropdown() { it('should open on click', () => { initDropDown.call(this, false); - expect(this.dropdownContainerElement).not.toHaveClass('open'); + expect(this.dropdownContainerElement).not.toHaveClass('show'); this.dropdownButtonElement.click(); - expect(this.dropdownContainerElement).toHaveClass('open'); + expect(this.dropdownContainerElement).toHaveClass('show'); }); it('escapes HTML as text', () => { @@ -134,12 +134,12 @@ describe('glDropdown', function describeDropdown() { }); it('should click the selected item on ENTER keypress', () => { - expect(this.dropdownContainerElement).toHaveClass('open'); + expect(this.dropdownContainerElement).toHaveClass('show'); const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0; navigateWithKeys('down', randomIndex, () => { const visitUrl = spyOnDependency(GLDropdown, 'visitUrl').and.stub(); navigateWithKeys('enter', null, () => { - expect(this.dropdownContainerElement).not.toHaveClass('open'); + expect(this.dropdownContainerElement).not.toHaveClass('show'); const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement); expect(link).toHaveClass('is-active'); const linkedLocation = link.attr('href'); @@ -149,13 +149,13 @@ describe('glDropdown', function describeDropdown() { }); it('should close on ESC keypress', () => { - expect(this.dropdownContainerElement).toHaveClass('open'); + expect(this.dropdownContainerElement).toHaveClass('show'); this.dropdownContainerElement.trigger({ type: 'keyup', which: ARROW_KEYS.ESC, keyCode: ARROW_KEYS.ESC }); - expect(this.dropdownContainerElement).not.toHaveClass('open'); + expect(this.dropdownContainerElement).not.toHaveClass('show'); }); }); diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js index 0952356c2f4..648fb3e9bd3 100644 --- a/spec/javascripts/notes_spec.js +++ b/spec/javascripts/notes_spec.js @@ -974,7 +974,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; ).toBeFalsy(); expect( $tempNoteHeader - .find('.hidden-xs') + .find('.d-none.d-sm-block') .text() .trim(), ).toEqual(currentUserFullname); @@ -1020,7 +1020,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; const $tempNoteHeader = $tempNote.find('.note-header'); expect( $tempNoteHeader - .find('.hidden-xs') + .find('.d-none.d-sm-block') .text() .trim(), ).toEqual('Foo <script>alert("XSS")</script>'); diff --git a/spec/javascripts/projects_dropdown/components/search_spec.js b/spec/javascripts/projects_dropdown/components/search_spec.js index 601264258c2..427f5024e3a 100644 --- a/spec/javascripts/projects_dropdown/components/search_spec.js +++ b/spec/javascripts/projects_dropdown/components/search_spec.js @@ -92,7 +92,6 @@ describe('SearchComponent', () => { const inputEl = vm.$el.querySelector('input.form-control'); expect(vm.$el.classList.contains('search-input-container')).toBeTruthy(); - expect(vm.$el.classList.contains('hidden-xs')).toBeTruthy(); expect(inputEl).not.toBe(null); expect(inputEl.getAttribute('placeholder')).toBe('Search your projects'); expect(vm.$el.querySelector('.search-icon')).toBeDefined(); diff --git a/spec/javascripts/sidebar/sidebar_move_issue_spec.js b/spec/javascripts/sidebar/sidebar_move_issue_spec.js index 00847df4b60..8f35b9ca437 100644 --- a/spec/javascripts/sidebar/sidebar_move_issue_spec.js +++ b/spec/javascripts/sidebar/sidebar_move_issue_spec.js @@ -14,7 +14,9 @@ describe('SidebarMoveIssue', function () { this.$content = $(` <div class="dropdown"> <div class="js-toggle"></div> - <div class="dropdown-content"></div> + <div class="dropdown-menu"> + <div class="dropdown-content"></div> + </div> <div class="js-confirm-button"></div> </div> `); diff --git a/spec/lib/banzai/filter/label_reference_filter_spec.rb b/spec/lib/banzai/filter/label_reference_filter_spec.rb index 392905076dc..b30f3661e70 100644 --- a/spec/lib/banzai/filter/label_reference_filter_spec.rb +++ b/spec/lib/banzai/filter/label_reference_filter_spec.rb @@ -59,7 +59,7 @@ describe Banzai::Filter::LabelReferenceFilter do describe 'label span element' do it 'includes default classes' do doc = reference_filter("Label #{reference}") - expect(doc.css('a span').first.attr('class')).to eq 'label color-label has-tooltip' + expect(doc.css('a span').first.attr('class')).to eq 'badge color-label has-tooltip' end it 'includes a style attribute' do diff --git a/spec/support/helpers/board_helpers.rb b/spec/support/helpers/board_helpers.rb index 507d0432d7f..b85fde222ea 100644 --- a/spec/support/helpers/board_helpers.rb +++ b/spec/support/helpers/board_helpers.rb @@ -1,7 +1,7 @@ module BoardHelpers def click_card(card) within card do - first('.card-number').click + first('.board-card-number').click end wait_for_sidebar diff --git a/spec/support/helpers/features/sorting_helpers.rb b/spec/support/helpers/features/sorting_helpers.rb index 50457b64745..ad0053ec5cf 100644 --- a/spec/support/helpers/features/sorting_helpers.rb +++ b/spec/support/helpers/features/sorting_helpers.rb @@ -15,7 +15,7 @@ module Spec def sort_by(value) find('button.dropdown-toggle').click - page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do + page.within('.content ul.dropdown-menu.dropdown-menu-right li') do click_link(value) end end diff --git a/spec/support/helpers/mobile_helpers.rb b/spec/support/helpers/mobile_helpers.rb index 3b9eb84e824..9dc1f1de436 100644 --- a/spec/support/helpers/mobile_helpers.rb +++ b/spec/support/helpers/mobile_helpers.rb @@ -1,10 +1,10 @@ module MobileHelpers def resize_screen_xs - resize_window(767, 768) + resize_window(575, 768) end def resize_screen_sm - resize_window(900, 768) + resize_window(767, 768) end def restore_window_size diff --git a/spec/support/helpers/sorting_helper.rb b/spec/support/helpers/sorting_helper.rb index 577518d726c..9496a94d8f4 100644 --- a/spec/support/helpers/sorting_helper.rb +++ b/spec/support/helpers/sorting_helper.rb @@ -11,7 +11,7 @@ module SortingHelper def sorting_by(value) find('button.dropdown-toggle').click - page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do + page.within('.content ul.dropdown-menu.dropdown-menu-right li') do click_link value end end diff --git a/spec/support/shared_examples/features/protected_branches_access_control_ce.rb b/spec/support/shared_examples/features/protected_branches_access_control_ce.rb index 17f319f49e9..5241c0fa6f1 100644 --- a/spec/support/shared_examples/features/protected_branches_access_control_ce.rb +++ b/spec/support/shared_examples/features/protected_branches_access_control_ce.rb @@ -10,7 +10,7 @@ shared_examples "protected branches > access control > CE" do unless allowed_to_push_button.text == access_type_name allowed_to_push_button.click - within(".dropdown.open .dropdown-menu") { click_on access_type_name } + within(".dropdown.show .dropdown-menu") { click_on access_type_name } end end @@ -55,7 +55,7 @@ shared_examples "protected branches > access control > CE" do unless allowed_to_merge_button.text == access_type_name allowed_to_merge_button.click - within(".dropdown.open .dropdown-menu") { click_on access_type_name } + within(".dropdown.show .dropdown-menu") { click_on access_type_name } end end diff --git a/yarn.lock b/yarn.lock index bbc4672f84b..af8785bbc66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1284,9 +1284,9 @@ boom@5.x.x: dependencies: hoek "4.x.x" -bootstrap-sass@^3.3.6: - version "3.3.6" - resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.6.tgz#363b0d300e868d3e70134c1a742bb17288444fd1" +bootstrap@4.1: + version "4.1.0" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.0.tgz#110b05c31a236d56dbc9adcda6dd16f53738a28a" boxen@^1.2.1: version "1.3.0" @@ -6664,6 +6664,10 @@ pluralize@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45" +popper.js@^1.14.3: + version "1.14.3" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095" + portfinder@^1.0.9: version "1.0.13" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9" @@ -8188,6 +8192,10 @@ statuses@~1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e" +stickyfilljs@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/stickyfilljs/-/stickyfilljs-2.0.5.tgz#d229e372d2199ddf5d283bbe34ac1f7d2529c2fc" + stream-browserify@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db" |