Two columuns for subject index of canvas

app/javascript/controllers/subjects_controller.js

@@ -18,6 +18,9 @@ export default class extends ApplicationController {
     if ($(opts.accordionTarget).find(".accordion-flash").length === 0) {
       $.get("/api/subjects.json", params, function (search_results, status) {
         if (status === "success") {
+          if (search_results.length > 5) {
+            $('.offcanvas-contents').find(".accordion-body").addClass('for-body-grid');
+          }
           $this.stimulate("SubjectsReflex#render_subjects_accordion", search_results, opts)
         }
       })

app/javascript/src/application/offcanvas.scss

@@ -16,61 +16,61 @@
     }
 }
 
-// .for-body-grid.sub-body1{
+.for-body-grid.sub-body1{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 500px;
+    max-width: 500px;
-//     padding-left: 10px !important;
+    padding-left: 10px !important;
-// }
+}
-
+
-// .for-body-grid.sub-body2{
+.for-body-grid.sub-body2{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 600px;
+    max-width: 600px;
-//     padding-left: 20px!important;
+    padding-left: 20px!important;
-// }
+}
-
+
-// .for-body-grid.sub-body3{
+.for-body-grid.sub-body3{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 700px;
+    max-width: 700px;
-//     padding-left: 30px!important;
+    padding-left: 30px!important;
-// }
+}
-
+
-// .for-body-grid.sub-body4{
+.for-body-grid.sub-body4{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 800px;
+    max-width: 800px;
-//     padding-left: 40px!important;
+    padding-left: 40px!important;
-// }
+}
-
+
-// .for-body-grid.sub-body5{
+.for-body-grid.sub-body5{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 900px;
+    max-width: 900px;
-//     padding-left: 50px!important;
+    padding-left: 50px!important;
-// }
+}
-
+
-// .for-body-grid.sub-body6{
+.for-body-grid.sub-body6{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 1000px;
+    max-width: 1000px;
-//     padding-left: 60px!important;
+    padding-left: 60px!important;
-// }
+}
-
+
-// .for-body-grid.sub-body7{
+.for-body-grid.sub-body7{
-//     display: grid;
+    display: grid;
-//     grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
+    column-gap: 10px;
-//     max-width: 1000px;
+    max-width: 1000px;
-//     padding-left: 70px!important;
+    padding-left: 70px!important;
-// }
+}
 
 .sub-body1{
     width: auto;