diff --git a/app/assets/stylesheets/admin/pages/aide/_faq.scss b/app/assets/stylesheets/admin/pages/aide/_faq.scss index 2e1935c8e..89715e762 100644 --- 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 index be9beff3c..bba66c77e 100644 --- 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