diff --git a/assets/js/app.js b/assets/js/app.js index 12d80d5..9f264eb 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -3,8 +3,7 @@ import * as d3 from 'd3' import treemap from 'd3-hierarchy' import randomColor from 'randomcolor' import filesize from 'filesize' -// import chroma from 'chroma-js' -// import roundTo from 'round-to' +import chroma from 'chroma-js' var DIR = 1 var FILE = 2 @@ -31,7 +30,8 @@ function boot() { prep_graph(); } -var winsize = null +var winsize = null; +var the_color = chroma(randomColor()).darken().darken().darken().hex(); function prep_graph() { d3.select('svg') @@ -80,7 +80,7 @@ function draw_graph(data) { // Create the colored rectangles nodes .append('rect') - .attr('fill', function(d){return randomColor()}) + .attr('fill', the_color) .attr('width', function(d) { return d.x1 - d.x0; }) .attr('height', function(d) { return d.y1 - d.y0; }) .attr('id', function(d) {return "node-" + d.data.id;}) @@ -93,12 +93,12 @@ function draw_graph(data) { .append('use') .attr('href', function(d) {return "#node-" + d.data.id;}) - // Name labels nodes .append('a') .attr('href', function(d){if(can_click(d)) return "/?n=" + d.data.id;}) .append('text') + .attr('fill', '#fff') .attr('dx', 2) .attr('dy', "1em") .attr('clip-path', function(d) {return "url(#clip-" + d.data.id + ")"}) @@ -109,10 +109,11 @@ function draw_graph(data) { // Size values nodes .append('text') + .attr('fill', '#fff') .attr('dx', 2) .attr('dy', "2em") .text(function(d) { - return filesize(d.data.value); + return filesize(d.data.value, {round: 0}); }) .attr('clip-path', function(d) {return "url(#clip-" + d.data.id + ")"}) diff --git a/assets/style/main.less b/assets/style/main.less new file mode 100644 index 0000000..d451c0d --- /dev/null +++ b/assets/style/main.less @@ -0,0 +1,73 @@ +// general styles +body { + background-color: #333; + color: #ccc; +} +* { + box-sizing: border-box; +} +h1 { + word-wrap: break-word; +} +a { + color: #4dF; +} +a:hover { + color: #6ff; +} +a:visted { + color: #6ff; +} +// Layout +div.children { + div { + padding: 0px 15px; + } +} +div.dirs { + float: left; + width: 50%; +} +div.files { + float: right; + width: 50%; +} +// Details +svg { + max-width: 100%; + background-color: #fff; + font-size: 10px; + font-family: arial, sans-serif; + rect { + /*fill: cadetblue;*/ + opacity: 0.4; + stroke: white; + } + g.chart > g.can-navigate { + &:hover { + cursor: pointer; + } + &:hover a { + text-decoration: underline; + } + &:hover rect { + animation: hoverfade 0.5s infinite; + stroke: black; + } + } +} +// Animations +@keyframes hoverfade { + 0% { + opacity: 0.4; + stroke: white; + } + 50% { + opacity: 0.2; + stroke: black; + } + 100% { + opacity: 0.4; + stroke: white; + } +} diff --git a/gruntfile.js b/gruntfile.js index 5df7639..ffdd531 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -33,7 +33,14 @@ module.exports = function(grunt) { } } }, - + less: { + styles: { + files: { + "static/style.css": "assets/style/main.less" + }, + sourceMap: true + } + }, /*concat: { deps_js: { src: [ @@ -49,12 +56,16 @@ module.exports = function(grunt) { }, },*/ watch: { - concat: { + jshits: { files: ['assets/js/*.js'], tasks: ['webpack:dev', 'babel'], // options: { // spawn: false // } + }, + cshits: { + files: ["assets/style/main.less"], + tasks: ['less:styles'], } } }); @@ -65,8 +76,9 @@ module.exports = function(grunt) { // grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-webpack'); grunt.loadNpmTasks('grunt-babel'); + grunt.loadNpmTasks('grunt-contrib-less'); // grunt.registerTask('default', ['less:website', 'cssmin:website', 'concat:dist']); - grunt.registerTask('default', ['webpack:dev', 'babel']); + grunt.registerTask('default', ['webpack:dev', 'babel', 'less:styles']); }; diff --git a/package.json b/package.json index 949eca3..e7b914a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "grunt": "^1.0.4", "grunt-babel": "^8.0.0", "grunt-contrib-concat": "^1.0.1", + "grunt-contrib-less": "^2.0.0", "grunt-contrib-watch": "^1.1.0", "grunt-webpack": "^3.1.3", "webpack": "^4.32.2", diff --git a/static/style.css b/static/style.css deleted file mode 100644 index ecfb4ec..0000000 --- a/static/style.css +++ /dev/null @@ -1,56 +0,0 @@ -* { - box-sizing: border-box; -} -h1 { - word-wrap: break-word; -} -div.children > div { - padding: 0px 15px; -} -div.dirs { - float: left; - width: 50%; -} -div.files { - float: right; - width: 50%; -} -svg { - max-width: 100%; - color: #fff; - font-size: 10px; - font-family: arial, sans-serif; -} -svg rect { - fill: cadetblue; - opacity: 0.5; - stroke: white; -} -svg g.chart>g.can-navigate:hover { - cursor: pointer; -} -svg g.chart>g.can-navigate:hover a { - text-decoration: underline; -} -@keyframes hoverfade { - 0% { - opacity: 0.5; - stroke: white; - } - 50% { - opacity: 0.2; - stroke: black; - } - 100% { - opacity: 0.5; - stroke: white; - } -} - -svg g.chart>g.can-navigate:hover rect { - animation: hoverfade 0.5s infinite; - stroke: black; -} -svg a:hover { - -} diff --git a/templates/page.html b/templates/page.html index b31058e..5eb6e7d 100644 --- a/templates/page.html +++ b/templates/page.html @@ -11,25 +11,28 @@
-