Aligne la FAQ sur la grid

betagouv · Oct 6, 2021 · a34d14b · a34d14b
1 parent b71005a
commit a34d14b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/app/assets/stylesheets/admin/pages/aide/_faq.scss b/app/assets/stylesheets/admin/pages/aide/_faq.scss
@@ -1,14 +1,17 @@
 .faq {
-  display: flex;
-  flex-wrap: wrap;
+  $grid-columns:      6;
+  $grid-gutter-width: 1.5rem;
+  @import "../../../bootstrap_minimal";
+  @include make-row();
+
   ul {
     list-style: none;
   }
   .questions {
     @include carte-avec-ombre();
-    width: 30%;
     ul {
       padding: 1.5rem;
+      margin: 0;
       li {
         margin-bottom: 1.5rem;
         font-size: 0.875rem;
@@ -36,15 +39,16 @@
     background-color: $eva_main_blue;
   }
   .reponses {
-    width: 70%;
-    padding-left: 1.5rem;
-    box-sizing: border-box;
     position: relative;
     font-size: 0.875rem;
     color: $eva_dark;
   }
   .reponse {
     position: absolute;
+    padding-left: inherit;
+    padding-right: inherit;
+    left: 0;
+    right: 0;
     opacity: 0;
     transition: opacity .2s;
     &.active {

diff --git a/app/views/admin/aide/_faq.html.arb b/app/views/admin/aide/_faq.html.arb
@@ -2,20 +2,22 @@
 
 h3 t('.titre'), id: 'foire_aux_questions', class: 'aide_titre'
 div class: 'faq' do
-  div class: 'questions' do
-    h4 'Questions', class: 'titre_questions'
-    ul do
-      questions_frequentes.each do |question_frequente|
-        li 'data-id': question_frequente.id, class: 'question' do
-          question_frequente.question
+  div class: 'col-2' do
+    div class: 'questions' do
+      h4 'Questions', class: 'titre_questions'
+      ul do
+        questions_frequentes.each do |question_frequente|
+          li 'data-id': question_frequente.id, class: 'question' do
+            question_frequente.question
+          end
         end
       end
     end
   end
-  div class: 'reponses' do
-    ul do
+  div class: 'col-4' do
+    div class: 'reponses' do
       questions_frequentes.each do |question_frequente|
-        li 'data-id': question_frequente.id, class: 'reponse' do
+        div 'data-id': question_frequente.id, class: 'reponse' do
           h4 question_frequente.question, class: 'titre_reponse'
           text_node md question_frequente.reponse
         end