Styled the navbar; allowed collapsing it to give the user more screen space

This commit is contained in:
Gregory Ballantine 2022-12-18 23:31:43 -05:00
parent 5139d8b492
commit 97ced7d80e
7 changed files with 138 additions and 8 deletions

View File

@ -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']);
}; };

View 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')

View File

@ -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
View File

@ -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",

View File

@ -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"

View File

@ -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 -->

View File

@ -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>