From 28dcbcb85b7250c40f6fbaa3819fec3116a4582c Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 2 Apr 2019 15:03:26 +0200 Subject: [PATCH 1/6] auth: move the FranceConnect button to a partial --- app/assets/stylesheets/new_design/auth.scss | 22 --------------- .../new_design/france-connect-login.scss | 28 +++++++++++++++++++ .../shared/_france_connect_login.html.haml | 7 +++++ app/views/users/registrations/new.html.haml | 10 +------ app/views/users/sessions/new.html.haml | 10 +------ .../france_connect_particulier_spec.rb | 12 ++++---- 6 files changed, 43 insertions(+), 46 deletions(-) create mode 100644 app/assets/stylesheets/new_design/france-connect-login.scss create mode 100644 app/views/shared/_france_connect_login.html.haml diff --git a/app/assets/stylesheets/new_design/auth.scss b/app/assets/stylesheets/new_design/auth.scss index 9196f0fa1..b67a98935 100644 --- a/app/assets/stylesheets/new_design/auth.scss +++ b/app/assets/stylesheets/new_design/auth.scss @@ -15,28 +15,6 @@ margin-bottom: 0; } - .separation { - font-size: 14px; - color: $grey; - margin: 24px 0; - } - - .login-with-fc { - display: inline-block; - height: 52px; - width: 186px; - margin: auto; - margin-bottom: 8px; - background-image: image-url("login-with-fc.svg"); - background-repeat: no-repeat; - background-size: cover; - cursor: pointer; - - &:hover { - background-image: image-url("login-with-fc-hover.svg"); - } - } - hr { margin-top: 30px; margin-bottom: 30px; diff --git a/app/assets/stylesheets/new_design/france-connect-login.scss b/app/assets/stylesheets/new_design/france-connect-login.scss new file mode 100644 index 000000000..020352b09 --- /dev/null +++ b/app/assets/stylesheets/new_design/france-connect-login.scss @@ -0,0 +1,28 @@ +@import "colors"; + +.france-connect-login { + text-align: center; +} + +.france-connect-login-button { + display: inline-block; + height: 52px; + width: 186px; + margin: auto; + margin-bottom: 8px; + background-image: image-url("login-with-fc.svg"), image-url("login-with-fc-hover.svg"); + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; + font-size: 0; + + &:hover { + background-image: image-url("login-with-fc-hover.svg"); + } +} + +.france-connect-login-separator { + margin: 24px 0; + font-size: 14px; + color: $grey; +} diff --git a/app/views/shared/_france_connect_login.html.haml b/app/views/shared/_france_connect_login.html.haml new file mode 100644 index 000000000..4bd33221c --- /dev/null +++ b/app/views/shared/_france_connect_login.html.haml @@ -0,0 +1,7 @@ +.france-connect-login + .france-connect-login-separator + ou + .france-connect-login-buttons + = link_to "S’identifier avec FranceConnect", url, class: "france-connect-login-button" + .france-connect-help-link + = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link" diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml index 083f8fb59..fa3c1755a 100644 --- a/app/views/users/registrations/new.html.haml +++ b/app/views/users/registrations/new.html.haml @@ -11,12 +11,4 @@ = f.submit "Créer un compte", class: "button large primary expand" - .separation.center - ou - - .center - = image_tag "login-with-fc-hover.svg", style: "display: none" - = link_to "", france_connect_particulier_path, class: "login-with-fc" - - .center - = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link" + = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path } diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index 302217ffe..0a2d49af9 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -28,12 +28,4 @@ = f.submit "Se connecter", class: "button large primary expand" - .separation.center - ou - - .center - = image_tag "login-with-fc-hover.svg", style: "display: none" - = link_to "", france_connect_particulier_path, class: "login-with-fc" - - .center - = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link" + = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path } diff --git a/spec/features/france_connect/france_connect_particulier_spec.rb b/spec/features/france_connect/france_connect_particulier_spec.rb index dd221153e..ac26aa26a 100644 --- a/spec/features/france_connect/france_connect_particulier_spec.rb +++ b/spec/features/france_connect/france_connect_particulier_spec.rb @@ -1,6 +1,6 @@ require 'spec_helper' -feature 'France Connect Particulier Connexion' do +feature 'France Connect Particulier Connexion' do let(:code) { 'plop' } let(:given_name) { 'titi' } let(:family_name) { 'toto' } @@ -28,7 +28,7 @@ feature 'France Connect Particulier Connexion' do end scenario 'link to France Connect is present' do - expect(page).to have_css('a.login-with-fc') + expect(page).to have_css('.france-connect-login-button') end context 'and click on france connect link' do @@ -53,7 +53,7 @@ feature 'France Connect Particulier Connexion' do context 'when is the first connexion' do before do - page.find('.login-with-fc').click + page.find('.france-connect-login-button').click end scenario 'he is redirected to user dossiers page' do @@ -64,7 +64,7 @@ feature 'France Connect Particulier Connexion' do context 'when is not the first connexion' do before do create(:user, france_connect_information: france_connect_information) - page.find('.login-with-fc').click + page.find('.france-connect-login-button').click end scenario 'he is redirected to user dossiers page' do @@ -77,11 +77,11 @@ feature 'France Connect Particulier Connexion' do before do allow_any_instance_of(FranceConnectParticulierClient).to receive(:authorization_uri).and_return(france_connect_particulier_callback_path(code: code)) allow(FranceConnectService).to receive(:retrieve_user_informations_particulier) { raise Rack::OAuth2::Client::Error.new(500, error: 'Unknown') } - page.find('.login-with-fc').click + page.find('.france-connect-login-button').click end scenario 'he is redirected to login page' do - expect(page).to have_css('a.login-with-fc') + expect(page).to have_css('.france-connect-login-button') end scenario 'error message is displayed' do From 22f2ca105e300c22913c776f7c5c16fc01d617ed Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 2 Apr 2019 15:03:35 +0200 Subject: [PATCH 2/6] commencer: display a FranceConnect button Fix #3640 --- app/controllers/users/commencer_controller.rb | 5 ++++ app/views/commencer/show.html.haml | 1 + config/routes.rb | 1 + .../users/commencer_controller_spec.rb | 24 +++++++++++++++++++ spec/views/commencer/show.html.haml_spec.rb | 1 + 5 files changed, 32 insertions(+) diff --git a/app/controllers/users/commencer_controller.rb b/app/controllers/users/commencer_controller.rb index f42c5c31c..a20a009fe 100644 --- a/app/controllers/users/commencer_controller.rb +++ b/app/controllers/users/commencer_controller.rb @@ -34,6 +34,11 @@ module Users redirect_to new_user_registration_path end + def france_connect + store_user_location! + redirect_to france_connect_particulier_path + end + def procedure_for_help Procedure.publiees.find_by(path: params[:path]) || Procedure.brouillons.find_by(path: params[:path]) end diff --git a/app/views/commencer/show.html.haml b/app/views/commencer/show.html.haml index bed41a69f..1f584df63 100644 --- a/app/views/commencer/show.html.haml +++ b/app/views/commencer/show.html.haml @@ -8,6 +8,7 @@ %span.optional-on-small-screens demarches-simplifiees.fr = link_to 'J’ai déjà un compte', commencer_sign_in_path(path: @procedure.path), class: ['button large expand'] + = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path) } - else - dossiers = current_user.dossiers.where(procedure: @procedure) diff --git a/config/routes.rb b/config/routes.rb index 4bab577c4..409795dce 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -270,6 +270,7 @@ Rails.application.routes.draw do get '/:path', action: 'commencer' get '/:path/sign_in', action: 'sign_in', as: :sign_in get '/:path/sign_up', action: 'sign_up', as: :sign_up + get '/:path/france_connect', action: 'france_connect', as: :france_connect end resources :dossiers, only: [:index, :show, :new] do diff --git a/spec/controllers/users/commencer_controller_spec.rb b/spec/controllers/users/commencer_controller_spec.rb index cb6e8b069..ae8f2d01a 100644 --- a/spec/controllers/users/commencer_controller_spec.rb +++ b/spec/controllers/users/commencer_controller_spec.rb @@ -112,4 +112,28 @@ describe Users::CommencerController, type: :controller do it { expect(subject).to redirect_to(new_user_registration_path) } end end + + describe '#france_connect' do + context 'for a published procedure' do + subject { get :france_connect, params: { path: published_procedure.path } } + + it 'set the path to return after sign-up to the procedure start page' do + subject + expect(controller.stored_location_for(:user)).to eq(commencer_path(path: published_procedure.path)) + end + + it { expect(subject).to redirect_to(france_connect_particulier_path) } + end + + context 'for a draft procedure' do + subject { get :france_connect, params: { path: draft_procedure.path } } + + it 'set the path to return after sign-up to the draft procedure start page' do + subject + expect(controller.stored_location_for(:user)).to eq(commencer_test_path(path: draft_procedure.path)) + end + + it { expect(subject).to redirect_to(france_connect_particulier_path) } + end + end end diff --git a/spec/views/commencer/show.html.haml_spec.rb b/spec/views/commencer/show.html.haml_spec.rb index b07600502..c8119d7d9 100644 --- a/spec/views/commencer/show.html.haml_spec.rb +++ b/spec/views/commencer/show.html.haml_spec.rb @@ -21,6 +21,7 @@ RSpec.describe 'commencer/show.html.haml', type: :view do subject expect(rendered).to have_link('Créer un compte') expect(rendered).to have_link('J’ai déjà un compte') + expect(rendered).to have_link('S’identifier avec FranceConnect') end end From a997f683f5284aba052f6c4454407f4f7149a892 Mon Sep 17 00:00:00 2001 From: Mathieu Magnin Date: Wed, 3 Apr 2019 14:53:45 +0200 Subject: [PATCH 3/6] =?UTF-8?q?Fix=20p=C3=A9touille=20on=20service=20form?= =?UTF-8?q?=20placeholder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/views/new_administrateur/services/_form.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/new_administrateur/services/_form.html.haml b/app/views/new_administrateur/services/_form.html.haml index 847090742..9b92b49a3 100644 --- a/app/views/new_administrateur/services/_form.html.haml +++ b/app/views/new_administrateur/services/_form.html.haml @@ -43,12 +43,12 @@ = f.label :horaires do Horaires %span.mandatory * - = f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30\nLe samedi de 9 h 30 à 12 h", required: true + = f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30. Le samedi de 9 h 30 à 12 h.", required: true = f.label :adresse do Adresse %span.mandatory * - = f.text_area :adresse, placeholder: "20 avenue de Ségur\n75007 Paris", required: true + = f.text_area :adresse, placeholder: "20 avenue de Ségur, 75007 Paris", required: true - if procedure_id.present? = hidden_field_tag :procedure_id, procedure_id From 5d54b134b7f039391e3d26748370e3514a13f86a Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Wed, 3 Apr 2019 17:09:32 +0200 Subject: [PATCH 4/6] Add babel plugins to production dependencies --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d4a6f0016..ffc49a853 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "@turf/area": "^6.0.1", "activestorage": "^5.2.2", "autocomplete.js": "^0.36.0", + "babel-plugin-macros": "^2.5.0", + "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "chartkick": "^3.0.1", "debounce": "^1.2.0", "dom4": "^2.1.3", @@ -29,8 +31,6 @@ }, "devDependencies": { "babel-eslint": "^10.0.1", - "babel-plugin-macros": "^2.5.0", - "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "eclint": "^2.8.0", "eslint": "^5.9.0", "eslint-config-prettier": "^3.3.0", From e896310e344fdc5720c518d5d0ec3ae39af790aa Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 1 Apr 2019 15:04:11 +0200 Subject: [PATCH 5/6] procedure_context: display the procedure description on small screens Fix #3658 --- .../stylesheets/new_design/commencer.scss | 6 ++- app/assets/stylesheets/new_design/forms.scss | 2 +- .../new_design/procedure_context.scss | 39 +++++++++++++++++-- .../new_design/procedure-context.js | 20 ++++++++++ app/javascript/packs/application.js | 1 + .../_procedure_description.html.haml | 4 +- 6 files changed, 64 insertions(+), 8 deletions(-) create mode 100644 app/javascript/new_design/procedure-context.js diff --git a/app/assets/stylesheets/new_design/commencer.scss b/app/assets/stylesheets/new_design/commencer.scss index 3244987c7..cb43fc95a 100644 --- a/app/assets/stylesheets/new_design/commencer.scss +++ b/app/assets/stylesheets/new_design/commencer.scss @@ -1,8 +1,10 @@ @import "constants"; .commencer { - .button:first-of-type { - margin-top: 4 * $default-spacer; + @media (min-width: $two-columns-breakpoint) { + .button:first-of-type { + margin-top: 4 * $default-spacer; + } } .button { diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss index 58547b25d..c260ec713 100644 --- a/app/assets/stylesheets/new_design/forms.scss +++ b/app/assets/stylesheets/new_design/forms.scss @@ -7,7 +7,7 @@ margin-bottom: 20px; @media (max-width: $two-columns-breakpoint) { - font-size: 28px; + font-size: 26px; } } diff --git a/app/assets/stylesheets/new_design/procedure_context.scss b/app/assets/stylesheets/new_design/procedure_context.scss index f2fa9502b..54df80fd2 100644 --- a/app/assets/stylesheets/new_design/procedure_context.scss +++ b/app/assets/stylesheets/new_design/procedure_context.scss @@ -2,6 +2,7 @@ @import "constants"; $procedure-context-breakpoint: $two-columns-breakpoint; +$procedure-description-line-height: 22px; .procedure-preview { font-size: 24px; @@ -25,12 +26,13 @@ $procedure-context-breakpoint: $two-columns-breakpoint; } .procedure-title { - font-size: 30px; + font-size: 26px; margin: 0 0 20px 0; text-align: center; @media (min-width: $procedure-context-breakpoint) { margin: 50px 0 32px; + font-size: 30px; text-align: left; } } @@ -39,11 +41,40 @@ $procedure-context-breakpoint: $two-columns-breakpoint; font-size: 16px; p:not(:last-of-type) { - margin-bottom: 2 * $default-spacer; + // Space the paragraphs by exactly one line height, + // so that the text always is truncated in the middle of a line, + // regarless of the number of paragraphs. + margin-bottom: 3 * $default-spacer; } + } - @media (max-width: $procedure-context-breakpoint) { - display: none; // TO FIX : make this description available for small devices + .read-more-button { + display: none; + } + + @media (max-width: $procedure-context-breakpoint) { + // Truncate description and display the "Read more" UI if the text is too long + .procedure-description-body.read-more-collapsed { + // Setting the description at 25% of the viewport height: + // - displays more text on screens having more vertical space (like small tablets); + // - is enough for the action buttons to be visible on the bottom (even on mobiles). + max-height: 25vh; + + // If the text exceeds the max-height, + // truncate it and displays the "Read more" button. + &.read-more-enabled { + overflow: hidden; + border-bottom: 1px solid $border-grey; + + + .read-more-button { + display: block; + position: relative; + margin-left: auto; + margin-right: auto; + top: -19px; + margin-bottom: -19px; + } + } } } diff --git a/app/javascript/new_design/procedure-context.js b/app/javascript/new_design/procedure-context.js new file mode 100644 index 000000000..a6de9431d --- /dev/null +++ b/app/javascript/new_design/procedure-context.js @@ -0,0 +1,20 @@ +import { delegate } from '@utils'; + +function updateReadMoreVisibility() { + const descBody = document.querySelector('.procedure-description-body'); + if (descBody) { + // If the description text overflows, display a "Read more" button. + const isOverflowing = descBody.scrollHeight > descBody.clientHeight; + descBody.classList.toggle('read-more-enabled', isOverflowing); + } +} + +function expandProcedureDescription() { + const descBody = document.querySelector('.procedure-description-body'); + descBody.classList.remove('read-more-collapsed'); +} + +addEventListener('turbolinks:load', updateReadMoreVisibility); +addEventListener('resize', updateReadMoreVisibility); + +delegate('click', '.read-more-button', expandProcedureDescription); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 4398cfadb..7f61db545 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -18,6 +18,7 @@ import '../shared/toggle-target'; import '../new_design/dropdown'; import '../new_design/form-validation'; +import '../new_design/procedure-context'; import '../new_design/select2'; import '../new_design/spinner'; import '../new_design/support'; diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/layouts/commencer/_procedure_description.html.haml index 5df533231..04a05ffac 100644 --- a/app/views/layouts/commencer/_procedure_description.html.haml +++ b/app/views/layouts/commencer/_procedure_description.html.haml @@ -5,4 +5,6 @@ %h2.procedure-title = procedure.libelle .procedure-description - = h string_to_html(procedure.description) + .procedure-description-body.read-more-enabled.read-more-collapsed + = h string_to_html(procedure.description) + = button_tag "Afficher la description complète", class: 'button read-more-button' From adefd26413c407a047c1813604562f89e1f6a4c0 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 1 Apr 2019 15:03:13 +0200 Subject: [PATCH 6/6] procedure_context: hide the description on auth pages --- app/assets/stylesheets/new_design/auth.scss | 13 +++++++++++++ app/views/layouts/application.html.haml | 2 +- app/views/users/registrations/new.html.haml | 2 ++ app/views/users/sessions/new.html.haml | 2 ++ 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/new_design/auth.scss b/app/assets/stylesheets/new_design/auth.scss index b67a98935..ea9cfeba4 100644 --- a/app/assets/stylesheets/new_design/auth.scss +++ b/app/assets/stylesheets/new_design/auth.scss @@ -3,6 +3,19 @@ @import "placeholders"; @import "mixins"; +#auth { + // On small screens, hide the procedure description text on auth pages. + // It avoids pushing the sign-in/sign-up form out of the viewport. + // + // The procedure description can still be read from the /commencer + // pages. + @media (max-width: $two-columns-breakpoint) { + .procedure-description { + display: none; + } + } +} + .auth-form { .auth-options { display: flex; diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index c5b496135..e1358ece0 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -23,7 +23,7 @@ - if Rails.env.development? = stylesheet_link_tag :xray - %body{ class: browser.platform.ios? ? 'ios' : nil } + %body{ id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil } .page-wrapper = render partial: "layouts/outdated_browser_banner" = render partial: 'layouts/pre_maintenance' diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml index fa3c1755a..d21b184be 100644 --- a/app/views/users/registrations/new.html.haml +++ b/app/views/users/registrations/new.html.haml @@ -1,3 +1,5 @@ += content_for(:page_id, 'auth') + .auth-form = devise_error_messages! = form_for resource, url: user_registration_path, html: { class: "form" } do |f| diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index 0a2d49af9..89e7d737a 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -1,3 +1,5 @@ += content_for(:page_id, 'auth') + .auth-form.sign-in-form - if resource_name == :user %p.register