Merge pull request #13625 from hellcp-work/bs5-margin

Margin and padding shim for bootstrap 5 migration

src/api/app/assets/javascripts/webui/patchinfo.js

@@ -76,7 +76,7 @@ function addIssuesHtml(issueTracker, issueId, issueUrl, issueSum) {
         $('<a>', { href: issueUrl, target: '_blank', rel: 'noopener' }).append(
           $('<i>', { class: 'fa fa-bug text-danger' })
         ).append(' ' + issueTracker + '#' + issueId),
-        $('<a>', { id: 'delete_issue_' + identifier, href: '#', title: 'Delete', class: 'ml-1' }).append(
+        $('<a>', { id: 'delete_issue_' + identifier, href: '#', title: 'Delete', class: 'ms-1' }).append(
           $('<i>', { class: 'fas fa-times-circle text-danger' })
         ),
         $('<input>', { type: 'hidden', name: 'patchinfo[issueid][]', id: 'issueid_' + identifier, value: issueId, multiple: true }),

src/api/app/assets/stylesheets/webui/bs5-shims.scss

@@ -1,3 +1,20 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
+        .#{$abbrev}e#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+        }
+        .#{$abbrev}s#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
+      }
+    }
+  }
+}
+
 .badge {
   @each $color, $value in $theme-colors {
     &.bg-#{$color} {

src/api/app/assets/stylesheets/webui/build-results.scss

@@ -90,8 +90,8 @@
 // Build state
 
 .build-state {
-  @extend .pl-1;
-  @extend .pl-sm-2;
+  @extend .ps-1;
+  @extend .ps-sm-2;
   flex-basis: 62%;
 }
 
@@ -147,8 +147,8 @@
 // Repository state
 
 .repository-state {
-  @extend .pl-1;
-  @extend .pl-sm-3;
+  @extend .ps-1;
+  @extend .ps-sm-3;
   @extend .text-nowrap;
   flex-basis: 38%;
 }

src/api/app/assets/stylesheets/webui/collapsible-text.scss

@@ -42,7 +42,7 @@
 
 #involvement-description {
   @include collapsible($maxHeight: 2.75em, $maxWidth: 'none');
-  .obs-collapsible-textbox {  @extend .pr-0; }
+  .obs-collapsible-textbox {  @extend .pe-0; }
 }
 
 .list-group-item {
@@ -57,5 +57,5 @@
 // TODO: Remove this when the request_show_redesign is removed
 #issue-summary {
   @include collapsible($maxHeight: 1.5em);
-  .obs-collapsible-textbox {  @extend .pr-0; }
+  .obs-collapsible-textbox {  @extend .pe-0; }
 }

src/api/app/assets/stylesheets/webui/layout.scss

@@ -8,13 +8,13 @@
 #top-navigation-area {
   .fixed-top { height: $top-navigation-height; }
   .toggler {
-    @extend .ml-2;
+    @extend .ms-2;
     @extend .d-none;
     @extend .d-xl-flex;
     @extend .align-items-center;
     cursor: pointer;
     &.text-center { min-width: 3.875rem; }
-    &:first-of-type { @extend .ml-3;  }
+    &:first-of-type { @extend .ms-3;  }
   }
 
   .nav .nav-link {

src/api/app/assets/stylesheets/webui/live_build_log.scss

@@ -9,7 +9,7 @@
 
 .live-link-action {
   @extend .px-2;
-  @extend .mr-3;
+  @extend .me-3;
   @extend .mb-2;
   @extend .btn;
   @extend .btn-sm;

src/api/app/assets/stylesheets/webui/patchinfo.scss

@@ -47,7 +47,7 @@
 
     i {
       line-height: 1.5;
-      @extend .mr-1;
+      @extend .me-1;
     }
   }
 }

src/api/app/assets/stylesheets/webui/staging-workflow.scss

@@ -4,7 +4,7 @@ $request-obsolete-color: $dark;
 
 .legend {
   ul {
-    @extend .ml-2;
+    @extend .ms-2;
 
     li {
       span {

src/api/app/assets/stylesheets/webui/texts.scss

@@ -24,6 +24,6 @@
   font-size: 40%;
 }
 
-.ml-0_6 {
+.ms-0_6 {
   margin-left: 0.6rem !important;
 }

src/api/app/assets/stylesheets/webui/timeline.scss

@@ -19,7 +19,7 @@
 
         i.timeline-break, i.timeline-offset {
             @extend .py-2;
-            @extend .mr-2;
+            @extend .me-2;
             @extend .fas;
             @extend .fa-ellipsis-vertical;
             margin-left: 0.66rem;

src/api/app/components/add_review_dropdown_component.rb

@@ -15,13 +15,13 @@ def render?
   def reviewer_icon_and_text(review:)
     case
     when review.by_package
-      tag.i(nil, class: 'fa fa-archive mr-2') + "#{review.by_project}/#{review.by_package}"
+      tag.i(nil, class: 'fa fa-archive me-2') + "#{review.by_project}/#{review.by_package}"
     when review.by_user
-      tag.i(nil, class: 'fa fa-user mr-2') + "#{review.by_user}"
+      tag.i(nil, class: 'fa fa-user me-2') + "#{review.by_user}"
     when review.by_group
-      tag.i(nil, class: 'fa fa-users mr-2') + "#{review.by_group}"
+      tag.i(nil, class: 'fa fa-users me-2') + "#{review.by_group}"
     when review.by_project
-      tag.i(nil, class: 'fa fa-cubes mr-2') + "#{review.by_project}"
+      tag.i(nil, class: 'fa fa-cubes me-2') + "#{review.by_project}"
     end
   end
 end

src/api/app/components/build_result_for_architecture_component.html.haml

@@ -1,4 +1,4 @@
-.build-result.p-1.pl-3.p-sm-2.pl-sm-3.mx-2.mt-2{ class: "#{status_border_color(result_code)}",
+.build-result.p-1.ps-3.p-sm-2.ps-sm-3.mx-2.mt-2{ class: "#{status_border_color(result_code)}",
                                             data: { placement: 'auto',
                                                     toggle: 'popover',
                                                     html: 'true',
@@ -7,12 +7,12 @@
   .d-flex.align-items-baseline.mb-sm-2
     %span.fw-bold
       = result.architecture
-    .build-status.ml-3.d-inline.d-sm-none
+    .build-status.ms-3.d-inline.d-sm-none
       = build_status_icon_with_link
-    .repository-status.ml-3.d-inline.d-sm-none
+    .repository-status.ms-3.d-inline.d-sm-none
       = repository_status_icon
-    %i.fa-regular.fa-lg.fa-question-circle.text-info.ml-3
-  .build-status.mr-3.d-none.d-sm-block
+    %i.fa-regular.fa-lg.fa-question-circle.text-info.ms-3
+  .build-status.me-3.d-none.d-sm-block
     = build_status_icon_with_link
     %span
       = build_status

src/api/app/components/notification_action_bar_component.html.haml

@@ -3,12 +3,12 @@
     .d-flex.px-0.px-md-1
       .form-check
         = check_box_tag('select-all-notifications', 1, false, class: 'form-check-input')
-        %label.form-check-label.align-middle.mr-4#select-all-label{ for: 'select-all-notifications' } Select All
-      .mr-auto
+        %label.form-check-label.align-middle.me-4#select-all-label{ for: 'select-all-notifications' } Select All
+      .me-auto
         = button_tag(type: 'submit', class: 'btn btn-sm btn-outline-success px-3', id: 'done-button', disabled: 'disabled',
                      'data-disable-with': disable_with_content) do
           = button_text
       - if @show_read_all_button
-        .ml-4
+        .ms-4
           = link_to(button_text(all: true), @update_path, method: :put, remote: true,
                     class: 'btn btn-sm btn-outline-secondary px-3', 'data-disable-with': disable_with_content(all: true))

src/api/app/components/notification_action_bar_component.rb

@@ -21,7 +21,7 @@ def button_text(all: false)
   end
 
   def disable_with_content(all: false)
-    spinner = tag.i(class: 'fas fa-spinner fa-spin ml-2')
+    spinner = tag.i(class: 'fas fa-spinner fa-spin ms-2')
     button_text(all: all) + spinner
   end
 

src/api/app/components/notification_component.html.haml

@@ -1,6 +1,6 @@
 .list-group-item.px-0.px-md-1.py-3
   .row
-    .col-auto.pr-0
+    .col-auto.pe-0
       .form-check
         = check_box_tag('notification_ids[]', @notification.id, false,
                         id: "notification_ids_#{@notification.id}", class: 'form-check-input')
@@ -12,14 +12,14 @@
           = render NotificationNotifiableLinkComponent.new(@notification)
           %small.text-nowrap #{time_ago_in_words(@notification.created_at)} ago
           - if @notification.notifiable_type == 'BsRequest'
-            = render BsRequestStateBadgeComponent.new(bs_request: @notification.notifiable, css_class: 'ml-1')
-        .col-auto.actions.ml-auto.align-self-end.align-self-md-start
+            = render BsRequestStateBadgeComponent.new(bs_request: @notification.notifiable, css_class: 'ms-1')
+        .col-auto.actions.ms-auto.align-self-end.align-self-md-start
           = render NotificationMarkButtonComponent.new(@notification, @selected_filter, params[:page], params[:show_more])
-      .row.mt-1.pl-sm-4
-        .col-auto.pr-0
+      .row.mt-1.ps-sm-4
+        .col-auto.pe-0
           = render NotificationAvatarsComponent.new(@notification)
-        .col-auto.pl-xs-2
+        .col-auto.ps-xs-2
           = render NotificationActionDescriptionComponent.new(@notification)
-      .row.d-none.d-md-block.pl-4
+      .row.d-none.d-md-block.ps-4
         .col
           = render NotificationExcerptComponent.new(@notification)

src/api/app/components/notification_filter_component.html.haml

@@ -4,7 +4,7 @@
   = render NotificationFilterLinkComponent.new(text: 'Read', filter_item: { type: 'read' },
                                                selected_filter: @selected_filter)
 .list-group.list-group-flush.mt-5.mb-2
-  %h5.ml-3 Filter
+  %h5.ms-3 Filter
   = render NotificationFilterLinkComponent.new(text: 'Comments', amount: @count['Comment'],
                                                filter_item: { type: 'comments' }, selected_filter: @selected_filter)
   = render NotificationFilterLinkComponent.new(text: 'Requests', amount: @count['BsRequest'],
@@ -22,13 +22,13 @@
 
 - unless @projects_for_filter.empty?
   .list-group.list-group-flush.mt-5.mb-2
-    %h5.ml-3 Projects
+    %h5.ms-3 Projects
     - @projects_for_filter.each_pair do |project_name, amount|
       = render NotificationFilterLinkComponent.new(text: project_name, amount: amount, filter_item: { project: project_name },
                                                    selected_filter: @selected_filter)
 - unless @groups_for_filter.empty?
   .list-group.list-group-flush.mt-5.mb-2
-    %h5.ml-3 Groups
+    %h5.ms-3 Groups
     - @groups_for_filter.each_pair do |group_title, amount|
       = render NotificationFilterLinkComponent.new(text: group_title, amount: amount, filter_item: { group: group_title },
                                                    selected_filter: @selected_filter)

src/api/app/components/notification_filter_link_component.html.haml

@@ -1,4 +1,4 @@
 = link_to(my_notifications_path(@filter_item), class: "list-group-item list-group-item-action #{css_for_link}") do
   = @text
   - if @amount.positive?
-    %span.badge.align-text-top.ml-2{ class: css_for_badge_color }>= @amount
+    %span.badge.align-text-top.ms-2{ class: css_for_badge_color }>= @amount

src/api/app/components/request_decision_component.html.haml

@@ -16,12 +16,12 @@
             Forward submit request to
             #{helpers.project_or_package_link(project: forward[:project], package: forward[:package], short: true)}
     - if can_revoke_request?
-      = submit_tag 'Revoke request', name: 'revoked', class: 'btn btn-danger mr-2'
+      = submit_tag 'Revoke request', name: 'revoked', class: 'btn btn-danger me-2'
     - if can_reopen_request?
-      = submit_tag 'Reopen request', name: 'new', class: 'btn btn-warning mr-2'
+      = submit_tag 'Reopen request', name: 'new', class: 'btn btn-warning me-2'
     - if can_accept_request?
       - if can_decline_request?
         = submit_tag('Decline request', name: 'declined', title: 'Decline the request, as the author of the request you can reopen it again.',
-                     class: 'btn btn-danger mr-2')
+                     class: 'btn btn-danger me-2')
       = submit_tag('Accept request', name: 'accepted', title: 'Accept the request, this will apply the changes on the target.',
                    class: 'btn btn-primary', data: confirmation)

src/api/app/components/status_message_component.html.haml

@@ -9,7 +9,7 @@
         #{time_ago_in_words(@status_message.created_at)} ago
       - if policy(@status_message).update? && policy(@status_message).destroy?
         .float-end
-          = link_to(edit_status_message_path(@status_message), title: 'Edit news item', class: 'mr-2') do
+          = link_to(edit_status_message_path(@status_message), title: 'Edit news item', class: 'me-2') do
             %i.fas.fa-edit.text-secondary
           = link_to('#', title: 'Delete news item', data: { toggle: 'modal',
                                                        target: '#delete-news-item-modal',

src/api/app/components/watched_items_list_component.html.haml

@@ -6,11 +6,11 @@
         - name = "#{item.project}/#{item}"
         .d-flex.flex-row.flex-wrap.align-items-baseline
           = link_to(package_show_path(item.project, item), class: 'd-flex flex-row flex-wrap align-items-baseline') do
-            %i.fas.fa-archive.mr-1
+            %i.fas.fa-archive.me-1
             - name.split(%r{(/)}).each_slice(2).map(&:join).map(&:strip).each do |slice|
               %span.d-inline
                 = slice
-          = link_to('#', class: 'text-light ml-auto',
+          = link_to('#', class: 'text-light ms-auto',
                     data: { toggle: 'modal',
                             target: '#delete-item-from-watchlist-modal',
                             modal_title: 'Do you really want to remove this package from the watchlist?',
@@ -23,11 +23,11 @@
         - name = item.name
         .d-flex.flex-row.flex-wrap.align-items-baseline
           = link_to(project_show_path(item), class: 'd-flex flex-row flex-wrap align-items-baseline') do
-            %i.fas.fa-cubes.mr-1
+            %i.fas.fa-cubes.me-1
             - name.split(/(:)/).each_slice(2).map(&:join).map(&:strip).each do |slice|
               %span.d-inline
                 = slice
-          = link_to('#', class: 'text-light ml-auto',
+          = link_to('#', class: 'text-light ms-auto',
                     data: { toggle: 'modal',
                             target: '#delete-item-from-watchlist-modal',
                             modal_title: 'Do you really want to remove this project from the watchlist?',
@@ -38,10 +38,10 @@
         - name = "##{item.number} #{helpers.request_type_of_action(item)}"
         .d-flex.flex-row.flex-wrap.align-items-baseline.collapsible-tooltip-parent
           = link_to(request_show_path(item.number), class: 'text-word-break-all') do
-            %i.fas.fa-code-pull-request.mr-1
+            %i.fas.fa-code-pull-request.me-1
             = name
           %i.fa.fa-question-circle.text-light.px-2.collapsible-tooltip{ title: 'Click to keep it open' }
-          = link_to('#', class: 'text-light ml-auto',
+          = link_to('#', class: 'text-light ms-auto',
                     data: { toggle: 'modal',
                             target: '#delete-item-from-watchlist-modal',
                             modal_title: 'Do you really want to remove this request from the watchlist?',
@@ -51,7 +51,7 @@
         .extended-info.mt-2.mb-3.collapsed
           .triangle.left
           .extended-info-content
-            = render BsRequestStateBadgeComponent.new(bs_request: item, css_class: 'mt-2 ml-2')
+            = render BsRequestStateBadgeComponent.new(bs_request: item, css_class: 'mt-2 ms-2')
             %p.px-2.pt-2= render(BsRequestActionSourceAndTargetComponent.new(item))
 - else
   %p.text-muted= empty_list_text

src/api/app/components/workflow_run_filter_component.html.haml

@@ -2,7 +2,7 @@
   = render WorkflowRunFilterLinkComponent.new(token: @token, text: 'All', amount: @count['all'],
                                               filter_item: {}, selected_filter: @selected_filter)
 .row.list-group-flush.mt-5
-  %h5.ml-3.mr-2 Status
+  %h5.ms-3.me-2 Status
   %i.fa.fa-question-circle.text-info{ data: { placement: 'bottom', toggle: 'popover', html: 'true',
                                               content: '<p>Filter your workflow runs by the current state</p>
                                                         <p><b>Succeeded: </b>Workflow run execution was successful</p>
@@ -15,7 +15,7 @@
   = render WorkflowRunFilterLinkComponent.new(token: @token, text: 'Failed', amount: @count['fail'],
                                               filter_item: { status: 'fail' }, selected_filter: @selected_filter)
 .row.list-group-flush.mt-5
-  %h5.ml-3.mr-2 Event Type
+  %h5.ms-3.me-2 Event Type
   %i.fa.fa-question-circle.text-info{ data: { placement: 'bottom', toggle: 'popover', html: 'true',
                                               content: '<p>Filter your workflow runs by the event reported by the SCM,
                                                         which triggered the execution in the Open Build Service</p>

src/api/app/components/workflow_run_filter_link_component.html.haml

@@ -1,4 +1,4 @@
 = link_to(token_workflow_runs_path(@token, @filter_item), class: "list-group-item list-group-item-action #{css_for_link}") do
   = @text
   - if @amount.positive?
-    %span.badge.align-text-top.ml-2{ class: css_for_badge_color }>= @amount
+    %span.badge.align-text-top.ms-2{ class: css_for_badge_color }>= @amount

src/api/app/components/workflow_run_request_action_filter_component.html.haml

@@ -1,7 +1,7 @@
 = form_with(url: token_workflow_runs_path(@token_id), method: :get, local: true, class: 'row row-cols-auto') do
   = hidden_field_tag('generic_event_type', @generic_event_type)
   = label_tag('request_action', 'Action', class: 'visually-hidden')
-  .input-group.mr-sm-2
+  .input-group.me-sm-2
     .input-group-prepend
       .input-group-text
         Action

src/api/app/helpers/webui/buildresult_helper.rb

@@ -27,7 +27,7 @@ def collapse_link(expanded, main_name, repository_name = nil)
     collapse_id = repository_name ? "#{main_name}-#{repository_name}" : main_name
     collapse_text = repository_name ? 'repository' : 'package'
 
-    link_to('#', aria: { controls: "collapse-#{collapse_id}", expanded: expanded }, class: 'px-2 ml-auto',
+    link_to('#', aria: { controls: "collapse-#{collapse_id}", expanded: expanded }, class: 'px-2 ms-auto',
                  data: { toggle: 'collapse' }, href: ".collapse-#{collapse_id}", role: 'button') do
       capture do
         concat(tag.i(nil, class: ['fas', 'fa-chevron-left', 'expander'], title: "Show build results for this #{collapse_text}"))