diff --git a/src/_h5ai/client/css/fonts/LICENCE.txt b/src/_h5ai/client/css/fonts/LICENCE.txt deleted file mode 100644 index ae78a8f9..00000000 --- a/src/_h5ai/client/css/fonts/LICENCE.txt +++ /dev/null @@ -1,96 +0,0 @@ -------------------------------- -UBUNTU FONT LICENCE Version 1.0 -------------------------------- - -PREAMBLE -This licence allows the licensed fonts to be used, studied, modified and -redistributed freely. The fonts, including any derivative works, can be -bundled, embedded, and redistributed provided the terms of this licence -are met. The fonts and derivatives, however, cannot be released under -any other licence. The requirement for fonts to remain under this -licence does not require any document created using the fonts or their -derivatives to be published under this licence, as long as the primary -purpose of the document is not to be a vehicle for the distribution of -the fonts. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this licence and clearly marked as such. This may -include source files, build scripts and documentation. - -"Original Version" refers to the collection of Font Software components -as received under this licence. - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to -a new environment. - -"Copyright Holder(s)" refers to all individuals and companies who have a -copyright ownership of the Font Software. - -"Substantially Changed" refers to Modified Versions which can be easily -identified as dissimilar to the Font Software by users of the Font -Software comparing the Original Version with the Modified Version. - -To "Propagate" a work means to do anything with it that, without -permission, would make you directly or secondarily liable for -infringement under applicable copyright law, except executing it on a -computer or modifying a private copy. Propagation includes copying, -distribution (with or without modification and with or without charging -a redistribution fee), making available to the public, and in some -countries other activities as well. - -PERMISSION & CONDITIONS -This licence does not grant any rights under trademark law and all such -rights are reserved. - -Permission is hereby granted, free of charge, to any person obtaining a -copy of the Font Software, to propagate the Font Software, subject to -the below conditions: - -1) Each copy of the Font Software must contain the above copyright -notice and this licence. These can be included either as stand-alone -text files, human-readable headers or in the appropriate machine- -readable metadata fields within text or binary files as long as those -fields can be easily viewed by the user. - -2) The font name complies with the following: -(a) The Original Version must retain its name, unmodified. -(b) Modified Versions which are Substantially Changed must be renamed to -avoid use of the name of the Original Version or similar names entirely. -(c) Modified Versions which are not Substantially Changed must be -renamed to both (i) retain the name of the Original Version and (ii) add -additional naming elements to distinguish the Modified Version from the -Original Version. The name of such Modified Versions must be the name of -the Original Version, with "derivative X" where X represents the name of -the new work, appended to that name. - -3) The name(s) of the Copyright Holder(s) and any contributor to the -Font Software shall not be used to promote, endorse or advertise any -Modified Version, except (i) as required by this licence, (ii) to -acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with -their explicit written permission. - -4) The Font Software, modified or unmodified, in part or in whole, must -be distributed entirely under this licence, and must not be distributed -under any other licence. The requirement for fonts to remain under this -licence does not affect any document created using the Font Software, -except any version of the Font Software extracted from a document -created using the Font Software may only be distributed under this -licence. - -TERMINATION -This licence becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF -COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER -DEALINGS IN THE FONT SOFTWARE. diff --git a/src/_h5ai/client/css/fonts/README.txt b/src/_h5ai/client/css/fonts/README.txt deleted file mode 100644 index 1ee00a60..00000000 --- a/src/_h5ai/client/css/fonts/README.txt +++ /dev/null @@ -1,15 +0,0 @@ ----------------------- -Ubuntu Font Family -====================== - -The Ubuntu Font Family are a set of matching new libre/open fonts in -development during 2010--2011. The development is being funded by -Canonical Ltd on behalf the wider Free Software community and the -Ubuntu project. The technical font design work and implementation is -being undertaken by Dalton Maag. - -Both the final font Truetype/OpenType files and the design files used -to produce the font family are distributed under an open licence and -you are expressly encouraged to experiment, modify, share and improve. - -http://font.ubuntu.com/ diff --git a/src/_h5ai/client/css/fonts/Ubuntu-B.woff b/src/_h5ai/client/css/fonts/Ubuntu-B.woff deleted file mode 100644 index 77abf734..00000000 Binary files a/src/_h5ai/client/css/fonts/Ubuntu-B.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/Ubuntu-BI.woff b/src/_h5ai/client/css/fonts/Ubuntu-BI.woff deleted file mode 100644 index 275d7091..00000000 Binary files a/src/_h5ai/client/css/fonts/Ubuntu-BI.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/Ubuntu-L.woff b/src/_h5ai/client/css/fonts/Ubuntu-L.woff deleted file mode 100644 index c27e714d..00000000 Binary files a/src/_h5ai/client/css/fonts/Ubuntu-L.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/Ubuntu-LI.woff b/src/_h5ai/client/css/fonts/Ubuntu-LI.woff deleted file mode 100644 index 099c1430..00000000 Binary files a/src/_h5ai/client/css/fonts/Ubuntu-LI.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/UbuntuMono-B.woff b/src/_h5ai/client/css/fonts/UbuntuMono-B.woff deleted file mode 100644 index 8ce9c0bb..00000000 Binary files a/src/_h5ai/client/css/fonts/UbuntuMono-B.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/UbuntuMono-BI.woff b/src/_h5ai/client/css/fonts/UbuntuMono-BI.woff deleted file mode 100644 index 40f83c34..00000000 Binary files a/src/_h5ai/client/css/fonts/UbuntuMono-BI.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/UbuntuMono-R.woff b/src/_h5ai/client/css/fonts/UbuntuMono-R.woff deleted file mode 100644 index 16899314..00000000 Binary files a/src/_h5ai/client/css/fonts/UbuntuMono-R.woff and /dev/null differ diff --git a/src/_h5ai/client/css/fonts/UbuntuMono-RI.woff b/src/_h5ai/client/css/fonts/UbuntuMono-RI.woff deleted file mode 100644 index b073b037..00000000 Binary files a/src/_h5ai/client/css/fonts/UbuntuMono-RI.woff and /dev/null differ diff --git a/src/_h5ai/client/css/inc/bottombar.less b/src/_h5ai/client/css/inc/bottombar.less index a1c46b3f..9c61fb25 100644 --- a/src/_h5ai/client/css/inc/bottombar.less +++ b/src/_h5ai/client/css/inc/bottombar.less @@ -1,73 +1,39 @@ #bottombar { - position: fixed; - z-index: 5; - width: 100%; - height: 18px; - left: 0; - bottom: 0; - padding: 6px 0 8px 0; - background-color: @col-widget-back; - border-top: @border-widget; + overflow: hidden; + flex: 0 0 auto; + order: 99; + + padding: 6px; + background: #fafafa; + background: #eee; + box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); + z-index: 1; color: #999; - text-align: center; + text-align: right; a, a:active, a:visited { - color: #555; + margin: 0 8px; + color: #999; text-decoration: none; .transition(all 0.2s ease-in-out); - opacity: 0.7; + outline: 0; &:hover { color: @col-hover; - opacity: 1; } } - .left { - position: absolute; - left: 0; - display: block; - padding: 0 8px; - } - .center { - display: block; - } - .right { - position: absolute; - right: 0; - display: block; - padding: 0 8px; - } - .noJsMsg { + + .noJsMsg, .noBrowserMsg { + margin: 0 8px; color: @col-error; - margin-left: 16px; - } - .noBrowserMsg { - color: @col-error; - margin-left: 16px; a, a:active, a:visited { color: @col-error; text-decoration: underline; - opacity: 1; &:hover { color: @col-hover; } } } - .status { - .sep { - display: inline-block; - padding: 0 6px; - - &:before { - content: '·' - } - } - &.default { - } - &.dynamic { - display: none; - } - } } diff --git a/src/_h5ai/client/css/inc/content.less b/src/_h5ai/client/css/inc/content.less index 0446ab08..be9fd4cc 100644 --- a/src/_h5ai/client/css/inc/content.less +++ b/src/_h5ai/client/css/inc/content.less @@ -1,12 +1,16 @@ #content { - max-width: 960px; - margin: 50px auto; - font-size: 15px; + overflow: auto; + flex: 1 1 auto; + order: 50; } #content-header, #content-footer { - color: #333; + 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; @@ -14,21 +18,15 @@ cursor: pointer; &:hover { - color: #555; + color: #000; } } pre, code { font-family: @font-family-mono; } -} -#content-header { - padding-bottom: 12px; - margin-bottom: 32px; -} - -#content-footer { - padding-top: 12px; - margin-top: 32px; + h1, h2, h3, h4, h5, h6, p { + margin: 0.1em 0; + } } diff --git a/src/_h5ai/client/css/inc/context-menu.less b/src/_h5ai/client/css/inc/context-menu.less index 4b9d33e3..e38849e8 100644 --- a/src/_h5ai/client/css/inc/context-menu.less +++ b/src/_h5ai/client/css/inc/context-menu.less @@ -9,7 +9,6 @@ border: @border-widget; color: #999; z-index: 10; - font-size: 0.9em; ul { margin: 0; diff --git a/src/_h5ai/client/css/inc/fallback.less b/src/_h5ai/client/css/inc/fallback.less index b75bb6ae..f0175e42 100644 --- a/src/_h5ai/client/css/inc/fallback.less +++ b/src/_h5ai/client/css/inc/fallback.less @@ -2,70 +2,81 @@ #fallback { display: none; max-width: 960px; - margin: 80px auto; + margin: 0 auto 32px; + padding: 32px 16px; table { display: block; width: 100%; border-collapse: collapse; + } + th, td { + padding: 6px; + text-align: left; + border: none; + } + th { + padding-bottom: 18px; + color: #999; + font-weight: lighter; + } + td { + border-bottom: 1px solid @col-border; + overflow: hidden; + white-space: nowrap; + } + a, a:active, a:visited { + display: block; + color: inherit; + text-decoration: none; + cursor: pointer; - th, td { - padding: 6px; - text-align: left; - border: none; + &:hover { + color: @col-hover; } - th { - padding-bottom: 18px; - color: #555; - font-weight: normal; - opacity: 0.4; - } - td { - border-bottom: 1px solid @col-border; - overflow: hidden; - white-space: nowrap; - font-size: 15px; + } + .fb-i { + width: 24px; - a, a:active, a:visited { - display: block; - color: #555; - text-decoration: none; - cursor: pointer; - - &:hover { - color: @col-hover; - } - } - } - .fb-i { + img { width: 24px; - - img { - width: 24px; - height: 24px; - } - } - .fb-n { - width: 682px; - max-width: 682px; - } - .fb-d { - text-align: right; - width: 160px; - min-width: 160px; - } - .fb-s { - text-align: right; - width: 70px; - min-width: 70px; + height: 24px; } } + .fb-n { + width: 682px; + max-width: 682px; + } + .fb-d { + text-align: right; + width: 160px; + min-width: 160px; + } + .fb-s { + text-align: right; + width: 70px; + min-width: 70px; + } } html.no-js, html.no-browser { + body { + position: static; + background: #fff; + } + #fallback { display: block; } + + #bottombar { + display: block; + position: fixed; + z-index: 1; + left: 0; + right: 0; + bottom: 0; + } } diff --git a/src/_h5ai/client/css/inc/filter.less b/src/_h5ai/client/css/inc/filter.less index 9909d2e8..9320b630 100644 --- a/src/_h5ai/client/css/inc/filter.less +++ b/src/_h5ai/client/css/inc/filter.less @@ -5,10 +5,11 @@ input { border: none; font-family: @font-family; + font-weight: lighter; color: @col; - background-color: rgba(0,0,0,0); + background: transparent; width: 30px; - outline: none; + outline: 0; } &.current { diff --git a/src/_h5ai/client/css/inc/fonts.less b/src/_h5ai/client/css/inc/fonts.less deleted file mode 100644 index d0fa84f5..00000000 --- a/src/_h5ai/client/css/inc/fonts.less +++ /dev/null @@ -1,56 +0,0 @@ - -@font-face { - font-family: 'Ubuntu'; - font-style: normal; - font-weight: 300; - src: local('Ubuntu Light'), local('Ubuntu-Light'), url(fonts/Ubuntu-L.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu'; - font-style: normal; - font-weight: 700; - src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(fonts/Ubuntu-B.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu'; - font-style: italic; - font-weight: 300; - src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url(fonts/Ubuntu-LI.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu'; - font-style: italic; - font-weight: 700; - src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(fonts/Ubuntu-BI.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu Mono'; - font-style: normal; - font-weight: 400; - src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url(fonts/UbuntuMono-R.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu Mono'; - font-style: normal; - font-weight: 700; - src: local('Ubuntu Mono Bold'), local('UbuntuMono-Bold'), url(fonts/UbuntuMono-B.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu Mono'; - font-style: italic; - font-weight: 400; - src: local('Ubuntu Mono Italic'), local('UbuntuMono-Italic'), url(fonts/UbuntuMono-RI.woff) format('woff'); -} - -@font-face { - font-family: 'Ubuntu Mono'; - font-style: italic; - font-weight: 700; - src: local('Ubuntu Mono Bold Italic'), local('UbuntuMono-BoldItalic'), url(fonts/Ubuntu-BI.woff) format('woff'); -} diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index a96cb995..067686a0 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -1,15 +1,32 @@ +// @col-blue: #2196F3; +@col-blue: #42a5f5; +@col-green: #4caf50; +@col-red: #f44336; -@col: rgb(85,85,85); -@col-back: rgb(255,255,255); -@col-hover: rgb(29,119,194); +@col-light: #ffffff; +@col-lightgray: #fafafa; +@col-darkgray: #eeeeee; +// @col-dark: #333; +@col-dark: #212121; + +@col-font-light: @col-light; +@col-font-dark: @col-dark; + +@col-back-light: @col-lightgray; +@col-back-dark: @col-darkgray; + +@col: @col-dark; +@col-back: @col-back-dark; +@col-hover: @col-blue; @col-border: rgba(0,0,0,0.05); @col-border-strong: rgba(0,0,0,0.15); @col-border-stronger: rgba(0,0,0,0.3); -@col-error: rgb(204,51,51); +@col-okay: @col-green; +@col-error: @col-red; -@col-link: rgb(29,119,194); -@col-link-hover: rgb(29,119,194); +@col-link: @col-blue; +@col-link-hover: @col-blue; @col-widget-back: rgb(245,245,245); @col-widget-back-highlight: rgba(255,255,255,0.8); @@ -27,13 +44,14 @@ @border-widget: 1px solid @col-border; @border-widget-sep: 1px solid @col-widget-sep; -@font-family: Ubuntu, Helvetica, Arial, sans-serif; -@font-weight: 300; -@font-family-mono: "Ubuntu Mono", monospace; +@font-family: Roboto, Helvetica, Arial, sans-serif; +@font-weight: normal; +@font-size: 13px; +@font-family-mono: monospace; -::-moz-selection { background: #68A9FF; color: #fff; text-shadow: none; } -::selection { background: #68A9FF; color: #fff; text-shadow: none; } +::-moz-selection { background: @col-blue; color: @col-font-light; text-shadow: none; } +::selection { background: @col-blue; color: @col-font-light; text-shadow: none; } .transition (@transition) { -webkit-transition: @transition; @@ -47,10 +65,52 @@ zoom: 1; } +.card() { + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); +} + +.raised() { + box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5); +} + +.rounded() { + // overflow: hidden; + border-radius: 2px; +} + +.el-button() { + .card(); + .rounded(); + .transition(all 0.2s ease-in-out); + color: @col-light; + background: @col-blue; + border-radius: 2px; + cursor: pointer; + text-decoration: none; + + &:hover { + .raised(); + } +} + +.el-input() { + .card(); + .rounded(); + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + font-family: @font-family; + font-weight: @font-weight; + color: @col-dark; + background: @col-light; + border: none; + outline: none; +} + + html { min-height: 100%; overflow: auto; - overflow-y: scroll; &.js .noJsMsg { display: none; @@ -61,10 +121,41 @@ html { } body { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + font-family: @font-family; - font-size: 13px; + font-size: @font-size; font-weight: @font-weight; color: @col; - background-color: @col-back; - margin: 30px; + background: @col-back; + + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: flex-start; + align-items: stretch; } + +#main-row { + flex: 1 1 auto; + order: 50; + + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: flex-start; + align-items: stretch; + + // non-webkit fix; + height: 0; +} + +// *:focus { +// outline: 1px solid #42a5f5; +// } diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less index 496d2121..d145d278 100644 --- a/src/_h5ai/client/css/inc/h5ai-info.less +++ b/src/_h5ai/client/css/inc/h5ai-info.less @@ -1,13 +1,28 @@ body#h5ai-info { - font-family: @font-family; - margin: 2em auto 4em auto; - font-size: 20px; - color: @col; - max-width: 600px; - text-align: center; - a, a:active, a:visited { + #content { + flex: 1 1 auto; + order: 50; + color: @col; + text-align: center; + overflow-y: scroll; + } + + code { + margin: 0 0.2em; + padding: 2px 4px; + border-radius: 4px; + font-family: @font-family-mono; + letter-spacing: 0.05em; + background-color: @col-widget-back; + border: @border-widget; + font-size: 0.9em; + } + + #header a { + font-size: 2.1em; + margin: 0.8em 0 0 0; color: @col; text-decoration: none; .transition(all 0.2s ease-in-out); @@ -16,31 +31,12 @@ body#h5ai-info { color: @col-hover; } } - code { - margin: 0 0.2em; - padding: 2px 4px; - border-radius: 4px; - font-family: @font-family-mono; - letter-spacing: 0.1em; - background-color: @col-widget-back; - border: @border-widget; - } - h1 { - font-size: 3.6em; - margin: 0; - } - h2 { - font-size: 1.15em; - margin: 2.6em 0 0 0; - } - #support { margin: 12px auto 24px auto; padding: 6px 18px; - width: 164px; - font-size: 12px; - background: @col-widget-back; + width: 180px; + background: #fafafa; border: @border-widget; border-radius: 4px; @@ -49,99 +45,67 @@ body#h5ai-info { } } - - #login-wrapper { - font-size: 14px; - } - #pass { - -moz-appearance: none; - -ms-appearance: none; - -webkit-appearance: none; - font-family: @font-family; - font-weight: @font-weight; - color: @col; - background: @col-widget-back-highlight; - border: @border-widget; - outline: none; + .el-input(); display: inline-block; - width: 200px; - height: 27px; - padding: 0 6px; margin: 8px; + padding: 0 12px; + line-height: 28px; + width: 200px; + vertical-align: top; } #login, #logout { + .el-button(); display: inline-block; - padding: 4px 16px; margin: 8px; - background-color: @col-widget-back; - border: @border-widget; - cursor: pointer; - - color: @col; - cursor: pointer; - text-decoration: none; - .transition(all 0.2s ease-in-out); - - &:hover, &.hover { - background-color: @col-widget-back-highlight; - color: @col-hover; - } + padding: 0 12px; + line-height: 28px; + vertical-align: top; } #hint { margin: 12px auto; - width: 360px; - color: @col; - font-size: 12px; - } - - - #tests-wrapper { - margin: 96px 0; + width: 380px; + font-weight: lighter; } #tests { display: inline-block; - list-style-type: none; text-align: left; - margin: 0; + list-style-type: none; + margin: 96px 0; padding: 0; .test { + .card(); + .rounded(); + background: @col-light; margin: 12px 0 0 0; - padding: 6px; + padding: 8px 12px 12px 12px; + } + .label { + display: inline-block; + width: 250px; + font-size: 1.4em; + } + .result { + display: inline-block; + width: 250px; + text-align: right; + font-size: 1.4em; + font-weight: bold; - .label { - display: inline-block; - width: 250px; + &.passed { + color: @col-okay; } - .result { - display: inline-block; - width: 250px; - text-align: right; - font-weight: bold; - - &.passed { - color: #5a5; - } - &.failed { - color: #a55; - } - } - .info { - margin: 4px 0 12px 12px; - font-size: 0.7em; - color: #aaa; - width: 460px; - line-height: 1.2em; + &.failed { + color: @col-error; } } - } - - - #bottombar { - font-size: 13px; + .info { + font-weight: lighter; + margin: 4px 0 0 0; + } } } diff --git a/src/_h5ai/client/css/inc/l10n.less b/src/_h5ai/client/css/inc/l10n.less deleted file mode 100644 index e69de29b..00000000 diff --git a/src/_h5ai/client/css/inc/notify.less b/src/_h5ai/client/css/inc/notify.less index 9416e156..879c8098 100644 --- a/src/_h5ai/client/css/inc/notify.less +++ b/src/_h5ai/client/css/inc/notify.less @@ -2,13 +2,12 @@ #notify { position: fixed; left: 50%; - top: 3px; width: 200px; margin-left: -100px; z-index: 100; - padding: 2px 6px 2px 6px; + padding: 3px 6px 6px 6px; color: #fff; background-color: rgba(0, 0, 0, 0.2); - border-radius: 4px; + border-radius: 0 0 4px 4px; text-align: center; } diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less index 07ef0853..7d4ba852 100644 --- a/src/_h5ai/client/css/inc/preview-txt.less +++ b/src/_h5ai/client/css/inc/preview-txt.less @@ -10,11 +10,10 @@ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3); &.highlighted { - // word-break: break-all; code { font-family: @font-family-mono; - font-size: 16px; + font-size: @font-size; line-height: 1.2em; } @@ -91,67 +90,11 @@ .token.entity { cursor: help; } - - // pre.line-numbers { - // position: relative; - // padding-left: 3.8em; - // counter-reset: linenumber; - // } - // pre.line-numbers > code { - // position: relative; - // } - // .line-numbers .line-numbers-rows { - // position: absolute; - // pointer-events: none; - // top: 0; - // font-size: 100%; - // left: -3.8em; - // width: 3em; /* works for line-numbers below 1000 lines */ - // letter-spacing: -1px; - // border-right: 1px solid #999; - - // -webkit-user-select: none; - // -moz-user-select: none; - // -ms-user-select: none; - // user-select: none; - - // } - // .line-numbers-rows > span { - // pointer-events: none; - // display: block; - // counter-increment: linenumber; - // } - // .line-numbers-rows > span:before { - // content: counter(linenumber); - // color: #999; - // display: block; - // padding-right: 0.8em; - // text-align: right; - // } - - // .token.tab:not(:empty):before, - // .token.cr:before, - // .token.lf:before { - // color: hsl(24, 20%, 85%); - // } - // .token.tab:not(:empty):before { - // content: '▸'; - // } - // .token.cr:before { - // content: '␍'; - // } - // .token.lf:before { - // // content: '␊'; - // content: '¶'; - // } - // .token a { - // color: inherit; - // } } &.markdown { - font-size: 16px; + font-size: 1.1em; padding: 8px 24px; a, a:active, a:visited { diff --git a/src/_h5ai/client/css/inc/responsive.less b/src/_h5ai/client/css/inc/responsive.less index 36fa0f4f..73ba3681 100644 --- a/src/_h5ai/client/css/inc/responsive.less +++ b/src/_h5ai/client/css/inc/responsive.less @@ -24,12 +24,6 @@ display: none; } } -} - -@media only screen and (max-width: 500px) { -body { - margin: 8px; -} #tree { display: none !important; } diff --git a/src/_h5ai/client/css/inc/sidebar.less b/src/_h5ai/client/css/inc/sidebar.less index d6a28b0f..882c43e4 100644 --- a/src/_h5ai/client/css/inc/sidebar.less +++ b/src/_h5ai/client/css/inc/sidebar.less @@ -1,15 +1,12 @@ #sidebar { - position: fixed; - right: -220px; - width: 200px; - top: 31px; - height: 100%; - z-index: 3; + display: none; overflow: auto; - padding: 8px; - background-color: @col-widget-back; - border-left: @border-widget; + flex: 0 0 auto; + order: 99; + width: 200px; + padding: 16px 8px 16px 16px; + border-left: 1px solid @col-border; } #settings { @@ -20,7 +17,7 @@ h1 { font-size: 1em; - border-bottom: 1px solid #e7e7e7; + margin: 2px 0 6px 0; } } @@ -35,17 +32,19 @@ height: 30px; line-height: 30px; padding: 0 10px; + outline: 0; - &:hover, &.hover { + &:hover { opacity: 1.0; - background: @col-widget-back-highlight; + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } .current { a, span.element { opacity: 1.0; - background: @col-widget-back-highlight; + background: rgba(0,0,0,0.03); + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -62,9 +61,14 @@ } .select { - background-color: @col-widget-back-highlight; + background: transparent; width: 175px; overflow: hidden; + outline: 0; + + &:hover, &.hover { + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); + } } input, select { @@ -72,19 +76,19 @@ -ms-appearance: none; -webkit-appearance: none; font-family: @font-family; - font-size: 13px; + font-size: @font-size; font-weight: @font-weight; color: @col; - background: @col-widget-back; + background: transparent; width: 100%; height: 30px; line-height: 30px; border: 0 solid #000; - outline: none; cursor: pointer; + outline: 0; &:hover, &.hover { - background: @col-widget-back-highlight; + box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4); } } @@ -95,9 +99,9 @@ input[type='range'] { border-radius: 2px; - width: 64px; + width: 50px; margin: 0 0 4px 12px; - padding: 0 2px; + padding: 0 8px; vertical-align: middle; } diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less index 4bf0a2d7..c21f8eb1 100644 --- a/src/_h5ai/client/css/inc/topbar.less +++ b/src/_h5ai/client/css/inc/topbar.less @@ -1,34 +1,29 @@ #topbar { - position: fixed; - z-index: 5; - width: 100%; + overflow: hidden; + flex: 0 0 auto; + order: 1; min-height: 30px; - left: 0; - top: 0; - background-color: @col-widget-back; - border-bottom: @border-widget; + font-weight: lighter; + + background: #fafafa; + box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); + z-index: 1; } -.topbar-highlight { - background-color: @col-widget-back-highlight; - opacity: 1.0; -} - .topbar-hover { - .topbar-highlight; color: @col-hover; } .topbar-left { float: left; - border-right: @border-widget-sep; + // border-right: @border-widget-sep; } .topbar-right { float: right; - border-left: @border-widget-sep; + // border-left: @border-widget-sep; } @@ -42,31 +37,32 @@ color: @col; cursor: pointer; text-decoration: none; - opacity: 0.7; .transition(all 0.2s ease-in-out); display: block; - height: 30px; - line-height: 30px; - padding: 0 10px; + height: 48px; + line-height: 48px; + font-size: 15px; + padding: 0 6px; &:hover, &.hover { .topbar-hover; } } .current { - a, span.element { - .topbar-highlight; - } + font-weight: bold; + } + .element { } img { position: relative; - top: -2px; + top: -1px; width: 16px; height: 16px; + opacity: 0.8; } img + span, img + input { - margin-left: 6px; + margin-left: 8px; } .crumb { .topbar-left; @@ -80,6 +76,9 @@ width: 12px; height: 12px; } + &.root, &.domain { + margin-left: 10px; + } } .view { .topbar-right; diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index 09c712cc..87b08ee3 100644 --- a/src/_h5ai/client/css/inc/tree.less +++ b/src/_h5ai/client/css/inc/tree.less @@ -1,37 +1,37 @@ #tree { display: none; - position: fixed; - left: 0; - top: 31px; - height: 100%; - z-index: 3; + overflow: auto; - padding: 8px; - background-color: @col-widget-back; - border-right: @border-widget; + flex: 0 0 auto; + order: 1; - .sp-scrollbar { - width: 6px; - background-color: @col-sb-back; - cursor: pointer; + padding: 16px 16px 16px 8px; + border-right: 1px solid @col-border; + white-space: nowrap; + max-width: 250px; + overflow-x: hidden; + font-weight: lighter; - .sp-thumb { - background-color: @col-sb-thumb; - } - &.active .sp-thumb { - background-color: @col-sb-thumb-active; + a, a:active, a.visited { + display: inline-block; + padding: 3px 0; + text-decoration: none; + color: @col; + + &:hover, &.hover { + color: @col-hover; } } + .current > a { + font-weight: bold; + } + .indicator { - position: relative; - top: 2px; display: inline-block; - width: 16px; - height: 22px; - float: left; - opacity: 0.7; + position: relative; + top: -1px; cursor: pointer; img { @@ -52,65 +52,21 @@ cursor: inherit; } } - a, a:active, a.visited { - display: block; - height: 1.231em; - line-height: 1.231em; - margin-left: 14px; - padding: 4px 6px; - color: #555; - border: 1px solid rgba(0,0,0,0); - border-radius: 3px; - text-decoration: none; - opacity: 0.7; - &:hover, &.hover { - color: @col-hover; - background-color: @col-widget-back-hover; - opacity: 1; - } - } .icon { position: relative; top: -2px; - margin-right: 6px; + margin: 0 8px; img { width: 16px; height: 16px; } } - .hint { - margin-left: 6px; - font-size: 0.9em; - color: #ccc; - } + .content { list-style: none; margin: 0; - padding: 0 0 0 24px; - } - .summary { - margin: 0 0 0 24px; - color: #999; - font-style: italic; - } - .current { - > a, > a:active, > a:visited { - background-color: @col-widget-back-sel; - border-color: @col-widget-sep; - opacity: 1; - } - } - .error { - > a, > a:active, > a:visited { - color: #999; - &:hover, &.hover { - color: @col-hover; - } - } - .hint { - color: #c55; - } + padding: 0 0 0 20px; } } diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less index 4c141e44..34ed58c5 100644 --- a/src/_h5ai/client/css/inc/view-details.less +++ b/src/_h5ai/client/css/inc/view-details.less @@ -1,122 +1,117 @@ .view-details-sized(@size) { - li { - - &.item { - - a, a:active, a:visited { - height: @size + 6px; - } - - .label, .date, .size { - padding: ((@size - 16px)/2) 8px; - } + .item { + .label, .date, .size { + line-height: @size + 14px; } + } - .icon.square { + .square { + width: @size; + + img { width: @size; - - img { - width: @size; - height: @size; - } + height: @size; } + } - .label { - margin: 0 230px 0 (@size + 16px); - } + .label { + margin: 0 246px 0 (@size + 32px); } } #view.view-details { - li { + margin: 16px; - &.header { - display: list-item; - } + #items { + .rounded(); + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + } - &.item { + .header { + position: relative; + white-space: nowrap; + display: list-item; + background: #fafafa; + border-bottom: 1px solid rgba(0,0,0,0.07); + border-radius: 2px 2px 0 0; - a, a:active, a:visited { - border-bottom: 1px solid @item-border-col-sep; + .label, .date, .size { + line-height: 46px; + opacity: 0.4; + outline: 0; + .transition(all 0.2s ease-in-out); - &:hover, &.hover { - border-color: @item-border-col-hover; - } - } - - // needs to be here, to not conflict with header fields - .icon { - padding: 8px; + &:hover { + opacity: 1; + color: @col-hover; } } - .icon.square { - display: inline-block; - position: absolute; - left: 0; - top: -4px; + .sort { + display: none; + position: relative; + top: -2px; + width: 12px; + height: 12px; + padding: 0 8px; } - .date { - position: absolute; - right: 100px; - top: 0; - } - - .size { - position: absolute; - right: 0; - top: 0; - } - - .selector { - margin-top: -1px; + .ascending .sort.ascending, + .descending .sort.descending { + display: inline; } } - .view-details-sized(@icon-size); + .item { + overflow: hidden; + border-bottom: 1px solid rgba(0,0,0,0.07); - &.size-16 { - .view-details-sized(16px) + &:hover { + .raised(); + z-index: 1; + } + + &:last-child { + border-radius: 0 0 2px 2px; + } } - &.size-24 { - .view-details-sized(24px) + .square { + display: inline-block; + position: absolute; + left: 16px; + top: -1px; + padding: 8px; + + .thumb { + .rounded(); + box-shadow: 0 0 1px 0 rgba(0,0,0,0.2); + } } - &.size-32 { - .view-details-sized(32px) + .label, .date, .size { + padding: 0 8px; } - &.size-48 { - .view-details-sized(48px) + .date { + position: absolute; + right: 116px; + top: 0; } - &.size-64 { - .view-details-sized(64px) + .size { + position: absolute; + right: 16px; + top: 0; } - &.size-96 { - .view-details-sized(96px) + .selector { + left: -5px; } - &.size-128 { - .view-details-sized(128px) - } - - &.size-192 { - .view-details-sized(192px) - } - - &.size-256 { - .view-details-sized(256px) - } - - &.size-384 { - .view-details-sized(384px) - } + .view-details-sized(16px) } diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less index c5adebbf..5a1033bc 100644 --- a/src/_h5ai/client/css/inc/view-grid.less +++ b/src/_h5ai/client/css/inc/view-grid.less @@ -1,31 +1,16 @@ .view-grid-sized(@size) { - li { + .label { + line-height: @size; + } - &.item { + .square { + width: @size; - a, a:active, a:visited { - width: @size + 182px; - height: @size + 6px; - } - - .label, .date, .size { - padding: ((@size - 16px)/2) 8px; - } - } - - .icon.square { + img { width: @size; - - img { - width: @size; - height: @size; - } - } - - .label { - margin: 0 0 0 (@size + 8px); + height: @size; } } } @@ -33,81 +18,36 @@ #view.view-grid { - li { + margin: 8px; - &.item { - float: left; - margin: 2px; + .item { + .card(); + .rounded(); + overflow: hidden; + float: left; + margin: 8px; - a, a:active, a:visited { - border: 1px solid rgba(0,0,0,0); - - &:hover, &.hover { - border-color: @item-border-col-hover; - } - } - - // needs to be here, to not conflict with header fields - .icon { - padding: 8px; - } - } - - .icon.square { - display: inline-block; - position: absolute; - left: 0; - top: -4px; - } - - .label { - display: block; - } - - .date, .size { - display: none; + &:hover { + .raised(); } } - .view-grid-sized(@icon-size); - - &.size-16 { - .view-grid-sized(16px) + .square { + display: inline-block; + vertical-align: top; + background: #fafafa; } - &.size-24 { - .view-grid-sized(24px) + .label { + display: inline-block; + vertical-align: top; + width: 180px; + padding: 0 8px; } - &.size-32 { - .view-grid-sized(32px) + .date, .size { + display: none; } - &.size-48 { - .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) - } + .view-grid-sized(48px); } diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less index 2420acbd..b2deee67 100644 --- a/src/_h5ai/client/css/inc/view-icons.less +++ b/src/_h5ai/client/css/inc/view-icons.less @@ -1,29 +1,19 @@ .view-icons-sized(@size) { - li { + .item { + width: @size * 4/3; + } - &.item { + .landscape { - a, a:active, a:visited { - width: @size * 2; - height: @size + 72px; - } + img { + width: @size; + height: @size; } - .icon.rational { - height: @size; - - img { - width: @size; - height: @size; - } - img.thumb { - width: auto; - height: auto; - max-width: @size * 2; - max-height: @size; - } + .thumb { + width: @size * 4/3; } } } @@ -31,85 +21,33 @@ #view.view-icons { - li { - text-align: center; + margin: 8px; - &.item { - float: left; - margin: 8px; + .item { + .card(); + .rounded(); + overflow: hidden; + float: left; + margin: 8px; - a, a:active, a:visited { - padding: 8px; - min-width: 96px; - border: 1px solid rgba(0,0,0,0); - - &:hover, &.hover { - border-color: @item-border-col-hover; - } - } - } - - .icon.rational { - display: block; - margin-bottom: 6px; - } - - .label { - text-align: center; - word-wrap: break-word; - white-space: normal; - } - - .date, .size { - display: none; + &:hover { + .raised(); } } - .empty, .no-match { - margin: 0 120px; - padding: 16px; - height: 120px; + .landscape { + display: block; + background: #fafafa; } - .view-icons-sized(@icon-size); - - &.size-16 { - .view-icons-sized(16px); + .label { + padding: 0 6px; + line-height: 24px; } - &.size-24 { - .view-icons-sized(24px); + .date, .size { + display: none; } - &.size-32 { - .view-icons-sized(32px); - } - - &.size-48 { - .view-icons-sized(48px); - } - - &.size-64 { - .view-icons-sized(64px); - } - - &.size-96 { - .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); - } + .view-icons-sized(96px); } diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index be92f4fa..976942a1 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -1,14 +1,10 @@ - -@item-border-col-sep: @col-border; - -@item-background-col-hover: rgba(0,0,0,0.02); +@item-col-hover: @col-hover; +@item-background-col-hover: #fafafa; @item-border-col-hover: @col-border; -@item-background-col-sel: rgba(0,0,0,0.02); -@item-border-col-sel: @col-border-strong; - -@icon-size: 48px; +@item-col-sel: #fff; +@item-background-col-sel: #42a5f5; #selection-rect { @@ -18,16 +14,16 @@ top: 0; z-index: 2; border: 1px dashed @col-border-strong; - background-color: rgba(0,0,0,0.01); + background: rgba(0,0,0,0.01); } #view { display: none; - margin: 0 auto; a, a:active, a:visited { - color: #333; + display: block; + color: inherit; cursor: pointer; text-decoration: none; } @@ -38,160 +34,111 @@ list-style: none; } - li { + .header { + display: none; + } + + .item { position: relative; white-space: nowrap; + background: #fff; - &.header { - display: none; - font-size: 13px; - - a, a:active, a:visited { - padding: 6px 6px 18px 6px; - opacity: 0.4; - .transition(all 0.2s ease-in-out); - - img { - display: none; - position: relative; - top: -2px; - width: 12px; - height: 12px; - padding: 0 8px; - } - &:hover { - color: #555; - opacity: 0.9; - } - &.ascending img.ascending { - display: inline; - } - &.descending img.descending { - display: inline; - } - } + &:hover, &.hover { + color: @item-col-hover; + background: @item-background-col-hover; + border-color: @item-border-col-hover; } - &.item { - font-size: 15px; - - a, a:active, a:visited { + &:hover { + .selector { display: block; - overflow: hidden; - - &:hover, &.hover { - color: @col-hover; - background-color: @item-background-col-hover; - border-color: @item-border-col-hover; - } - - &:hover { - .selector { - display: block; - } - } - } - - &.selected:not(.selecting), &.selecting:not(.selected) { - - a, a:active, a:visited { - background-color: @item-background-col-sel; - border-color: @item-border-col-sel; - - &:hover, &.hover { - background-color: @item-background-col-sel; - border-color: @item-border-col-sel; - } - } - - .selector { - display: block; - // border-color: @col-border-stronger; - - img { - display: block; - } - } } } - &.folder-parent { + &.selected:not(.selecting), &.selecting:not(.selected) { + color: @item-col-sel; + background: @item-background-col-sel; - .date, .size { - display: none; - } - } - - .icon { - display: none; - text-align: center; - - img { - vertical-align: top; + &:hover, &.hover { + color: @item-col-sel; + background: @item-background-col-sel; } - .thumb { - box-shadow: 0 0 0 1px rgba(0,0,0,0.12); - } - - &.rational { - .thumb { - padding: 2px; - border-radius: 3px; - } - } - } - - .label { - display: block; - overflow: hidden; - text-align: left; - text-overflow: ellipsis; - } - - .date { - text-align: right; - width: 130px; - } - - .size { - text-align: right; - width: 80px; - } - - .selector { - display: none; - position: absolute; - left: 0; - top: 0; - width: 18px; - height: 18px; - background-color: #fff; - border: 1px solid @col-border-strong; - cursor: pointer; - .transition(all 0.2s ease-in-out); - - &:hover { - border-color: @col-border-stronger; - } - - img { - display: none; - width: 100%; - height: 100%; + .selector { + display: block; + opacity: 1; } } } + .folder-parent { + + .date, .size { + display: none; + } + } + + .icon { + display: none; + text-align: center; + + img { + vertical-align: top; + max-width: 32px; + } + + .thumb { + max-width: none; + } + } + + .label { + display: block; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + } + + .date { + text-align: right; + width: 130px; + } + + .size { + text-align: right; + width: 80px; + } + + .selector { + display: none; + position: absolute; + left: -1px; + top: 4px; + width: 22px; + height: 22px; + background-color: #fff; + cursor: pointer; + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); + border-radius: 0 2px 2px 0; + opacity: 0.6; + padding: 0 0 0 4px; + + &:hover { + opacity: 0.8; + } + + img { + width: 100%; + height: 100%; + } + } + .empty, .no-match { - margin: 50px 0; + display: none; + margin-top: 36px; text-align: center; color: #ddd; font-size: 5em; font-weight: bold; } - - .no-match { - display: none; - } } diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less index 16ddb183..686745c9 100644 --- a/src/_h5ai/client/css/styles.less +++ b/src/_h5ai/client/css/styles.less @@ -2,7 +2,6 @@ @import "lib/h5bp-normalize"; @import "lib/h5bp-main-header"; -@import "inc/fonts"; @import "inc/general"; @import "inc/topbar"; @import "inc/bottombar"; @@ -31,3 +30,5 @@ @import "inc/h5ai-info"; @import "lib/h5bp-main-footer"; + +@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700); diff --git a/src/_h5ai/client/js/inc/ext/crumb.js b/src/_h5ai/client/js/inc/ext/crumb.js index a560cff9..d150d4dd 100644 --- a/src/_h5ai/client/js/inc/ext/crumb.js +++ b/src/_h5ai/client/js/inc/ext/crumb.js @@ -32,12 +32,14 @@ modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/ if (item.isDomain()) { $html.addClass('domain'); - $a.find('img').attr('src', resource.image('home')); + // $a.find('img').attr('src', resource.image('home')); + $a.find('img').remove(); } if (item.isRoot()) { $html.addClass('root'); - $a.find('img').attr('src', resource.image('home')); + // $a.find('img').attr('src', resource.image('home')); + $a.find('img').remove(); } if (item.isCurrentFolder()) { diff --git a/src/_h5ai/client/js/inc/ext/select.js b/src/_h5ai/client/js/inc/ext/select.js index 5baba025..4c9b6ff2 100644 --- a/src/_h5ai/client/js/inc/ext/select.js +++ b/src/_h5ai/client/js/inc/ext/select.js @@ -104,18 +104,14 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core function selectionStart(event) { - var $window = $(window); - var viewRight = $window.scrollLeft() + $window.width(); - var viewBottom = $window.scrollTop() + $window.height(); + // only on left button and don't block scrollbar + if (event.button !== 0 || event.offsetX >= $('#content').width() - 14) { + return; + } x = event.pageX; y = event.pageY; - // only on left button and don't block the scrollbars - if (event.button !== 0 || x >= viewRight || y >= viewBottom) { - return; - } - $(':focus').blur(); if (!event.ctrlKey && !event.metaKey) { $('#items .item').removeClass('selected'); @@ -197,7 +193,8 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core event.sub('location.changed', onLocationChanged); event.sub('location.refreshed', onLocationRefreshed); - $document + // $document + $('#content') .on('mousedown', '.noSelection', noSelection) .on('mousedown', '.noSelectionUnlessCtrl,input,select,a', noSelectionUnlessCtrl) .on('mousedown', selectionStart); diff --git a/src/_h5ai/client/js/inc/ext/thumbnails.js b/src/_h5ai/client/js/inc/ext/thumbnails.js index b66238c4..ed0bd584 100644 --- a/src/_h5ai/client/js/inc/ext/thumbnails.js +++ b/src/_h5ai/client/js/inc/ext/thumbnails.js @@ -1,22 +1,22 @@ -modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/server'], function (_, allsettings, event, server) { +modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/server', 'core/resource'], function (_, allsettings, event, server, resource) { var settings = _.extend({ enabled: false, - img: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png'], - mov: ['video'], - doc: ['pdf', 'ps'], - delay: 1000, - size: 96 + img: ['img-bmp', 'img-gif', 'img-ico', 'img-jpg', 'img-png'], + mov: ['vid-avi', 'vid-flv', 'vid-mkv', 'vid-mov', 'vid-mp4', 'vid-mpg', 'vid-webm'], + doc: ['x-pdf', 'x-ps'], + delay: 1, + size: 128, + exif: true }, allsettings.thumbnails); - function requestThumb(type, href, mode, ratio, callback) { + function requestThumb(type, href, ratio, callback) { server.request({ action: 'getThumbHref', type: type, href: href, - mode: mode, width: settings.size * ratio, height: settings.size }, function (json) { @@ -41,7 +41,7 @@ modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/ser if (item.thumbSquare) { item.$view.find('.icon.square img').addClass('thumb').attr('src', item.thumbSquare); } else { - requestThumb(type, item.absHref, 'square', 1, function (src) { + requestThumb(type, item.absHref, 1, function (src) { if (src && item.$view) { item.thumbSquare = src; @@ -50,13 +50,13 @@ modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/ser }); } if (item.thumbRational) { - item.$view.find('.icon.rational img').addClass('thumb').attr('src', item.thumbRational); + item.$view.find('.icon.landscape img').addClass('thumb').attr('src', item.thumbRational); } else { - requestThumb(type, item.absHref, 'rational', 2, function (src) { + requestThumb(type, item.absHref, 4/3, function (src) { if (src && item.$view) { item.thumbRational = src; - item.$view.find('.icon.rational img').addClass('thumb').attr('src', src); + item.$view.find('.icon.landscape img').addClass('thumb').attr('src', src); } }); } diff --git a/src/_h5ai/client/js/inc/ext/tree.js b/src/_h5ai/client/js/inc/ext/tree.js index f7a9b28d..33ebd867 100644 --- a/src/_h5ai/client/js/inc/ext/tree.js +++ b/src/_h5ai/client/js/inc/ext/tree.js @@ -2,7 +2,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e var settings = _.extend({ enabled: false, - slide: true, maxSubfolders: 50 }, allsettings.tree); var template = @@ -15,7 +14,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e '' + '' + ''; - var statusHintTemplate = ''; function update(item) { @@ -55,25 +53,24 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e // is it the domain? if (item.isDomain()) { $html.addClass('domain'); - $img.attr('src', resource.image('home')); + // $img.attr('src', resource.image('home')); } // is it the root? if (item.isRoot()) { $html.addClass('root'); - $img.attr('src', resource.image('home')); + // $img.attr('src', resource.image('home')); } // is it the current folder? if (item.isCurrentFolder()) { $html.addClass('current'); - // $img.attr('src', resource.image('folder-open')); } // does it have subfolders? if (subfolders.length) { - var $ul = $('