consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS to display icons in the admin menu

Browse Source 
This way we simplify the HTML and generating similar menus will be
easier. We also improve the experience for screen reader users, who
might have been hearing the icons as text because we weren't using the
`aria-hidden` attribute.

We're still keeping the "icon-" classes for compatibility with CONSUL
installations which might have changed this code.
This commit is contained in:
Javi Martín
2020-11-26 13:41:47 +01:00
parent d99ca9bd34
commit bdf30aa14e
6 changed files with 116 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
app/assets/stylesheets/admin/menu.scss
View File

@@ -8,6 +8,20 @@
margin-bottom: 0;
margin-left: 0;
padding: 0;
}
> ul > li a {
font-weight: bold;
@mixin icon($name, $style) {
@include has-fa-icon($name, $style);
&::before {
font-size: rem-calc(20);
margin-left: rem-calc(8);
margin-right: rem-calc(10);
}
}
[class^="icon-"] {
color: #fff;
@@ -18,10 +32,81 @@
vertical-align: middle;
width: $line-height * 1.5;
}
&.booths-link {
@include icon(archive, solid);
}
> ul > li a {
font-weight: bold;
&.budgets-link,
&.investments-link {
@include icon(chart-pie, solid);
}
&.comments-link {
@include icon(comments, regular);
}
&.dashboard-link {
@include icon(check, solid);
}
&.debates-link {
@include icon(comment-alt, solid);
}
&.invitations-link {
@include icon(envelope, regular);
}
&.legislation-link {
@include icon(file-alt, solid);
}
&.messages-link {
@include icon(file-archive, regular);
}
&.moderated-content-link {
@include icon(eye, regular);
}
&.polls-link {
@include icon(check-circle, regular);
}
&.print-proposals-link,
&.print-investments-link {
@include icon(print, solid);
}
&.profiles-link {
@include icon(users, solid);
}
&.proposals-link,
&.proposal-notifications-link {
@include icon(lightbulb, solid);
}
&.settings-link {
@include icon(cog, solid);
}
&.signature-sheets-link {
@include icon(file-alt, regular);
}
&.site-customization-link {
@include icon(pencil-alt, solid);
}
&.stats-link {
@include icon(chart-line, solid);
}
&.users-link {
@include icon(user, solid);
}
}
li {

74
app/components/admin/menu_component.html.erb
View File

@@ -1,61 +1,40 @@
<ul id="admin_menu" data-accordion-menu data-multi-open="true">
<% if feature?(:proposals) %>
<li>
<%= link_to admin_proposals_path do %>
<span class="icon-proposals"></span>
<%= t("admin.menu.proposals") %>
<% end %>
<%= link_to t("admin.menu.proposals"), admin_proposals_path, class: "proposals-link" %>
</li>
<% end %>
<% if feature?(:debates) %>
<li class="<%= "is-active" if controller_name == "debates" %>">
<%= link_to admin_debates_path do %>
<span class="icon-debates"></span>
<%= t("admin.menu.debates") %>
<% end %>
<%= link_to t("admin.menu.debates"), admin_debates_path, class: "debates-link" %>
</li>
<% end %>
<li class="<%= "is-active" if controller_name == "comments" %>">
<%= link_to admin_comments_path do %>
<span class="icon-comments"></span>
<%= t("admin.menu.comments") %>
<% end %>
<%= link_to t("admin.menu.comments"), admin_comments_path, class: "comments-link" %>
</li>
<% if feature?(:polls) %>
<li class="<%= "is-active" if polls? %>">
<%= link_to admin_polls_path do %>
<span class="icon-checkmark-circle"></span>
<%= t("admin.menu.polls") %>
<% end %>
<%= link_to t("admin.menu.polls"), admin_polls_path, class: "polls-link" %>
</li>
<% end %>
<% if feature?(:legislation) %>
<li class="<%= "is-active" if controller.class.parent == Admin::Legislation %>">
<%= link_to admin_legislation_processes_path do %>
<span class="icon-file-text"></span>
<%= t("admin.menu.legislation") %>
<% end %>
<%= link_to t("admin.menu.legislation"), admin_legislation_processes_path, class: "legislation-link" %>
</li>
<% end %>
<% if feature?(:budgets) %>
<li class="<%= "is-active" if budgets? %>">
<%= link_to admin_budgets_path do %>
<span class="icon-budget"></span>
<%= t("admin.menu.budgets") %>
<% end %>
<%= link_to t("admin.menu.budgets"), admin_budgets_path, class: "budgets-link" %>
</li>
<% end %>
<li>
<a href="#">
<span class="icon-box"></span>
<%= t("admin.menu.title_booths") %>
</a>
<a href="#" class="booths-link"><%= t("admin.menu.title_booths") %></a>
<ul id="booths_menu" <%= "class=is-active" if booths? %>>
<li <%= "class=is-active" if %w[officers officer_assignments].include?(controller_name) %>>
<%= link_to t("admin.menu.poll_officers"), admin_officers_path %>
@@ -82,18 +61,12 @@
<% if feature?(:signature_sheets) %>
<li class="<%= "is-active" if controller_name == "signature_sheets" %>">
<%= link_to admin_signature_sheets_path do %>
<span class="icon-file-text-o"></span>
<%= t("admin.menu.signature_sheets") %>
<% end %>
<%= link_to t("admin.menu.signature_sheets"), admin_signature_sheets_path, class: "signature-sheets-link" %>
</li>
<% end %>
<li>
<a href="#">
<span class="icon-zip"></span>
<%= t("admin.menu.messaging_users") %>
</a>
<a href="#" class="messages-link"><%= t("admin.menu.messaging_users") %></a>
<ul id="messaging_users_menu" <%= "class=is-active" if messages_menu_active? %>>
<li <%= "class=is-active" if controller_name == "newsletters" %>>
<%= link_to t("admin.menu.newsletters"), admin_newsletters_path %>
@@ -111,10 +84,7 @@
</li>
<li>
<a href="#">
<span class="icon-edit"></span>
<%= t("admin.menu.title_site_customization") %>
</a>
<a href="#" class="site-customization-link"><%= t("admin.menu.title_site_customization") %></a>
<ul <%= "class=is-active" if customization? &&
controller.class.parent != Admin::Poll::Questions::Answers %>>
@@ -142,10 +112,7 @@
</li>
<li>
<a href="#">
<span class="icon-eye"></span>
<%= t("admin.menu.title_moderated_content") %>
</a>
<a href="#" class="moderated-content-link"><%= t("admin.menu.title_moderated_content") %></a>
<ul <%= "class=is-active" if moderated_content? %>>
<% if feature?(:proposals) %>
<li <%= "class=is-active" if controller_name == "hidden_proposals" %>>
@@ -184,10 +151,7 @@
</li>
<li>
<a href="#">
<span class="icon-organizations"></span>
<%= t("admin.menu.title_profiles") %>
</a>
<a href="#" class="profiles-link"><%= t("admin.menu.title_profiles") %></a>
<ul <%= "class=is-active" if profiles? %>>
<li <%= "class=is-active" if controller_name == "administrators" %>>
<%= link_to t("admin.menu.administrators"), admin_administrators_path %>
@@ -220,16 +184,11 @@
</li>
<li class="<%= "is-active" if controller_name == "stats" %>">
<%= link_to admin_stats_path do %>
<span class="icon-stats"></span><%= t("admin.menu.stats") %>
<% end %>
<%= link_to t("admin.menu.stats"), admin_stats_path, class: "stats-link" %>
</li>
<li>
<a href="#">
<span class="icon-settings"></span>
<%= t("admin.menu.title_settings") %>
</a>
<a href="#" class="settings-link"><%= t("admin.menu.title_settings") %></a>
<ul <%= "class=is-active" if settings? %>>
<li <%= "class=is-active" if controller_name == "settings" %>>
<%= link_to t("admin.menu.settings"), admin_settings_path %>
@@ -258,10 +217,7 @@
</ul>
</li>
<li>
<a href="#">
<span class="icon-check"></span>
<%= t("admin.menu.dashboard") %>
</a>
<a href="#" class="dashboard-link"><%= t("admin.menu.dashboard") %></a>
<ul <%= "class=is-active" if dashboard? %>>
<li <%= "class=is-active" if controller_name == "actions" %>>
<%= link_to t("admin.menu.dashboard_actions"), admin_dashboard_actions_path %>

20
app/views/management/_menu.html.erb
View File

@@ -1,9 +1,6 @@
<ul id="admin_menu" data-accordion-menu>
<li class="section-title">
<a href="#">
<span class="icon-user"></span>
<%= t("management.menu.users") %>
</a>
<a href="#" class="users-link"><%= t("management.menu.users") %></a>
<ul class="is-active">
<li <%= "class=is-active" if menu_users? %>>
@@ -43,24 +40,15 @@
<% if Setting["process.budgets"] %>
<li <%= "class=is-active" if menu_print_investments? %>>
<%= link_to print_investments_management_budgets_path do %>
<span class="icon-print"></span>
<%= t("management.menu.print_budget_investments") %>
<% end %>
<%= link_to t("management.menu.print_budget_investments"), print_investments_management_budgets_path, class: "print-investments-link" %>
</li>
<% end %>
<li <%= "class=is-active" if menu_print_proposals? %>>
<%= link_to print_management_proposals_path do %>
<span class="icon-print"></span>
<%= t("management.menu.print_proposals") %>
<% end %>
<%= link_to t("management.menu.print_proposals"), print_management_proposals_path, class: "print-proposals-link" %>
</li>
<li <%= "class=is-active" if menu_user_invites? %>>
<%= link_to new_management_user_invite_path do %>
<span class="icon-letter"></span>
<%= t("management.menu.user_invites") %>
<% end %>
<%= link_to t("management.menu.user_invites"), new_management_user_invite_path, class: "invitations-link" %>
</li>
</ul>

30
app/views/moderation/_menu.html.erb
View File

@@ -5,49 +5,31 @@
<% if feature?(:proposals) %>
<li <%= "class=is-active" if controller_name == "proposals" %>>
<%= link_to moderation_proposals_path do %>
<span class="icon-proposals"></span>
<%= t("moderation.menu.proposals") %>
<% end %>
<%= link_to t("moderation.menu.proposals"), moderation_proposals_path, class: "proposals-link" %>
</li>
<li <%= "class=is-active" if controller_name == "proposal_notifications" %>>
<%= link_to moderation_proposal_notifications_path do %>
<span class="icon-proposals"></span>
<%= t("moderation.menu.proposal_notifications") %>
<% end %>
<%= link_to t("moderation.menu.proposal_notifications"), moderation_proposal_notifications_path, class: "proposal-notifications-link" %>
</li>
<% end %>
<% if feature?(:debates) %>
<li <%= "class=is-active" if controller_name == "debates" %>>
<%= link_to moderation_debates_path do %>
<span class="icon-debates"></span>
<%= t("moderation.menu.flagged_debates") %>
<% end %>
<%= link_to t("moderation.menu.flagged_debates"), moderation_debates_path, class: "debates-link" %>
</li>
<% end %>
<% if feature?(:budgets) %>
<li <%= "class=is-active" if controller_name == "investments" %>>
<%= link_to moderation_budget_investments_path do %>
<span class="icon-budget"></span>
<%= t("moderation.menu.flagged_investments") %>
<% end %>
<%= link_to t("moderation.menu.flagged_investments"), moderation_budget_investments_path, class: "investments-link" %>
</li>
<% end %>
<li <%= "class=is-active" if controller_name == "comments" %>>
<%= link_to moderation_comments_path do %>
<span class="icon-comments"></span>
<%= t("moderation.menu.flagged_comments") %>
<% end %>
<%= link_to t("moderation.menu.flagged_comments"), moderation_comments_path, class: "comments-link" %>
</li>
<li <%= "class=is-active" if controller_name == "users" %>>
<%= link_to moderation_users_path do %>
<span class="icon-user"></span>
<%= t("moderation.menu.users") %>
<% end %>
<%= link_to t("moderation.menu.users"), moderation_users_path, class: "users-link" %>
</li>
</ul>

10
app/views/officing/_menu.html.erb
View File

@@ -4,19 +4,13 @@
<li class="<%= "js-vote-collection" %>
<%= " is-active" if controller_name == "voters" %>
<%= " is-hidden" if controller_name == "voters" && Poll.votable_by(@user).any? %>">
<%= link_to new_officing_residence_path do %>
<span class="icon-user"></span>
<%= t("officing.menu.voters") %>
<% end %>
<%= link_to t("officing.menu.voters"), new_officing_residence_path, class: "users-link" %>
</li>
<% end %>
<% if final_recount_shift? %>
<li <%= "class=is-active" if ["results", "ballot_sheets"].include?(controller_name) || (controller_name == "polls" && action_name == "final") %>>
<%= link_to final_officing_polls_path do %>
<span class="icon-user"></span>
<%= t("officing.menu.total_recounts") %>
<% end %>
<%= link_to t("officing.menu.total_recounts"), final_officing_polls_path, class: "users-link" %>
</li>
<% end %>
</ul>

6
app/views/valuation/_menu.html.erb
View File

@@ -6,12 +6,8 @@
<% if feature?(:budgets) %>
<li <%= "class=is-active" if controller_name == "budget_investments" %>>
<%= link_to valuation_budgets_path do %>
<span class="icon-budget"></span>
<%= t("valuation.menu.budgets") %>
<% end %>
<%= link_to t("valuation.menu.budgets"), valuation_budgets_path, class: "budgets-link" %>
</li>
<% end %>
</ul>
</nav>