Width hack.

src/_h5ai/public/css/lib/responsive.less

@@ -8,12 +8,12 @@
         }
     }
     #view.view-details {
-        .header .label, .item .label {
+        // .header .label, .item .label {
-            margin-right: 80px !important;
+        //     margin-right: 80px !important;
-        }
+        // }
-        .header .date, .item .date {
+        // .header .date, .item .date {
-            display: none;
+        //     display: none;
-        }
+        // }
     }
     #tree, #info {
         display: none !important;

src/_h5ai/public/css/lib/view/view-details.less

@@ -115,3 +115,26 @@
 
     .view-details-sized(16px)
 }
+
+#view.view-details {
+    &.width-0 {
+        .label {
+            margin-right: 4px;
+        }
+        .date {
+            display: none;
+        }
+        .size {
+            display: none;
+        }
+    }
+
+    &.width-1 {
+        .label {
+            margin-right: 64px;
+        }
+        .date {
+            display: none;
+        }
+    }
+}

src/_h5ai/public/js/lib/core/event.js

@@ -1,4 +1,4 @@
-const {isStr, isFn} = require('../util');
+const {isStr, isFn, dom} = require('../util');
 
 const subscriptions = {};
 
@@ -20,6 +20,8 @@ const pub = (topic, ...args) => {
     }
 };
 
+dom(global.window).on('resize', () => pub('resize'));
+
 module.exports = {
     sub,
     pub

src/_h5ai/public/js/lib/ext/contextmenu.js

@@ -5,11 +5,11 @@ const allsettings = require('../core/settings');
 const settings = Object.assign({
     enabled: false
 }, allsettings.contextmenu);
-const tplOverlay = '<div id="cm-overlay"></div>';
+const overlayTpl = '<div id="cm-overlay"></div>';
-const tplPanel = '<div class="cm-panel"><ul></ul></div>';
+const panelTpl = '<div class="cm-panel"><ul></ul></div>';
-const tplSep = '<li class="cm-sep"></li>';
+const sepTpl = '<li class="cm-sep"></li>';
-const tplEntry = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"></span></li>';
+const entryTpl = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"></span></li>';
-const tplLabel = '<li class="cm-label"><span class="cm-text"></span></li>';
+const labelTpl = '<li class="cm-label"><span class="cm-text"></span></li>';
 
 
 const closestId = el => {
@@ -20,7 +20,7 @@ const closestId = el => {
 };
 
 const createOverlay = callback => {
-    const $overlay = dom(tplOverlay);
+    const $overlay = dom(overlayTpl);
 
     const handle = ev => {
         ev.stopPropagation();
@@ -40,18 +40,18 @@ const createOverlay = callback => {
 };
 
 const createPanel = menu => {
-    const $panel = dom(tplPanel);
+    const $panel = dom(panelTpl);
     const $ul = $panel.find('ul');
     let $li;
 
     each(menu, entry => {
         if (entry.type === '-') {
-            dom(tplSep).appTo($ul);
+            dom(sepTpl).appTo($ul);
         } else if (entry.type === 'l') {
-            dom(tplLabel).appTo($ul)
+            dom(labelTpl).appTo($ul)
                 .find('.cm-text').text(entry.text);
         } else if (entry.type === 'e') {
-            $li = dom(tplEntry).appTo($ul);
+            $li = dom(entryTpl).appTo($ul);
             $li[0]._cmId = entry.id;
             $li.find('.cm-text').text(entry.text);
             if (entry.icon) {

src/_h5ai/public/js/lib/ext/crumb.js

@@ -9,18 +9,18 @@ const base = require('../view/base');
 const settings = Object.assign({
     enabled: false
 }, allsettings.crumb);
-const tplCrumbbar = '<div id="crumbbar"></div>';
+const crumbbarTpl = '<div id="crumbbar"></div>';
-const tplCrumb =
+const crumbTpl =
         `<a class="crumb">
             <img class="sep" src="${resource.image('crumb')}" alt=">"/>
             <span class="label"></span>
         </a>`;
-const tplPageHint =
+const pageHintTpl =
         `<img class="hint" src="${resource.icon('folder-page')}" alt="has index page"/>`;
 
 
 const createHtml = item => {
-    const $html = dom(tplCrumb);
+    const $html = dom(crumbTpl);
     location.setLink($html, item);
 
     $html.find('.label').text(item.label);
@@ -30,7 +30,7 @@ const createHtml = item => {
     }
 
     if (!item.isManaged) {
-        $html.app(dom(tplPageHint));
+        $html.app(dom(pageHintTpl));
     }
 
     item._$crumb = $html;
@@ -59,7 +59,7 @@ const init = () => {
         return;
     }
 
-    dom(tplCrumbbar).appTo(base.$flowbar);
+    dom(crumbbarTpl).appTo(base.$flowbar);
 
     event.sub('location.changed', onLocationChanged);
 };

src/_h5ai/public/js/lib/ext/download.js

@@ -11,7 +11,7 @@ const settings = Object.assign({
     packageName: 'package',
     alwaysVisible: false
 }, allsettings.download);
-const template =
+const tpl =
         `<div id="download" class="tool">
             <img src="${resource.image('download')}" alt="download"/>
         </div>`;
@@ -60,7 +60,7 @@ const init = () => {
         return;
     }
 
-    $download = dom(template)
+    $download = dom(tpl)
         .hide()
         .appTo('#toolbar')
         .on('click', onClick);

src/_h5ai/public/js/lib/ext/filter.js

@@ -12,7 +12,7 @@ const settings = Object.assign({
     debounceTime: 100,
     ignorecase: true
 }, allsettings.filter);
-const template =
+const tpl =
         `<div id="filter" class="tool">
             <img src="${resource.image('filter')}" alt="filter"/>
             <input class="l10n_ph-filter" type="text" value=""/>
@@ -71,7 +71,7 @@ const init = () => {
         return;
     }
 
-    $filter = dom(template).appTo('#toolbar');
+    $filter = dom(tpl).appTo('#toolbar');
     $input = $filter.find('input');
 
     $filter.find('img').on('click', toggle);

src/_h5ai/public/js/lib/ext/info.js

@@ -13,7 +13,7 @@ const settings = Object.assign({
     qrcode: true,
     qrColor: '#999'
 }, allsettings.info);
-const template =
+const tpl =
         `<div id="info">
             <div class="icon"><img/></div>
             <div class="block">
@@ -27,7 +27,7 @@ const template =
             </div>
             <div class="qrcode"/>
         </div>`;
-const settingsTemplate =
+const settingsTpl =
         `<div class="block">
             <h1 class="l10n-info">Info</h1>
             <div id="view-info" class="button view">
@@ -126,7 +126,7 @@ const init = () => {
         return;
     }
 
-    const $info = dom(template).hide().appTo('#mainrow');
+    const $info = dom(tpl).hide().appTo('#mainrow');
     $img = $info.find('.icon img');
     $label = $info.find('.label');
     $time = $info.find('.time');
@@ -140,12 +140,13 @@ const init = () => {
         $qrcode.rm();
     }
 
-    dom(settingsTemplate)
+    dom(settingsTpl)
         .appTo('#sidebar')
         .find('#view-info')
         .on('click', ev => {
             store.put(storekey, !store.get(storekey));
             updateSettings();
+            event.pub('resize');
             ev.preventDefault();
         });
 

src/_h5ai/public/js/lib/ext/l10n.js

@@ -35,14 +35,14 @@ const defaultTranslations = {
     tree: 'Tree',
     view: 'View'
 };
-const blockTemplate =
+const blockTpl =
         `<div class="block">
             <h1 class="l10n-language">Language</h1>
             <div class="select">
                 <select id="langs"/>
             </div>
         </div>`;
-const optionTemplate = '<option/>';
+const optionTpl = '<option/>';
 const storekey = 'ext/l10n';
 const loaded = {
     en: Object.assign({}, defaultTranslations)
@@ -109,7 +109,7 @@ const localize = (languages, isoCode, useBrowserLang) => {
 };
 
 const initLangSelector = languages => {
-    const $block = dom(blockTemplate);
+    const $block = dom(blockTpl);
     const $select = $block.find('select')
         .on('change', ev => {
             const isoCode = ev.target.value;
@@ -118,7 +118,7 @@ const initLangSelector = languages => {
         });
 
     each(languages, (language, isoCode) => {
-        dom(optionTemplate)
+        dom(optionTpl)
             .attr('value', isoCode)
             .addCls(isoCode)
             .text(isoCode + ' - ' + (isStr(language) ? language : language.lang))

src/_h5ai/public/js/lib/ext/preview/preview-txt.js

@@ -10,8 +10,8 @@ const settings = Object.assign({
     enabled: false,
     styles: {}
 }, allsettings['preview-txt']);
-const tplPre = '<pre id="pv-content-txt"></pre>';
+const preTpl = '<pre id="pv-content-txt"></pre>';
-const tplDiv = '<div id="pv-content-txt"></div>';
+const divTpl = '<div id="pv-content-txt"></div>';
 
 const updateGui = () => {
     const el = dom('#pv-content-txt')[0];
@@ -54,18 +54,18 @@ const load = item => {
             const style = settings.styles[item.type];
 
             if (style === 1) {
-                return dom(tplPre).text(content);
+                return dom(preTpl).text(content);
             } else if (style === 2) {
-                return dom(tplDiv).html(marked(content));
+                return dom(divTpl).html(marked(content));
             } else if (style === 3) {
                 const $code = dom('<code></code>').text(content);
                 win.setTimeout(() => {
                     lolight.el($code[0]);
                 }, content.length < 20000 ? 0 : 500);
-                return dom(tplPre).app($code);
+                return dom(preTpl).app($code);
             }
 
-            return dom(tplDiv).text(content);
+            return dom(divTpl).text(content);
         });
 };
 

src/_h5ai/public/js/lib/ext/preview/preview.js

@@ -8,7 +8,7 @@ const win = global.window;
 const settings = Object.assign({
     enabled: true
 }, allsettings.preview);
-const tplOverlay =
+const overlayTpl =
         `<div id="pv-overlay">
             <div id="pv-container"></div>
             <div id="pv-spinner"><img class="back"/><img class="spinner" src="${resource.image('spinner')}"/></div>
@@ -252,7 +252,7 @@ const init = () => {
         return;
     }
 
-    dom(tplOverlay)
+    dom(overlayTpl)
         .hide()
         .appTo('body')
         .on('keydown', onKeydown)

src/_h5ai/public/js/lib/ext/search.js

@@ -14,7 +14,7 @@ const settings = Object.assign({
     debounceTime: 300,
     ignorecase: true
 }, allsettings.search);
-const template =
+const tpl =
         `<div id="search" class="tool">
             <img src="${resource.image('search')}" alt="search"/>
             <input class="l10n_ph-search" type="text" value=""/>
@@ -79,7 +79,7 @@ const init = () => {
         return;
     }
 
-    $search = dom(template).appTo('#toolbar');
+    $search = dom(tpl).appTo('#toolbar');
     $input = $search.find('input');
 
     $search.find('img').on('click', toggle);

src/_h5ai/public/js/lib/ext/sort.js

@@ -13,7 +13,7 @@ const settings = Object.assign({
     folders: 0
 }, allsettings.sort);
 const storekey = 'ext/sort';
-const template = `<img src="${resource.image('sort')}" class="sort" alt="sort order"/>`;
+const tpl = `<img src="${resource.image('sort')}" class="sort" alt="sort order"/>`;
 
 const getTypeOrder = item => item.isFolder() ? settings.folders : 1;
 const columnProps = {0: 'label', 1: 'time', 2: 'size'};
@@ -75,7 +75,7 @@ const addToggles = () => {
     each(columnClasses, (cls, idx) => {
         const pos = idx === '0' ? 'app' : 'pre';
         $header
-            .find('a.' + cls)[pos](template)
+            .find('a.' + cls)[pos](tpl)
             .on('click', ev => {
                 sortItems(idx, dom(ev.currentTarget).hasCls('ascending'));
                 ev.preventDefault();

src/_h5ai/public/js/lib/ext/tree.js

@@ -156,6 +156,7 @@ const init = () => {
         .on('click', ev => {
             store.put(storekey, !store.get(storekey));
             updateSettings();
+            event.pub('resize');
             ev.preventDefault();
         });
 
@@ -168,5 +169,4 @@ const init = () => {
     event.sub('location.changed', onLocationChanged);
 };
 
-
 init();

src/_h5ai/public/js/lib/main/info.js

@@ -4,15 +4,15 @@ const server = require('../server');
 const resource = require('../core/resource');
 
 
-const tplTests =
+const testsTpl =
         '<ul id="tests"></ul>';
-const tplTest =
+const testTpl =
         `<li class="test">
             <span class="label"></span>
             <span class="result"></span>
             <div class="info"></div>
         </li>`;
-const tplLogin =
+const loginTpl =
         `<div id="login-wrapper">
             <input id="pass" type="password" placeholder="password"/>
             <span id="login">login</span>
@@ -22,7 +22,7 @@ const tplLogin =
                 Change it in '_h5ai/private/conf/options.json'.
             </div>
         </div>`;
-const tplSupport =
+const supportTpl =
         `<div id="support">
             Show your support with a donation!
             <div class="paypal">
@@ -37,7 +37,7 @@ const setup = config.setup;
 
 
 const addTest = (label, info, passed, result) => {
-    const $test = dom(tplTest).appTo('#tests');
+    const $test = dom(testTpl).appTo('#tests');
     $test.find('.label').text(label);
     $test.find('.result')
             .addCls(passed ? 'passed' : 'failed')
@@ -50,7 +50,7 @@ const addTests = () => {
         return;
     }
 
-    dom(tplTests).appTo('#content');
+    dom(testsTpl).appTo('#content');
 
     addTest(
         'h5ai version', 'Only green if this is an official h5ai release',
@@ -157,11 +157,11 @@ const onKeydown = ev => {
 };
 
 const addSupport = () => {
-    dom(tplSupport).appTo('#content');
+    dom(supportTpl).appTo('#content');
 };
 
 const addLogin = () => {
-    dom(tplLogin).appTo('#content');
+    dom(loginTpl).appTo('#content');
 
     if (setup.AS_ADMIN) {
         dom('#pass').rm();

src/_h5ai/public/js/lib/view/base.js

@@ -1,7 +1,7 @@
 const {dom} = require('../util');
 
 const rootSelector = 'body';
-const tplTopbar =
+const topbarTpl =
         `<div id="topbar">
             <div id="toolbar"></div>
             <div id="flowbar"></div>
@@ -10,7 +10,7 @@ const tplTopbar =
                 <div>by h5ai</div>
             </a>
         </div>`;
-const tplMainrow =
+const mainrowTpl =
         `<div id="mainrow">
             <div id="content"></div>
         </div>`;
@@ -20,8 +20,8 @@ const init = () => {
 
     const $root = dom(rootSelector)
         .attr('id', 'root')
-        .app(tplTopbar)
+        .app(topbarTpl)
-        .app(tplMainrow);
+        .app(mainrowTpl);
 
     return {
         $root,

src/_h5ai/public/js/lib/view/sidebar.js

@@ -9,16 +9,16 @@ const settings = Object.assign({
     disableSidebar: false
 }, allsettings.view);
 const storekey = 'sidebarIsVisible';
-const tplSidebar = '<div id="sidebar"></div>';
+const sidebarTpl = '<div id="sidebar"></div>';
-const tplToggle =
+const toggleTpl =
         `<div id="sidebar-toggle" class="tool">
             <img alt="sidebar"/>
         </div>`;
 
 
 const init = () => {
-    const $sidebar = dom(tplSidebar).hide();
+    const $sidebar = dom(sidebarTpl).hide();
-    const $toggle = dom(tplToggle);
+    const $toggle = dom(toggleTpl);
     const $img = $toggle.find('img');
 
     const update = toggle => {

src/_h5ai/public/js/lib/view/view.js

@@ -21,7 +21,7 @@ const settings = Object.assign({
 const sortedSizes = settings.sizes.sort((a, b) => a - b);
 const checkedModes = intersection(settings.modes, modes);
 const storekey = 'view';
-const tplView =
+const viewTpl =
         `<div id="view">
             <ul id="items" class="clearfix">
                 <li class="header">
@@ -33,7 +33,7 @@ const tplView =
             </ul>
             <div id="view-hint"></div>
         </div>`;
-const tplItem =
+const itemTpl =
         `<li class="item">
             <a>
                 <span class="icon square"><img/></span>
@@ -43,7 +43,7 @@ const tplItem =
                 <span class="size"></span>
             </a>
         </li>`;
-const $view = dom(tplView);
+const $view = dom(viewTpl);
 const $items = $view.find('#items');
 const $hint = $view.find('#view-hint');
 
@@ -55,22 +55,26 @@ const createStyles = size => {
     const gsize = cropSize(size, 40, 160);
     const isize = cropSize(size, 80, 1000);
     const ilsize = Math.round(isize * 4 / 3);
+    const important = '!important;';
+    const detailsPrefix = `#view.view-details.view-size-${size}`;
+    const gridPrefix = `#view.view-grid.view-size-${size}`;
+    const iconsPrefix = `#view.view-icons.view-size-${size}`;
     const rules = [
-        `#view.view-details.view-size-${size} .item .label {line-height: ${dsize + 14}px !important;}`,
+        `${detailsPrefix} .item .label {line-height: ${dsize + 14}px ${important}}`,
-        `#view.view-details.view-size-${size} .item .date {line-height: ${dsize + 14}px !important;}`,
+        `${detailsPrefix} .item .date {line-height: ${dsize + 14}px ${important}}`,
-        `#view.view-details.view-size-${size} .item .size {line-height: ${dsize + 14}px !important;}`,
+        `${detailsPrefix} .item .size {line-height: ${dsize + 14}px ${important}}`,
-        `#view.view-details.view-size-${size} .square {width: ${dsize}px !important; height: ${dsize}px !important;}`,
+        `${detailsPrefix} .square {width: ${dsize}px ${important} height: ${dsize}px ${important}}`,
-        `#view.view-details.view-size-${size} .square img {width: ${dsize}px !important; height: ${dsize}px !important;}`,
+        `${detailsPrefix} .square img {width: ${dsize}px ${important} height: ${dsize}px ${important}}`,
-        `#view.view-details.view-size-${size} .label {margin-left: ${dsize + 32}px !important;}`,
+        `${detailsPrefix} .label {margin-left: ${dsize + 32}px ${important}}`,
 
-        `#view.view-grid.view-size-${size} .item .label {line-height: ${gsize}px !important;}`,
+        `${gridPrefix} .item .label {line-height: ${gsize}px ${important}}`,
-        `#view.view-grid.view-size-${size} .square {width: ${gsize}px !important; height: ${gsize}px !important;}`,
+        `${gridPrefix} .square {width: ${gsize}px ${important} height: ${gsize}px ${important}}`,
-        `#view.view-grid.view-size-${size} .square img {width: ${gsize}px !important; height: ${gsize}px !important;}`,
+        `${gridPrefix} .square img {width: ${gsize}px ${important} height: ${gsize}px ${important}}`,
 
-        `#view.view-icons.view-size-${size} .item {width: ${ilsize}px !important;}`,
+        `${iconsPrefix} .item {width: ${ilsize}px ${important}}`,
-        `#view.view-icons.view-size-${size} .landscape {width: ${ilsize}px !important; height: ${isize}px !important;}`,
+        `${iconsPrefix} .landscape {width: ${ilsize}px ${important} height: ${isize}px ${important}}`,
-        `#view.view-icons.view-size-${size} .landscape img {width: ${isize}px !important; height: ${isize}px !important;}`,
+        `${iconsPrefix} .landscape img {width: ${isize}px ${important} height: ${isize}px ${important}}`,
-        `#view.view-icons.view-size-${size} .landscape .thumb {width: ${ilsize}px !important;}`
+        `${iconsPrefix} .landscape .thumb {width: ${ilsize}px ${important}}`
     ];
 
     return rules.join('\n');
@@ -129,7 +133,7 @@ const onMouseleave = ev => {
 };
 
 const createHtml = item => {
-    const $html = dom(tplItem);
+    const $html = dom(itemTpl);
     const $a = $html.find('a');
     const $iconImg = $html.find('.icon img');
     const $label = $html.find('.label');
@@ -243,6 +247,17 @@ const onLocationRefreshed = (item, added, removed) => {
     changeItems(add, removed);
 };
 
+const onResize = () => {
+    const width = $view[0].offsetWidth;
+
+    $view.rmCls('width-0').rmCls('width-1');
+    if (width < 320) {
+        $view.addCls('width-0');
+    } else if (width < 480) {
+        $view.addCls('width-1');
+    }
+};
+
 const init = () => {
     addCssStyles();
     set();
@@ -254,9 +269,10 @@ const init = () => {
 
     event.sub('location.changed', onLocationChanged);
     event.sub('location.refreshed', onLocationRefreshed);
+    event.sub('resize', onResize);
+    onResize();
 };
 
-
 init();
 
 module.exports = {

src/_h5ai/public/js/lib/view/viewmode.js

@@ -10,15 +10,15 @@ const view = require('./view');
 const settings = Object.assign({
     modeToggle: false
 }, allsettings.view);
-const tplSettings =
+const settingsTpl =
         '<div id="viewmode-settings" class="block"><h1 class="l10n-view">View</h1></div>';
-const tplMode =
+const modeTpl =
         `<div id="viewmode-[MODE]" class="button mode">
             <img src="${resource.image('view-[MODE]')}" alt="viewmode-[MODE]"/>
         </div>`;
-const tplSize =
+const sizeTpl =
         '<input id="viewmode-size" type="range" min="0" max="0" value="0">';
-const tplToggle =
+const toggleTpl =
         `<div id="viewmode-toggle" class="tool">
             <img alt="viewmode"/>
         </div>`;
@@ -42,11 +42,11 @@ const addSettings = () => {
         return;
     }
 
-    const $viewBlock = dom(tplSettings);
+    const $viewBlock = dom(settingsTpl);
 
     if (modes.length > 1) {
         each(modes, mode => {
-            dom(tplMode.replace(/\[MODE\]/g, mode))
+            dom(modeTpl.replace(/\[MODE\]/g, mode))
                 .on('click', () => {
                     view.setMode(mode);
                 })
@@ -56,7 +56,7 @@ const addSettings = () => {
 
     if (sizes.length > 1) {
         const max = sizes.length - 1;
-        dom(tplSize)
+        dom(sizeTpl)
             .attr('max', max)
             .on('input', ev => view.setSize(sizes[ev.target.valueAsNumber]))
             .on('change', ev => view.setSize(sizes[ev.target.valueAsNumber]))
@@ -76,7 +76,7 @@ const onToggle = () => {
 
 const addToggle = () => {
     if (settings.modeToggle && modes.length > 1) {
-        dom(tplToggle)
+        dom(toggleTpl)
             .on('click', onToggle)
             .appTo(base.$toolbar);
     }