better navigation CSS
This commit is contained in:
parent
db536010d4
commit
c0b0e578e6
@ -25,69 +25,6 @@ a {
|
||||
color: #004d4d;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: #ccdddd;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.devbug-header {
|
||||
background: #509d9d;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
margin-left: -20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
min-height: 165px;
|
||||
}
|
||||
|
||||
.navul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-left: -20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #004d4d;
|
||||
}
|
||||
|
||||
.navli {
|
||||
display: inline;
|
||||
background: #eee;
|
||||
border-radius: 7px;
|
||||
margin-right: 10px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.navli:hover {
|
||||
background: #509d9d;
|
||||
}
|
||||
|
||||
.nava {
|
||||
text-decoration: none;
|
||||
padding: 20;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.nava:hover {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.btn, .action {
|
||||
margin: 5;
|
||||
margin-bottom: 20;
|
||||
@ -134,3 +71,81 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
|
||||
min-height: 500px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* New Theme Styles */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
#pre-header, #title-header {
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #307d7d;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#title-header {
|
||||
background: #ccdddd;
|
||||
}
|
||||
|
||||
#title-header-content {
|
||||
padding: 14px;
|
||||
font-size: 20pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#pre-header-content {
|
||||
padding: 7px;
|
||||
padding-left: 14px;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#navbar a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
text-decoration: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#navbar a:hover {
|
||||
background: #307d7d;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sticky + .content {
|
||||
padding-top: 60px;
|
||||
}
|
||||
@ -28,3 +28,15 @@ function from_server(json_string){
|
||||
json_string = JSON.parse(json_string.replace(/"/g, '"').replace(/\p{C}+/g, '?'))
|
||||
window.devbug = json_string
|
||||
}
|
||||
|
||||
const navbar = document.getElementById('navbar')
|
||||
const sticky = navbar.offsetTop;
|
||||
|
||||
window.onscroll = () => {
|
||||
if ( window.pageYOffset >= sticky ) {
|
||||
navbar.classList.add('sticky')
|
||||
}
|
||||
else {
|
||||
navbar.classList.remove('sticky')
|
||||
}
|
||||
}
|
||||
@ -2,28 +2,25 @@ html
|
||||
head
|
||||
title #{(title ? title+' | DevBug' : 'DevBug Dashboard')}
|
||||
link(rel='stylesheet' href='/assets/dash_v1.css')
|
||||
script(src='/assets/dash_v1.js')
|
||||
block head
|
||||
body
|
||||
#pre-header
|
||||
- var e_project = (user && project && devbug.permission.project.sync_edit(project, user))
|
||||
.page-header
|
||||
.devbug-header DevBug | v#{devbug.version} #{(user ? " | User: "+user.username : "")} #{(e_project ? " | Project: "+project.name+" | API: "+project.uuid : "")} #{((_flitter.config('server.environment') === 'development') ? " | Development" : "" )}
|
||||
if title_small
|
||||
h3 #{(title ? title : 'Dashboard')}
|
||||
else
|
||||
h1 #{(title ? title : 'Dashboard')}
|
||||
ul.navul
|
||||
li.navli
|
||||
a.nava(href='/dash/v1') Home
|
||||
li.navli
|
||||
a.nava(href='/dash/v1/using_devbug/main') Using DevBug
|
||||
li.navli
|
||||
a.nava(href='/auth/logout') Logout
|
||||
#pre-header-content DevBug | v#{devbug.version} #{(user ? " | User: "+user.username : "")} #{(e_project ? " | Project: "+project.name+" | API: "+project.uuid : "")} #{((_flitter.config('server.environment') === 'development') ? " | Development" : "" )}
|
||||
#title-header
|
||||
#title-header-content #{title ? title : 'DevBug Dashboard'}
|
||||
ul#navbar
|
||||
li
|
||||
a#navbar-home(href='/dash/v1') Home
|
||||
li
|
||||
a#navbar-usage(href='/dash/v1/using_devbug/main') Using DevBug
|
||||
li.navbar-right
|
||||
a#navbar-logout(href='/auth/logout') Logout
|
||||
if show_back
|
||||
li.navli
|
||||
a.nava(href='javascript:window.history.back()') Back
|
||||
.spacer
|
||||
li
|
||||
a#navbar-back(href='javascript:window.history.back()') Back
|
||||
.content
|
||||
block content
|
||||
block scripts
|
||||
script(src='/assets/dash_v1.js')
|
||||
//- .spacer
|
||||
|
||||
Loading…
Reference in New Issue
Block a user