Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menu cleanup #43

Merged
merged 1 commit into from
Oct 23, 2018
Merged

Menu cleanup #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 1 addition & 37 deletions app/assets/stylesheets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,47 +111,11 @@ body,
border-bottom: 1px solid blue;
}

.navbar {
margin-bottom: 10px;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #606c76;
}

.navbar li {
float: left;
margin-bottom: 0;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar div.right {
.right {
float: right;
}

.navbar li a:hover {
background-color: #ab5dda;
}

.container {
max-width: 100%;
min-height: 80vh;
Expand Down
56 changes: 56 additions & 0 deletions app/assets/stylesheets/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.navbar {
margin-bottom: 10px;
background-color: #606c76;
height: 50px;

> ul {
list-style-type: none;
margin-top: 0;
padding: 0;
display: inline-block;

> li {
float: left;
margin-bottom: 0;

a, span {
display: block;
color: white;
text-align: center;
padding: 13px 16px;
text-decoration: none;
}

&.dropdown {
position: relative;
display: inline-block;

> .dropdown-content {
display: none;
margin: 0;
list-style-type: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;

a, span {
color: #111111;
white-space: nowrap;
}
}
}

&:hover {
> a, > span {
background-color: #ab5dda;
}

> .dropdown-content {
display: block;
}
}
}
}
}
54 changes: 51 additions & 3 deletions app/controllers/application_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
class ApplicationController < ActionController::Base
protect_from_forgery with: :null_session

before_action do
@application_name = ENV.fetch('CANONICAL_NAME', 'Disaster API')
end
before_action :setup_environment
before_action :setup_main_menu

helper_method :admin?

Expand All @@ -26,4 +25,53 @@ def authenticate_user!
redirect_to request.referrer || root_path, notice: "Please sign up or sign in! Thanks!"
end
end

private

def setup_environment
@application_name = ENV.fetch('CANONICAL_NAME', 'Disaster API')
end

def setup_main_menu
#TODO: This isn't the most elaborate or pretty method, but it is straightforward.
# @main_menu contains all the top level items on the left side of the navbar.
# Each item is either a link or a dropdown menu that may be a link or test.
# Only 1 level of depth is supported.
@main_menu = [
{ text: 'Home', path: root_path },
{ text: 'Shelters', path: shelters_path, submenu: [
{ text: 'Help Call Shelters', path: outdated_shelters_path }
] },
{ text: 'Distribution Points', path: distribution_points_path, submenu: [
{ text: 'Outdated Distribition Centers', path: outdated_distribution_points_path }
] },
{ text: 'Needs', path: needs_path, submenu: [] }
]
if admin?
# Shelters Admin Menu Items
@main_menu[1][:submenu] += [
{ text: 'Shelters Update Queue', path: drafts_shelters_path },
{ text: 'Archived Shelters', path: archived_shelters_path }
]

# Distribution Points Admin Menu Items
@main_menu[2][:submenu] += [
{ text: 'Distribution Points Update Queue', path: drafts_distribution_points_path },
{ text: 'Archived Distribution Points', path: archived_distribution_points_path }
]

# Needs Admin Menu Items
@main_menu[3][:submenu] += [
{ text: 'Needs Update Queue', path: drafts_needs_path }
]

# Admin Menu Items
@main_menu << { text: 'Admin', submenu: [
{ text: 'Users', path: users_path },
{ text: 'AmazonProducts', path: amazon_products_path },
{ text: 'Charitable Organizations', path: charitable_organizations_path },
{ text: 'Pages', path: pages_path }
] }
end
end
end
33 changes: 33 additions & 0 deletions app/views/layouts/_menu.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<nav class="navbar">
<ul>
<% @main_menu.each do |topic| %>
<% if topic[:submenu] %>
<li class="dropdown">
<% if topic[:path] %>
<%= link_to topic[:text], topic[:path] %>
<% else %>
<span><%= topic[:text] %></span>
<% end %>
<ul class="dropdown-content">
<% topic[:submenu].each do |page| %>
<li><%= link_to page[:text], page[:path] %></li>
<% end %>
</ul>
</li>
<% else %>
<li><%= link_to topic[:text], topic[:path] %></li>
<% end %>
<% end %>
</ul>
<ul class="right">
<% if user_signed_in? %>
<li class="welcome-span"><span>Welcome <%= current_user.email %>!</span></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
<% else %>
<li class="welcome-span"><span>Welcome guest!</span></li>
<li><%= link_to "Login", new_user_session_path %><li>
<li><%= link_to "Sign up", new_user_registration_path %><li>
<% end %>
</ul>
</nav>

92 changes: 27 additions & 65 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title><%= @application_name %></title>
<%= csrf_meta_tags %>
<head>
<title><%= @application_name %></title>
<%= csrf_meta_tags %>

<!-- Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- CSS Reset -->
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<!-- Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- CSS Reset -->
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">

<!-- Milligram CSS minified -->
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<!-- Milligram CSS minified -->
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>
</head>
<body>
<%= render partial: 'layouts/menu' %>

<body>
<div class="navbar">
<ul>
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Shelters", shelters_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Help Call Shelters", outdated_shelters_path %></li>
<% end %>
<% if admin? %>
<li><%= link_to "Shelters Update Queue", drafts_shelters_path %></li>
<li><%= link_to "Archived Shelters", archived_shelters_path %></li>
<% end %>
<li><%= link_to "Distribution Points", distribution_points_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Outdated Distribution Point Records", outdated_distribution_points_path %></li>
<% end %>
<% if admin? %>
<li><%= link_to "Distribution Points Update Queue", drafts_distribution_points_path %></li>
<li><%= link_to "Archived Distribution Points", archived_distribution_points_path %></li>
<% end %>
<li><%= link_to "Needs", needs_path %></li>
<% if admin? %>
<li><%= link_to "Needs Update Queue", drafts_needs_path %></li>
<li><%= link_to "Users", users_path %></li>
<li><%= link_to "AmazonProducts", amazon_products_path %></li>
<li><%= link_to "Charitable Organizations", charitable_organizations_path %></li>
<li><%= link_to "Pages", pages_path %></li>
<% end %>
<div class="right">
<% if user_signed_in? %>
<li class="welcome-span"><span>Welcome <%= current_user.email %>!</span></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
<% else %>
<li class="welcome-span"><span>Welcome guest!</span></li>
<li><%= link_to "Login", new_user_session_path %><li>
<li><%= link_to "Sign up", new_user_registration_path %><li>
<% end %>
</div>
</ul>
<div class="container">
<p id="notice"><%= notice %></p>
<p id="alert"><%= alert %></p>
<div class="new-record-notification"></div>
<%= yield %>
</div>
<div class="container">
<p id="notice"><%= notice %></p>
<p id="alert"><%= alert %></p>
<div class="new-record-notification"></div>
<%= yield %>
</div>

<footer>
Code is available at <a href="http://github.com/hurricane-response/florence-api">GitHub</a>. Contributors welcome!
Expand All @@ -78,7 +40,7 @@
<% if ENV["GOOGLE_MAPS_JS_API_KEY"].blank? %>
<script>
console.log("To enable the Google auto-complete, you'll need to set a google maps API key in .env")
</script>
<% end %>
</body>
</script>
<% end %>
</body>
</html>