update layout

This commit is contained in:
dave 2019-06-01 23:13:34 -07:00
parent 8bae7d764d
commit eed6a102e7
5 changed files with 54 additions and 73 deletions

View File

@ -1,3 +1,6 @@
@import "mixins.less";
// general styles
body {
background-color: #333;
@ -19,18 +22,29 @@ a:visted {
color: #6ff;
}
// Layout
div.children {
div {
padding: 0px 15px;
}
div#header {
.clearfix();
}
div.dirs {
div#key {
float: left;
width: 50%;
width: 30%;
}
div.files {
div#svg-container {
float: right;
width: 50%;
width: 70%;
}
div#index {
.clearfix();
div#dirs {
float: left;
width: 50%;
padding-right: 15px;
}
div#files {
float: right;
width: 50%;
padding-left: 15px;
}
}
// Details
svg {

10
assets/style/mixins.less Normal file
View File

@ -0,0 +1,10 @@
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

View File

@ -1,7 +1,5 @@
import os
import sys
# import locale
# locale.setlocale(locale.LC_ALL, 'en_US')
import logging
import cherrypy
from threading import Thread

View File

@ -1,24 +1,7 @@
const webpackConfig = require('./webpack.config.js');
module.exports = function(grunt) {
grunt.initConfig({
/*less: {
website: {
files: {
'styles/css/main.css': 'styles/less/main.less'
}
}
},*/
/*cssmin: {
website: {
files: {
'styles/mincss/pure.css': 'node_modules/purecss/build/pure.css',
'styles/mincss/grids-responsive-min.css': 'node_modules/purecss/build/grids-responsive.css',
'styles/mincss/main.css': 'styles/css/main.css'
}
}
},*/
webpack: {
dev: webpackConfig,
},
@ -41,27 +24,10 @@ module.exports = function(grunt) {
sourceMap: true
}
},
/*concat: {
deps_js: {
src: [
'node_modules/d3-voronoi-treemap/build/d3-voronoi-treemap.js',
'node_modules/d3-voronoi-map/build/d3-voronoi-map.js',
'node_modules/d3-weighted-voronoi/build/d3-weighted-voronoi.js',
'node_modules/d3-scale/dist/d3-scale.js',
'node_modules/d3/dist/d3.js',
'node_modules/randomcolor/randomColor.js',
'assets/js/main.js'
],
dest: 'static/scripts.js',
},
},*/
watch: {
jshits: {
files: ['assets/js/*.js'],
tasks: ['webpack:dev', 'babel'],
// options: {
// spawn: false
// }
},
cshits: {
files: ["assets/style/main.less"],
@ -70,15 +36,10 @@ module.exports = function(grunt) {
}
});
// grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
// grunt.loadNpmTasks('grunt-contrib-cssmin');
// 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', 'less:styles']);
};

View File

@ -11,11 +11,8 @@
<link rel="stylesheet" href="/static/style.css" />
</head>
<body onload="Application.boot();">
<div class="header">
<div id="svg-container">
<svg><g class="chart"></g></svg>
</div>
<div class="key">
<div id="header">
<div id="key">
<h1>{{ node.path|pathjoin }}</h1>
<div>
<ul>
@ -31,26 +28,27 @@
</ul>
</div>
</div>
</div>
<div class="viewer">
{% if node.typ in (NodeType.ROOT, NodeType.DIR) %}
<div class="children">
<div class="dirs">
<h2>Subdirs:</h2>
{% for child in node.children|sort(attribute='total_children', reverse=True) %}{% if child.typ in NodeGroup.DIRLIKE %}
<hr />
<a href="/?n={{ child|id }}">{{ child.name }}</a>: {{ child.total_size|data }} - {{ child.total_children|commafy }} children
{% endif %}{% endfor %}
</div>
<div class="files">
<h2>Files:</h2>
{% for child in node.children|sort(attribute='name') %}{% if child.typ in NodeGroup.FILELIKE %}
<hr />
<a href="/?n={{ child|id }}">{{ child.name }}</a>: {{ child.total_size|data }}
{% endif %}{% endfor %}
</div>
<div id="svg-container">
<svg><g class="chart"></g></svg>
</div>
{% endif %}
</div>
{% if node.typ in (NodeType.ROOT, NodeType.DIR) %}
<div id="index">
<div id="dirs">
<h2>Subdirs:</h2>
{% for child in node.children|sort(attribute='total_children', reverse=True) %}{% if child.typ in NodeGroup.DIRLIKE %}
<hr />
<a href="/?n={{ child|id }}">{{ child.name }}</a>: {{ child.total_size|data }} - {{ child.total_children|commafy }} children
{% endif %}{% endfor %}
</div>
<div id="files">
<h2>Files:</h2>
{% for child in node.children|sort(attribute='name') %}{% if child.typ in NodeGroup.FILELIKE %}
<hr />
<a href="/?n={{ child|id }}">{{ child.name }}</a>: {{ child.total_size|data }}
{% endif %}{% endfor %}
</div>
</div>
{% endif %}
</body>
</html>