add nav, footer with js templates
This commit is contained in:
parent
1af3465aed
commit
4e7a59307f
|
@ -11,6 +11,8 @@
|
||||||
* It is generally better to create a new file per style scope.
|
* 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 "bulma"; // https://bulma.io/documentation/
|
||||||
@import "./devise";
|
@import "./devise";
|
||||||
|
@ -30,5 +32,38 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifications-container {
|
.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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,14 +1,6 @@
|
||||||
// https://bulma.io/documentation/elements/notification/#javascript-example
|
/*
|
||||||
// document.addEventListener('DOMContentLoaded', () => {
|
** @ see https://bulma.io/documentation/elements/notification/#javascript-example
|
||||||
// (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
*/
|
||||||
// $notification = $delete.parentNode;
|
|
||||||
//
|
|
||||||
// $delete.addEventListener('click', () => {
|
|
||||||
// $notification.parentNode.removeChild($notification);
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
$(function(){
|
$(function(){
|
||||||
$('.notification .delete').on('click', function(){
|
$('.notification .delete').on('click', function(){
|
||||||
$(this).parent().hide();
|
$(this).parent().hide();
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title has-text-centered">
|
<h1 class="title has-text-centered">
|
||||||
Log in <%= resource_name %>
|
Log in
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +1,18 @@
|
||||||
<div id="home-index">
|
<div id="home-index">
|
||||||
<section class="section">
|
<section class="hero is-medium is-primary is-bold">
|
||||||
<div class="container">
|
<div class="hero-body">
|
||||||
<h1 class="title">
|
<div class="container">
|
||||||
Welcome to <%= App::Config::APP_TITLE %>!
|
<h1 class="title">
|
||||||
</h1>
|
<%= App::Config::APP_TITLE %>
|
||||||
<p class="subtitle">
|
</h1>
|
||||||
My first website with <strong>Bulma</strong>!
|
<h2 class="subtitle">
|
||||||
</p>
|
My first website with <strong>Bulma</strong>!
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<div class="home-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,15 +9,17 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<%= stylesheet_link_tag 'application', media: 'all' %>
|
<%= stylesheet_link_tag 'application', media: 'all' %>
|
||||||
<script src="https://kit.fontawesome.com/<%= ENV.fetch("FONT_AWESOME_KIT_ID") %>" crossorigin="anonymous"></script>
|
<script async src="https://kit.fontawesome.com/<%= App::Config::FONT_AWESOME_KIT_ID %>.js" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<%= render "shared/navbar" %>
|
||||||
<%= render "shared/notifications" %>
|
<%= render "shared/notifications" %>
|
||||||
|
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
|
|
||||||
<%= render "shared/developer_view" %>
|
<%= render "shared/developer_view" %>
|
||||||
|
<%= render "shared/footer" %>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<%= javascript_pack_tag 'application' %>
|
<%= javascript_pack_tag 'application' %>
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<div class="columns is-centered is-mobile">
|
||||||
|
<%= 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 %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-policy">
|
||||||
|
<h3><%= fal_icon("fist-raised") %> Your Data. Your Privacy.</h3>
|
||||||
|
|
||||||
|
<p><%= link_to("Privacy Policy", privacy_path) %></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cookie-policy is-size-7">
|
||||||
|
<p><%= fa_icon("cookie-bite", type: :duotone, size: "3x") %></p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Cookies are necessary for site functionality and analytics, but remain within our site with no cross-site tracking.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
By using <%= App::Config::APP_TITLE %>, you acknowledge and agree to the terms of cookie use and other first-party analytics;<br/>
|
||||||
|
which are used for site performance, development debugging, and other non-nefarious technology improvements.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
|
@ -0,0 +1,30 @@
|
||||||
|
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<%= link_to(root_path, class: "navbar-item") do %>
|
||||||
|
<%= fa_stacked_icon("cubes", base: "shield", base_type: :fal) %>
|
||||||
|
<%= App::Config::APP_TITLE %>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<%= link_to(fab_icon("bitcoin", text: "Some Link"), "#", class: "navbar-item") %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<% if current_user %>
|
||||||
|
<%= render "shared/navbar/admin_navbar" if current_user.admin? %>
|
||||||
|
<%= render "shared/navbar/user_navbar" %>
|
||||||
|
<% else %>
|
||||||
|
<%= link_to(fa_icon("user-plus", text: "Sign up"), new_user_registration_path, class: "navbar-item") %>
|
||||||
|
<%= link_to(fa_icon("user-lock", text: "Log in"), new_user_session_path, class: "navbar-item") %>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
|
@ -2,6 +2,8 @@
|
||||||
<div class="columns is-centered">
|
<div class="columns is-centered">
|
||||||
<div class="column is-two-thirds">
|
<div class="column is-two-thirds">
|
||||||
<% flash.each do |name, msg| %>
|
<% 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 %>
|
<%= content_tag :div, msg, class: "notification app-notifications is-#{notification_type(name)}" do %>
|
||||||
<button class="delete"></button>
|
<button class="delete"></button>
|
||||||
|
|
||||||
|
|
|
@ -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 %>
|
|
@ -0,0 +1,13 @@
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<%= link_to("#", class: "navbar-link") do %>
|
||||||
|
<%= fa_stacked_icon("user-astronaut", base: "circle-notch", type: :fas, base_type: :fal) %>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown is-right">
|
||||||
|
<%= link_to("My Account", edit_user_registration_path, class: "navbar-item") %>
|
||||||
|
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
|
||||||
|
<%= link_to fa_icon("sign-out", text: "Log Out"), destroy_user_session_url, method: :delete, class: "navbar-item" %>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -26,6 +26,7 @@ module App
|
||||||
APP_NAME = 'app' # TODO: Update name
|
APP_NAME = 'app' # TODO: Update name
|
||||||
APP_TITLE = 'TODO: Update in config/application.rb'
|
APP_TITLE = 'TODO: Update in config/application.rb'
|
||||||
DATABASE_URL = ENV.fetch('DATABASE_URL') { "postgres://localhost:5432/#{APP_NAME}_#{Rails.env}" }
|
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' }
|
REDIS_URL = ENV.fetch('REDIS_URL') { 'redis://localhost:6379/0' }
|
||||||
SMTP_HOST = ENV.fetch('SMTP_HOST') { 'localhost' }
|
SMTP_HOST = ENV.fetch('SMTP_HOST') { 'localhost' }
|
||||||
SMTP_PORT = ENV.fetch('SMTP_PORT') { 1025 }
|
SMTP_PORT = ENV.fetch('SMTP_PORT') { 1025 }
|
||||||
|
|
Loading…
Reference in New Issue