From 4ea30da2995ae79362f997762b8c9e8b0def9639 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 27 Aug 2021 20:29:12 +0200 Subject: [PATCH 1/6] Fix line height in subnavigation items When, on small screens, a navigation element had a very long text causing it to span over multiple lines, the space between each line was the same as the space between elements. This made it hard to see where elements started and ended. Using a padding to separate the contents of one element and the contents of the next one solves the issue. --- app/assets/stylesheets/layout.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 4ebefa35b..beaf3de74 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -744,7 +744,8 @@ body > header, a { color: inherit; display: inline-block; - line-height: $line-height * 2; + padding-bottom: $line-height / 2; + padding-top: $line-height / 2; position: relative; text-align: left; width: 100%; From d6fe49ff4f84ebbb1f2dd3a7cfce7c86d9c58ff2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 27 Aug 2021 22:51:06 +0200 Subject: [PATCH 2/6] Unify Foundation classes in header menus In commit 55c3c7987 we updated the admin layout header to use `class="dropdown menu" data-dropdown-menu` instead of `class="menu" data-responsive-menu="medium-dropdown"`. Then, in commit dcec003d0, we updated the public layout header to use `class="menu" data-responsive-menu="medium-dropdown"` instead of `class="dropdown menu" data-dropdown-menu`. Now we're applying the same classes to both, hoping we can get some consistent styles. I'm choosing to keep the ones in the public layout because using it I had less problems when trying to improve the styles of this navigation. --- app/views/layouts/_admin_header.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/_admin_header.html.erb b/app/views/layouts/_admin_header.html.erb index 88e5e0ff8..e301c0d4a 100644 --- a/app/views/layouts/_admin_header.html.erb +++ b/app/views/layouts/_admin_header.html.erb @@ -40,7 +40,7 @@
-
    +
      <%= render "shared/admin_login_items" %> <%= render "layouts/notification_item" %> <%= render "devise/menu/login_items" %> From 877eb44bd4b2d838d289aab1428e91f85fc015b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 27 Aug 2021 23:06:33 +0200 Subject: [PATCH 3/6] Simplify logo layout in admin header Having the logo inside a list of one item wasn't needed and its classes conflicted with other elements with the `.menu` class. --- app/assets/stylesheets/admin.scss | 19 ++++++-------- app/views/layouts/_admin_header.html.erb | 32 +++++++++++------------- app/views/layouts/management.html.erb | 16 +++++------- 3 files changed, 28 insertions(+), 39 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index c6e72a248..b1449f476 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -111,10 +111,6 @@ $table-header: #ecf1f6; [class^="icon-"] { font-size: $base-font-size; } - } - - .menu .menu-text { - padding: 0; h1 { margin-top: $line-height / 2; @@ -128,14 +124,15 @@ $table-header: #ecf1f6; color: inherit; text-transform: uppercase; } - } - a { - display: inline-block; - font-family: "Lato" !important; - font-size: rem-calc(24); - font-weight: lighter; - padding: 0; + a { + color: inherit; + display: inline-block; + font-family: "Lato" !important; + font-size: rem-calc(24); + font-weight: lighter; + line-height: 1; + } } } diff --git a/app/views/layouts/_admin_header.html.erb b/app/views/layouts/_admin_header.html.erb index e301c0d4a..72ac224de 100644 --- a/app/views/layouts/_admin_header.html.erb +++ b/app/views/layouts/_admin_header.html.erb @@ -17,25 +17,21 @@
      -
        -
      • - <% if namespace == "officing" %> -

        - <%= link_to "#" do %> - <%= setting["org_name"] %> -
        <%= namespaced_header_title %> - <% end %> -

        - <% else %> -

        - <%= link_to namespaced_root_path do %> - <%= setting["org_name"] %> -
        <%= namespaced_header_title %> - <% end %> -

        + <% if namespace == "officing" %> +

        + <%= link_to "#" do %> + <%= setting["org_name"] %> +
        <%= namespaced_header_title %> <% end %> -

        • -
      + + <% else %> +

      + <%= link_to namespaced_root_path do %> + <%= setting["org_name"] %> +
      <%= namespaced_header_title %> + <% end %> +

      + <% end %>
      diff --git a/app/views/layouts/management.html.erb b/app/views/layouts/management.html.erb index efd92bbdb..5f8f77d32 100644 --- a/app/views/layouts/management.html.erb +++ b/app/views/layouts/management.html.erb @@ -16,16 +16,12 @@
      -
        -
      • -

        - <%= link_to management_root_path do %> - <%= setting["org_name"] %> -
        <%= t("management.dashboard.index.title") %> - <% end %> -

        -
        • -
      +

      + <%= link_to management_root_path do %> + <%= setting["org_name"] %> +
      <%= t("management.dashboard.index.title") %> + <% end %> +

      <% if show_admin_menu?(manager_logged_in) %>
      From 4fbe2d99d58825ac09943a9745f2cb12568842d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 27 Aug 2021 23:27:49 +0200 Subject: [PATCH 4/6] Simplify small screen styles in admin submenu Some of these styles were redundant and so we can remove them. --- app/assets/stylesheets/admin.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index b1449f476..edc06f283 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -83,15 +83,8 @@ $table-header: #ecf1f6; .submenu { border: 0; - display: block; margin-top: 0; position: initial; - width: 100%; - } - - .is-active { - font-weight: normal; - text-decoration: none; } .is-submenu-item { @@ -99,7 +92,7 @@ $table-header: #ecf1f6; } a { - font-weight: normal !important; + font-weight: normal; } } From 00565bba6a6b00ca611a770a41eb1f03e6ab4d55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 27 Aug 2021 23:59:01 +0200 Subject: [PATCH 5/6] Increase login links touch area on small screens On small screens, the "Sign in", "Register", "My content", "My account" and "Sign out" links didn't have much padding nor space between them, and it was easy to accidentally click the wrong link. This change also positively affects the menu on medium and large screens. When one of the options (like "SDG content") had a text spanning over two lines (like it happens in Swedish), there was barely any space between those two lines. So we're using `line-height: inherit` instead and adjusting the padding accordingly. --- app/assets/stylesheets/layout.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index beaf3de74..0ae638abb 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -580,11 +580,12 @@ body > header, a { color: inherit; + line-height: inherit; padding-left: 0; @include breakpoint(medium) { font-size: $small-font-size; - padding: rem-calc(11) rem-calc(16); + padding: rem-calc(8) rem-calc(16); } } From e2d680947a7f6d0dd049144c7a657a225047bcea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 27 Aug 2021 23:38:45 +0200 Subject: [PATCH 6/6] Add separator in small screen navigation The "Sign in" or "My account" links and the main navigation are different elements, and they're in different places on medium and large screens. Now we're also separating them on small screens. Since the `.vertical` class in the menu added quite a few styles and it was difficult to overwrite them, we're simply removing this class from this element. This way we're also removing the huge space between the menu button and the first element of the navigation. --- app/assets/stylesheets/admin.scss | 12 ++++++------ app/assets/stylesheets/layout.scss | 11 +++++++++++ app/views/shared/_admin_login_items.html.erb | 2 +- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index edc06f283..8d08bd725 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -81,14 +81,14 @@ $table-header: #ecf1f6; .top-bar-right { - .submenu { - border: 0; - margin-top: 0; - position: initial; + > ul { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; } - .is-submenu-item { - padding: $line-height / 2 0; + .submenu { + position: initial; } a { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0ae638abb..514181d09 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -610,6 +610,17 @@ body > header, .menu { + @include breakpoint(small only) { + border-bottom: 1px solid $border; + margin-bottom: $line-height; + margin-top: $line-height / 2; + padding-bottom: $line-height; + + .submenu { + margin-top: 0; + } + } + &.is-dropdown-submenu { background: $body-background; color: $text; diff --git a/app/views/shared/_admin_login_items.html.erb b/app/views/shared/_admin_login_items.html.erb index b79be6cf4..99b03c5cf 100644 --- a/app/views/shared/_admin_login_items.html.erb +++ b/app/views/shared/_admin_login_items.html.erb @@ -1,7 +1,7 @@ <% if show_admin_menu?(current_user) %>
    • <%= link_to t("layouts.header.administration_menu"), "#", rel: "nofollow", class: "hide-for-small-only" %> -
        +
          <% if current_user.administrator? %>
        • <%= link_to t("layouts.header.administration"), admin_root_path %>