Metaunix/raven
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Gruntfile.js
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: {
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
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')

29
assets/styles/kraken.scss
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{
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
View File

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

1
package.json
View File

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

1
views/layout.erb
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="/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 -->

8
views/layout/navbar.erb
View File

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