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

Merge pull request #4005 from consul/off_canvas

Browse Source 
Simplify code related to the admin menu
This commit is contained in:
Javi Martín
2020-09-21 15:51:05 +02:00
committed by GitHub
parent 20b814da7c fc3a7618b1
commit 93cf9e22c3
14 changed files with 509 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/admin.scss
View File

@@ -291,10 +291,6 @@ $sidebar-active: #f4fcd0;
margin-right: rem-calc(12); margin-right: rem-calc(12);
} }
.side-menu-and-admin-content {
@include side-menu-and-content;
}
.admin-content { .admin-content {
.proposal-form { .proposal-form {
padding-top: 0; padding-top: 0;
@@ -652,7 +648,7 @@ code {
border-radius: rem-calc(3); border-radius: rem-calc(3);
font-size: rem-calc(16); font-size: rem-calc(16);
font-weight: normal; font-weight: normal;
margin: $line-height; margin-bottom: $line-height;
padding: $line-height / 2; padding: $line-height / 2;
strong { strong {

4
app/assets/stylesheets/dashboard.scss
View File

@@ -16,10 +16,6 @@
// 01. Dashboard global // 01. Dashboard global
// -------------------- // --------------------
.dashboard-menu-and-content {
@include side-menu-and-content;
}
.proposal-title { .proposal-title {
display: inline-block; display: inline-block;

1
app/assets/stylesheets/foundation_and_overrides.scss
View File

@@ -31,7 +31,6 @@
@include foundation-responsive-embed; @include foundation-responsive-embed;
@include foundation-label; @include foundation-label;
@include foundation-media-object; @include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit; @include foundation-orbit;
@include foundation-pagination; @include foundation-pagination;
@include foundation-progress-bar; @include foundation-progress-bar;

64
app/assets/stylesheets/layout.scss
View File

@@ -436,10 +436,6 @@ a {
display: table-cell; display: table-cell;
} }
.off-canvas-content {
box-shadow: none;
}
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
@@ -449,6 +445,66 @@ a {
margin-top: 0; margin-top: 0;
} }
.menu-and-content {
$side-menu-min-width: 250px;
@include breakpoint(medium) {
display: flex;
> nav {
flex: 25%;
min-width: $side-menu-min-width;
+ * {
flex: 75%;
padding: $line-height !important;
}
}
[for="show_menu"] {
display: none;
}
}
@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;
}
}
// 02. Header // 02. Header
// ---------- // ----------

33
app/assets/stylesheets/mixins.scss
View File

@@ -1,9 +1,8 @@
// Table of Contents // Table of Contents
// //
// 01. Logo // 01. Logo
// 02. Side menu and content // 02. Orbit bullets
// 03. Orbit bullets // 03. Direct uploads
// 04. Direct uploads
// ------------------ // ------------------
// 01. Logo // 01. Logo
@@ -22,30 +21,8 @@
} }
} }
// 02. Side menu and content // 02. Orbit bullets
// ------------------------- // -----------------
@mixin side-menu-and-content {
display: flex;
> :first-child {
flex: 25%;
min-width: 250px;
> :first-child {
height: 100%;
}
}
> :last-child {
flex: 75%;
overflow-x: auto;
padding: $line-height !important;
}
}
// 03. Orbit bullet
// ----------------
@mixin orbit-bullets { @mixin orbit-bullets {
@include disable-mouse-outline; @include disable-mouse-outline;
@@ -72,7 +49,7 @@
} }
} }
// 04. Direct uploads // 03. Direct uploads
// ------------------ // ------------------
@mixin direct-uploads { @mixin direct-uploads {

8
app/helpers/admin_helper.rb
View File

@@ -1,12 +1,4 @@
module AdminHelper module AdminHelper
def side_menu
if namespace == "moderation/budgets"
render "/moderation/menu"
else
render "/#{namespace}/menu"
end
end
def namespaced_root_path def namespaced_root_path
"/#{namespace}" "/#{namespace}"
end end

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

@@ -1,5 +1,4 @@
<div class="admin-sidebar"> <ul id="admin_menu" data-accordion-menu data-multi-open="true">
<ul id="admin_menu" data-accordion-menu data-multi-open="true">
<% if feature?(:proposals) %> <% if feature?(:proposals) %>
<li class="section-title"> <li class="section-title">
<%= link_to admin_proposals_path do %> <%= link_to admin_proposals_path do %>
@@ -277,5 +276,4 @@
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div>

28
app/views/layouts/admin.html.erb
View File

@@ -7,35 +7,23 @@
</head> </head>
<body class="admin"> <body class="admin">
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<div class="show-for-small-only">
<%= side_menu %>
</div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<%= render "layouts/admin_header" %> <%= render "layouts/admin_header" %>
<div class="side-menu-and-admin-content no-margin-top"> <div class="menu-and-content no-margin-top">
<div id="side_menu" class="hide-for-small-only"> <%= check_box_tag :show_menu, nil, false, role: "switch" %>
<%= side_menu %>
</div> <nav id="side_menu" class="admin-sidebar">
<%= render "/#{namespace}/menu" %>
</nav>
<div class="admin-content"> <div class="admin-content">
<div class="show-for-small-only"> <%= label_tag :show_menu, t("admin.menu.admin"),
<button type="button" class="button hollow expanded" data-toggle="offCanvas"><%= t("admin.menu.admin") %></button> "aria-hidden": true, class: "button hollow expanded" %>
</div>
<%= render "layouts/flash" %> <%= render "layouts/flash" %>
<%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %> <%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %>
<%= yield %> <%= yield %>
</div> </div>
</div> </div>
</div>
</div>
</div>
</body> </body>
</html> </html>

31
app/views/layouts/dashboard.html.erb
View File

@@ -25,32 +25,18 @@
<h1 class="show-for-sr"><%= setting["org_name"] %></h1> <h1 class="show-for-sr"><%= setting["org_name"] %></h1>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<div class="show-for-small-only">
<div class="dashboard-sidebar">
<%= render "dashboard/menu" %>
</div>
</div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<%= render "layouts/header", with_subnavigation: false %> <%= render "layouts/header", with_subnavigation: false %>
<div class="dashboard-menu-and-content no-margin-top"> <div class="menu-and-content no-margin-top">
<div id="side_menu" class="hide-for-small-only"> <%= check_box_tag :show_menu, nil, false, role: "switch" %>
<div class="dashboard-sidebar">
<nav id="side_menu" class="dashboard-sidebar">
<%= render "dashboard/menu" %> <%= render "dashboard/menu" %>
</div> </nav>
</div>
<div class="admin-content"> <div class="admin-content">
<div class="show-for-small-only"> <%= label_tag :show_menu, t("admin.menu.admin"),
<button type="button" class="button hollow expanded" data-toggle="offCanvas"> "aria-hidden": true, class: "button hollow expanded" %>
<%= t("admin.menu.admin") %>
</button>
</div>
<%= render "layouts/flash" %> <%= render "layouts/flash" %>
<%= render "layouts/dashboard/proposal_totals" %> <%= render "layouts/dashboard/proposal_totals" %>
@@ -58,8 +44,5 @@
<%= yield %> <%= yield %>
</div> </div>
</div> </div>
</div>
</div>
</div>
</body> </body>
</html> </html>

17
app/views/layouts/management.html.erb
View File

@@ -45,18 +45,21 @@
</div> </div>
</header> </header>
<main class="no-margin-top row expanded collapse"> <div class="menu-and-content no-margin-top">
<div class="small-12 medium-3 column"> <%= check_box_tag :show_menu, nil, false, role: "switch" %>
<nav class="admin-sidebar">
<%= render "/management/menu" %> <%= render "/management/menu" %>
</div> </nav>
<main class="admin-content">
<%= label_tag :show_menu, t("admin.menu.admin"),
"aria-hidden": true, class: "button hollow expanded" %>
<%= render "management/account_info" %> <%= render "management/account_info" %>
<div class="admin-content small-12 medium-9 column">
<%= render "layouts/flash" %> <%= render "layouts/flash" %>
<%= yield %> <%= yield %>
</div>
</main> </main>
</div>
</body> </body>
</html> </html>

67
app/views/layouts/proposals_dashboard.html.erb
View File

@@ -1,67 +0,0 @@
<!DOCTYPE html>
<html lang="<%= I18n.locale %>" data-current-user-id="<%= current_user.try(:id) %>">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%= render "layouts/tracking_data" %>
<%= render "layouts/meta_tags" %>
<title><%= content_for?(:title) ? yield(:title) : setting["org_name"] %></title>
<%= content_for :canonical %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
<%= csrf_meta_tags %>
<%= favicon_link_tag "favicon.ico" %>
<%= favicon_link_tag image_path_for("apple-touch-icon-200.png"),
rel: "icon apple-touch-icon",
sizes: "200x200",
type: "image/png" %>
<%= content_for :social_media_meta_tags %>
<%= raw setting["per_page_code_head"] %>
</head>
<body class="proposal-dashboard">
<%= raw setting["per_page_code_body"] %>
<h1 class="show-for-sr"><%= setting["org_name"] %></h1>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<div class="show-for-small-only">
<div class="dashboard-sidebar" data-equalizer-watch>
<%= render "proposals_dashboard/menu" %>
</div>
</div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<%= render "layouts/header", with_subnavigation: false %>
<div class="no-margin-top row expanded collapse" data-equalizer>
<div class="small-12 medium-3 column" data-equalizer-watch>
<div class="show-for-small-only">
<button type="button" class="button hollow expanded" data-toggle="offCanvas">
<%= t("admin.menu.admin") %>
</button>
</div>
<div id="side_menu" class="hide-for-small-only">
<div class="dashboard-sidebar" data-equalizer-watch>
<%= render "proposals_dashboard/menu" %>
</div>
</div>
</div>
<div class="admin-content small-12 medium-9 column" data-equalizer-watch>
<%= render "layouts/flash" %>
<%= render "layouts/dashboard/proposal_totals" %>
<%= render "layouts/dashboard/proposal_header" %>
<%= yield %>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

5
app/views/management/_account_info.html.erb
View File

@@ -1,7 +1,5 @@
<% if managed_user.document_number.present? %> <% if managed_user.document_number.present? %>
<section class="small-12 medium-9 column"> <section class="account-info">
<div class="account-info">
<%= link_to(t("management.account_info.change_user"), <%= link_to(t("management.account_info.change_user"),
logout_management_users_path, logout_management_users_path,
method: :delete, method: :delete,
@@ -38,6 +36,5 @@
<%= t("management.account_info.document_number_label") %> <%= t("management.account_info.document_number_label") %>
<strong><%= managed_user.document_number %></strong> <strong><%= managed_user.document_number %></strong>
</p> </p>
</div>
</section> </section>
<% end %> <% end %>

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

@@ -1,5 +1,4 @@
<div class="admin-sidebar"> <ul id="admin_menu" data-accordion-menu>
<ul id="admin_menu" data-accordion-menu>
<li class="section-title"> <li class="section-title">
<a href="#"> <a href="#">
<span class="icon-user"></span> <span class="icon-user"></span>
@@ -64,5 +63,4 @@
<%= t("management.menu.user_invites") %> <%= t("management.menu.user_invites") %>
<% end %> <% end %>
</li> </li>
</ul> </ul>
</div>

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

@@ -1,5 +1,4 @@
<nav class="admin-sidebar"> <ul id="moderation_menu">
<ul id="moderation_menu">
<li> <li>
<%= link_to t("moderation.dashboard.index.title"), moderation_root_path %> <%= link_to t("moderation.dashboard.index.title"), moderation_root_path %>
</li> </li>
@@ -51,5 +50,4 @@
<%= t("moderation.menu.users") %> <%= t("moderation.menu.users") %>
<% end %> <% end %>
</li> </li>
</ul> </ul>
</nav>