Merge pull request #537 from ita-social-projects/Bootstrap5

Bootstrap5

Gemfile

@@ -14,7 +14,7 @@ gem "redis", "~> 4.0"
 gem "sass-rails", ">= 6"
 gem "hotwire-rails"
 gem "importmap-rails", "~> 1.1"
-gem "bootstrap", "~> 4.6.0"
+gem "bootstrap"
 gem "jquery-rails"
 # Use Active Model has_secure_password
 # gem 'bcrypt', '~> 3.1.7'

Gemfile.lock

@@ -82,17 +82,16 @@ GEM
     any_login (1.5.2)
       rails (>= 6.0)
     ast (2.4.2)
-    autoprefixer-rails (10.4.13.0)
+    autoprefixer-rails (10.4.15.0)
       execjs (~> 2)
     bcrypt (3.1.16)
     bigdecimal (3.0.2)
     bindex (0.8.1)
     bootsnap (1.9.3)
       msgpack (~> 1.0)
-    bootstrap (4.6.2)
+    bootstrap (5.3.2)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
-      sassc-rails (>= 2.0.0)
+      popper_js (>= 2.11.8, < 3)
     builder (3.2.4)
     cancancan (3.3.0)
     capistrano (3.17.1)
@@ -162,8 +161,8 @@ GEM
       dotenv (= 2.7.6)
       railties (>= 3.2)
     ed25519 (1.3.0)
-    erubi (1.10.0)
-    execjs (2.8.1)
+    erubi (1.12.0)
+    execjs (2.9.1)
     factory_bot (6.2.0)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.2.0)
@@ -190,8 +189,8 @@ GEM
     faraday-net_http_persistent (1.2.0)
     faraday-patron (1.0.0)
     faraday-rack (1.0.0)
-    ffi (1.15.4)
-    ffi (1.15.4-x64-mingw32)
+    ffi (1.16.3)
+    ffi (1.16.3-x64-mingw32)
     flipper (0.26.0)
       concurrent-ruby (< 2)
     flipper-active_record (0.26.0)
@@ -217,7 +216,7 @@ GEM
     httparty (0.20.0)
       mime-types (~> 3.0)
       multi_xml (>= 0.5.2)
-    i18n (1.8.11)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     i18n_data (0.11.0)
     image_processing (1.12.2)
@@ -246,9 +245,9 @@ GEM
     listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.13.0)
+    loofah (2.21.4)
       crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
+      nokogiri (>= 1.12.0)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
     marcel (1.0.2)
@@ -259,8 +258,8 @@ GEM
     mime-types-data (3.2021.1115)
     mini_magick (4.11.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.4)
-    minitest (5.15.0)
+    mini_portile2 (2.8.5)
+    minitest (5.20.0)
     msgpack (1.4.2)
     multi_json (1.15.0)
     multi_xml (0.6.0)
@@ -309,7 +308,7 @@ GEM
       ast (~> 2.4.1)
     pg (1.2.3)
     pg (1.2.3-x64-mingw32)
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     pronto (0.11.0)
       gitlab (~> 4.4, >= 4.4.0)
       httparty (>= 0.13.7)
@@ -326,7 +325,7 @@ GEM
     public_suffix (5.0.3)
     puma (5.5.2)
       nio4r (~> 2.0)
-    racc (1.7.1)
+    racc (1.7.3)
     rack (2.2.8)
     rack-mini-profiler (2.3.3)
       rack (>= 1.2.0)
@@ -351,11 +350,13 @@ GEM
       actionpack (>= 5.0.1.rc1)
       actionview (>= 5.0.1.rc1)
       activesupport (>= 5.0.1.rc1)
-    rails-dom-testing (2.0.3)
-      activesupport (>= 4.2.0)
+    rails-dom-testing (2.2.0)
+      activesupport (>= 5.0.0)
+      minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.4.2)
-      loofah (~> 2.3)
+    rails-html-sanitizer (1.6.0)
+      loofah (~> 2.21)
+      nokogiri (~> 1.14)
     rails-i18n (7.0.3)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 8)
@@ -366,7 +367,7 @@ GEM
       rake (>= 0.13)
       thor (~> 1.0)
     rainbow (3.0.0)
-    rake (13.0.6)
+    rake (13.1.0)
     ransack (3.1.0)
       activerecord (>= 6.0.4)
       activesupport (>= 6.0.4)
@@ -473,9 +474,9 @@ GEM
     sort_alphabetical (1.1.0)
       unicode_utils (>= 1.2.2)
     spring (4.0.0)
-    sprockets (4.0.2)
+    sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
+      rack (>= 2.2.4, < 4)
     sprockets-rails (3.4.2)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
@@ -499,15 +500,15 @@ GEM
       railties (>= 6.0.0)
     temple (0.8.2)
     terminal-table (1.6.0)
-    thor (1.1.0)
-    tilt (2.0.10)
+    thor (1.3.0)
+    tilt (2.0.11)
     toastr-rails (1.0.3)
       railties (>= 3.1.0)
     turbo-rails (1.4.0)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
-    tzinfo (2.0.4)
+    tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     tzinfo-data (1.2022.1)
       tzinfo (>= 1.0.0)
@@ -530,7 +531,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.5.1)
+    zeitwerk (2.6.12)
 
 PLATFORMS
   arm64-darwin-21
@@ -546,7 +547,7 @@ DEPENDENCIES
   any_login
   bigdecimal (= 3.0.2)
   bootsnap (>= 1.4.4)
-  bootstrap (~> 4.6.0)
+  bootstrap
   cancancan (~> 3.3)
   capistrano (~> 3.11)
   capistrano-passenger (~> 0.2.0)

app/assets/stylesheets/pages/calculator.scss

@@ -210,6 +210,11 @@
   width: 300px
 }
 
+select.custom-select {
+  background-image: url("icons/selector-arrow.svg");
+  width: 100%;
+}
+
 .back-link {
   width: 120px;
   position: absolute;

app/assets/stylesheets/pages/main.scss

@@ -349,6 +349,7 @@ body:where(.admin)::before {
 }
 
 .admin-legend {
+  float: none;
   width: auto;
   padding: 20px;
 }

app/views/account/app_configs/edit.html.slim

@@ -10,19 +10,19 @@ h2.text-center = t '.diapers_calculator_config'
     .row
       .col
         = f.label :first_amount, t('.amount')
-        = f.number_field :first_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :first_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('1..3', 'amount')
       .col
-        = f.label :first_amount, t('.price')
-        = f.number_field :first_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.label :first_price, t('.price')
+        = f.number_field :first_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('1..3', 'price')
       .col
         = f.label :second_amount, t('.amount')
-        = f.number_field :second_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :second_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('4..6', 'amount')
       .col
         = f.label :second_price, t('.price')
-        = f.number_field :second_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :second_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('4..6', 'price')
     .row.my-3
       .col
@@ -32,19 +32,19 @@ h2.text-center = t '.diapers_calculator_config'
     .row
       .col
         = f.label :third_amount, t('.amount')
-        = f.number_field :third_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :third_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('7..9', 'amount')
       .col
         = f.label :third_price, t('.price')
-        = f.number_field :third_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :third_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('7..9', 'price')
       .col
         = f.label :fourth_amount, t('.amount')
-        = f.number_field :fourth_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :fourth_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('10..12', 'amount')
       .col
         = f.label :fourth_price, t('.price')
-        = f.number_field :fourth_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :fourth_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('10..12', 'price')
     .row.my-3
       .col
@@ -54,19 +54,19 @@ h2.text-center = t '.diapers_calculator_config'
     .row
       .col
         = f.label :fifth_amount, t('.amount')
-        = f.number_field :fifth_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :fifth_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('13..18', 'amount')
       .col
         = f.label :fifth_price, t('.price')
-        = f.number_field :fifth_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :fifth_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('13..18', 'price')
       .col
         = f.label :sixth_amount, t('.amount')
-        = f.number_field :sixth_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :sixth_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('19..24', 'amount')
       .col
         = f.label :sixth_price, t('.price')
-        = f.number_field :sixth_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :sixth_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('19..24', 'price')
     .row.my-3
       .col
@@ -75,11 +75,11 @@ h2.text-center = t '.diapers_calculator_config'
     .row
       .col-3
         = f.label :seventh_amount, t('.amount')
-        = f.number_field :seventh_amount, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :seventh_amount, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('25..30', 'amount')
       .col-3
         = f.label :seventh_price, t('.price')
-        = f.number_field :seventh_price, step: 0.5, min: 0, class: 'form-input-number',
+        = f.number_field :seventh_price, step: 0.5, min: 0, class: 'form-input-number w-100',
                           value: @app_config.diapers_calculator.dig('25..30', 'price')
       .col-6
         button.calculate-btn.result-btn[type='submit']

app/views/account/calculators/edit.html.slim

@@ -48,27 +48,27 @@ few
           = f.fields_for :fields, @form_fields do |ff|
             = render 'account/calculators/fields/form', f: ff
         - else
-          p.ml-3.my-3.text-black-50 data-empty-text=true =t('.form.no_fields_yet_label')
+          p.ms-3.my-3.text-black-50 data-empty-text=true =t('.form.no_fields_yet_label')
 
       h4.mb-2 =t('.form.parameters_label')
       .form-group.row data-kind='parameter' data-selector-letter=('parameter'[0].upcase) data-last-selector=(extract_max_selector(@parameter_fields))
         - if @parameter_fields.any?
           = f.fields_for :fields, @parameter_fields do |ff|
             = render 'account/calculators/fields/form', f: ff
         - else
-          p.ml-3.my-3.text-black-50 data-empty-text=true =t('.form.no_fields_yet_label')
+          p.ms-3.my-3.text-black-50 data-empty-text=true =t('.form.no_fields_yet_label')
 
       h4.mb-2 =t('.form.results_label')
       .form-group.row data-kind='result' data-selector-letter=('result'[0].upcase) data-last-selector=(extract_max_selector(@result_fields))
         - if @result_fields.any?
           = f.fields_for :fields, @result_fields do |ff|
             = render 'account/calculators/fields/form', f: ff
         - else
-          p.ml-3.my-3.text-black-50 data-empty-text=true =t('.form.no_fields_yet_label')
+          p.ms-3.my-3.text-black-50 data-empty-text=true =t('.form.no_fields_yet_label')
 
       .row.my-4
         .col-12.d-flex.justify-content-end
-          = f.button :submit, t('.form.update_calculator_button'), class: 'btn btn-success mr-2'
+          = f.button :submit, t('.form.update_calculator_button'), class: 'btn btn-success me-2'
           = link_to account_calculator_path, class: 'btn btn-danger' do
-            span.mr-1 =t('buttons.cancel')
+            span.me-1 =t('buttons.cancel')
             i.fa.fa-times-circle

app/views/account/calculators/index.html.slim

@@ -1,12 +1,12 @@
 .container
   = form_tag account_calculators_path, method: :get, class: 'd-flex justify-content-end mb-5' do
     .d-flex
-      = text_field_tag :search, params[:search], class: 'form-control mr-sm-2', placeholder: t('.search_placeholder')
+      = text_field_tag :search, params[:search], class: 'form-control me-sm-2', placeholder: t('.search_placeholder')
       = button_tag type: :submit, name: nil, class: 'btn btn-primary px-4 d-flex align-items-center' do
-        i.fa.fa-search.mr-2
+        i.fa.fa-search.me-2
         span =t('.search_button')
-    = link_to new_account_calculator_path, class: 'btn btn-success px-4 ml-1' do
-      i.fa.fa-plus.mr-2
+    = link_to new_account_calculator_path, class: 'btn btn-success px-4 ms-1' do
+      i.fa.fa-plus.me-2
       span =t('.add_calculator_button')
 
   table.table.admin-table

app/views/account/calculators/new.html.slim

@@ -12,7 +12,7 @@
       .col-12.has-float-label.my-auto
         = f.input :name, class: 'form-control'
     .div.d-flex
-      = f.button :submit, t('.create_calculator_button'), class: 'btn btn-success mr-2 height-auto w-auto'
+      = f.button :submit, t('.create_calculator_button'), class: 'btn btn-success me-2 height-auto w-auto'
       = link_to account_calculators_path, class: 'btn btn-danger d-flex align-items-center justify-content-center height-auto w-auto' do
-        span.mr-1 = t('.cancel_button')
+        span.me-1 = t('.cancel_button')
         i.fa.fa-times-circle

app/views/account/categories/edit.html.slim

@@ -14,7 +14,7 @@ few
         = f.input :name, class: 'form-control col-sm-11', required: true
         = f.input :priority, class: 'form-control col-sm-11', input_html: { min: 0 }
     .div.d-flex
-        = f.submit t('buttons.update'), class: 'btn btn-success mr-2 height w-auto'
+        = f.submit t('buttons.update'), class: 'btn btn-success me-2 height w-auto'
         = link_to account_categories_path, class: 'btn btn-danger d-flex align-items-center justify-content-center height-auto w-auto' do
-          span.mr-1 =t('buttons.cancel')
+          span.me-1 =t('buttons.cancel')
           i.fa.fa-times-circle

app/views/account/categories/index.html.slim

@@ -1,8 +1,8 @@
 .container
   = form_tag account_category_path(id: @categories), method: :get, class: 'd-flex justify-content-end mb-5' do
     .d-flex
-    = link_to new_account_category_path(id: @categories), class: 'btn btn-success px-4 ml-1' do
-      i.fa.fa-plus.mr-2
+    = link_to new_account_category_path(id: @categories), class: 'btn btn-success px-4 ms-1' do
+      i.fa.fa-plus.me-2
       span =t('.add_category_button')
 
 div class="container home"

app/views/account/categories/new.html.slim

@@ -14,7 +14,7 @@ few
         = f.input :name, class: 'form-control col-sm-11', required: true
         = f.input :priority, class: 'form-control col-sm-11', input_html: { min: 0 }
     .div.d-flex
-        = f.submit t('buttons.create'), class: 'btn btn-success mr-2 height-auto w-auto'
+        = f.submit t('buttons.create'), class: 'btn btn-success me-2 height-auto w-auto'
         = link_to account_categories_path, class: 'btn btn-danger d-flex align-items-center justify-content-center height-auto w-auto' do
-          span.mr-1 =t('buttons.cancel')
+          span.me-1 =t('buttons.cancel')
           i.fa.fa-times-circle

app/views/account/passwords/new.html.slim

@@ -5,7 +5,7 @@
   .card-body
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
       = render "account/shared/error_messages", resource: resource
-      .field.form-group.text-left
+      .field.form-group.text-start
         = f.label :email, value: t('.email_label')
         br
         = f.email_field :email, class:"form-control", autofocus: true, autocomplete: "email"