mirror of
https://github.com/lrsjng/h5ai.git
synced 2024-09-20 04:38:51 -04:00
Merge branch 'thumb'
This commit is contained in:
Lars Jung
commit
c276ea69bc
47 changed files with 743 additions and 1355 deletions
|
|
@ -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.
|
||||
|
|
@ -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/
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
border: @border-widget;
|
||||
color: #999;
|
||||
z-index: 10;
|
||||
font-size: 0.9em;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -24,12 +24,6 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
body {
|
||||
margin: 8px;
|
||||
}
|
||||
#tree {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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()) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
|||
'<span class="label"/>' +
|
||||
'</a>' +
|
||||
'</span>';
|
||||
var statusHintTemplate = '<span class="hint"/>';
|
||||
|
||||
|
||||
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 = $('<ul class="content"/>').appendTo($html),
|
||||
counter = 0;
|
||||
var $ul = $('<ul class="content"/>').appendTo($html);
|
||||
var counter = 0;
|
||||
_.each(subfolders, function (e) {
|
||||
counter += 1;
|
||||
if (counter <= settings.maxSubfolders) {
|
||||
|
|
@ -111,11 +108,7 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
|
|||
|
||||
item.isContentVisible = down;
|
||||
$indicator.removeClass('open close').addClass(down ? 'open' : 'close');
|
||||
$tree.scrollpanel('update', true);
|
||||
$content[down ? 'slideDown' : 'slideUp'](function () {
|
||||
|
||||
$tree.scrollpanel('update');
|
||||
});
|
||||
$content[down ? 'slideDown' : 'slideUp']();
|
||||
}
|
||||
|
||||
return function () {
|
||||
|
|
@ -151,19 +144,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
|
|||
};
|
||||
}
|
||||
|
||||
function shiftTree(forceVisible, dontAnimate) {
|
||||
|
||||
var $tree = $("#tree");
|
||||
var $view = $("#view");
|
||||
var left = ((settings.slide && $tree.outerWidth() < $view.offset().left) || forceVisible || !$view.is(':visible')) ? 0 : 18 - $tree.outerWidth();
|
||||
|
||||
if (dontAnimate) {
|
||||
$tree.stop().css({ left: left });
|
||||
} else {
|
||||
$tree.stop().animate({ left: left });
|
||||
}
|
||||
}
|
||||
|
||||
function fetchTree(item, callback) {
|
||||
|
||||
item.isContentVisible = true;
|
||||
|
|
@ -177,30 +157,13 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
|
|||
});
|
||||
}
|
||||
|
||||
function adjustSpacing() {
|
||||
|
||||
var $tree = $('#tree');
|
||||
var winHeight = $(window).height();
|
||||
var navHeight = $('#topbar').outerHeight();
|
||||
var footerHeight = $('#bottombar').outerHeight();
|
||||
|
||||
$tree.css({
|
||||
top: navHeight,
|
||||
height: winHeight - navHeight - footerHeight - 16
|
||||
});
|
||||
|
||||
$tree.scrollpanel('update');
|
||||
}
|
||||
|
||||
function onLocationChanged(item) {
|
||||
|
||||
fetchTree(item, function (root) {
|
||||
|
||||
$('#tree')
|
||||
.find('.sp-container').append(update(root)).end()
|
||||
.append(update(root))
|
||||
.show();
|
||||
adjustSpacing();
|
||||
shiftTree(false, true);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -210,27 +173,11 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
|
|||
return;
|
||||
}
|
||||
|
||||
var $tree = $('<div id="tree"/>')
|
||||
.appendTo('body')
|
||||
.scrollpanel()
|
||||
.on('click', '.indicator', createOnIndicatorClick())
|
||||
.on('mouseenter', function () {
|
||||
$('<div id="tree"/>')
|
||||
.appendTo('#main-row')
|
||||
.on('click', '.indicator', createOnIndicatorClick());
|
||||
|
||||
shiftTree(true);
|
||||
})
|
||||
.on('mouseleave', function () {
|
||||
|
||||
shiftTree();
|
||||
});
|
||||
|
||||
event.sub('ready', adjustSpacing);
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
|
||||
$(window).on('resize', function () {
|
||||
|
||||
adjustSpacing();
|
||||
shiftTree();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
modulejs.define('info', ['$', 'config'], function ($, config) {
|
||||
|
||||
var testsTemp =
|
||||
'<div id="tests-wrapper">' +
|
||||
'<ul id="tests">' +
|
||||
'</div>';
|
||||
'<ul id="tests">';
|
||||
var testTemp =
|
||||
'<li class="test">' +
|
||||
'<span class="label"></span>' +
|
||||
|
|
@ -41,7 +39,7 @@ modulejs.define('info', ['$', 'config'], function ($, config) {
|
|||
|
||||
function addTests() {
|
||||
|
||||
$(testsTemp).appendTo('body');
|
||||
$(testsTemp).appendTo('#content');
|
||||
|
||||
addTest(
|
||||
'Index file found', 'Add <code>' + setup.INDEX_HREF + '</code> to your index file list',
|
||||
|
|
@ -147,7 +145,7 @@ modulejs.define('info', ['$', 'config'], function ($, config) {
|
|||
|
||||
function addLogin() {
|
||||
|
||||
$(loginTemp).appendTo('body');
|
||||
$(loginTemp).appendTo('#content');
|
||||
|
||||
if (setup.AS_ADMIN) {
|
||||
$('#pass').remove();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ modulejs.define('main', ['_', 'core/event'], function (_, event) {
|
|||
modulejs.require('view/ensure');
|
||||
modulejs.require('view/items');
|
||||
modulejs.require('view/sidebar');
|
||||
modulejs.require('view/spacing');
|
||||
modulejs.require('view/viewmode');
|
||||
|
||||
_.each(modulejs.state(), function (state, id) {
|
||||
|
|
|
|||
|
|
@ -1,44 +1,52 @@
|
|||
modulejs.define('view/ensure', ['$', 'config', 'core/event'], function ($, config, event) {
|
||||
|
||||
var templateTopbar =
|
||||
'<div id="topbar" class="clearfix">' +
|
||||
'<ul id="navbar"></ul>' +
|
||||
'</div>';
|
||||
var templateMainRow =
|
||||
'<div id="main-row">' +
|
||||
'<div id="sidebar">' +
|
||||
'<div id="settings">' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
|
||||
var selb = '#bottombar';
|
||||
var selr = selb + ' .right';
|
||||
var sela = selr + ' a';
|
||||
var sela = selb + ' > a';
|
||||
var sequence = 'powered by h5ai ' + config.setup.VERSION;
|
||||
var url = 'http://larsjung.de/h5ai/';
|
||||
var isVisible = ':visible';
|
||||
var styleKey = 'style';
|
||||
var styleVal = 'display: inline !important';
|
||||
|
||||
|
||||
function ensure() {
|
||||
|
||||
if (
|
||||
$(selr).text() !== sequence ||
|
||||
$(sela).text() !== sequence ||
|
||||
$(sela).attr('href') !== url ||
|
||||
$(sela).filter(isVisible).length !== 1 ||
|
||||
$(selr).filter(isVisible).length !== 1 ||
|
||||
$(selb).filter(isVisible).length !== 1
|
||||
) {
|
||||
if ($(selb).filter(isVisible).length !== 1) {
|
||||
$(selb).remove();
|
||||
$('<div id="bottombar"/>').attr(styleKey, styleVal).appendTo('body');
|
||||
}
|
||||
$(selr).remove();
|
||||
$('<span><a/></span>')
|
||||
.addClass('right')
|
||||
.attr(styleKey, styleVal)
|
||||
.find('a')
|
||||
.attr('href', url)
|
||||
.attr('title', sequence)
|
||||
.text(sequence)
|
||||
.attr(styleKey, styleVal)
|
||||
.end()
|
||||
.prependTo(selb);
|
||||
$(selb).remove();
|
||||
$('<div id="bottombar"/>')
|
||||
.attr(styleKey, 'display: block !important')
|
||||
.appendTo('body');
|
||||
$('<a/>')
|
||||
.attr(styleKey, 'display: inline !important')
|
||||
.attr('href', url)
|
||||
.attr('title', sequence)
|
||||
.text(sequence)
|
||||
.appendTo(selb);
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
$(templateTopbar).appendTo('body');
|
||||
$(templateMainRow).appendTo('body');
|
||||
|
||||
event.sub('ready', function () {
|
||||
|
||||
ensure();
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
'<li class="item">' +
|
||||
'<a>' +
|
||||
'<span class="icon square"><img/></span>' +
|
||||
'<span class="icon rational"><img/></span>' +
|
||||
'<span class="icon landscape"><img/></span>' +
|
||||
'<span class="label"/>' +
|
||||
'<span class="date"/>' +
|
||||
'<span class="size"/>' +
|
||||
|
|
@ -54,6 +54,7 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
|
||||
$iconImg.attr('src', resource.icon(item.type)).attr('alt', item.type);
|
||||
$label.text(item.label);
|
||||
$label.attr('title', item.label);
|
||||
$date.data('time', item.time).text(format.formatDate(item.time));
|
||||
$size.data('bytes', item.size).text(format.formatSize(item.size));
|
||||
|
||||
|
|
@ -159,7 +160,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
event.sub('location.changed', onLocationChanged);
|
||||
event.sub('location.refreshed', onLocationRefreshed);
|
||||
|
||||
$content.appendTo('body');
|
||||
// $content.appendTo('body');
|
||||
$content.appendTo('#main-row');
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function (
|
|||
'</li>';
|
||||
|
||||
|
||||
function update(toggle, animate) {
|
||||
function update(toggle) {
|
||||
|
||||
var $toggle = $('#sidebar-toggle');
|
||||
var $sidebar = $('#sidebar');
|
||||
|
|
@ -22,32 +22,24 @@ modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function (
|
|||
|
||||
if (isVisible) {
|
||||
$toggle.addClass('current');
|
||||
$sidebar.show();
|
||||
} else {
|
||||
$toggle.removeClass('current');
|
||||
}
|
||||
|
||||
if (animate) {
|
||||
$sidebar.stop().animate({
|
||||
right: isVisible ? 0 : -$sidebar.outerWidth()-1
|
||||
});
|
||||
} else {
|
||||
$sidebar.css({
|
||||
right: store.get(storekey) ? 0 : -$sidebar.outerWidth()-1
|
||||
});
|
||||
$sidebar.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
$(toggleTemplate)
|
||||
.appendTo('#navbar')
|
||||
.on('click', 'a', function (ev) {
|
||||
|
||||
update(true, true);
|
||||
update(true);
|
||||
ev.preventDefault();
|
||||
})
|
||||
.appendTo('#navbar');
|
||||
});
|
||||
|
||||
update(false, false);
|
||||
update(false);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
modulejs.define('view/spacing', ['_', '$', 'core/settings', 'core/event'], function (_, $, allsettings, event) {
|
||||
|
||||
var settings = _.extend({
|
||||
maxWidth: 960,
|
||||
top: 50,
|
||||
right: 'auto',
|
||||
bottom: 50,
|
||||
left: 'auto'
|
||||
}, allsettings.spacing);
|
||||
|
||||
|
||||
function adjustSpacing() {
|
||||
|
||||
$('#content').css({
|
||||
'margin-top': settings.top + $('#topbar').outerHeight(),
|
||||
'margin-bottom': settings.bottom + $('#bottombar').outerHeight()
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
$('#content').css({
|
||||
'max-width': settings.maxWidth,
|
||||
'margin-right': settings.right,
|
||||
'margin-left': settings.left
|
||||
});
|
||||
|
||||
event.sub('ready', adjustSpacing);
|
||||
$(window).on('resize', adjustSpacing);
|
||||
}
|
||||
|
||||
|
||||
init();
|
||||
});
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
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 settings = _.extend({}, {
|
||||
modes: modes,
|
||||
sizes: sizes
|
||||
sizes: [16, 24, 32, 48, 64, 96, 128, 192, 256]
|
||||
}, allsettings.view);
|
||||
var storekey = 'viewmode';
|
||||
var modeTemplate =
|
||||
|
|
@ -15,17 +14,61 @@ 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 sortedSizes = settings.sizes.sort(function (a, b) { return a-b; });
|
||||
var dynamicStyleTag = null;
|
||||
|
||||
|
||||
function adjustSpacing() {
|
||||
|
||||
var contentWidth = $('#content').width();
|
||||
var $view = $('#view');
|
||||
var itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).outerWidth(true) || 1) : 1;
|
||||
|
||||
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
|
||||
// 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');
|
||||
|
|
@ -47,15 +90,8 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
|||
}
|
||||
});
|
||||
|
||||
_.each(sizes, function (s) {
|
||||
if (s === size) {
|
||||
$view.addClass('size-' + s).show();
|
||||
} else {
|
||||
$view.removeClass('size-' + s);
|
||||
}
|
||||
});
|
||||
|
||||
$('#view-size').val(_.indexOf(_.intersection(sizes, settings.sizes), size));
|
||||
applyCssSizes(size);
|
||||
$('#view-size').val(_.indexOf(sortedSizes, size));
|
||||
|
||||
adjustSpacing();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
/* jQuery.scrollpanel 0.4.0 - http://larsjung.de/jquery-scrollpanel/ */
|
||||
!function(){"use strict";function o(o,t){var s=this;s.$el=e(o),s.settings=e.extend({},r,t);var n=s.settings.prefix;s.mouseOffsetY=0,s.updateId=0,s.scrollProxy=e.proxy(s.scroll,s),s.$el.css("position")&&"static"!==s.$el.css("position")||s.$el.css("position","relative"),s.$scrollbar=e('<div class="'+n+'scrollbar" />'),s.$thumb=e('<div class="'+n+'thumb" />').appendTo(s.$scrollbar),s.$el.addClass(n+"host").wrapInner('<div class="'+n+'viewport"><div class="'+n+'container" /></div>').append(s.$scrollbar),s.$viewport=s.$el.find("> ."+n+"viewport"),s.$container=s.$viewport.find("> ."+n+"container"),s.$el.on("mousewheel",function(o,e,t,r){s.$viewport.scrollTop(s.$viewport.scrollTop()-50*r),s.update(),o.preventDefault(),o.stopPropagation()}).on("scroll",function(){s.update()}),s.$viewport.css({paddingRight:s.$scrollbar.outerWidth(!0),height:s.$el.height(),overflow:"hidden"}),s.$container.css({overflow:"hidden"}),s.$scrollbar.css({position:"absolute",top:0,right:0,overflow:"hidden"}).on("mousedown",function(o){s.mouseOffsetY=s.$thumb.outerHeight()/2,s.onMousedown(o)}).each(function(){s.onselectstart=function(){return!1}}),s.$thumb.css({position:"absolute",left:0,width:"100%"}).on("mousedown",function(o){s.mouseOffsetY=o.pageY-s.$thumb.offset().top,s.onMousedown(o)}),s.update()}var e=jQuery,t=e(window),s="scrollpanel",r={prefix:"sp-"};e.extend(o.prototype,{update:function(o){var e=this;e.updateId&&!o?(clearInterval(e.updateId),e.updateId=0):!e.updateId&&o&&(e.updateId=setInterval(function(){e.update(!0)},50)),e.$viewport.css("height",e.$el.height());var t=e.$el.height(),s=e.$container.outerHeight(),r=e.$viewport.scrollTop(),n=r/s,i=Math.min(t/s,1),l=e.$scrollbar.height();1>i?(e.$scrollbar.css({height:e.$el.innerHeight()+l-e.$scrollbar.outerHeight(!0)}).fadeIn(50),e.$thumb.css({top:l*n,height:l*i})):e.$scrollbar.fadeOut(50)},scroll:function(o){var e=this,t=(o.pageY-e.$scrollbar.offset().top-e.mouseOffsetY)/e.$scrollbar.height();e.$viewport.scrollTop(e.$container.outerHeight()*t),e.update(),o.preventDefault(),o.stopPropagation()},onMousedown:function(o){var e=this;e.scroll(o),e.$scrollbar.addClass("active"),t.on("mousemove",e.scrollProxy).one("mouseup",function(o){e.$scrollbar.removeClass("active"),t.off("mousemove",e.scrollProxy),e.scroll(o)})}}),e.fn[s]=function(t,r){return this.each(function(){var n=e(this),i=n.data(s);i||(i=new o(this,t),i.update(),n.data(s,i)),"update"===t&&i.update(r)})}}();
|
||||
|
|
@ -6,20 +6,6 @@ Options
|
|||
*/
|
||||
|
||||
{
|
||||
/*
|
||||
Spacing of the main content.
|
||||
|
||||
Left and right will be added to a minimum of 30px. Top and bottom
|
||||
are added to the top and bottom bar heights.
|
||||
*/
|
||||
"spacing": {
|
||||
"top": 50,
|
||||
"bottom": 50,
|
||||
"left": "auto",
|
||||
"right": "auto",
|
||||
"maxWidth": 1024
|
||||
},
|
||||
|
||||
/*
|
||||
General view options.
|
||||
|
||||
|
|
@ -34,10 +20,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]
|
||||
the first value indicates the default view mode. If only one value
|
||||
is given the view mode is fixed and the selector buttons are hidden.
|
||||
The user selected view mode is also stored local in modern browsers
|
||||
- sizes: array of positive integers
|
||||
the first value indicates the default view size. If only one value
|
||||
is given the view size is fixed and the selector buttons are hidden.
|
||||
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
|
||||
|
|
@ -49,10 +35,10 @@ Options
|
|||
"hidden": ["^\\.", "^_{{pkg.name}}"],
|
||||
"hideFolders": false,
|
||||
"hideIf403": true,
|
||||
"hideParentFolder": false,
|
||||
"hideParentFolder": true,
|
||||
"modes": ["details", "grid", "icons"],
|
||||
"setParentFolderLabels": true,
|
||||
"sizes": [24, 32, 48, 64, 96],
|
||||
"sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256],
|
||||
"smartBrowsing": true,
|
||||
"theme": "",
|
||||
"unmanaged": ["index.html", "index.htm", "index.php"],
|
||||
|
|
@ -346,12 +332,10 @@ Options
|
|||
Show a folder tree.
|
||||
Note that this might affect performance significantly.
|
||||
|
||||
- slide: boolean, slide tree bar into viewport if there is enough space
|
||||
- maxSubfolders: max number of subfolders to show in tree
|
||||
*/
|
||||
"tree": {
|
||||
"enabled": true,
|
||||
"slide": true,
|
||||
"maxSubfolders": 50
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,28 +14,26 @@ head
|
|||
|
||||
body#h5ai-info
|
||||
|
||||
h1
|
||||
a( href="#{pkg.homepage}" ) #{pkg.name}
|
||||
div#content
|
||||
h1#header
|
||||
a( href="#{pkg.homepage}" ) #{pkg.name}
|
||||
|
||||
div#support
|
||||
| show your love and support for h5ai with a small donation
|
||||
div.paypal
|
||||
form( action="https://www.paypal.com/cgi-bin/webscr", method="post", target="_top" )
|
||||
input( type="hidden", name="cmd", value="_s-xclick" )
|
||||
input( type="hidden", name="hosted_button_id", value="8WSPKWT7YBTSQ" )
|
||||
input( type="image", src="client/images/paypal.png", border="0", name="submit", alt="PayPal - The safer, easier way to pay online!" )
|
||||
div#support
|
||||
| show your love and support for h5ai with a small donation
|
||||
div.paypal
|
||||
form( action="https://www.paypal.com/cgi-bin/webscr", method="post", target="_top" )
|
||||
input( type="hidden", name="cmd", value="_s-xclick" )
|
||||
input( type="hidden", name="hosted_button_id", value="8WSPKWT7YBTSQ" )
|
||||
input( type="image", src="client/images/paypal.png", border="0", name="submit", alt="PayPal - The safer, easier way to pay online!" )
|
||||
|
||||
div#bottombar.clearfix
|
||||
span.left
|
||||
span.noJsMsg
|
||||
| ⚡ JavaScript disabled! ⚡
|
||||
span.noBrowserMsg
|
||||
| ⚡ Works best in
|
||||
a( href="http://browsehappy.com" ) modern browsers
|
||||
| ! ⚡
|
||||
span.right
|
||||
a( href="#{pkg.homepage}", title="#{pkg.name} #{pkg.version} · #{pkg.description}" )
|
||||
| powered by #{pkg.name} #{pkg.version}
|
||||
span.center
|
||||
div#bottombar
|
||||
span.noJsMsg
|
||||
| JavaScript disabled!
|
||||
span.noBrowserMsg
|
||||
| Works best in
|
||||
a( href="http://browsehappy.com" ) modern browsers
|
||||
| !
|
||||
a( href="#{pkg.homepage}", title="#{pkg.name} #{pkg.version} · #{pkg.description}" )
|
||||
| powered by #{pkg.name} #{pkg.version}
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -117,12 +117,11 @@ class Api {
|
|||
|
||||
$type = Util::use_request_param("type");
|
||||
$src_url = Util::use_request_param("href");
|
||||
$mode = Util::use_request_param("mode");
|
||||
$width = Util::use_request_param("width");
|
||||
$height = Util::use_request_param("height");
|
||||
|
||||
$thumb = new Thumb($this->app);
|
||||
$thumb_url = $thumb->thumb($type, $src_url, $mode, $width, $height);
|
||||
$thumb_url = $thumb->thumb($type, $src_url, $width, $height);
|
||||
Util::json_fail(3, "thumbnail creation failed", $thumb_url === null);
|
||||
|
||||
Util::json_exit(array("absHref" => $thumb_url));
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ class Thumb {
|
|||
|
||||
private static $FFMPEG_CMDV = array("ffmpeg", "-ss", "0:01:00", "-i", "[SRC]", "-an", "-vframes", "1", "[DEST]");
|
||||
private static $AVCONV_CMDV = array("avconv", "-ss", "0:01:00", "-i", "[SRC]", "-an", "-vframes", "1", "[DEST]");
|
||||
private static $CONVERT_CMDV = array("convert", "-strip", "[SRC][0]", "[DEST]");
|
||||
private static $CONVERT_CMDV = array("convert", "-density", "200", "-quality", "100", "-sharpen", "0x1.0", "-strip", "[SRC][0]", "[DEST]");
|
||||
private static $THUMB_CACHE = "thumbs";
|
||||
|
||||
|
||||
|
|
@ -23,13 +23,14 @@ class Thumb {
|
|||
}
|
||||
|
||||
|
||||
public function thumb($type, $source_url, $mode, $width, $height) {
|
||||
public function thumb($type, $source_url, $width, $height) {
|
||||
|
||||
$source_path = $this->app->to_path($source_url);
|
||||
if (!file_exists($source_path) || Util::starts_with($source_path, CACHE_PATH)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$capture_path = $source_path;
|
||||
if ($type === "img") {
|
||||
$capture_path = $source_path;
|
||||
} else if ($type === "mov") {
|
||||
|
|
@ -42,17 +43,17 @@ class Thumb {
|
|||
$capture_path = $this->capture(Thumb::$CONVERT_CMDV, $source_path);
|
||||
}
|
||||
|
||||
return $this->thumb_href($capture_path, $mode, $width, $height);
|
||||
return $this->thumb_href($capture_path, $width, $height);
|
||||
}
|
||||
|
||||
|
||||
private function thumb_href($source_path, $mode, $width, $height) {
|
||||
private function thumb_href($source_path, $width, $height) {
|
||||
|
||||
if (!file_exists($source_path)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$name = "thumb-" . sha1("$source_path-$width-$height-$mode") . ".jpg";
|
||||
$name = "thumb-" . sha1("$source_path") . "-" . $width . "x" . $height . ".jpg";
|
||||
$thumb_path = $this->thumbs_path . "/" . $name;
|
||||
$thumb_url = $this->thumbs_href . "/" . $name;
|
||||
|
||||
|
|
@ -73,7 +74,7 @@ class Thumb {
|
|||
$image->set_source($source_path);
|
||||
}
|
||||
|
||||
$image->thumb($mode, $width, $height);
|
||||
$image->thumb($width, $height);
|
||||
$image->save_dest_jpeg($thumb_path, 80);
|
||||
}
|
||||
|
||||
|
|
@ -164,15 +165,6 @@ class Image {
|
|||
}
|
||||
|
||||
|
||||
public function save_dest_png($filename, $quality = 9) {
|
||||
|
||||
if (!is_null($this->dest)) {
|
||||
@imagepng($this->dest, $filename, $quality);
|
||||
@chmod($filename, 0775);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public function release_dest() {
|
||||
|
||||
if (!is_null($this->dest)) {
|
||||
|
|
@ -195,133 +187,33 @@ class Image {
|
|||
}
|
||||
|
||||
|
||||
private function magic($dest_x, $dest_y, $src_x, $src_y, $dest_width, $dest_height, $src_width, $src_height, $can_width = null, $can_height = null, $color = null) {
|
||||
public function thumb($width, $height) {
|
||||
|
||||
if (is_null($this->source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($can_width === 0) {
|
||||
$can_width = 1;
|
||||
}
|
||||
if ($can_height === 0) {
|
||||
$can_height = 1;
|
||||
}
|
||||
if ($dest_width === 0) {
|
||||
$dest_width = 1;
|
||||
}
|
||||
if ($dest_height === 0) {
|
||||
$dest_height = 1;
|
||||
}
|
||||
$ratio = 1.0 * $width / $height;
|
||||
$src_r = 1.0 * $this->width / $this->height;
|
||||
|
||||
if (!is_null($can_width) && !is_null($can_height)) {
|
||||
$this->dest = imagecreatetruecolor($can_width, $can_height);
|
||||
if ($src_r <= $ratio) {
|
||||
$src_w = $this->width;
|
||||
$src_h = $src_w / $ratio;
|
||||
$src_x = 0;
|
||||
} else {
|
||||
$this->dest = imagecreatetruecolor($dest_width, $dest_height);
|
||||
$src_h = $this->height;
|
||||
$src_w = $src_h * $ratio;
|
||||
$src_x = 0.5 * ($this->width - $src_w);
|
||||
}
|
||||
|
||||
if (is_null($color)) {
|
||||
$color = array(255, 255, 255);
|
||||
}
|
||||
$icol = imagecolorallocate($this->dest, $color[0], $color[1], $color[2]);
|
||||
$src_x = intval($src_x);
|
||||
$src_w = intval($src_w);
|
||||
$src_h = intval($src_h);
|
||||
|
||||
$this->dest = imagecreatetruecolor($width, $height);
|
||||
$icol = imagecolorallocate($this->dest, 255, 255, 255);
|
||||
imagefill($this->dest, 0, 0, $icol);
|
||||
|
||||
imagecopyresampled($this->dest, $this->source, $dest_x, $dest_y, $src_x, $src_y, $dest_width, $dest_height, $src_width, $src_height);
|
||||
}
|
||||
|
||||
|
||||
public function thumb($mode, $width, $height = null, $color = null) {
|
||||
|
||||
if ($height === null) {
|
||||
$height = $width;
|
||||
}
|
||||
if ($mode === "square") {
|
||||
$this->square_thumb($width);
|
||||
} elseif ($mode === "rational") {
|
||||
$this->rational_thumb($width, $height);
|
||||
} elseif ($mode === "center") {
|
||||
$this->center_thumb($width, $height, $color);
|
||||
} else {
|
||||
$this->free_thumb($width, $height);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public function square_thumb($width) {
|
||||
|
||||
if (is_null($this->source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$a = min($this->width, $this->height);
|
||||
$x = intval(($this->width - $a) / 2);
|
||||
$y = intval(($this->height - $a) / 2);
|
||||
|
||||
$this->magic(0, 0, $x, $y, $width, $width, $a, $a);
|
||||
}
|
||||
|
||||
|
||||
public function rational_thumb($width, $height) {
|
||||
|
||||
if (is_null($this->source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$r = 1.0 * $this->width / $this->height;
|
||||
|
||||
$h = $height;
|
||||
$w = $r * $h;
|
||||
|
||||
if ($w > $width) {
|
||||
|
||||
$w = $width;
|
||||
$h = 1.0 / $r * $w;
|
||||
}
|
||||
|
||||
$w = intval($w);
|
||||
$h = intval($h);
|
||||
|
||||
$this->magic(0, 0, 0, 0, $w, $h, $this->width, $this->height);
|
||||
}
|
||||
|
||||
|
||||
public function center_thumb($width, $height, $color = null) {
|
||||
|
||||
if (is_null($this->source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$r = 1.0 * $this->width / $this->height;
|
||||
|
||||
$h = $height;
|
||||
$w = $r * $h;
|
||||
|
||||
if ($w > $width) {
|
||||
|
||||
$w = $width;
|
||||
$h = 1.0 / $r * $w;
|
||||
}
|
||||
|
||||
$w = intval($w);
|
||||
$h = intval($h);
|
||||
|
||||
$x = intval(($width - $w) / 2);
|
||||
$y = intval(($height - $h) / 2);
|
||||
|
||||
$this->magic($x, $y, 0, 0, $w, $h, $this->width, $this->height, $width, $height, $color);
|
||||
}
|
||||
|
||||
|
||||
public function free_thumb($width, $height) {
|
||||
|
||||
if (is_null($this->source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$w = intval($width);
|
||||
$h = intval($height);
|
||||
|
||||
$this->magic(0, 0, 0, 0, $w, $h, $this->width, $this->height);
|
||||
imagecopyresampled($this->dest, $this->source, 0, 0, $src_x, 0, $width, $height, $src_w, $src_h);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,24 +19,15 @@ head
|
|||
|
||||
body
|
||||
|
||||
div#topbar.clearfix
|
||||
ul#navbar
|
||||
|
||||
div#bottombar.clearfix
|
||||
span.left
|
||||
span.noJsMsg
|
||||
| ⚡ JavaScript disabled! ⚡
|
||||
span.noBrowserMsg
|
||||
| ⚡ Works best in
|
||||
a( href="http://browsehappy.com" ) modern browsers
|
||||
| ! ⚡
|
||||
span.right
|
||||
a( href="#{pkg.homepage}", title="#{pkg.name} #{pkg.version} · #{pkg.description}" )
|
||||
| powered by #{pkg.name} #{pkg.version}
|
||||
span.center
|
||||
|
||||
div#sidebar
|
||||
div#settings
|
||||
div#bottombar
|
||||
span.noJsMsg
|
||||
| JavaScript disabled!
|
||||
span.noBrowserMsg
|
||||
| Works best in
|
||||
a( href="http://browsehappy.com" ) modern browsers
|
||||
| !
|
||||
a( href="#{pkg.homepage}", title="#{pkg.name} #{pkg.version} · #{pkg.description}" )
|
||||
| powered by #{pkg.name} #{pkg.version}
|
||||
|
||||
div#fallback !{fallback}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue