Styled the navbar; allowed collapsing it to give the user more screen space
This commit is contained in:
parent
5139d8b492
commit
97ced7d80e
30
Gruntfile.js
30
Gruntfile.js
@ -19,6 +19,21 @@ module.exports = function(grunt) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
coffee: {
|
||||||
|
options: {
|
||||||
|
sourceMap: true,
|
||||||
|
style: 'compressed'
|
||||||
|
},
|
||||||
|
files: {
|
||||||
|
expand: true,
|
||||||
|
flatten: true,
|
||||||
|
cwd: 'assets/coffee',
|
||||||
|
src: ['*.coffee'],
|
||||||
|
dest: 'public/js',
|
||||||
|
ext: '.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
css: {
|
css: {
|
||||||
files: ['assets/styles/**/*.scss'],
|
files: ['assets/styles/**/*.scss'],
|
||||||
@ -27,15 +42,24 @@ module.exports = function(grunt) {
|
|||||||
atBegin: true,
|
atBegin: true,
|
||||||
spawn: false
|
spawn: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
js: {
|
||||||
|
files: ['assets/coffee/*.coffee'],
|
||||||
|
tasks: ['coffee'],
|
||||||
|
options: {
|
||||||
|
atBegin: true,
|
||||||
|
spawn: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Load plugins.
|
// Load plugins.
|
||||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-sass');
|
grunt.loadNpmTasks('grunt-contrib-sass');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-coffee');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||||
|
|
||||||
// CLI tasks.
|
// Default task(s).
|
||||||
grunt.registerTask('default', ['sass']);
|
grunt.registerTask('default', ['sass', 'coffee']);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
12
assets/coffee/gargoyle.coffee
Normal file
12
assets/coffee/gargoyle.coffee
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
$(document).ready( ->
|
||||||
|
|
||||||
|
$('#nav-toggle').on('click', toggleNav)
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
toggleNav = () ->
|
||||||
|
bodyElem = $('body')
|
||||||
|
if bodyElem.hasClass('collapsed')
|
||||||
|
bodyElem.removeClass('collapsed')
|
||||||
|
else
|
||||||
|
bodyElem.addClass('collapsed')
|
@ -6,6 +6,7 @@ $box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
|||||||
body{
|
body{
|
||||||
background: lightgrey;
|
background: lightgrey;
|
||||||
padding-left: $nav-width;
|
padding-left: $nav-width;
|
||||||
|
transition: padding-left 230ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card{
|
.card{
|
||||||
@ -26,9 +27,21 @@ body{
|
|||||||
color: white;
|
color: white;
|
||||||
box-shadow: $box-shadow-1;
|
box-shadow: $box-shadow-1;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
transition: left 230ms ease-in-out;
|
||||||
|
|
||||||
h3{
|
h3{
|
||||||
text-align: center;
|
padding-left: 15px;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
i{
|
||||||
|
position: absolute;
|
||||||
|
right: 22px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 3rem;
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul{
|
ul{
|
||||||
@ -41,6 +54,13 @@ body{
|
|||||||
&:first-child{
|
&:first-child{
|
||||||
border-top: 1px solid #999;
|
border-top: 1px solid #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i{
|
||||||
|
position: absolute;
|
||||||
|
right: 18px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a{
|
a{
|
||||||
@ -60,6 +80,13 @@ body{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.collapsed{
|
||||||
|
padding-left: 64px;
|
||||||
|
}
|
||||||
|
body.collapsed #main-nav{
|
||||||
|
left: calc($nav-width * -1 + 64px);
|
||||||
|
}
|
||||||
|
|
||||||
#main-actions{
|
#main-actions{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
65
package-lock.json
generated
65
package-lock.json
generated
@ -11,6 +11,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"grunt": "^1.5.3",
|
"grunt": "^1.5.3",
|
||||||
"grunt-cli": "^1.4.3",
|
"grunt-cli": "^1.4.3",
|
||||||
|
"grunt-contrib-coffee": "^2.1.0",
|
||||||
"grunt-contrib-sass": "^2.0.0",
|
"grunt-contrib-sass": "^2.0.0",
|
||||||
"grunt-contrib-watch": "^1.1.0",
|
"grunt-contrib-watch": "^1.1.0",
|
||||||
"sass": "^1.55.0"
|
"sass": "^1.55.0"
|
||||||
@ -192,6 +193,19 @@
|
|||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/coffeescript": {
|
||||||
|
"version": "2.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.7.0.tgz",
|
||||||
|
"integrity": "sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"cake": "bin/cake",
|
||||||
|
"coffee": "bin/coffee"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
@ -640,6 +654,24 @@
|
|||||||
"nopt": "bin/nopt.js"
|
"nopt": "bin/nopt.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/grunt-contrib-coffee": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-lgP+pPY3mHl+gqAU0T+7BcocBWu0FyeeJnAG/iIp2I0GPa5LvZJ7Wqga6QwKQtQCTs+1gPEa12nuap9Lj08lhw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^2.4.2",
|
||||||
|
"coffeescript": "^2.3.2",
|
||||||
|
"lodash": "^4.17.11",
|
||||||
|
"uri-path": "^1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"grunt": ">=0.4.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/grunt-contrib-sass": {
|
"node_modules/grunt-contrib-sass": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
|
||||||
@ -1679,6 +1711,15 @@
|
|||||||
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
|
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/uri-path": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/util-deprecate": {
|
"node_modules/util-deprecate": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||||
@ -1881,6 +1922,12 @@
|
|||||||
"readdirp": "~3.6.0"
|
"readdirp": "~3.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"coffeescript": {
|
||||||
|
"version": "2.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.7.0.tgz",
|
||||||
|
"integrity": "sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"color-convert": {
|
"color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
@ -2229,6 +2276,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"grunt-contrib-coffee": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-lgP+pPY3mHl+gqAU0T+7BcocBWu0FyeeJnAG/iIp2I0GPa5LvZJ7Wqga6QwKQtQCTs+1gPEa12nuap9Lj08lhw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"chalk": "^2.4.2",
|
||||||
|
"coffeescript": "^2.3.2",
|
||||||
|
"lodash": "^4.17.11",
|
||||||
|
"uri-path": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"grunt-contrib-sass": {
|
"grunt-contrib-sass": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
|
||||||
@ -3013,6 +3072,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"uri-path": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"util-deprecate": {
|
"util-deprecate": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"grunt": "^1.5.3",
|
"grunt": "^1.5.3",
|
||||||
"grunt-cli": "^1.4.3",
|
"grunt-cli": "^1.4.3",
|
||||||
|
"grunt-contrib-coffee": "^2.1.0",
|
||||||
"grunt-contrib-sass": "^2.0.0",
|
"grunt-contrib-sass": "^2.0.0",
|
||||||
"grunt-contrib-watch": "^1.1.0",
|
"grunt-contrib-watch": "^1.1.0",
|
||||||
"sass": "^1.55.0"
|
"sass": "^1.55.0"
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
||||||
<link rel="stylesheet" href="/css/kraken.css">
|
<link rel="stylesheet" href="/css/kraken.css">
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||||
|
<script src="/js/gargoyle.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Main navigation -->
|
<!-- Main navigation -->
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<nav id="main-nav">
|
<nav id="main-nav">
|
||||||
<h3>Raven</h3>
|
<h3>Raven <i id="nav-toggle" class="fa-solid fa-bars"></i></h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">Dashboard</a></li>
|
<li><a href="/">Dashboard <i class="fa-solid fa-gauge"></i></a></li>
|
||||||
<li><a href="/item/list">Items</a></li>
|
<li><a href="/item/list">Items <i class="fa-solid fa-desktop"></i></a></li>
|
||||||
<li><a href="/license/list">Licenses</a></li>
|
<li><a href="/license/list">Licenses <i class="fa-solid fa-floppy-disk"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
Loading…
Reference in New Issue
Block a user