diff --git a/src/_h5ai/public/css/lib/responsive.less b/src/_h5ai/public/css/lib/responsive.less index 7e601c7d..0396df5f 100644 --- a/src/_h5ai/public/css/lib/responsive.less +++ b/src/_h5ai/public/css/lib/responsive.less @@ -8,12 +8,12 @@ } } #view.view-details { - .header .label, .item .label { - margin-right: 80px !important; - } - .header .date, .item .date { - display: none; - } + // .header .label, .item .label { + // margin-right: 80px !important; + // } + // .header .date, .item .date { + // display: none; + // } } #tree, #info { display: none !important; diff --git a/src/_h5ai/public/css/lib/view/view-details.less b/src/_h5ai/public/css/lib/view/view-details.less index c92b8c3c..3d5a576a 100644 --- a/src/_h5ai/public/css/lib/view/view-details.less +++ b/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; + } + } +} diff --git a/src/_h5ai/public/js/lib/core/event.js b/src/_h5ai/public/js/lib/core/event.js index 3b19dc17..1dd87b66 100644 --- a/src/_h5ai/public/js/lib/core/event.js +++ b/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 diff --git a/src/_h5ai/public/js/lib/ext/contextmenu.js b/src/_h5ai/public/js/lib/ext/contextmenu.js index 039011f6..13264738 100644 --- a/src/_h5ai/public/js/lib/ext/contextmenu.js +++ b/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 = '
'; -const tplPanel = '
'; -const tplSep = '
  • '; -const tplEntry = '
    • '; -const tplLabel = '
    • '; +const overlayTpl = '
    '; +const panelTpl = '
    '; +const sepTpl = '
  • '; +const entryTpl = '
    • '; +const labelTpl = '
    • '; 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) { diff --git a/src/_h5ai/public/js/lib/ext/crumb.js b/src/_h5ai/public/js/lib/ext/crumb.js index 17e164e9..eb565bf8 100644 --- a/src/_h5ai/public/js/lib/ext/crumb.js +++ b/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 = '
    '; -const tplCrumb = +const crumbbarTpl = '
    '; +const crumbTpl = ` > `; -const tplPageHint = +const pageHintTpl = `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); }; diff --git a/src/_h5ai/public/js/lib/ext/download.js b/src/_h5ai/public/js/lib/ext/download.js index 8033c22d..c707daaf 100644 --- a/src/_h5ai/public/js/lib/ext/download.js +++ b/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 = `
    download
    `; @@ -60,7 +60,7 @@ const init = () => { return; } - $download = dom(template) + $download = dom(tpl) .hide() .appTo('#toolbar') .on('click', onClick); diff --git a/src/_h5ai/public/js/lib/ext/filter.js b/src/_h5ai/public/js/lib/ext/filter.js index dcb32086..dc06959e 100644 --- a/src/_h5ai/public/js/lib/ext/filter.js +++ b/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 = `
    filter @@ -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); diff --git a/src/_h5ai/public/js/lib/ext/info.js b/src/_h5ai/public/js/lib/ext/info.js index 14dfc299..85f9b0f3 100644 --- a/src/_h5ai/public/js/lib/ext/info.js +++ b/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 = `
    @@ -27,7 +27,7 @@ const template =
    `; -const settingsTemplate = +const settingsTpl = `

    Info

    @@ -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(); }); diff --git a/src/_h5ai/public/js/lib/ext/l10n.js b/src/_h5ai/public/js/lib/ext/l10n.js index f7e4b906..4283821f 100644 --- a/src/_h5ai/public/js/lib/ext/l10n.js +++ b/src/_h5ai/public/js/lib/ext/l10n.js @@ -35,14 +35,14 @@ const defaultTranslations = { tree: 'Tree', view: 'View' }; -const blockTemplate = +const blockTpl = `

    Language

    @@ -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); diff --git a/src/_h5ai/public/js/lib/ext/sort.js b/src/_h5ai/public/js/lib/ext/sort.js index f710a13b..a1eaa9da 100644 --- a/src/_h5ai/public/js/lib/ext/sort.js +++ b/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 = `sort order`; +const tpl = `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(); diff --git a/src/_h5ai/public/js/lib/ext/tree.js b/src/_h5ai/public/js/lib/ext/tree.js index 3f17fe84..c8a4a588 100644 --- a/src/_h5ai/public/js/lib/ext/tree.js +++ b/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(); diff --git a/src/_h5ai/public/js/lib/main/info.js b/src/_h5ai/public/js/lib/main/info.js index 4ecc11b8..221939bf 100644 --- a/src/_h5ai/public/js/lib/main/info.js +++ b/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 = '
      '; -const tplTest = +const testTpl = `
      • `; -const tplLogin = +const loginTpl = `
      login @@ -22,7 +22,7 @@ const tplLogin = Change it in '_h5ai/private/conf/options.json'.
      `; -const tplSupport = +const supportTpl = `
      Show your support with a donation!
      @@ -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(); diff --git a/src/_h5ai/public/js/lib/view/base.js b/src/_h5ai/public/js/lib/view/base.js index db958d46..053f000c 100644 --- a/src/_h5ai/public/js/lib/view/base.js +++ b/src/_h5ai/public/js/lib/view/base.js @@ -1,7 +1,7 @@ const {dom} = require('../util'); const rootSelector = 'body'; -const tplTopbar = +const topbarTpl = `
      @@ -10,7 +10,7 @@ const tplTopbar =
      by h5ai
      `; -const tplMainrow = +const mainrowTpl = `
      `; @@ -20,8 +20,8 @@ const init = () => { const $root = dom(rootSelector) .attr('id', 'root') - .app(tplTopbar) - .app(tplMainrow); + .app(topbarTpl) + .app(mainrowTpl); return { $root, diff --git a/src/_h5ai/public/js/lib/view/sidebar.js b/src/_h5ai/public/js/lib/view/sidebar.js index 344f7461..cfff6652 100644 --- a/src/_h5ai/public/js/lib/view/sidebar.js +++ b/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 = ''; -const tplToggle = +const sidebarTpl = ''; +const toggleTpl = ``; const init = () => { - const $sidebar = dom(tplSidebar).hide(); - const $toggle = dom(tplToggle); + const $sidebar = dom(sidebarTpl).hide(); + const $toggle = dom(toggleTpl); const $img = $toggle.find('img'); const update = toggle => { diff --git a/src/_h5ai/public/js/lib/view/view.js b/src/_h5ai/public/js/lib/view/view.js index 556520c6..aff35efb 100644 --- a/src/_h5ai/public/js/lib/view/view.js +++ b/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 = `
      • @@ -33,7 +33,7 @@ const tplView =
      `; -const tplItem = +const itemTpl = `
    • @@ -43,7 +43,7 @@ const tplItem =
      • `; -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;}`, - `#view.view-details.view-size-${size} .item .date {line-height: ${dsize + 14}px !important;}`, - `#view.view-details.view-size-${size} .item .size {line-height: ${dsize + 14}px !important;}`, - `#view.view-details.view-size-${size} .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;}`, - `#view.view-details.view-size-${size} .label {margin-left: ${dsize + 32}px !important;}`, + `${detailsPrefix} .item .label {line-height: ${dsize + 14}px ${important}}`, + `${detailsPrefix} .item .date {line-height: ${dsize + 14}px ${important}}`, + `${detailsPrefix} .item .size {line-height: ${dsize + 14}px ${important}}`, + `${detailsPrefix} .square {width: ${dsize}px ${important} height: ${dsize}px ${important}}`, + `${detailsPrefix} .square img {width: ${dsize}px ${important} height: ${dsize}px ${important}}`, + `${detailsPrefix} .label {margin-left: ${dsize + 32}px ${important}}`, - `#view.view-grid.view-size-${size} .item .label {line-height: ${gsize}px !important;}`, - `#view.view-grid.view-size-${size} .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} .item .label {line-height: ${gsize}px ${important}}`, + `${gridPrefix} .square {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;}`, - `#view.view-icons.view-size-${size} .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;}`, - `#view.view-icons.view-size-${size} .landscape .thumb {width: ${ilsize}px !important;}` + `${iconsPrefix} .item {width: ${ilsize}px ${important}}`, + `${iconsPrefix} .landscape {width: ${ilsize}px ${important} height: ${isize}px ${important}}`, + `${iconsPrefix} .landscape img {width: ${isize}px ${important} height: ${isize}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 = { diff --git a/src/_h5ai/public/js/lib/view/viewmode.js b/src/_h5ai/public/js/lib/view/viewmode.js index ebcce354..75b64810 100644 --- a/src/_h5ai/public/js/lib/view/viewmode.js +++ b/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 = '

      View

      '; -const tplMode = +const modeTpl = `
      viewmode-[MODE]
      `; -const tplSize = +const sizeTpl = ''; -const tplToggle = +const toggleTpl = `
      viewmode
      `; @@ -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); }