diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css index dca1924..becc722 100644 --- a/app/assets/stylesheets/main.css +++ b/app/assets/stylesheets/main.css @@ -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; diff --git a/app/assets/stylesheets/menu.scss b/app/assets/stylesheets/menu.scss new file mode 100644 index 0000000..0ec6af2 --- /dev/null +++ b/app/assets/stylesheets/menu.scss @@ -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; + } + } + } + } +} diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 4fd5785..59f9e66 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -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? @@ -20,4 +19,53 @@ def authenticate_admin! redirect_to request.referrer || root_path, notice: "Admins Only! :|" 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 diff --git a/app/views/layouts/_menu.html.erb b/app/views/layouts/_menu.html.erb new file mode 100644 index 0000000..6a91482 --- /dev/null +++ b/app/views/layouts/_menu.html.erb @@ -0,0 +1,33 @@ + + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index af92050..56099da 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,57 +1,31 @@ - - <%= @application_name %> - <%= csrf_meta_tags %> + + <%= @application_name %> + <%= csrf_meta_tags %> - - - - - - + + + + + + - - + + - + - - + + - <%= 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' %> - + + + <%= render partial: 'layouts/menu' %> - -
- -
- <% if content_for :sub_menu %> - <%= yield :sub_menu %> - <% end %>

<%= notice %>

<%= alert %>

@@ -70,5 +44,5 @@ console.log("To enable the Google auto-complete, you'll need to set a google maps API key in .env") <% end %> - +