From 125106f9c0e354ba566a10946e5e69e6cb0337bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 30 Apr 2020 16:51:24 +0200 Subject: [PATCH] Simplify code to have an off-canvas menu While Foundations's off-canvas menu allows us to forget about writing CSS, it also leads to complicated HTML. Ideally Foundation would provide an easy way to simplify what we're doing, but I haven't found anything in the documentation. We could simplify the HTML a bit more if we used a CSS grid layout instead of a flex one, but old browsers have better support for the latter. Note we're using `breakpoint(medium)` so we can group the CSS for small screens and follow SCSS-Lint rules at the same time. Also note behavior of the main area when the menu appears on small screens is slightly different: it doesn't move the main content to the right. I've done it this way so we don't have any overflow issues, unlike the previous version. There's a small issue using a label and a checkbox to enable/disable the menu: sighted keyboard users with a small screen might not be able to enable the menu. So we're adding the `:focus-within` pseudoclass so the menu can be normally navigated using the keyboard. Even if old browsers don't support this pseudoclass, we believe the probability of a sighted user using a small screen, navigating with the keyboard and using an old browser is really low, particularly in the admin area. We're also adding the `aria-hidden` attribute on the label, since the menu is never hidden for screen readers and so having a control to show it could be confusing. Since the label is not focusable, we're complying with the fourth ARIA rule: > Do not use role="presentation" or aria-hidden="true" on a focusable > element . > > Using either of these on a focusable element will result in some users > focusing on 'nothing'. --- .../stylesheets/foundation_and_overrides.scss | 1 - app/assets/stylesheets/layout.scss | 65 ++- app/views/admin/_menu.html.erb | 540 +++++++++--------- app/views/layouts/admin.html.erb | 36 +- app/views/layouts/dashboard.html.erb | 43 +- app/views/layouts/management.html.erb | 2 +- app/views/management/_menu.html.erb | 122 ++-- app/views/moderation/_menu.html.erb | 96 ++-- 8 files changed, 453 insertions(+), 452 deletions(-) diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index c4fa6944e..577b8476f 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -31,7 +31,6 @@ @include foundation-responsive-embed; @include foundation-label; @include foundation-media-object; -@include foundation-off-canvas; @include foundation-orbit; @include foundation-pagination; @include foundation-progress-bar; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 1118019f1..153bf1638 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -436,10 +436,6 @@ a { display: table-cell; } -.off-canvas-content { - box-shadow: none; -} - .uppercase { text-transform: uppercase; } @@ -450,21 +446,62 @@ a { } .menu-and-content { - display: flex; + $side-menu-min-width: 250px; - > :first-child { - flex: 25%; - min-width: 250px; + @include breakpoint(medium) { + display: flex; - > :first-child { - height: 100%; + > nav { + flex: 25%; + min-width: $side-menu-min-width; + + + * { + flex: 75%; + padding: $line-height !important; + } + } + + [for="show_menu"] { + display: none; } } - > :last-child { - flex: 75%; - overflow-x: auto; - padding: $line-height !important; + @include breakpoint(small only) { + > nav { + height: 100%; + left: -$side-menu-min-width; + overflow-y: auto; + position: fixed; + top: 0; + transition: left 0.5s ease; + width: $side-menu-min-width; + z-index: 12; + + + * { + padding: $line-height !important; + } + } + + [name="show_menu"]:checked + nav, + > nav:focus-within { + left: 0; + + + * { + overflow-x: hidden; + + [for="show_menu"]::after { + @include reveal-overlay; + content: ""; + cursor: pointer; + display: block; + z-index: 11; + } + } + } + } + + [name="show_menu"] { + display: none; } } diff --git a/app/views/admin/_menu.html.erb b/app/views/admin/_menu.html.erb index 6c61c7e84..b7a85121c 100644 --- a/app/views/admin/_menu.html.erb +++ b/app/views/admin/_menu.html.erb @@ -1,281 +1,279 @@ -
-
+ <% end %> + + <% if feature?(:budgets) %> +
  • "> + <%= link_to admin_budgets_path do %> + + <%= t("admin.menu.budgets") %> + <% end %> +
    • + <% end %> + +
  • + + + <%= t("admin.menu.title_booths") %> + + +
    • + + <% if feature?(:signature_sheets) %> +
  • "> + <%= link_to admin_signature_sheets_path do %> + + <%= t("admin.menu.signature_sheets") %> + <% end %> +
    • + <% end %> + + <% messages_sections = %w[newsletters emails_download admin_notifications system_emails] %> + <% messages_menu_active = messages_sections.include?(controller_name) %> +
  • > + + + <%= t("admin.menu.messaging_users") %> + + +
    • + +
  • + + + <%= t("admin.menu.title_site_customization") %> + + +
    • + +
  • + + + <%= t("admin.menu.title_moderated_content") %> + + +
    • + +
  • + + + <%= t("admin.menu.title_profiles") %> + + +
    • + +
  • > + <%= link_to admin_stats_path do %> + <%= t("admin.menu.stats") %> + <% end %> +
    • + +
  • + + + <%= t("admin.menu.title_settings") %> + + +
    • +
  • + + + <%= t("admin.menu.dashboard") %> + + +
    • + diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index b4d0b39e6..edcb2288c 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -7,34 +7,22 @@ -
    -
    -
    + <%= render "layouts/admin_header" %> -
    - <%= side_menu %> -
    -
    +
    + <%= check_box_tag :show_menu, nil, false, role: "switch" %> -
    - <%= render "layouts/admin_header" %> + -
    -
    - <%= side_menu %> -
    +
    + <%= label_tag :show_menu, t("admin.menu.admin"), + "aria-hidden": true, class: "button hollow expanded" %> -
    -
    - -
    - - <%= render "layouts/flash" %> - <%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %> - <%= yield %> -
    -
    -
    + <%= render "layouts/flash" %> + <%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %> + <%= yield %>
    diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb index a52e740e2..9e7786812 100644 --- a/app/views/layouts/dashboard.html.erb +++ b/app/views/layouts/dashboard.html.erb @@ -25,40 +25,23 @@

    <%= setting["org_name"] %>

    -
    -
    -
    -
    -
    - <%= render "dashboard/menu" %> -
    -
    -
    + <%= render "layouts/header", with_subnavigation: false %> -
    - <%= render "layouts/header", with_subnavigation: false %> +
    + <%= check_box_tag :show_menu, nil, false, role: "switch" %> -
    -
    -
    - <%= render "dashboard/menu" %> -
    -
    + -
    -
    - -
    +
    + <%= label_tag :show_menu, t("admin.menu.admin"), + "aria-hidden": true, class: "button hollow expanded" %> - <%= render "layouts/flash" %> - <%= render "layouts/dashboard/proposal_totals" %> - <%= render "layouts/dashboard/proposal_header" %> - <%= yield %> -
    -
    -
    + <%= render "layouts/flash" %> + <%= render "layouts/dashboard/proposal_totals" %> + <%= render "layouts/dashboard/proposal_header" %> + <%= yield %>
    diff --git a/app/views/layouts/management.html.erb b/app/views/layouts/management.html.erb index a3dc288f9..b16d1778e 100644 --- a/app/views/layouts/management.html.erb +++ b/app/views/layouts/management.html.erb @@ -46,7 +46,7 @@
    -
    +
    <%= render "/management/menu" %>
    diff --git a/app/views/management/_menu.html.erb b/app/views/management/_menu.html.erb index 213e0ece4..2eb65d5b7 100644 --- a/app/views/management/_menu.html.erb +++ b/app/views/management/_menu.html.erb @@ -1,68 +1,66 @@ -
    -
      -
    • - - - <%= t("management.menu.users") %> - -
        +
          +
        • + + + <%= t("management.menu.users") %> + +
            -
          • > - <%= link_to t("management.menu.select_user"), management_document_verifications_path %> -
            • - - <% if managed_user.email %> -
          • > - <%= link_to t("management.account.menu.reset_password_email"), edit_password_email_management_account_path %> -
            • - <% end %> - -
          • > - <%= link_to t("management.account.menu.reset_password_manually"), edit_password_manually_management_account_path %> -
            • - -
          • > - <%= link_to t("management.menu.create_proposal"), new_management_proposal_path %> -
            • - -
          • > - <%= link_to t("management.menu.support_proposals"), management_proposals_path %> -
            • - - <% if Setting["process.budgets"] %> -
          • > - <%= link_to t("management.menu.create_budget_investment"), create_investments_management_budgets_path %> -
            • - -
          • > - <%= link_to t("management.menu.support_budget_investments"), support_investments_management_budgets_path %> -
            • - <% end %> +
          • > + <%= link_to t("management.menu.select_user"), management_document_verifications_path %>
            • -
          + + <% if managed_user.email %> +
        • > + <%= link_to t("management.account.menu.reset_password_email"), edit_password_email_management_account_path %> +
          • + <% end %> + +
        • > + <%= link_to t("management.account.menu.reset_password_manually"), edit_password_manually_management_account_path %> +
          • + +
        • > + <%= link_to t("management.menu.create_proposal"), new_management_proposal_path %> +
          • + +
        • > + <%= link_to t("management.menu.support_proposals"), management_proposals_path %> +
          • + + <% if Setting["process.budgets"] %> +
        • > + <%= link_to t("management.menu.create_budget_investment"), create_investments_management_budgets_path %> +
          • + +
        • > + <%= link_to t("management.menu.support_budget_investments"), support_investments_management_budgets_path %> +
          • + <% end %> +
        + - <% if Setting["process.budgets"] %> -
      • > - <%= link_to print_investments_management_budgets_path do %> - - <%= t("management.menu.print_budget_investments") %> - <% end %> -
        • + <% if Setting["process.budgets"] %> +
      • > + <%= link_to print_investments_management_budgets_path do %> + + <%= t("management.menu.print_budget_investments") %> + <% end %> +
        • + <% end %> + +
      • > + <%= link_to print_management_proposals_path do %> + + <%= t("management.menu.print_proposals") %> <% end %> +
        • -
      • > - <%= link_to print_management_proposals_path do %> - - <%= t("management.menu.print_proposals") %> - <% end %> -
        • - -
      • > - <%= link_to new_management_user_invite_path do %> - - <%= t("management.menu.user_invites") %> - <% end %> -
        • -
      -
    +
  • > + <%= link_to new_management_user_invite_path do %> + + <%= t("management.menu.user_invites") %> + <% end %> +
    • + diff --git a/app/views/moderation/_menu.html.erb b/app/views/moderation/_menu.html.erb index 3437a731f..800b1551c 100644 --- a/app/views/moderation/_menu.html.erb +++ b/app/views/moderation/_menu.html.erb @@ -1,55 +1,53 @@ - + <% end %> + + <% if feature?(:debates) %> +
  • > + <%= link_to moderation_debates_path do %> + + <%= t("moderation.menu.flagged_debates") %> + <% end %> +
    • + <% end %> + + <% if feature?(:budgets) %> +
  • > + <%= link_to moderation_budget_investments_path do %> + + <%= t("moderation.menu.flagged_investments") %> + <% end %> +
    • + <% end %> + +
  • > + <%= link_to moderation_comments_path do %> + + <%= t("moderation.menu.flagged_comments") %> + <% end %> +
    • + +
  • > + <%= link_to moderation_users_path do %> + + <%= t("moderation.menu.users") %> + <% end %> +
    • +