demarches-normaliennes/app/views/root/patron.html.haml
2022-09-21 15:47:35 +02:00

348 lines
10 KiB
Text
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.patron
.container
%h1 Icônes
%span.icon.follow
%span.icon.unfollow
%span.icon.archive
%span.icon.unarchive
%span.icon.folder
%span.icon.new-folder
%span.icon.accept
%span.icon.refuse
%span.icon.without-continuation
%span.icon.edit
%span.icon.in-progress
%span.icon.bubble
%span.icon.attached
%span.icon.lock
%span.icon.add
%span.icon.justificatif
%span.icon.printer
%span.icon.account
%span.icon.person
%span.icon.super-admin
%span.icon.mail
%span.icon.reply
%span.icon.search
%span.icon.sign-out
%span.icon.info
%span.icon.delete
%span.icon.help
%span.icon.phone
%span.icon.clock
%span.icon.preview
%span.icon.retry
%span.icon.download
%span.icon.download-white
%span.icon.move-handle
%span.icon.frown
%span.icon.meh
%span.icon.smile
%h1 Formulaires
%form.form
= form_for @dossier, url: '', html: { class: 'form' } do |f|
= f.fields_for :champs do |champ_form|
= render EditableChamp::EditableChampComponent.new champ: champ_form.object, form: champ_form
.editable-champ.editable-champ-text
%label Mot de passe
%input{ type: "password", value: "12345678" }
%h3.header-subsection Bouton radio verticaux
.radios.vertical
= f.label :archived, value: true do
= f.radio_button :archived, true
Option A
%p.notice Une option tout à fait valable.
= f.label :archived, value: false do
= f.radio_button :archived, false
Option B
%p.notice Une autre option, pas mal non plus.
%h3.header-subsection Interrupteur
%label.toggle-switch
= f.check_box :archived, class: 'toggle-switch-checkbox'
%span.toggle-switch-control.round
%span.toggle-switch-label.on Activé
%span.toggle-switch-label.off Désactivé
.send-wrapper
= f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
= f.submit 'Envoyer', class: 'button send primary'
%hr
%h1 Boutons
.patron-section
= link_to ".button", "#", class: "button"
= link_to ".button.primary", "#", class: "button primary"
= link_to ".button.secondary", "#", class: "button secondary"
= link_to ".button.danger", "#", class: "button danger"
= link_to "#", class: "button" do
%span.icon.follow
= "Bouton avec icone et texte"
= link_to "#", class: "button icon-only" do
%span.icon.follow
.patron-section
%button.button{ disabled: true } .button.disabled
%button.button.primary{ disabled: true } .button.primary.disabled
%button.button.secondary{ disabled: true } .button.secondary.disabled
%button.button.danger{ disabled: true } .button.danger.disabled
.patron-section
= link_to ".button.accepted", "#", class: "button accepted"
= link_to ".button.refused", "#", class: "button refused"
= link_to ".button.without-continuation", "#", class: "button without-continuation"
.patron-section
= link_to ".button.small", "#", class: "button small"
= link_to ".button.small.primary", "#", class: "button small primary"
.patron-section
= link_to ".button.large", "#", class: "button large"
= link_to ".button.large.primary", "#", class: "button large primary"
.patron-section
= link_to ".button.primary.expand", "#", class: "button primary expand"
%h1 Dropdown
.dropdown
.button.primary.dropdown-button .button.primary.dropdown-button
.dropdown-content.fade-in-down
%ul.dropdown-items
%li .dropdown-content ul.dropdown-items li
%li .dropdown-content ul.dropdown-items li
.dropdown
.button.dropdown-button .button.dropdown-button
.dropdown-content.fade-in-down
%ul.dropdown-items
%li
%a{ href: '#' }
%span.icon.mail
.dropdown-description
%h4 Action
%p Explanation
%li
%a{ href: '#' }
%span.icon.edit
.dropdown-description
%h4 Other action
%p Explanation
.dropdown
.button.dropdown-button .button.dropdown-button (left)
.dropdown-content.fade-in-down.left-aligned
%ul.dropdown-items
%li .dropdown-content.left-aligned ul.dropdown-items li
%li .dropdown-content.left-aligned ul.dropdown-items li
%h1 Labels
%span.label .label
%span.label.brouillon .label.brouillon
%span.label.instruction .label.instruction
%span.label.construction .label.construction
%span.label.accepted .label.accepted
%span.label.refused .label.refused
%span.label.without-continuation .label.without-continuation
%h1 Badges
%span.badge 1
%span.badge.warning 1
%h1 Cards
.card
.card-title
Titre de la carte
%p Et voici le contenu de la carte
.card.featured
.card-title
Titre de la carte mise en avant
%p Et voici le contenu de la carte
.card.warning
.card-title
Titre de la carte davertissement
%p Et voici le contenu de la carte
.card.feedback
.card-title
Titre de la carte pour demander un avis
%p Utilisez cette carte pour informer dune nouveauté produit ou demander lavis des utilisateurs.
%h1 Table
%table.table
%thead
%tr
%th Header 1
%th Header 2
%tbody
%tr
%td Table Data 1
%td Table Data 2
%tr
%td Table Data 3
%td Table Data 4
%h2 Hoverable (.table.hoverable)
%table.table.hoverable
%thead
%tr
%th Header 1
%th Header 2
%tbody
%tr
%td Table Data 1
%td Table Data 2
%tr
%td Table Data 3
%td Table Data 4
%h2 Vertical layout (.table.vertical)
%table.table.vertical
%tbody
%tr
%th Header 1
%td Table Data 1
%tr
%th Header 2
%td Table Data 2
%tr
%th.header-section{ colspan: 2 } Header section
%tr
%th Header 3
%td Table Data 3
%h1 Header
.sub-header
.container
Titre
%nav.tabs
%ul
= tab_item("Onglet actif", "#", active: true)
= tab_item("Onglet inactif", "#")
= tab_item("Onglet avec badge", "#", badge: 2)
= tab_item("Onglet avec notification", "#", notification: true)
.container
%h1 Breadcrumbs
%ul.breadcrumbs
%li
= link_to "Démarche 123", "#"
%li
= "Dossier n° 38"
%h1 Layout deux colonnes
.two-columns
.columns-container
.column
Insérer ici le contenu de la colonne 1
.column
Insérer ici le contenu de la colonne 2
.container
%section.ask-avis
%h1 Inviter une personne à donner son avis
%p.avis-notice Linvité pourra consulter, donner un avis sur le dossier et contribuer au fil de messagerie, mais il ne pourra le modifier.
= form_for Avis.new, url: '/', html: { class: 'form' } do |f|
= f.email_field :email, placeholder: 'Adresse email', required: true
= f.text_area :introduction, rows: 3, value: 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
.send-wrapper
= f.submit 'Demander un avis', class: 'button send'
%section.list-avis
%h1.title
Avis des invités
%span.count 1
%ul
%li.one-avis
%h2.claimant
Vous
%span.date Demande davis envoyée le 12/01/2012
%p Bonjour, merci de me donner votre avis sur ce dossier.
.answer.flex.align-start
.icon.bubble.avis-icon
.width-100
%h2.instructeur
= CONTACT_EMAIL
%span.date Réponse donnée le 13/01/2012
%p Je donne un avis favorable
.container
%h2.empty-text Aucun dossier
%p.empty-text-details Vous navez commencé aucune démarche pour linstant.
.container
%h1 Dsfr::CalloutComponent
= link_to "Documentation DSFR Mis en avant (callout)", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant", **external_link_attributes
= render Dsfr::CalloutComponent.new(title: "Information minimale") do |c|
- c.with_body do
%p Ceci est le minimum pour afficher un callout.
= render Dsfr::CalloutComponent.new(title: "Information importante ou avertissement", theme: :warning) do |c|
- c.with_body do
%p Le contenu de cette description est libre.
= render Dsfr::CalloutComponent.new(title: "Titre d'une information positive", theme: :success, icon: "fr-icon-message-2-fill") do |c|
- c.with_body do
%p
N'importe quelle icône
= link_to("du jeu d'icônes", "https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones", **external_link_attributes)
peut être utilisée.
%h1 Dsfr::CardVerticalComponent
= link_to "Documentation DSFR Carte", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte", **external_link_attributes
.fr-grid-row.fr-grid-row--gutters.fr-py-5w
.fr-col-md-6.fr-col-12
= render Dsfr::CardVerticalComponent.new(title: "Optional title", desc: "Optional description")
.fr-col-md-6.fr-col-12
= render Dsfr::CardVerticalComponent.new(title: "With footer buttons") do |c|
- c.with_footer_button do
= link_to "Button 1", "#", class: "fr-btn", **external_link_attributes
- c.with_footer_button do
= button_tag "Button 2", class: "fr-btn fr-btn--secondary"
%h1 Dsfr::NoticeComponent
= link_to "Documentation DSFR Bandeau d'information", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante", **external_link_attributes
.my-3
= render Dsfr::NoticeComponent.new(closable: true) do |c|
- c.with_title do
Titre de cette notice
= link_to "avec un lien optionnel.", "#"
Des marges verticales ont ici été rajoutées.