Issue #3144 - Bootstrap 5 accordion work continued for outsatanding

cases.
DMPRoadmap · Jul 17, 2023 · e9bddfb · e9bddfb
1 parent 0d09dec
commit e9bddfb
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/app/views/org_admin/phases/_index.html.erb b/app/views/org_admin/phases/_index.html.erb
@@ -13,15 +13,15 @@
 </div>
 <div class="row">
  <div class="col-md-12">
- <div class="card-group" id="phases_accordion" role="tablist">
+ <div class="accordion" id="phases_accordion" role="tablist">
  <!-- If template has phases-->
  <% if template_hash[:template][:phases].present? %>
  <% i = 0 %>
  <% template_hash[:template][:phases].each do |phase_no, phase_hash| %>
  <% phase = phase_hash[:data] %>
  <div class="card card-default">
- <div class="heading-button" role="button" data-toggle="collapse"
- data-parent="phases_accordion"
+ <div class="heading-button" role="button" data-bs-toggle="collapse"
+ data-bs-parent="phases_accordion"
  href="#collapsePhase<%= phase.id %>"
  aria-expanded="<%= i == 0 ? 'true' : 'false' %>"
  aria-controls="#collapsePhase<%= phase.id %>">
@@ -36,7 +36,7 @@
  <div class="clearfix"></div>
  </div>
  </div>
- <div id="<%= "collapsePhase#{phase.id}" %>" class="card-collapse collapse<%= i == 0 ? 'in' : '' %>" role="tabcard" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="true"' : '' %>>
+ <div id="<%= "collapsePhase#{phase.id}" %>" class="accordion-collapse collapse<%= i == 0 ? 'show' : 'hide' %>" role="tabcard" aria-labelledby="<%= "headingPhase#{phase.id}" %>"<%= i == 0 ? 'aria-expanded="true"' : '' %>>
  <div class="card-body">
  <%= render partial: 'org_admin/templates/show_phases_sections', locals: { phase: phase, phase_hash: phase_hash, template: template, current: current } %>
  </div>

diff --git a/app/views/org_admin/sections/_index.html.erb b/app/views/org_admin/sections/_index.html.erb
@@ -49,7 +49,7 @@
  </div>
 
  <% if template.latest? && (modifiable || template.customization_of.present?) %>
- <div class="card card-default">
+ <div class="accordion">
  <a href="#new_section" class="heading-button"
  data-toggle="collapse" data-parent="sections-accordion"
  data-target="#collapseSectionNew"

diff --git a/app/views/phases/_edit_plan_answers.html.erb b/app/views/phases/_edit_plan_answers.html.erb
@@ -25,33 +25,30 @@
  </div>
  </div>
  </div>
- <div class="card-group" id="sections-accordion" role="tablist"
+ <div class="accordion" id="sections-accordion" role="tablist"
  aria-multiselectable="true">
  <% phase.sections.sort {|a,b| a.number <=> b.number }.each do |section| %>
- <div class="card card-default">
- <div class="heading-button" role="button" data-toggle="collapse"
+ <div class="accordion-item w-100 my-3">
+ <h2 class="accordion-header" role="tab" id="heading-<%= section.id %>">
+ <div class="accordion-button" role="button" data-bs-toggle="collapse"
  id="section-panel-<%= section.id %>"
- data-parent="sections-accordion"
+ data-bs-parent="sections-accordion"
  href="#collapse-<%= section.id %>"
  aria-expanded="false"
  aria-controls="collapse-<%= section.id %>">
-
- <div class="card-heading" role="tab" id="heading-<%= section.id %>">
- <div class="card-title pull-left">
  <%= section.title %>
  <% if plan.present? %>
  <span class="section-progress-<%= section.id %>">
  <%= render partial: "/org_admin/sections/progress",
  locals: { section: section, plan: plan } %>
  </span>
  <% end %>
- </div>
- <i class="fas fa-plus pull-right" aria-hidden="true"></i>
- <div class="clearfix"></div>
  </div>
+ </h2>
+
  </div>
- <div id="collapse-<%= section.id %>" class="card-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
- <div class="card-body"><!-- accordion body -->
+ <div id="collapse-<%= section.id %>" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading-<%= section.id %>">
+ <div class="accordion-body"><!-- accordion body -->
  <div class="section-description">
  <div class="display-readonly-textarea-content">
  <%= sanitize section.description %>
@@ -114,10 +111,9 @@
  <hr />
  <% end %>
  <% end %> <!-- section.questions.each do -->
- </div> <!-- card-body -->
- </div> <!-- card-collapse -->
- </div> <!-- card card-default -->
+ </div> <!-- accordion-body -->
+ </div> <!-- accordion-collapse -->
  <% end %> <!-- phase.sections.sort {|a,b| a.number <=> b.number }.each do -->
- </div> <!-- card-group -->
+ </div> <!-- accordion -->
  </div> <!-- tab card -->
 </div> <!-- tab panels -->
diff --git a/app/views/plans/_overview_details.html.erb b/app/views/plans/_overview_details.html.erb
@@ -26,7 +26,7 @@
  <% if plan.template.phases.size == 1 %>
  <%= render(partial: '/phases/overview', locals: { plan_id: plan.id, phase: plan.template.phases.first }) %>
  <% else %>
- <div class="card-group" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
+ <div class="accordion" id="plan-overview-accordion" role="tablist" aria-multiselectable="true">
  <% plan.template.phases.each do |p| %>
  <% questions_size = p.sections.map{|s| s.questions.size }.reduce(0){|sum,x| sum + x } %>
  <div class="card card-default">