Remove JavaScript in navbar and include logout
Signed-off-by: Tobias Eidelpes <tobias@eidelpes.info>
This commit is contained in:
parent
c8bc0ca1cd
commit
6014c64e64
@ -14,6 +14,15 @@
|
||||
*= require_self
|
||||
*/
|
||||
|
||||
.dark-primary-color { background: #303F9F; }
|
||||
.default-primary-color { background: #3F51B5; }
|
||||
.light-primary-color { background: #C5CAE9; }
|
||||
.text-primary-color { color: #FFFFFF; }
|
||||
.accent-color { background: #009688; }
|
||||
.primary-text-color { color: #212121; }
|
||||
.secondary-text-color { color: #757575; }
|
||||
.divider-color { border-color: #BDBDBD; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
@ -22,57 +31,72 @@ main {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
/* Add a black background color to the top navigation */
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
nav {
|
||||
background-color: #3F51B5;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
|
||||
}
|
||||
|
||||
/* Style the links inside the navigation bar */
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 18px 20px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* Change the color of links on hover */
|
||||
.topnav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Add an active class to highlight the current page */
|
||||
.topnav a.active {
|
||||
background-color: #4CAF50;
|
||||
nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 18px;
|
||||
transition: .3s all ease-in-out;
|
||||
}
|
||||
|
||||
.topnav a:not(.active) {
|
||||
nav a:hover {
|
||||
background-color: #009688;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
#nav-toggle:checked ~ .left-menu {
|
||||
display: grid;
|
||||
grid-row: 2;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
/* Layout for responsive class; gets added on menu click */
|
||||
.topnav.responsive {
|
||||
position: relative;
|
||||
.burger-menu {
|
||||
display: inline-block;
|
||||
grid-column: 1;
|
||||
align-self: center;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.topnav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.left-menu {
|
||||
display: none;
|
||||
grid-column: 1;
|
||||
align-self: center;
|
||||
}
|
||||
.topnav.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
|
||||
.left-menu a {
|
||||
padding: 15px 0 10px 1rem;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
grid-column: 3;
|
||||
text-align: right;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.right-menu a {
|
||||
padding: 18px 1rem 17px 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
grid-column: 2;
|
||||
padding: 1rem;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@ -1,18 +1,4 @@
|
||||
module ApplicationHelper
|
||||
# Contains the complete navbar
|
||||
def nav_bar
|
||||
content_tag(:div, class: 'topnav', id: 'topnav') do
|
||||
yield
|
||||
end
|
||||
end
|
||||
|
||||
# Defines individual links in the navbar. To be used inside nav_bar
|
||||
def nav_link(text, path)
|
||||
# Sets active class on the link corresponding to the page being viewed
|
||||
options = current_page?(path) ? { class: 'active' } : {}
|
||||
link_to text, path, options
|
||||
end
|
||||
|
||||
# Used to render svg image files
|
||||
def show_svg(path)
|
||||
File.open("app/assets/images/#{path}", 'rb') do |file|
|
||||
|
||||
@ -8,8 +8,6 @@ require("turbolinks").start()
|
||||
require("@rails/activestorage").start()
|
||||
require("channels")
|
||||
|
||||
require("packs/custom");
|
||||
|
||||
// Uncomment to copy all static images under ../images to the output folder and reference
|
||||
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
|
||||
// or the `imagePath` JavaScript helper below.
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
|
||||
function toggleMenu() {
|
||||
var x = document.getElementById("topnav");
|
||||
if (x.className === "topnav") {
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
x.className = "topnav";
|
||||
}
|
||||
}
|
||||
|
||||
/* First load all other scripts and then listen for click on menu */
|
||||
document.addEventListener('turbolinks:load', () => {
|
||||
document.getElementById("toggleMenu").addEventListener("click", toggleMenu);
|
||||
});
|
||||
@ -12,16 +12,25 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%= nav_bar do %>
|
||||
<%= nav_link 'Home', root_path %>
|
||||
<%= nav_link 'People', people_index_path %>
|
||||
<%= nav_link 'Courses', courses_index_path %>
|
||||
<%= nav_link 'Projects', projects_index_path %>
|
||||
<%= nav_link 'Theses', theses_index_path %>
|
||||
<a href="javascript:void(0);" class="icon" id="toggleMenu">
|
||||
<%= show_svg('menu-white-24dp.svg') %>
|
||||
</a>
|
||||
<% end %>
|
||||
|
||||
<nav>
|
||||
<input type="checkbox" id="nav-toggle">
|
||||
<label for="nav-toggle" class="burger-menu">
|
||||
<%= show_svg('menu-white-24dp.svg') %>
|
||||
</label>
|
||||
<div class="left-menu">
|
||||
<%= link_to 'Home', root_path %>
|
||||
<%= link_to 'People', people_index_path %>
|
||||
<%= link_to 'Courses', courses_index_path %>
|
||||
<%= link_to 'Projects', projects_index_path %>
|
||||
<%= link_to 'Theses', theses_index_path %>
|
||||
</div>
|
||||
<a href="#" class="logo">tiss2go</a>
|
||||
<div class="right-menu">
|
||||
<!-- TODO: Change root_path to login/register page -->
|
||||
<%= link_to 'Logout', root_path %>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<%= yield %>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user