From 97ced7d80e434078d60230db6c89db4afc27149f Mon Sep 17 00:00:00 2001 From: Gregory Ballantine Date: Sun, 18 Dec 2022 23:31:43 -0500 Subject: [PATCH] Styled the navbar; allowed collapsing it to give the user more screen space --- Gruntfile.js | 30 ++++++++++++++-- assets/coffee/gargoyle.coffee | 12 +++++++ assets/styles/kraken.scss | 29 +++++++++++++++- package-lock.json | 65 +++++++++++++++++++++++++++++++++++ package.json | 1 + views/layout.erb | 1 + views/layout/navbar.erb | 8 ++--- 7 files changed, 138 insertions(+), 8 deletions(-) create mode 100644 assets/coffee/gargoyle.coffee diff --git a/Gruntfile.js b/Gruntfile.js index 3320f86..33737ae 100644 --- a/Gruntfile.js +++ b/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']); }; diff --git a/assets/coffee/gargoyle.coffee b/assets/coffee/gargoyle.coffee new file mode 100644 index 0000000..b048205 --- /dev/null +++ b/assets/coffee/gargoyle.coffee @@ -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') diff --git a/assets/styles/kraken.scss b/assets/styles/kraken.scss index 64cd4dc..3faa503 100644 --- a/assets/styles/kraken.scss +++ b/assets/styles/kraken.scss @@ -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%; diff --git a/package-lock.json b/package-lock.json index 67180d7..1dd8d34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8e3291e..d67e8a6 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/views/layout.erb b/views/layout.erb index 89460f9..a25da9f 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -8,6 +8,7 @@ + diff --git a/views/layout/navbar.erb b/views/layout/navbar.erb index 72acf2b..868067d 100644 --- a/views/layout/navbar.erb +++ b/views/layout/navbar.erb @@ -1,8 +1,8 @@