Skip to content

Commit

Permalink
Cleaning up Navbar menu to have dropdown options. [WIP - Mobile frien…
Browse files Browse the repository at this point in the history 
…dliness]
  • Loading branch information
@omnilord
omnilord committed Oct 15, 2018
1 parent 187413b commit 7f84e40
Show file tree
Hide file tree
Showing 5 changed files with 168 additions and 105 deletions.
38 changes: 1 addition & 37 deletions app/assets/stylesheets/main.css
View file
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
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
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
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
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>

0 comments on commit 7f84e40

Please sign in to comment.