Remove .card-title from .card-header for BS4 migration

Replaces .card-header > hX.card-title with hX.card-header to remove
.card-title. At a occurrence where bold styling is not necessary,
div.card-header is used instead.
By full removal of .card-title at the moment, all workarounds for
BS4's card-title are removed as well.

More information: https://getbootstrap.com/docs/4.0/migration/#panelsSigned-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/assets/stylesheets/bootstrap_migration.scss

@@ -238,10 +238,6 @@ h3.popover-header {
 }
 
 .card {
-  .card-title {
-    margin-bottom: 0;
-  }
-
   &.card-without-border {
     @extend .border-0;
   }
@@ -255,13 +251,6 @@ h3.popover-header {
   }
 }
 
-.card-header {
-  h3.card-title,
-  h4.card-title {
-    margin-top: 0;
-  }
-}
-
 .nav-tabs {
   // Override bootstrap's default border
   border-bottom: 0;

app/assets/stylesheets/framework/panels.scss

@@ -53,8 +53,3 @@
     margin-top: $gl-padding;
   }
 }
-
-.card-title {
-  font-size: inherit;
-  line-height: inherit;
-}

app/assets/stylesheets/framework/terms.scss

@@ -19,17 +19,12 @@
       justify-content: space-between;
       line-height: $line-height-base;
 
-      .card-title {
+      .logo-text {
+        width: 55px;
+        height: 24px;
         display: flex;
-        align-items: center;
-
-        .logo-text {
-          width: 55px;
-          height: 24px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
+        flex-direction: column;
+        justify-content: center;
       }
 
       .navbar-collapse {

app/views/admin/groups/show.html.haml

@@ -63,10 +63,9 @@
 
     .card
       .card-header
-        %h3.card-title
-          = _('Projects')
-          %span.badge.badge-pill
-            #{@group.projects.count}
+        = _('Projects')
+        %span.badge.badge-pill
+          #{@group.projects.count}
       %ul.content-list
         - @projects.each do |project|
           %li

app/views/layouts/terms.html.haml

@@ -16,19 +16,18 @@
           .content{ id: "content-body" }
             .card
               .card-header
-                .card-title
-                  = brand_header_logo
-                  - logo_text = brand_header_logo_type
-                  - if logo_text.present?
-                    %span.logo-text.prepend-left-8
-                      = logo_text
-                - if header_link?(:user_dropdown)
-                  .navbar-collapse
-                    %ul.nav.navbar-nav
-                      %li.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.dropdown-menu-right
-                          = render 'layouts/header/current_user_dropdown'
+                = brand_header_logo
+                - logo_text = brand_header_logo_type
+                - if logo_text.present?
+                  %span.logo-text.prepend-left-8
+                    = logo_text
+              - if header_link?(:user_dropdown)
+                .navbar-collapse
+                  %ul.nav.navbar-nav
+                    %li.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.dropdown-menu-right
+                        = render 'layouts/header/current_user_dropdown'
               = yield

app/views/projects/branches/_panel.html.haml

@@ -9,8 +9,7 @@
 
 .card.prepend-top-10
   .card-header
-    %h4.card-title
-      = panel_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)

app/views/projects/protected_branches/shared/_branches_list.html.haml

 .protected-branches-list.js-protected-branches-list.qa-protected-branches-list
   - if @protected_branches.empty?
     .card-header.bg-white
-      %h3.card-title.mb-0
-        Protected branch (#{@protected_branches_count})
+      Protected branch (#{@protected_branches_count})
     %p.settings-message.text-center
       There are currently no protected branches, protect a branch with the form above.
   - else

app/views/projects/protected_branches/shared/_create_protected_branch.html.haml

@@ -2,8 +2,7 @@
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-branches-settings' }
   .card
     .card-header
-      %h3.card-title
-        Protect a branch
+      Protect a branch
     .card-body
       = form_errors(@protected_branch)
       .form-group.row

app/views/projects/protected_tags/shared/_create_protected_tag.html.haml

@@ -2,8 +2,7 @@
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-tags-settings' }
   .card
     .card-header
-      %h3.card-title
-        Protect a tag
+      Protect a tag
     .card-body
       = form_errors(@protected_tag)
       .form-group.row

app/views/projects/protected_tags/shared/_tags_list.html.haml

 .protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
     .card-header
-      %h3.card-title
-        Protected tag (#{@protected_tags_count})
+      Protected tag (#{@protected_tags_count})
     %p.settings-message.text-center
       There are currently no protected tags, protect a tag with the form above.
   - else

app/views/projects/registry/repositories/index.html.haml

@@ -18,8 +18,7 @@
     .col-lg-12
       .card
         .card-header
-          %h4.card-title
-            = s_('ContainerRegistry|How to use the Container Registry')
+          = s_('ContainerRegistry|How to use the Container Registry')
         .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')

app/views/projects/services/prometheus/_metrics.html.haml

@@ -2,9 +2,8 @@
 
 .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.badge-pill.js-monitored-count 0
+    = s_('PrometheusService|Common metrics')
+    %span.badge.badge-pill.js-monitored-count 0
   .card-body
     .loading-metrics.js-loading-metrics
       %p.prepend-top-10.prepend-left-10
@@ -17,10 +16,9 @@
 
 .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.badge-pill.js-env-var-count 0
+    = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
+    = s_('PrometheusService|Missing environment variable')
+    %span.badge.badge-pill.js-env-var-count 0
   .card-body.hidden
     .flash-container
       .flash-notice

app/views/projects/triggers/_index.html.haml

@@ -3,8 +3,7 @@
     = render "projects/triggers/content"
     .card
       .card-header
-        %h4.card-title
-          Manage your project's triggers
+        Manage your project's triggers
       .card-body
         = render "projects/triggers/form", btn_text: "Add trigger"
         %hr

changelogs/unreleased/46884-remove-card-title.yml

+---
+title: Remove .card-title from .card-header for BS4 migration
+merge_request: 19335
+author: Takuya Noguchi
+type: other