diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 4d2842649..d3292149c 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -607,3 +607,7 @@ textarea::placeholder { opacity: 0.6; // normalize opacity across browsers color: $dark-grey; } + +.send-wrapper--with-border-top { + border-top: 2px solid rgba(0, 0, 145, 1); +} diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss index 0de633a83..02fb6ffef 100644 --- a/app/assets/stylesheets/reset.scss +++ b/app/assets/stylesheets/reset.scss @@ -44,6 +44,5 @@ q:before, q:after { content: none; } table { - border-collapse: collapse; border-spacing: 0; } diff --git a/app/assets/stylesheets/table_service.scss b/app/assets/stylesheets/table_service.scss index 5e868662a..6d03c1f30 100644 --- a/app/assets/stylesheets/table_service.scss +++ b/app/assets/stylesheets/table_service.scss @@ -1,9 +1,5 @@ @import "constants"; -.table-service { - .change { - text-align: left; - width: 300px; - padding-left: $default-padding; - } +.change { + width: 300px; } diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/utils.scss index 9f0a2399e..6aa666347 100644 --- a/app/assets/stylesheets/utils.scss +++ b/app/assets/stylesheets/utils.scss @@ -130,3 +130,24 @@ $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8); } } } + +$directions: ( + "t": ("padding-top"), + "r": ("padding-right"), + "b": ("padding-bottom"), + "l": ("padding-left"), + "x": ("padding-left", "padding-right"), + "y": ("padding-top", "padding-bottom"), + "": ("padding") +); +$steps: (0, 1, 2, 3, 4, 5, 6, 7, 8); + +@each $modifier, $properties in $directions { + @each $step in $steps { + @each $property in $properties { + .p#{$modifier}-#{$step} { + #{$property}: $step * $default-spacer; + } + } + } +} diff --git a/app/components/dsfr/button_component.rb b/app/components/dsfr/button_component.rb index 032cfef75..fd020e52a 100644 --- a/app/components/dsfr/button_component.rb +++ b/app/components/dsfr/button_component.rb @@ -1,7 +1,7 @@ class Dsfr::ButtonComponent < ApplicationComponent private - def initialize(label:, form:nil, url: nil, class_names: []) + def initialize(label:, form: nil, url: nil, class_names: []) @form = form @label = label @url = url diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index 28a5204a9..b6a6472fe 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -72,3 +72,4 @@ import '../../../node_modules/@gouvfr/dsfr/dist/core/core.css'; import '../../../node_modules/@gouvfr/dsfr/dist/component/button/button.css'; import '../../../node_modules/@gouvfr/dsfr/dist/component/alert/alert.css'; import '../../../node_modules/@gouvfr/dsfr/dist/component/callout/callout.css'; +import '../../../node_modules/@gouvfr/dsfr/dist/component/table/table.css'; diff --git a/app/views/administrateurs/services/_form.html.haml b/app/views/administrateurs/services/_form.html.haml index 8db9fb480..8b011888f 100644 --- a/app/views/administrateurs/services/_form.html.haml +++ b/app/views/administrateurs/services/_form.html.haml @@ -61,7 +61,7 @@ - if procedure_id.present? = hidden_field_tag :procedure_id, procedure_id - .send-wrapper.justify-content--space-between + .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3 = render Dsfr::ButtonComponent.new(label: "Annuler et revenir à la page de suivi", url: admin_procedure_path(id: @procedure.id), class_names: ['fr-btn--secondary']) = render Dsfr::ButtonComponent.new(form: f, label: "Enregistrer", class_names: ['']) diff --git a/app/views/administrateurs/services/index.html.haml b/app/views/administrateurs/services/index.html.haml index 2267bf485..af62b0b70 100644 --- a/app/views/administrateurs/services/index.html.haml +++ b/app/views/administrateurs/services/index.html.haml @@ -5,15 +5,15 @@ #services-index.container %h1 Liste des Services - %h2 La démarche #{@procedure.libelle} peut être affectée aux services dans la liste ci-dessous - %table.table.table-service.hoverable + %table.fr-table.width-100.mt-3 + %caption La démarche “#{@procedure.libelle}” peut être affectée aux services dans la liste ci-dessous %thead %tr - %th + %th{ scope: "col" } Nom - %th.change - = link_to('Nouveau service', new_admin_service_path(procedure_id: @procedure.id), class: 'button') + %th.change{ scope: "col" } + = render Dsfr::ButtonComponent.new(label: "Nouveau service", url: new_admin_service_path(procedure_id: @procedure.id), class_names: ['fr-btn--secondary']) %tbody - @services.each do |service|