From 4e7a59307ffa0e655b8c8ab3f37f7df0a9f309be Mon Sep 17 00:00:00 2001 From: ZippyDev Date: Sun, 3 May 2020 13:49:49 -0600 Subject: [PATCH] add nav, footer with js templates --- app/assets/stylesheets/application.scss | 37 ++++++++++++++++++- app/javascript/packs/bulma/navbar.js | 8 ++++ app/javascript/packs/bulma/notification.js | 14 ++----- app/views/devise/sessions/new.html.erb | 2 +- app/views/home/index.html.erb | 22 +++++++---- app/views/layouts/application.html.erb | 4 +- app/views/shared/_footer.html.erb | 34 +++++++++++++++++ app/views/shared/_navbar.html.erb | 30 +++++++++++++++ app/views/shared/_notifications.html.erb | 2 + .../shared/navbar/_admin_navbar.html.erb | 4 ++ app/views/shared/navbar/_user_navbar.html.erb | 13 +++++++ config/application.rb | 1 + 12 files changed, 149 insertions(+), 22 deletions(-) create mode 100644 app/javascript/packs/bulma/navbar.js create mode 100644 app/views/shared/_footer.html.erb create mode 100644 app/views/shared/_navbar.html.erb create mode 100644 app/views/shared/navbar/_admin_navbar.html.erb create mode 100644 app/views/shared/navbar/_user_navbar.html.erb diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 661bf1d..617ba44 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,6 +11,8 @@ * It is generally better to create a new file per style scope. * */ + $app-z-index: 35; // Navbar: 30 + $primary-gradient: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%); @import "bulma"; // https://bulma.io/documentation/ @import "./devise"; @@ -30,5 +32,38 @@ html { } .notifications-container { - padding: $size-7; + padding-top: $size-7; + z-index: $app-z-index; + position: absolute; + + .columns { + margin-bottom: 0 !important; + } +} + +.navbar { + background-image: $primary-gradient; +} + +.footer { + background-image: $primary-gradient; + color: $white; + + h3, a { + color: $white; + } + + .fa-anti-list { + .fa-ban { + color: $danger; + } + } + + .privacy-policy, .cookie-policy { + padding: $size-7; + } +} + +.fa5-text { + padding-left: $size-7; } diff --git a/app/javascript/packs/bulma/navbar.js b/app/javascript/packs/bulma/navbar.js new file mode 100644 index 0000000..8fc40e0 --- /dev/null +++ b/app/javascript/packs/bulma/navbar.js @@ -0,0 +1,8 @@ +/* +** @see https://bulma.io/documentation/components/navbar/#navbarJsExample +*/ +$(function(){ + $('.navbar-burger').on('click', function() { + $('.navbar-menu, .navbar-burger').toggleClass('is-active'); + }); +}); diff --git a/app/javascript/packs/bulma/notification.js b/app/javascript/packs/bulma/notification.js index 9804c1e..563dac5 100644 --- a/app/javascript/packs/bulma/notification.js +++ b/app/javascript/packs/bulma/notification.js @@ -1,14 +1,6 @@ -// https://bulma.io/documentation/elements/notification/#javascript-example -// document.addEventListener('DOMContentLoaded', () => { -// (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => { -// $notification = $delete.parentNode; -// -// $delete.addEventListener('click', () => { -// $notification.parentNode.removeChild($notification); -// }); -// }); -// }); - +/* +** @ see https://bulma.io/documentation/elements/notification/#javascript-example +*/ $(function(){ $('.notification .delete').on('click', function(){ $(this).parent().hide(); diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index bede0bb..f051e86 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -5,7 +5,7 @@

- Log in <%= resource_name %> + Log in

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index ffc7005..4a79282 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,12 +1,18 @@
-
-
-

- Welcome to <%= App::Config::APP_TITLE %>! -

-

- My first website with Bulma! -

+
+
+
+

+ <%= App::Config::APP_TITLE %> +

+

+ My first website with Bulma! +

+
+ +
+ +
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f5788a0..b493b8b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,15 +9,17 @@ <%= stylesheet_link_tag 'application', media: 'all' %> - + + <%= render "shared/navbar" %> <%= render "shared/notifications" %> <%= yield %> <%= render "shared/developer_view" %> + <%= render "shared/footer" %> <%= javascript_pack_tag 'application' %> diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb new file mode 100644 index 0000000..546e719 --- /dev/null +++ b/app/views/shared/_footer.html.erb @@ -0,0 +1,34 @@ +
+
+
+ <%= fa_layered_icon(size: "3x", class: "fa-anti-list") do %> + <%= fab_icon("facebook") %> + <%= fal_icon("ban") %> + <% end %> + + <%= fa_layered_icon(size: "3x", class: "fa-anti-list") do %> + <%= fab_icon("google", data: { fa_transform: "shrink-6" }) %> + <%= fal_icon("ban") %> + <% end %> +
+ +
+

<%= fal_icon("fist-raised") %> Your Data. Your Privacy.

+ +

<%= link_to("Privacy Policy", privacy_path) %>

+
+ +
+

<%= fa_icon("cookie-bite", type: :duotone, size: "3x") %>

+ +

+ Cookies are necessary for site functionality and analytics, but remain within our site with no cross-site tracking. +

+ +

+ By using <%= App::Config::APP_TITLE %>, you acknowledge and agree to the terms of cookie use and other first-party analytics;
+ which are used for site performance, development debugging, and other non-nefarious technology improvements. +

+
+
+
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb new file mode 100644 index 0000000..37cb633 --- /dev/null +++ b/app/views/shared/_navbar.html.erb @@ -0,0 +1,30 @@ + diff --git a/app/views/shared/_notifications.html.erb b/app/views/shared/_notifications.html.erb index c81ead1..c2940f1 100644 --- a/app/views/shared/_notifications.html.erb +++ b/app/views/shared/_notifications.html.erb @@ -2,6 +2,8 @@
<% flash.each do |name, msg| %> + <% next if name.to_sym.eql?(:timedout) %> + <%= content_tag :div, msg, class: "notification app-notifications is-#{notification_type(name)}" do %> diff --git a/app/views/shared/navbar/_admin_navbar.html.erb b/app/views/shared/navbar/_admin_navbar.html.erb new file mode 100644 index 0000000..7a46bf9 --- /dev/null +++ b/app/views/shared/navbar/_admin_navbar.html.erb @@ -0,0 +1,4 @@ +<%= link_to(admin_dashboard_path, class: "navbar-item") do %> + <%= fa_stacked_icon("user-crown", base: "circle", type: :fas, base_type: :fal) %> +   Admin +<% end %> diff --git a/app/views/shared/navbar/_user_navbar.html.erb b/app/views/shared/navbar/_user_navbar.html.erb new file mode 100644 index 0000000..d571554 --- /dev/null +++ b/app/views/shared/navbar/_user_navbar.html.erb @@ -0,0 +1,13 @@ +
+ <%= link_to("#", class: "navbar-link") do %> + <%= fa_stacked_icon("user-astronaut", base: "circle-notch", type: :fas, base_type: :fal) %> + <% end %> + +
+ <%= link_to("My Account", edit_user_registration_path, class: "navbar-item") %> + +
+ + <%= link_to fa_icon("sign-out", text: "Log Out"), destroy_user_session_url, method: :delete, class: "navbar-item" %> +
+
diff --git a/config/application.rb b/config/application.rb index 93b1179..797e23d 100644 --- a/config/application.rb +++ b/config/application.rb @@ -26,6 +26,7 @@ module App APP_NAME = 'app' # TODO: Update name APP_TITLE = 'TODO: Update in config/application.rb' DATABASE_URL = ENV.fetch('DATABASE_URL') { "postgres://localhost:5432/#{APP_NAME}_#{Rails.env}" } + FONT_AWESOME_KIT_ID = ENV.fetch('FONT_AWESOME_KIT_ID') { 'TODO: CHANGE ME' } REDIS_URL = ENV.fetch('REDIS_URL') { 'redis://localhost:6379/0' } SMTP_HOST = ENV.fetch('SMTP_HOST') { 'localhost' } SMTP_PORT = ENV.fetch('SMTP_PORT') { 1025 }