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

Dashboard proposal menu redesign

Browse Source 
Dashboard proposal menu has been redesigned to look like the available
mock-ups.
This commit is contained in:
Juan Salvador Pérez García
2018-06-27 13:25:09 +02:00
parent 2be107f4da
commit d2a05ee779
4 changed files with 290 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
app/assets/stylesheets/proposal.scss
View File

@@ -18,7 +18,92 @@
} }
.proposal-dashboard { .proposal-dashboard {
margin-top: -1.5rem; .dashboard-sidebar {
border-right: 1pt solid lightgray;
@include breakpoint(medium) {
min-height: rem-calc(1100);
}
ul {
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
padding: 0;
[class^="icon-"] {
color: #595959;
display: inline-block;
font-size: rem-calc(24);
line-height: $line-height;
padding: $line-height / 2 $line-height / 4;
padding-left: 0;
vertical-align: middle;
}
}
li {
margin: 0;
outline: 0;
ul {
margin-left: $line-height / 1.5;
border-left: 1px solid #b6b6b6;
padding-left: $line-height / 2;
}
&.is-active a {
span {
color: #00538b;
font-weight: bold;
border-bottom: 2px solid #00538b;
padding-bottom: 2px;
}
}
}
li a {
color: #595959;
display: block;
line-height: rem-calc(48);
padding-left: rem-calc(12);
vertical-align: top;
&:hover {
text-decoration: none;
}
}
li a.is-active {
color: #00538b;
[class^="icon-"] {
color: #00538b;
}
}
.submenu {
border-bottom: 0;
margin-left: $line-height;
li:first-child {
padding-top: $line-height / 2;
}
li:last-child {
padding-bottom: $line-height / 2;
}
a {
font-weight: normal;
}
.is-active {
border-bottom: 0;
}
}
}
.columns { .columns {
padding: 0; padding: 0;
@@ -43,13 +128,6 @@
} }
} }
.left-menu {
border-right: 1pt solid lightgray;
border-bottom: 1pt solid lightgray;
padding: 1rem 1.5rem 1rem 1.5rem;
background-color: #fbfbfb;
}
.body { .body {
padding: 1rem 1.5rem 1rem 1.5rem; padding: 1rem 1.5rem 1rem 1.5rem;
} }

72
app/helpers/proposals_dashboard_helper.rb
View File

@@ -1,2 +1,74 @@
module ProposalsDashboardHelper module ProposalsDashboardHelper
def resources_menu_visible?(proposal, resources)
can?(:manage_polls, proposal) && resources.any?
end
def progress_menu(&block)
menu_group('progress-menu', progress_menu_active?, &block)
end
def progress_menu_active?
actions_menu_active? || stats_menu_active?
end
def actions_menu(&block)
menu_entry(actions_menu_active?, &block)
end
def actions_menu_active?
(controller_name == 'proposals_dashboard' && action_name == 'index') || is_proposed_action_request?
end
def stats_menu(&block)
menu_entry(stats_menu_active?, &block)
end
def stats_menu_active?
controller_name == 'proposals_dashboard' && action_name == 'stats'
end
def resources_menu(&block)
menu_group('resources-menu', resources_menu_active?, &block)
end
def polls_menu(&block)
menu_entry(polls_menu_active?, &block)
end
def resources_menu_active?
polls_menu_active? || is_resource_request?
end
def polls_menu_active?
controller_name == 'polls'
end
def menu_group(id, active, &block)
html_class = nil
html_class = 'is-active' if active
content_tag(:ul, id: id, class: html_class) do
yield
end
end
def menu_entry(active, &block)
content = capture(&block)
html_class = nil
html_class = 'is-active' if active
content_tag(:li, content, class: html_class)
end
def is_resource_request?
controller_name == 'proposals_dashboard' && action_name == 'new_request' && proposal_dashboard_action&.resource?
end
def is_proposed_action_request?
controller_name == 'proposals_dashboard' && action_name == 'new_request' && proposal_dashboard_action&.proposed_action?
end
def is_request_active(id)
controller_name == 'proposals_dashboard' && action_name == 'new_request' && proposal_dashboard_action&.id == id
end
end end

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

@@ -23,53 +23,45 @@
<%= setting['per_page_code_head'].try(:html_safe) %> <%= setting['per_page_code_head'].try(:html_safe) %>
</head> </head>
<body class="<%= yield (:body_class) %>"> <body class="proposal-dashboard">
<%= setting['per_page_code_body'].try(:html_safe) %> <%= setting['per_page_code_body'].try(:html_safe) %>
<h1 class="show-for-sr"><%= setting['org_name'] %></h1> <h1 class="show-for-sr"><%= setting['org_name'] %></h1>
<div class="wrapper <%= yield (:wrapper_class) %>"> <div class="off-canvas-wrapper">
<%= render partial: 'layouts/header', locals: {with_subnavigation: false} %> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!--[if lt IE 9]> <div class="show-for-small-only">
<% if browser.ie? && cookies['ie_alert_closed'] != 'true' %> <div class="dashboard-sidebar" data-equalizer-watch>
<div data-alert class="callout primary ie-callout" data-closable>
<button class="close-button ie-callout-close-js"
aria-label="<%= t("application.close") %>" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<h2><%= t("layouts.application.ie_title") %></h2>
<p>
<%= t("layouts.application.ie",
chrome: link_to(
t("layouts.application.chrome"), "https://www.google.com/chrome/browser/desktop/", title: t("shared.target_blank_html"), target: "_blank"),
firefox: link_to(
t("layouts.application.firefox"), "https://www.mozilla.org/firefox", title: t("shared.target_blank_html"), target: "_blank")
).html_safe %>
</p>
</div>
<% end %>
<![endif]-->
<%= render partial: 'layouts/flash' %>
<div class="proposal-dashboard">
<div class="row small-12 columns title">
<h5><%= t '.title' %></h5>
</div>
<div class="row">
<div class="small-2 columns left-menu">
<%= render partial: 'proposals_dashboard/menu' %> <%= render partial: 'proposals_dashboard/menu' %>
</div> </div>
<div class="small-10 columns body"> </div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<%= render partial: 'layouts/header', locals: {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 partial: 'proposals_dashboard/menu' %>
</div>
</div>
</div>
<div class="admin-content small-12 medium-9 column" data-equalizer-watch>
<%= render partial: 'layouts/flash' %>
<%= yield %> <%= yield %>
</div> </div>
</div> </div>
</div>
<div class="push"></div> </div>
</div> </div>
</body> </body>
<!--[if lt IE 9]>
<%= javascript_include_tag "ie_lt9" %>
<![endif]-->
</html> </html>

162
app/views/proposals_dashboard/_menu.html.erb
View File

@@ -1,106 +1,104 @@
<ul id="proposal_dashboard_menu" data-multi-open="false">
<li class="section-title">
<a href="#">
<span class="icon-checkmark-circle"></span>
<strong><%= t('.general') %></strong>
</a>
<% if current_editable?(proposal) || can?(:publish, proposal) %> <ul id="general-menu">
<div class="row">
<div class="small-2 columns"></div>
<div class="small-10 columns"><%= t '.general' %></div>
</div>
<% if current_editable?(proposal) %> <% if current_editable?(proposal) %>
<div class="row"> <li>
<div class="small-2 columns"></div> <%= link_to edit_proposal_path(proposal), target: '_blank' do %>
<div class="small-10 columns"> <span><%= t('.edit_proposal_link') %></span>
<%= link_to t('.edit_proposal_link'), edit_proposal_path(proposal), target: '_blank' %> <% end %>
</div> </li>
</div>
<% end %> <% end %>
<div class="row"> <li>
<div class="small-2 columns"></div> <%= link_to new_proposal_notification_path(proposal_id: proposal.id),
<div class="small-10 columns"> target: '_blank' do %>
<%= link_to t('.send_notification'), <span><%= t('.send_notification') %></span>
new_proposal_notification_path(proposal_id: proposal.id), <% end %>
target: '_blank' %> </li>
</div>
</div>
<% if can_destroy_image?(proposal) %> <% if can_destroy_image?(proposal) %>
<div class="row"> <li>
<div class="small-2 columns"></div> <%= link_to image_path(proposal.image, from: request.url),
<div class="small-10 columns">
<%= link_to t('images.remove_image'),
image_path(proposal.image, from: request.url),
method: :delete, method: :delete,
data: { confirm: t('images.actions.destroy.confirm') } %> data: { confirm: t('images.actions.destroy.confirm') } do %>
</div> <span><%= t('images.remove_image') %></span>
</div> <% end %>
</li>
<% end %> <% end %>
<% unless proposal.retired? %> <% unless proposal.retired? %>
<div class="row"> <li>
<div class="small-2 columns"></div> <%= link_to retire_form_proposal_path(proposal),
<div class="small-10 columns"> target: '_blank' do %>
<%= link_to t('.retire'), <span><%= t('.retire') %></span>
retire_form_proposal_path(proposal), <% end %>
target: '_blank' %> </li>
</div>
</div>
<% end %> <% end %>
<% if can?(:publish, proposal) %> <% if can?(:publish, proposal) %>
<div class="row"> <li>
<div class="small-2 columns"></div> <%= link_to publish_proposal_dashboard_index_path(proposal), method: :patch do %>
<div class="small-10 columns"> <span><%= t('.publish') %></span>
<%= link_to t('.publish'), publish_proposal_dashboard_index_path(proposal), method: :patch %>
</div>
</div>
<% end %> <% end %>
<% end %> </li>
<% end %>
</ul>
</li>
<div class="row"> <li class="section-title">
<div class="small-2 columns"></div> <a href="#" <%= 'class=is-active' if progress_menu_active? %>>
<div class="small-10 columns"><%= t('.progress') %></div> <span class="icon-bars"></span>
</div> <strong><%= t('.progress') %></strong>
</a>
<div class="row"> <%= progress_menu do %>
<div class="small-2 columns"></div> <%= stats_menu do %>
<div class="small-10 columns"> <%= link_to stats_proposal_dashboard_index_path(proposal.to_param) do %>
<%= link_to t('.graphic'), stats_proposal_dashboard_index_path(proposal.to_param) %> <span><%= t('.graphic') %></span>
</div> <% end %>
</div> <% end %>
<div class="row"> <%= actions_menu do %>
<div class="small-2 columns"></div> <%= link_to proposal_dashboard_index_path(proposal.to_param) do %>
<div class="small-10 columns"> <span><%= t('.actions') %></span>
<%= link_to t('.actions'), proposal_dashboard_index_path(proposal.to_param) %> <% end %>
</div> <% end %>
</div> <% end %>
</li>
<div class="row"> <% if resources_menu_visible?(proposal, resources) %>
<div class="small-2 columns"></div> <li class="section-title">
<div class="small-10 columns"><%= t '.resources' %></div> <a href="#" <%= 'class=is-active' if resources_menu_active? %>>
</div> <span class="icon-file-text-o"></span>
<strong><%= t('.resources') %></strong>
</a>
<% if can?(:manage_polls, proposal) %> <%= resources_menu do %>
<div class="row"> <% if can?(:manage_polls, proposal) %>
<div class="small-2 columns"></div> <%= polls_menu do %>
<div class="small-10 columns"> <%= link_to proposal_dashboard_polls_path(proposal.to_param) do %>
<%= link_to t('.polls'), proposal_dashboard_polls_path(proposal.to_param) %> <span><%= t('.polls') %></span>
</div> <% end %>
</div> <% end %>
<% end %> <% end %>
<% resources.each do |resource| %> <% resources.each do |resource| %>
<div class="row"> <li <%= 'class=is-active' if is_request_active(resource.id) %>>
<div class="small-2 columns"></div>
<div class="small-10 columns">
<span data-tooltip title="<%= resource.description %>">
<% if resource.request_to_administrators? %> <% if resource.request_to_administrators? %>
<%= link_to resource.title, <%= link_to new_request_proposal_dashboard_path(proposal, resource) do %>
new_request_proposal_dashboard_path(proposal, resource) %> <span><%= resource.title %></span>
<% end %>
<% else %> <% else %>
<%= link_to resource.title, resource.link, target: '_blank' %> <%= link_to resource.title, resource.link, target: '_blank' %>
<% end %> <% end %>
</span> </li>
</div> <% end %>
</div> <% end %>
<% end %> </li>
<% end %>
</ul>