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: {
|
||||
css: {
|
||||
files: ['assets/styles/**/*.scss'],
|
||||
@ -27,15 +42,24 @@ module.exports = function(grunt) {
|
||||
atBegin: true,
|
||||
spawn: false
|
||||
}
|
||||
},
|
||||
js: {
|
||||
files: ['assets/coffee/*.coffee'],
|
||||
tasks: ['coffee'],
|
||||
options: {
|
||||
atBegin: true,
|
||||
spawn: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Load plugins.
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-sass');
|
||||
grunt.loadNpmTasks('grunt-contrib-coffee');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
|
||||
// CLI tasks.
|
||||
grunt.registerTask('default', ['sass']);
|
||||
// Default task(s).
|
||||
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{
|
||||
background: lightgrey;
|
||||
padding-left: $nav-width;
|
||||
transition: padding-left 230ms ease-in-out;
|
||||
}
|
||||
|
||||
.card{
|
||||
@ -26,9 +27,21 @@ body{
|
||||
color: white;
|
||||
box-shadow: $box-shadow-1;
|
||||
box-sizing: border-box;
|
||||
transition: left 230ms ease-in-out;
|
||||
|
||||
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{
|
||||
@ -41,6 +54,13 @@ body{
|
||||
&:first-child{
|
||||
border-top: 1px solid #999;
|
||||
}
|
||||
|
||||
i{
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
margin-top: 5px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
@ -60,6 +80,13 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
body.collapsed{
|
||||
padding-left: 64px;
|
||||
}
|
||||
body.collapsed #main-nav{
|
||||
left: calc($nav-width * -1 + 64px);
|
||||
}
|
||||
|
||||
#main-actions{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
65
package-lock.json
generated
65
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"devDependencies": {
|
||||
"grunt": "^1.5.3",
|
||||
"grunt-cli": "^1.4.3",
|
||||
"grunt-contrib-coffee": "^2.1.0",
|
||||
"grunt-contrib-sass": "^2.0.0",
|
||||
"grunt-contrib-watch": "^1.1.0",
|
||||
"sass": "^1.55.0"
|
||||
@ -192,6 +193,19 @@
|
||||
"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": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
@ -640,6 +654,24 @@
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
|
||||
@ -1679,6 +1711,15 @@
|
||||
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@ -1881,6 +1922,12 @@
|
||||
"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": {
|
||||
"version": "1.9.3",
|
||||
"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": {
|
||||
"version": "2.0.0",
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
@ -26,6 +26,7 @@
|
||||
"devDependencies": {
|
||||
"grunt": "^1.5.3",
|
||||
"grunt-cli": "^1.4.3",
|
||||
"grunt-contrib-coffee": "^2.1.0",
|
||||
"grunt-contrib-sass": "^2.0.0",
|
||||
"grunt-contrib-watch": "^1.1.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="/css/kraken.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="/js/gargoyle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Main navigation -->
|
||||
|
@ -1,8 +1,8 @@
|
||||
<nav id="main-nav">
|
||||
<h3>Raven</h3>
|
||||
<h3>Raven <i id="nav-toggle" class="fa-solid fa-bars"></i></h3>
|
||||
<ul>
|
||||
<li><a href="/">Dashboard</a></li>
|
||||
<li><a href="/item/list">Items</a></li>
|
||||
<li><a href="/license/list">Licenses</a></li>
|
||||
<li><a href="/">Dashboard <i class="fa-solid fa-gauge"></i></a></li>
|
||||
<li><a href="/item/list">Items <i class="fa-solid fa-desktop"></i></a></li>
|
||||
<li><a href="/license/list">Licenses <i class="fa-solid fa-floppy-disk"></i></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
Loading…
Reference in New Issue
Block a user