From 33db73c5135ad6eb93ea0e89ee317f89c024a5e1 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 11 Mar 2019 14:50:23 +0000 Subject: [PATCH 1/2] header: reduce the search bar width on narrow viewports --- app/assets/stylesheets/new_design/new_header.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/new_design/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss index 48926e98d..6e05e288a 100644 --- a/app/assets/stylesheets/new_design/new_header.scss +++ b/app/assets/stylesheets/new_design/new_header.scss @@ -129,7 +129,8 @@ $landing-breakpoint: 1040px; padding: 9px; padding-right: 42px; float: right; - width: 300px; + max-width: 300px; + min-width: 90px; margin: 0; } From f14ddccbe80acf2ca1b1adfb615bd516c22c4203 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Mon, 11 Mar 2019 14:55:15 +0000 Subject: [PATCH 2/2] header: improve available width on narrow viewports --- app/assets/images/header/logo-ds-narrow.svg | 1 + .../stylesheets/new_design/new_header.scss | 20 ++++++++++++++----- app/views/layouts/_new_header.haml | 3 ++- 3 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 app/assets/images/header/logo-ds-narrow.svg diff --git a/app/assets/images/header/logo-ds-narrow.svg b/app/assets/images/header/logo-ds-narrow.svg new file mode 100644 index 000000000..eda8aa5eb --- /dev/null +++ b/app/assets/images/header/logo-ds-narrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/new_design/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss index 6e05e288a..59378c36f 100644 --- a/app/assets/stylesheets/new_design/new_header.scss +++ b/app/assets/stylesheets/new_design/new_header.scss @@ -23,13 +23,23 @@ $landing-breakpoint: 1040px; .header-logo { display: inline-block; - margin-right: 4 * $default-spacer; - img { - height: 34px; + .header-logo-wide { + margin-right: 4 * $default-spacer; + } - @media (max-width: $landing-breakpoint) { - height: 18px; + .header-logo-narrow { + display: none; + } + + @media (max-width: $landing-breakpoint) { + .header-logo-wide { + display: none; + } + + .header-logo-narrow { + display: inline; + margin-right: 0; } } } diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml index 616ade33b..a01812504 100644 --- a/app/views/layouts/_new_header.haml +++ b/app/views/layouts/_new_header.haml @@ -6,7 +6,8 @@ .flex.align-center = link_to root_path_for_profile(nav_bar_profile), class: "header-logo" do - %img{ src: image_url("header/logo-ds.svg"), alt: "demarches-simplifiees.fr" } + = image_tag "header/logo-ds.svg", alt: "demarches-simplifiees.fr", class: "header-logo-wide" + = image_tag "header/logo-ds-narrow.svg", alt: "demarches-simplifiees.fr", class: "header-logo-narrow" - if nav_bar_profile == :gestionnaire && gestionnaire_signed_in? - current_url = request.path_info