Bootstrap5 upgrade (#298)

* fix person and event fields

* fix qualification and event attendance views

* fix popover

* replace inline styles and old bootstrap classes

* fix include blank for dropdown selects

* fix popovers

* replace all camelCased scss variables to kebab-case

* fix specs

app/assets/stylesheets/hitobito/customizable/_variables.scss

@@ -11,97 +11,97 @@
 // Grays
 // -------------------------
 $black:                 #474E5D !default;
-$grayDarker:            #797E89 !default;
-$grayDark:              #8b8b8b !default;
+$gray-darker:           #797E89 !default;
+$gray-dark:             #8b8b8b !default;
 $gray:                  #979CA6 !default;
-$grayLight:             #E8EBF0 !default;
-$grayLighter:           #F8F9FA !default;
+$gray-light:            #E8EBF0 !default;
+$gray-lighter:          #F8F9FA !default;
 $white:                 #fff !default;
 
 $blackberry:            #632949 !default;
-$lightBlackberry:       #8b426b !default;
-$darkBlackberry:        #521d3a !default;
-$pbsRed:                #d84e23 !default;
-$pbsLightGreen:         #b1c9a4 !default;
+$light-blackberry:      #8b426b !default;
+$dark-blackberry:       #521d3a !default;
+$pbs-red:               #d84e23 !default;
+$pbs-light-green:       #b1c9a4 !default;
 
 // Colors
 // ----------------------------
-$blue:                  $darkBlackberry !default;
-$blueDark:              darken($blue, 10%) !default;
-$green:                 $pbsLightGreen !default;
-$greenDark:             darken($green, 10%) !default;
+$blue:                  $dark-blackberry !default;
+$blue-dark:             darken($blue, 10%) !default;
+$green:                 $pbs-light-green !default;
+$green-dark:            darken($green, 10%) !default;
 
-$btnDangerBackground:   $pbsRed;
+$btn-danger-background: $pbs-red;
 
 $orange:                #DC795B;
-$orangeDark:            #C75B3B;
+$orange-dark:           #C75B3B;
 $purple:                $blackberry;
-$purpleDark:            $blackberry;
+$purple-dark:           $blackberry;
 
 $red:                   $orange !default;
 
-$textColor:             $black !default;
-$borderColor:           $grayLight !default;
+$text-color:            $black !default;
+$border-color:          $gray-light !default;
 
-$pageBackground:        $blackberry !default;
-$contentBackground:     $grayLight;
-$footerBackground:      $darkBlackberry;
-$bodyBackground:        $blue;
+$page-background:       $blackberry !default;
+$content-background:    $gray-light;
+$footer-background:     $dark-blackberry;
+$body-background:       $blue;
 
-$focusColor:            $purple;
-$shadowColor:           darken($pageBackground, 10%);
-$linkColor:             $darkBlackberry !default;
-$linkColorHover:        lighten($darkBlackberry, 20%) !default;
+$focus-color:           $purple;
+$shadow-color:          darken($page-background, 10%);
+$link-color:            $dark-blackberry !default;
+$link-color-hover:      lighten($dark-blackberry, 20%) !default;
 
-$footerColor:           $white;
-$footerColorHover:      $white;
+$footer-color:          $white;
+$footer-color-hover:    $white;
 
-$tableColorHover:       lighten(#925D97, 50%);
+$table-color-hover:     lighten(#925D97, 50%);
 
-$chartBars:             $pbsLightGreen;
+$chart-bars:            $pbs-light-green;
 
 // Typography
 // -------------------------
 
-$sansFontFamily:        'Source Sans Pro', sans-serif;
-$headingFontFamily:     'Source Sans Pro', sans-serif; //'Quicksand', $sansFontFamily !default;
-$baseFontFamily:        'Source Sans Pro', sans-serif; //'Varela Round', $sansFontFamily !default;
-$headingsFontWeight:    normal !default; // instead of browser default, bold
+$sans-font-family:      'Source Sans Pro', sans-serif;
+$heading-font-family:   'Source Sans Pro', sans-serif; //'Quicksand', $sans-font-family !default;
+$base-font-family:      'Source Sans Pro', sans-serif; //'Varela Round', $sans-font-family !default;
+$headings-font-weight:  normal !default; // instead of browser default, bold
 
 // Decoration
 // -------------------------
-$borderRadius:           6px;
+$border-radius:         6px;
 
 // Rhythm
 // -------------------------
-$vSpace:                24px;
+$v-space:               24px;
 
 
 // FLUID GRID
 // --------------------------------------------------
 
 // Default
 // -------------------------
-$fluidGridColumnWidth:         6.382978723% !default;
-$fluidGridGutterWidth:         2.127659574% !default;
+$fluid-grid-column-width:        6.382978723% !default;
+$fluid-grid-gutter-width:        2.127659574% !default;
 
 // Portrait tablet to default desktop
 // -------------------------
-$fluidGridColumnWidthTablet:   5.801104972% !default;
-$fluidGridGutterWidthTablet:   2.762430939% !default;
+$fluid-grid-column-width-tablet:  5.801104972% !default;
+$fluid-grid-gutter-width-tablet:  2.762430939% !default;
 
 // Large desktop and up
 // -------------------------
-$fluidGridColumnWidthLarge:    5.982905983% !default;
-$fluidGridGutterWidthLarge:    2.564102564% !default;
+$fluid-grid-column-width-large:   5.982905983% !default;
+$fluid-grid-gutter-width-large:   2.564102564% !default;
 
 
 // RESPONSIVE DESIGN
 // --------------------------------------------------
 
 // Media widths
 // -------------------------
-$mediaPhone:              480px !default;
-$mediaTablet:             768px !default;
-$mediaDesktop:            980px !default;
-$mediaLarge:              1200px !default; // and upper
+$media-phone:           480px !default;
+$media-tablet:          768px !default;
+$media-desktop:         980px !default;
+$media-large:           1200px !default; // and upper

app/assets/stylesheets/hitobito/customizable/_wagon.scss

@@ -7,7 +7,7 @@
 #page {
   padding: 5px 10px 90px;
   margin: 0;
-  background: $pageBackground;
+  background: $page-background;
 
   @include responsive(mediaTablet) {
     margin: 0;
@@ -42,7 +42,7 @@ table.attendance {
 }
 
 table tr.grouping td {
-  background-color: $grayLight !important;
+  background-color: $gray-light !important;
 }
 
 .separated {
@@ -72,5 +72,5 @@ table tr.grouping td {
 }
 
 .birth_year {
-  background-color: $chartBars;
+  background-color: $chart-bars;
 }

app/views/census_evaluation/base/index.html.haml

@@ -9,9 +9,9 @@
 
 = render 'infos'
 
-#main.row-fluid
+#main.row
   -if @total
-    %article.span8
+    %article.col-8
       = render 'totals'
 
   -else

app/views/event/attendances/_list.html.haml

@@ -22,9 +22,9 @@
                            min: 0,
                            step: 0.5,
                            size: 10,
-                           class: 'span2')
+                           class: 'form-control form-control-sm float-start w-25')
         - if p.bsv_days.nil?
-          %span.muted{ style: 'float:xleft;' }
+          %span.muted.float-start.mt-1.ms-2
             = t('.not_persisted')
-            %span{ style: 'color: red' }
+            %span.text-danger
               !

app/views/event/attendances/index.html.haml

@@ -18,4 +18,4 @@
 
   .btn-toolbar
     .btn-group
-      = button_tag(t('global.button.save'), class: 'btn btn-primary')
+      = button_tag(t('global.button.save'), class: 'btn btn-sm btn-primary')

app/views/event/participation_contact_datas/_fields_pbs.html.haml

@@ -7,14 +7,14 @@
   - if entry.show_attr?(:title)
     = f.labeled_input_field :title
   - if entry.show_attr?(:salutation)
-    = f.labeled_collection_select :salutation, Salutation.available, :first, :last, { include_blank: true }, class: 'span6'
+    = f.labeled_collection_select :salutation, Salutation.available, :first, :last, { include_blank: "" }, class: 'form-select form-select-sm'
   - if entry.show_attr?(:correspondence_language)
     = f.labeled_collection_select(:correspondence_language,
                                   Settings.application.languages.to_hash,
                                   :first,
                                   :last,
                                   { prompt: true },
-                                  class: 'span6')
+                                  class: 'form-select form-select-sm')
   - if entry.show_attr?(:grade_of_school)
     = f.labeled_input_field :grade_of_school, help_inline: t('people.fields_pbs.non_automatic_field')
 

app/views/event/qualifications/index.html.haml

@@ -23,5 +23,5 @@
 
   .btn-group
     = button_tag(t('event.qualifications.index.save'),
-                 class: 'btn btn-primary',
+                 class: 'btn btn-sm btn-primary',
                  data: { disable_with: t('event.qualifications.index.save') })

app/views/events/_expected_participants_fields.html.haml

@@ -1,24 +1,34 @@
 - entry.used?(:expected_participants_wolf_f) do
   = f.labeled(:expected_participants, t('activerecord.attributes.event.expected_participants'), nil, class: 'controls-row') do
     .row
-      .span1
-      .span1= t('activerecord.attributes.event.expected_participants_wolf')
-      .span1= t('activerecord.attributes.event.expected_participants_pfadi')
-      .span1= t('activerecord.attributes.event.expected_participants_pio')
-      .span1= t('activerecord.attributes.event.expected_participants_rover')
-      .span1= t('activerecord.attributes.event.expected_participants_leitung')
+      .col-1
+      .col-1= t('activerecord.attributes.event.expected_participants_wolf')
+      .col-1= t('activerecord.attributes.event.expected_participants_pfadi')
+      .col-1= t('activerecord.attributes.event.expected_participants_pio')
+      .col-1= t('activerecord.attributes.event.expected_participants_rover')
+      .col-1= t('activerecord.attributes.event.expected_participants_leitung')
     .row
-      .span1 F
-      = f.string_field(:expected_participants_wolf_f, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_pfadi_f, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_pio_f, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_rover_f, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_leitung_f, class: 'span1', maxlength: 4)
+      .col-1 F
+      .col-1
+        = f.string_field(:expected_participants_wolf_f)
+      .col-1
+        = f.string_field(:expected_participants_pfadi_f)
+      .col-1
+        = f.string_field(:expected_participants_pio_f)
+      .col-1
+        = f.string_field(:expected_participants_rover_f)
+      .col-1
+        = f.string_field(:expected_participants_leitung_f)
     .row
-      .span1 M
-      = f.string_field(:expected_participants_wolf_m, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_pfadi_m, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_pio_m, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_rover_m, class: 'span1', maxlength: 4)
-      = f.string_field(:expected_participants_leitung_m, class: 'span1', maxlength: 4)
+      .col-1 M
+      .col-1
+        = f.string_field(:expected_participants_wolf_m)
+      .col-1
+        = f.string_field(:expected_participants_pfadi_m)
+      .col-1
+        = f.string_field(:expected_participants_pio_m)
+      .col-1
+        = f.string_field(:expected_participants_rover_m)
+      .col-1
+        = f.string_field(:expected_participants_leitung_m)
     .row.help-block= t('.expected_participants_help_inline')

app/views/events/_fields_pbs.html.haml

@@ -23,7 +23,7 @@
     = f.labeled_input_field :bsv_days
 
   - entry.used?(:j_s_kind) do
-    = f.labeled(:j_s_kind) do
+    = f.labeled(:j_s_kind, class: 'row') do
       = f.inline_radio_button(:j_s_kind, '', t('.j_s_kind_none'), false)
       - Event::Camp::J_S_KINDS.each do |kind|
         = f.inline_radio_button(:j_s_kind, kind, t(".j_s_kind_#{kind}"), false)
@@ -32,9 +32,9 @@
                                                :j_s_security_mountain,
                                                :j_s_security_water)
   - if j_s_security_attrs.present?
-    = f.labeled(:j_s_security) do
+    = f.labeled(:j_s_security, class: 'd-flex') do
       - j_s_security_attrs.each do |attr|
-        = f.boolean_field(attr, { caption: Event.human_attribute_name(attr) })
+        = f.boolean_field(attr, { caption: Event.human_attribute_name(attr), class: 'me-1 ' })
 
   = render 'expected_participants_fields', f: f
 

app/views/events/_form_tabs_pbs.html.haml

@@ -4,4 +4,4 @@
 -#  https://github.com/hitobito/hitobito_pbs.
 
 - if entry.is_a?(Event::Campy)
-  %li= link_to(t('events.show_right_advisors.advisors'), '#advisors', data: { toggle: 'tab' })
+  %li= link_to(t('events.show_right_advisors.advisors'), '#advisors', data: { bs_toggle: 'tab' }, class: 'nav-link')

app/views/events/_location_fields.html.haml

@@ -6,18 +6,18 @@
 - if entry.is_a?(Event::Campy)
   = f.labeled_input_field(:location, label: t('.location_caption'), help: t('.location_help'), placeholder: t('.location_placeholder'))
   = f.labeled(:canton) do
-    .span6.shown{style: 'margin-left: 0px'}
+    .col-6.shown.ms-0
       = f.collection_select(:canton,
                             camp_possible_canton_labels,
                             :first,
                             :last,
-                            { include_blank: true },
-                             class: 'chosen-select',
+                            { include_blank: "" },
+                             class: 'chosen-select form-select form-select-sm',
                              data: { placeholder: ' ' })
     .canton-specific-help-texts
       - @canton_specific_help_texts.each do |help_text|
         - if help_text[:title].present?
-          .help-block{id: help_text[:id], style: 'clear: both'}
+          .help-block{id: help_text[:id], class: 'clear-both'}
             - if help_text[:url].blank?
               = help_text[:title]
             - else
@@ -26,8 +26,8 @@
   = f.labeled_input_field(:altitude)
   = f.labeled_input_field(:emergency_phone, label: t('.emergency_phone_field'))
   = f.labeled_input_field(:landlord)
-  = f.labeled_input_field(:landlord_permission_obtained, caption: t('.landlord_permission_obtained_caption'))
-  = f.labeled_input_field(:local_scout_contact_present, caption: t('.local_scout_contact_present_caption'),
+  = f.labeled_boolean_field(:landlord_permission_obtained, caption: t('.landlord_permission_obtained_caption'))
+  = f.labeled_boolean_field(:local_scout_contact_present, caption: t('.local_scout_contact_present_caption'),
                                                         'data-enable' => 'event_local_scout_contact')
   = f.labeled_input_field(:local_scout_contact)
 

app/views/events/courses/_buttons_pbs.html.haml

@@ -1,6 +1,6 @@
 = action_button(t('event.lists.advanced_bsv_export_button'),
-                '#',
+                nil,
                 :download,
                 title: t('event.lists.bsv_export_button'),
-                data: { toggle: 'popover',
-                        content: render('popover_bsv_export', advanced: true).to_str })
+                data: { bs_toggle: 'popover',
+                        bs_content: render('popover_bsv_export', advanced: true).to_str })

app/views/group/abteilung/geolocations/_geolocation_fields.html.haml

@@ -3,6 +3,6 @@
 -#  or later. See the COPYING file at the top-level directory or at
 -#  https://github.com/hitobito/hitobito_pbs.
 
-= f.input_field(:lat, class: 'span4', placeholder: t('.lat'))
-= f.input_field(:long, class: 'span4', placeholder: t('.long'))
+= f.input_field(:lat, class: 'd-inline me-2', placeholder: t('.lat'))
+= f.input_field(:long, class: 'd-inline', placeholder: t('.long'))
 

app/views/group/pending_approvals/_approved_approvals.html.haml

@@ -8,7 +8,7 @@
     %h3= t('.title')
     = form_tag(approved_approvals_group_url(@group.id), class: 'form-inline', method: :get, remote: true) do
       = label_tag :course_kind_id, t('.course_kind')
-      = select_tag(:course_kind_id, options_from_collection_for_select(@approved_course_kinds, :id, :to_s, course_kind_id), prompt: t('.course_kind_all'), onchange: '$(this.form).submit();')
+      = select_tag(:course_kind_id, options_from_collection_for_select(@approved_course_kinds, :id, :to_s, course_kind_id), prompt: t('.course_kind_all'), onchange: '$(this.form).submit();', class: 'form-select form-select-sm ms-3')
 
     = render partial: 'table', locals: { approvals: @approved_approvals, approved: true }
 

app/views/groups/_fields_pbs.html.haml

@@ -10,7 +10,7 @@
     - if info.gsub(' ', '').present?
       .control-group
         .controls
-          .help-inline{ :style => "padding-left: 0; margin-left: 0" }= info.html_safe
+          .help-inline.ps-0.ms-0= info.html_safe
 
   - entry.modifiable?(:website) do
     = f.labeled_input_field :website
@@ -44,7 +44,3 @@
 = field_set_tag do
   - entry.modifiable?(:group_health) do
     = f.labeled_input_field(:group_health, help: t('.group_health_info'))
-
-- if entry.parent.is_a?(Group::Root)
-  = field_set_tag do
-    = f.labeled_input_field :hostname

app/views/member_counts/edit.html.haml

@@ -12,10 +12,10 @@
             method: :put) do |f|
   - MemberCount::COUNT_CATEGORIES.each do |col|
     = f.labeled(col) do
-      = f.input_field "#{col}_f", class: 'span1'
+      = f.input_field "#{col}_f", class: 'd-inline'
       = f.help_inline t('global.gender.female_short')
        
        
        
-      = f.input_field "#{col}_m", class: 'span1'
+      = f.input_field "#{col}_m", class: 'd-inline'
       = f.help_inline t('global.gender.male_short')