Update layout. Add flexible view sizes.

src/_h5ai/client/css/inc/content.less

@@ -8,6 +8,9 @@
 #content-header, #content-footer {
     margin: 16px;
     color: @col;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    background: #fafafa;
+    padding: 16px;
 
     a, a:active, a:visited {
         color: @col-link;
@@ -15,11 +18,15 @@
         cursor: pointer;
 
         &:hover {
-            color: #555;
+            color: #000;
         }
     }
 
     pre, code {
         font-family: @font-family-mono;
     }
+
+    h1, h2, h3, h4, h5, h6, p {
+        margin: 0.1em 0;
+    }
 }

src/_h5ai/client/css/inc/view-details.less

@@ -24,6 +24,12 @@
 
 #view.view-details {
 
+    margin: 16px;
+
+    #items {
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    }
+
     .header {
         position: relative;
         white-space: nowrap;
@@ -62,7 +68,8 @@
         border-bottom: 1px solid rgba(0,0,0,0.07);
 
         &:hover {
-            border-bottom: 1px solid rgba(0,0,0,0.09);
+            box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5);
+            z-index: 1;
         }
     }
 
@@ -98,41 +105,5 @@
         margin-top: -1px;
     }
 
-    &.size-16 {
+    .view-details-sized(16px)
-        .view-details-sized(16px)
-    }
-
-    .view-details-sized(24px);
-
-    &.size-32 {
-        .view-details-sized(32px)
-    }
-
-    &.size-48 {
-        .view-details-sized(48px)
-    }
-
-    &.size-64 {
-        .view-details-sized(64px)
-    }
-
-    &.size-96 {
-        .view-details-sized(96px)
-    }
-
-    &.size-128 {
-        .view-details-sized(128px)
-    }
-
-    &.size-192 {
-        .view-details-sized(192px)
-    }
-
-    &.size-256 {
-        .view-details-sized(256px)
-    }
-
-    &.size-384 {
-        .view-details-sized(384px)
-    }
 }

src/_h5ai/client/css/inc/view-grid.less

@@ -48,28 +48,4 @@
     }
 
     .view-grid-sized(48px);
-
-    &.size-64 {
-        .view-grid-sized(64px)
-    }
-
-    &.size-96 {
-        .view-grid-sized(96px)
-    }
-
-    &.size-128 {
-        .view-grid-sized(128px)
-    }
-
-    &.size-192 {
-        .view-grid-sized(192px)
-    }
-
-    &.size-256 {
-        .view-grid-sized(256px)
-    }
-
-    &.size-384 {
-        .view-grid-sized(384px)
-    }
 }

src/_h5ai/client/css/inc/view-icons.less

@@ -48,20 +48,4 @@
     }
 
     .view-icons-sized(96px);
-
-    &.size-128 {
-        .view-icons-sized(128px);
-    }
-
-    &.size-192 {
-        .view-icons-sized(192px);
-    }
-
-    &.size-256 {
-        .view-icons-sized(256px);
-    }
-
-    &.size-384 {
-        .view-icons-sized(384px);
-    }
 }

src/_h5ai/client/css/inc/view.less

@@ -121,7 +121,7 @@
         box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
         border-radius: 0 20px 20px 0;
         opacity: 0.6;
-        padding: 1px 1px 1px 3px;
+        padding: 2px;
 
         &:hover {
             opacity: 0.8;

src/_h5ai/client/js/inc/view/viewmode.js

@@ -1,7 +1,7 @@
 modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event'], function (_, $, allsettings, resource, store, event) {
 
     var modes = ['details', 'grid', 'icons'];
-    var sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256, 384];
+    var sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256];
     var settings = _.extend({}, {
             modes: modes,
             sizes: sizes
@@ -15,6 +15,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
             '</div>';
     var sizeTemplate =
             '<input id="view-size" type="range" min="0" max="0" value="0">';
+    var dynamicStyleTag = null;
+
+    sizes = settings.sizes.sort(function (a, b) { return a-b; });
 
 
     function adjustSpacing() {
@@ -22,6 +25,52 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
         // kept here for later use
     }
 
+    function applyCss(rules) {
+
+        if (dynamicStyleTag) {
+            document.head.removeChild(dynamicStyleTag);
+        }
+        dynamicStyleTag = document.createElement('style');
+        dynamicStyleTag.appendChild(document.createTextNode('')); // fix webkit
+        document.head.appendChild(dynamicStyleTag);
+        _.each(rules, function (rule, i) {
+
+            dynamicStyleTag.sheet.insertRule(rule, i);
+        });
+    }
+
+    function cropSize(size, min, max) {
+
+        min = min || 4;
+        max = max || 2048;
+        return Math.min(max, Math.max(min, size));
+    }
+
+    function applyCssSizes(size) {
+
+        var dsize = cropSize(size, 16, 96);
+        var gsize = cropSize(size, 48, 192);
+        var isize = cropSize(size, 96);
+        var rules = [
+                '#view.view-details .item .label { line-height: ' + (dsize+14) + 'px !important; }',
+                '#view.view-details .item .date { line-height: ' + (dsize+14) + 'px !important; }',
+                '#view.view-details .item .size { line-height: ' + (dsize+14) + 'px !important; }',
+                '#view.view-details .square { width: ' + dsize + 'px !important; }',
+                '#view.view-details .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+                '#view.view-details .label { margin: 0 246px 0 ' + (dsize+32) + 'px !important; }',
+
+                '#view.view-grid .item .label { line-height: ' + gsize + 'px !important; }',
+                '#view.view-grid .square { width: ' + gsize + 'px !important; }',
+                '#view.view-grid .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+
+                '#view.view-icons .item { width: ' + (isize*4/3) + 'px !important; }',
+                '#view.view-icons .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
+                '#view.view-icons .landscape .thumb { width: ' + (isize*4/3) + 'px !important; }'
+            ];
+        applyCss(rules);
+    }
+
+
     function update(mode, size) {
 
         var $view = $('#view');
@@ -43,15 +92,8 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
             }
         });
 
-        _.each(sizes, function (s) {
+        applyCssSizes(size);
-            if (s === size) {
+        $('#view-size').val(_.indexOf(sizes, size));
-                $view.addClass('size-' + s).show();
-            } else {
-                $view.removeClass('size-' + s);
-            }
-        });
-
-        $('#view-size').val(_.indexOf(_.intersection(sizes, settings.sizes), size));
 
         adjustSpacing();
     }

src/_h5ai/conf/options.json

@@ -34,10 +34,10 @@ Options
         The user selected view mode is also stored local in modern browsers
         so that it will be persistent.
     - setParentFolderLabels: set parent folder labels to real folder names
-    - sizes: array, subset of [16, 24, 32, 48, 64, 96, 128, 192, 256, 384]
+    - sizes: array of positive integers
-        the first value indicates the default view mode. If only one value
+        the first value indicates the default view size. If only one value
-        is given the view mode is fixed and the selector buttons are hidden.
+        is given the view size is fixed and the selector buttons are hidden.
-        The user selected view mode is also stored local in modern browsers
+        The user selected view size is also stored local in modern browsers
         so that it will be persistent.
     - smartBrowsing: use History API if available (no need to reload the whole page)
     - theme: name of one of the folders in "_{{pkg.name}}/client/themes", defaults to builtin fallback
@@ -52,7 +52,7 @@ Options
         "hideParentFolder": true,
         "modes": ["details", "grid", "icons"],
         "setParentFolderLabels": true,
-        "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384],
+        "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256],
         "smartBrowsing": true,
         "theme": "",
         "unmanaged": ["index.html", "index.htm", "index.php"],