add nav, footer with js templates
This commit is contained in:
ZippyDev
parent
1af3465aed
commit
4e7a59307f
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
// (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();
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">
|
||||
Log in <%= resource_name %>
|
||||
Log in
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<div id="home-index">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Welcome to <%= App::Config::APP_TITLE %>!
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
My first website with <strong>Bulma</strong>!
|
||||
</p>
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
<%= App::Config::APP_TITLE %>
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
My first website with <strong>Bulma</strong>!
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="home-body">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,17 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<%= 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>
|
||||
|
||||
<body>
|
||||
<%= render "shared/navbar" %>
|
||||
<%= render "shared/notifications" %>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
<%= render "shared/developer_view" %>
|
||||
<%= render "shared/footer" %>
|
||||
</body>
|
||||
|
||||
<%= 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="column is-two-thirds">
|
||||
<% 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 %>
|
||||
<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_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 }
|
||||
|
|
|
|||
Loading…
Reference in New Issue