show.haml in pact_broker-2.75.0

- old
+ new

@@ -1,14 +1,14 @@
 %body
   %link{rel: 'stylesheet', href: "#{base_url}/css/bootstrap.min.css"}
   %link{rel: 'stylesheet', href: "#{base_url}/stylesheets/index.css"}
   %link{rel: 'stylesheet', href: "#{base_url}/stylesheets/matrix.css"}
-  %script{type: 'text/javascript', src: "#{base_url}/javascripts/jquery-3.3.1.min.js"}
+  %script{type: 'text/javascript', src: "#{base_url}/javascripts/jquery-3.5.1.min.js"}
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/jquery.tablesorter.min.js"}
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/matrix.js"}
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/clipboard.js"}
-  %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.min.js"}
+  %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.bundle.min.js"}
 
   .container
     .navbar-right
       %a{href: "#{base_url}/"}
         Home
@@ -23,17 +23,18 @@
           = error
 
     %form{action: "#{base_url}/matrix", onsubmit:'return onSubmit()'}
       - selectors.each_with_index do | selector, index |
         .selector
-          %label{for: "pacticipant#{index}"}
-            Pacticipant name
-          %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", class: 'pacticipant_name', value: selector.pacticipant_name}
+          .field
+            %label{for: "pacticipant#{index}"}
+              Pacticipant name
 
-          .input-group
+            %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", class: 'pacticipant_name', value: selector.pacticipant_name}
 
-          .input-group
+          .field
+
             %select{ name: "ignorethis#{index}", class: 'version-selectorizor' }
               %option{ value: 'specify-all-versions', selected: selector.specify_all_versions }
                 All versions
               %option{ value: 'specify-latest', selected: selector.specify_latest }
                 Latest version
@@ -57,24 +58,22 @@
             = options.latest ? 'To' : 'With all'
           %input{name: 'tag', id: 'to', value: options.tag }
           %input{name: 'latest', value: options.latest.to_s, hidden: true}
 
 
-      %div.top-of-group
+      %div.top-of-group.form-check
+        %input{type: 'radio', name: "latestby", class: 'form-check-input', value: '', id: 'all_rows', checked: options.all_rows_checked}
+        %label{for: 'all_rows', class: "form-check-label"}
+          Show all results
+      %div.form-check
+        %input{type: 'radio', name: "latestby", class: 'form-check-input', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked}
+        %label{for: 'cvpv', class: "form-check-label"}
+          Show latest result for each consumer version/provider version
+      %div.form-check
         .input-group
-          %input{type: 'radio', name: "latestby", class: '', value: '', id: 'all_rows', checked: options.all_rows_checked}
-          %label{for: 'all_rows'}
-            Show all results
-      %div
-        .input-group
-          %input{type: 'radio', name: "latestby", class: '', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked}
-          %label{for: 'cvpv'}
-            Show latest result for each consumer version/provider version
-      %div
-        .input-group
-          %input{type: 'radio', name: "latestby", class: '', value: 'cvp', id: 'cvp', checked: options.cvp_checked}
-          %label{for: 'cvp'}
+          %input{type: 'radio', name: "latestby", class: 'form-check-input', value: 'cvp', id: 'cvp', checked: options.cvp_checked}
+          %label{for: 'cvp', class: "form-check-label"}
             Show latest result for each consumer version/provider
       %div.top-of-group
         - limit_text = "Note that the 'Show latest...' options are summaries of the 'Show all results' query, and that the limit applies to the underlying query, rather than the number of rows returned in the summary."
         %label{for: "limit", "title": limit_text, "data-toggle": "tooltip", "data-placement": "right"}
           Limit*
@@ -88,26 +87,26 @@
     %table.table.table-bordered.table-striped{id: 'matrix'}
       %thead
         %tr
           %th.consumer
             = "Consumer"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.consumer-version
             = "Consumer Version"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.pact-published
             = "Pact Published"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.provider
             = "Provider"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.provider-version
             = "Provider Version"
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
           %th.verification-result
             Pact verified
-            %span.glyphicon.glyphicon-sort.sort
+            %span.sort-icon.sort
       %tbody
       - lines.each do | line |
         %tr
           %td.consumer{'data-sort-value' => line.consumer_name, 'data-consumer-name' => line.consumer_name}
             %a{href: line.consumer_name_url}
@@ -116,20 +115,20 @@
             %div.clippable
               %a{href: line.consumer_version_number_url}
                 = line.display_consumer_version_number
               - if line.display_consumer_version_number
                 %button.clippy.invisible{ title: "Copy to clipboard" }
-                  %span.glyphicon.glyphicon-copy
+                  %span.copy-icon
             - line.latest_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-primary
+                  .tag.badge.badge-primary
                     = tag.name
             - line.other_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-default
+                  .tag.badge.badge-secondary
                     = tag.name
           %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip", "title": line.pact_version_sha_message, "data-placement": "right", "data-pact-version-sha": line.pact_version_sha}
             %a{href: line.pact_publication_date_url}
               - if options.all_rows_checked
                 = "#{line.pact_publication_date} (revision #{line.pact_revision_number})"
@@ -143,24 +142,24 @@
             %div.clippable
               %a{href: line.provider_version_number_url}
                 = line.display_provider_version_number
               - if line.display_provider_version_number
                 %button.clippy.invisible{ title: "Copy to clipboard" }
-                  %span.glyphicon.glyphicon-copy
+                  %span.copy-icon
             - line.latest_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-primary
+                  .tag.badge.badge-primary
                     = tag.name
             - line.other_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
-                  .tag.label.label-default
+                  .tag.badge.badge-secondary
                     = tag.name
           %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip", "data-placement": "left"}
             %a{href: line.verification_status_url}
               - if options.all_rows_checked && line.number
                 = "#{line.verification_status} (number #{line.number})"
               - else
                 = line.verification_status
             - if line.pre_verified_message
-              %span.glyphicon.glyphicon-time.pre-verified-icon{"aria-hidden": true}
+              %span.pre-verified-icon{"aria-hidden": true}