diff --git a/README.md b/README.md
index 53fc4967..f29cac09 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# h5ai
-Don't use files from this repository (`src` folder) for installation.
+Please don't use files from this repository (`src` folder) for installation.
They need to be preprocessed/compiled to work correctly. You'll find a
precompiled package on the [project page](http://larsjung.de/h5ai).
@@ -20,6 +20,7 @@ h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h
* [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228) (GPL)
* [HTML5 ★ Boilerplate](http://html5boilerplate.com)
* [jQuery](http://jquery.com) (MIT/GPL)
+* [jQuery.fracs](http://larsjung.de/fracs) (MIT)
* [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) (MIT)
* [modernizr](http://www.modernizr.com) (MIT/BSD)
* [Moment.js](http://momentjs.com) (MIT)
@@ -30,20 +31,29 @@ h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h
## Changelog
-### v0.19 - *2012-??-??*
+### v0.19 - *2012-04-??*
+* adds lots of config options
+* changes in `config.js` and `h5ai.htaccess`
* fixes js problems in IE 7+8
-* hides broken tree view in IE < 9 and adds a message to the footer
-* disables hash changes since they break logical browser history
+* hides broken tree view in IE < 9, adds a message to the footer
+* removes hash changes since they break logical browser history
* fixes thumbnail size for portrait images in icon view
+* adds an info page at `/_h5ai`
+* sort order is preserved while browsing
+* removes PHP error messages on thumbnail generation
+* fixes PHP problems with zipped download
+* changes crumb image for folders with an index file
+* adds `index.php` to use h5ai in non-Apache environments
* switches from [Datejs](http://www.datejs.com) to [Moment.js](http://momentjs.com)
* adds [underscore.js](http://underscorejs.org)
-* adds a info page to `/_ha5i`
+* fixes mousewheel problems, updates [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) to 3.0.6
* updates lv translation
* adds ro translation by [Jakob Cosoroabă](http://github.com/midday)
* adds ja translation by [metasta](http://github.com/metasta)
* adds nb translation by [Sindre Sorhus](http://github.com/sindresorhus)
* adds sr translation by [Goran](http://github.com/vBm)
+* adds gr translation by [xhmikosr](http://github.com/xhmikosr)
### v0.18 - *2012-02-24*
diff --git a/build.properties b/build.properties
index f887c5a5..1b874df3 100644
--- a/build.properties
+++ b/build.properties
@@ -3,7 +3,7 @@ custom = true
# project
project.name = h5ai
-project.version = pre0.19
+project.version = 0.19-pre
# src
@@ -18,4 +18,5 @@ release.dir = release
# tools
tool.wepp = wepp
tool.jslint = jslint
+tool.jshint = jshint
diff --git a/build.xml b/build.xml
index af2a78cc..48e26d10 100644
--- a/build.xml
+++ b/build.xml
@@ -54,6 +54,11 @@
+
+
+
+
+
@@ -112,4 +117,14 @@
+
+
+
+ JSHint @{files}
+
+
+
+
+
+
diff --git a/src/_h5ai/config.js b/src/_h5ai/config.js
index fe3395dc..fdb1f6af 100644
--- a/src/_h5ai/config.js
+++ b/src/_h5ai/config.js
@@ -17,16 +17,17 @@ var H5AI_CONFIG = {
"h5aiAbsHref": "/_h5ai/",
/*
- * Filenames of customized header and footer files to look for
- * in each folder. For Example:
- *
- * "customHeader": "_h5ai.header.html",
- * "customFooter": "_h5ai.footer.html",
- *
- * This is disabled by default.
+ * Spacing of the main content.
+ * Left and right will be added to a minimum of 30px. Top and bottom
+ * are calculated relative to the top and bottom bar heights.
*/
- "customHeader": null,
- "customFooter": null,
+ "spacing": {
+ "maxWidth": 960,
+ "top": 50,
+ "right": "auto",
+ "bottom": 50,
+ "left": "auto"
+ },
/*
* An array of view modes the user may choose from. Currently there
@@ -35,8 +36,102 @@ var H5AI_CONFIG = {
* view mode is fixed and the selector buttons are hidden.
* The user selected view mode is also stored local in modern browsers
* so that it will be persistent.
+ *
+ * Set parent folder labels to real folder names.
*/
- "viewmodes": ["details", "icons"],
+ "view": {
+ "modes": ["details", "icons"],
+ "setParentFolderLabels": true
+ },
+
+
+
+
+ /*
+ * Extensions in alphabetical order.
+ */
+
+ /*
+ * Show a clickable breadcrumb.
+ */
+ "crumb": {
+ "enabled": true
+ },
+
+ /*
+ * Filenames of customized header and footer files to look for
+ * in each folder.
+ */
+ "custom": {
+ "enabled": true,
+ "header": "_h5ai.header.html",
+ "footer": "_h5ai.footer.html"
+ },
+
+ /*
+ * Allow filtering the displayed files and folders.
+ * Note: filters will be treated as JavaScript regular expressions
+ * if you prefix them with "re:".
+ */
+ "filter": {
+ "enabled": true
+ },
+
+ /*
+ * Associative array of folders and their HTTP status codes to
+ * avoid HEAD requests to that folders. The key (folder) must start
+ * and end with a slash (/).
+ * For example
+ * "/some/folder/": 200
+ * will always return HTTP status 200 (OK), which will be interpreted
+ * as a non auto indexed folder, that means a folder containing an
+ * appropriate default index file.
+ */
+ "folderstatus": {
+ "enabled": true,
+ "folders": {}
+ },
+
+ /*
+ * Localization, for example "en", "de" etc. - see "langs" below for
+ * possible values. Adjust it to your needs. If lang is not found in
+ * "langs" it defaults to "en".
+ *
+ * Optionally try to use browser language, falls back to previous
+ * specified language.
+ *
+ * Date format in detailed view, for example: "YYYY-MM-DD HH:mm:ss"
+ * Syntax as specified by Moment.js (http://momentjs.com)
+ * This might be overidden by "dateFormat" in a lang specification.
+ */
+ "l10n": {
+ "enabled": true,
+ "lang": "en",
+ "useBrowserLang": true,
+ "defaultDateFormat": "YYYY-MM-DD HH:mm"
+ },
+
+ /*
+ * Link the hover effects between crumb, main view and tree.
+ */
+ "link-hover-states": {
+ "enabled": true
+ },
+
+ /*
+ * Show QRCodes on hovering files.
+ */
+ "qrcode": {
+ "enabled": true,
+ "size": 150
+ },
+
+ /*
+ * Make entries selectable. At the moment only needed for zipped download.
+ */
+ "select": {
+ "enabled": true
+ },
/*
* Default sort order is a two letter code. The first letter specifies
@@ -44,96 +139,66 @@ var H5AI_CONFIG = {
* second letter specifies the sort order: "a" for "ascending" or "d"
* for "descending".
*/
- "sortorder": "na",
+ "sort": {
+ "enabled": true,
+ "order": "na"
+ },
/*
- * Show a folder tree, boolean.
- * Note that this tree might have side effects as it sends HEAD requests
- * to the folders, and therefore will invoke index.php scripts. Use
- * folderStatus below to avoid such requests.
- * It might also affect performance significantly.
+ * Show additional info in a statusbar.
*/
- "showTree": true,
-
- /*
- * Slide tree bar into viewport if there is enough space, boolean.
- */
- "slideTree": true,
-
- /*
- * Associative array of folders and their HTTP status codes to
- * avoid HEAD requests to that folders. The key (folder) must start
- * and end with a slash (/).
- * For example:
- * "/some/folder/": 200
- * will always return HTTP status 200 (OK), which will be interpreted
- * as a non auto indexed folder, that means a folder containing an
- * appropriate default index file.
- */
- "folderStatus": {},
-
- /*
- * Localization, for example "en", "de" etc. - see h5aiLangs below for
- * possible values. Adjust it to your needs. If lang is not found in
- * h5aiLangs it defaults to "en".
- */
- "lang": "en",
-
- /*
- * Try to use browser language, falls back to previous specified lang.
- */
- "useBrowserLang": true,
-
- /*
- * Set parent folder labels to real folder names.
- */
- "setParentFolderLabels": true,
-
- /*
- * Link the hover effects between crumb, extended view and tree.
- */
- "linkHoverStates": true,
-
- /*
- * Date format in detailed view, for example: "YYYY-MM-DD HH:mm:ss"
- * Syntax as specified by Moment.js (http://momentjs.com)
- */
- "dateFormat": "YYYY-MM-DD HH:mm",
+ "statusbar": {
+ "enabled": true
+ },
/*
* Requires PHP on the server.
- * Show thumbnails for image files.
+ * Show thumbnails for image files. Needs the "/_h5ai/cache" folder to be
+ * writable for the Apache Server.
*/
- "showThumbs": true,
- "thumbTypes": ["bmp", "gif", "ico", "image", "jpg", "png", "tiff"],
+ "thumbnails": {
+ "enabled": true,
+ "types": ["bmp", "gif", "ico", "image", "jpg", "png", "tiff"],
+ "delay": 1000
+ },
+
+ /*
+ * Replace window title with current breadcrumb.
+ */
+ "title": {
+ "enabled": true
+ },
+
+ /*
+ * Show a folder tree.
+ * Note that this tree might have side effects as it sends HEAD requests
+ * to the folders, and therefore will invoke index.php scripts. Use
+ * "folderstatus" above to avoid such requests.
+ * It might also affect performance significantly.
+ *
+ * Slide tree bar into viewport if there is enough space.
+ */
+ "tree": {
+ "enabled": true,
+ "slide": true
+ },
/*
* Requires PHP on the server.
* Enable zipped download of selected entries.
*/
- "zippedDownload": true,
-
- /*
- * Show QRCodes on hovering files.
- * Set this to the desired size in pixel or null to not display QRCodes.
- * A good size to start with might be 150.
- */
- "qrCodesSize": 150,
-
- /*
- * Allow filtering the displayed files and folders.
- * Filters are ment to be JavaScript regular expressions.
- */
- "showFilter": true
+ "zipped-download": {
+ "enabled": true
+ }
},
/*
- * File types mapped to file extensions.
+ * File types mapped to file extensions. In alphabetical order.
*/
"types": {
"archive": [".tar.bz2", ".tar.gz", ".tgz"],
- "audio": [".aif", ".m4a", ".mid", ".mp3", ".mpa", ".ra", ".ogg", ".wav", ".wma"],
+ "audio": [".aif", ".flac", ".m4a", ".mid", ".mp3", ".mpa", ".ra", ".ogg", ".wav", ".wma"],
"authors": ["authors"],
"bin": [".class", ".o", ".so"],
"blank": [],
@@ -149,7 +214,7 @@ var H5AI_CONFIG = {
"doc": [".doc", ".docx", ".odm", ".odt", ".ott"],
"draw": [".drw"],
"eps": [".eps"],
- "exe": [".exe"],
+ "exe": [".bat", ".cmd", ".exe"],
"folder": [],
"folder-home": [],
"folder-open": [],
@@ -171,7 +236,7 @@ var H5AI_CONFIG = {
"package": [],
"pdf": [".pdf"],
"php": [".php"],
- "playlist": [".m3u"],
+ "playlist": [".m3u", ".m3u8", ".pls"],
"png": [".png"],
"pres": [".odp", ".otp", ".pps", ".ppt", ".pptx"],
"psd": [".psd"],
@@ -187,18 +252,18 @@ var H5AI_CONFIG = {
"sql": [],
"tar": [".tar"],
"tex": [".tex"],
- "text": [".markdown", ".md", ".text", ".txt"],
+ "text": [".diff", ".markdown", ".md", ".patch", ".text", ".txt"],
"tiff": [".tiff"],
"unknown": [],
"vcal": [".vcal"],
- "video": [".avi", ".flv", ".mov", ".mp4", ".mpg", ".rm", ".swf", ".vob", ".wmv"],
+ "video": [".avi", ".flv", ".mkv", ".mov", ".mp4", ".mpg", ".rm", ".swf", ".vob", ".wmv"],
"xml": [".xml"],
- "zip": [".bz2", ".jar", ".war", ".z", ".Z", ".zip"]
+ "zip": [".7z", ".bz2", ".jar", ".lzma", ".war", ".z", ".Z", ".zip"]
},
/*
- * Available translations.
+ * Available translations. "en" in first place as a reference, otherwise in alphabetical order.
*/
"langs": {
@@ -259,7 +324,8 @@ var H5AI_CONFIG = {
"folders": "Ordner",
"files": "Dateien",
"download": "Download",
- "noMatch": "keine Treffer"
+ "noMatch": "keine Treffer",
+ "dateFormat": "DD.MM.YYYY HH:mm"
},
"es": {
@@ -292,6 +358,21 @@ var H5AI_CONFIG = {
"noMatch": "no match"
},
+ "gr": {
+ "lang": "ελληνικά",
+ "details": "Λεπτομέρειες",
+ "icons": "Εικονίδια",
+ "name": "Όνομα",
+ "lastModified": "Τελευταία Τροποποίηση",
+ "size": "Μέγεθος",
+ "parentDirectory": "Προηγούμενος Κατάλογος",
+ "empty": "κενό",
+ "folders": "Φάκελοι",
+ "files": "Αρχεία",
+ "download": "Μεταμόρφωση",
+ "noMatch": "Κανένα Ταίριασμα"
+ },
+
"it": {
"lang": "italiano",
"details": "dettagli",
diff --git a/src/_h5ai/config.php b/src/_h5ai/config.php
index 8ab74296..95143e8b 100644
--- a/src/_h5ai/config.php
+++ b/src/_h5ai/config.php
@@ -14,7 +14,7 @@ $H5AI_CONFIG = array(
* This configuration assumes that h5ai is installed
* in the webroot directory of the Apache server.
*/
- "ROOT_ABS_PATH" => safe_dirname(safe_dirname(__FILE__)),
+ "ROOT_ABS_PATH" => dirname(dirname(__FILE__)),
/*
* Files/folders that should not be listed. Specified
diff --git a/src/_h5ai/css/inc/table.less b/src/_h5ai/css/inc/apache-autoindex-table.less
similarity index 67%
rename from src/_h5ai/css/inc/table.less
rename to src/_h5ai/css/inc/apache-autoindex-table.less
index cfd5241b..957e54c2 100644
--- a/src/_h5ai/css/inc/table.less
+++ b/src/_h5ai/css/inc/apache-autoindex-table.less
@@ -1,33 +1,32 @@
-#table {
+#data-apache-autoindex {
+ max-width: 960px;
+ margin: 0 auto;
+
table {
display: block;
width: 100%;
border-collapse: collapse;
th, td {
- padding: 3px 6px;
+ padding: 6px;
text-align: left;
border: none;
}
th {
padding-bottom: 18px;
- opacity: 0.4;
- .transition(all 0.2s ease-in-out);
- &:hover, &:hover a {
- color: #555;
- cursor: pointer;
- opacity: 0.9;
- }
a, a:visited {
color: #555;
font-weight: normal;
+ text-decoration: none;
+ cursor: pointer;
+ opacity: 0.4;
+ .transition(all 0.2s ease-in-out);
- img {
- width: 12px;
- height: 12px;
- padding: 0 8px;
+ &:hover {
+ color: #555;
+ opacity: 0.9;
}
}
}
@@ -35,6 +34,19 @@
border: 1px solid #ddd;
border-left: none;
border-right: none;
+ overflow: hidden;
+ white-space: nowrap;
+
+ a, a:active, a:visited {
+ display: block;
+ color: #555;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: #e80;
+ }
+ }
}
td:nth-child(1), th:nth-child(1) {
text-align: center;
@@ -43,26 +55,23 @@
img {
width: 16px;
height: 16px;
- padding-top: 2px;
+ position: relative;
+ top: -2px;
}
}
td:nth-child(2), th:nth-child(2) {
width: 682px;
max-width: 682px;
- overflow: hidden;
- white-space: nowrap;
}
td:nth-child(3), th:nth-child(3) {
text-align: right;
width: 160px;
min-width: 160px;
- white-space: nowrap;
}
td:nth-child(4), th:nth-child(4) {
text-align: right;
width: 70px;
min-width: 70px;
- white-space: nowrap;
}
}
}
diff --git a/src/_h5ai/css/inc/bottombar.less b/src/_h5ai/css/inc/bottombar.less
new file mode 100644
index 00000000..432e0466
--- /dev/null
+++ b/src/_h5ai/css/inc/bottombar.less
@@ -0,0 +1,68 @@
+
+#bottombar {
+ position: fixed;
+ z-index: 5;
+ width: 100%;
+ left: 0;
+ bottom: 0;
+ padding: 6px 0 8px 0;
+ .vert-gradient(rgb(241,241,241), rgb(228,228,228));
+ border-top: 1px solid rgb(210,210,210);
+
+ color: #999;
+ font-size: @smaller-font;
+ text-align: center;
+
+ a, a:active, a:visited {
+ color: #555;
+ text-decoration: none;
+ .transition(all 0.2s ease-in-out);
+ opacity: 0.7;
+
+ &:hover {
+ color: #e80;
+ opacity: 1;
+ }
+ }
+ .left {
+ display: block;
+ padding: 0 8px;
+ float: left
+ }
+ .center {
+ display: block;
+ margin: 0 100px;
+ }
+ .right {
+ display: block;
+ padding: 0 8px;
+ float: right
+ }
+ .noJsMsg {
+ color: #c33;
+ margin-left: 16px;
+ }
+ .oldBrowser {
+ display: none;
+ color: #c33;
+ margin-left: 16px;
+ a, a:active, a:visited {
+ color: #c33;
+ text-decoration: underline;
+ &:hover {
+ color: #e80;
+ }
+ }
+ }
+ .status {
+ .sep {
+ display: inline-block;
+ padding: 0 6px;
+ }
+ &.default {
+ }
+ &.dynamic {
+ display: none;
+ }
+ }
+}
diff --git a/src/_h5ai/css/inc/content.less b/src/_h5ai/css/inc/content.less
index cd84d554..202d2084 100644
--- a/src/_h5ai/css/inc/content.less
+++ b/src/_h5ai/css/inc/content.less
@@ -1,18 +1,30 @@
#content {
max-width: 960px;
- margin: 0 auto;
+ margin: 50px auto;
+}
- > header {
- display: none;
- padding-bottom: 10px;
- margin-bottom: 80px;
- border-bottom: 2px dashed #ddd;
- }
- > footer {
- display: none;
- padding-top: 10px;
- margin-top: 80px;
- border-top: 2px dashed #ddd;
+
+#content-header, #content-footer {
+
+ a, a:active, a:visited {
+ color: #2080FF;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ color: #68A9FF;
+ }
}
}
+
+
+#content-header {
+ padding-bottom: 12px;
+ margin-bottom: 32px;
+}
+
+#content-footer {
+ padding-top: 12px;
+ margin-top: 32px;
+}
diff --git a/src/_h5ai/css/inc/extended.less b/src/_h5ai/css/inc/extended.less
index c4ca3845..3fbb7810 100644
--- a/src/_h5ai/css/inc/extended.less
+++ b/src/_h5ai/css/inc/extended.less
@@ -54,10 +54,10 @@
background-color: #f6f6f6;
color: #e80;
}
- &.selected:not(.selecting), &.selecting:not(.selected) {
- border-color: rgba(240,100,0,0.2);
- background-color: rgba(240,100,0,0.2);
- }
+ }
+ &.selected:not(.selecting) a, &.selecting:not(.selected) a {
+ border-color: rgba(240,100,0,0.2);
+ background-color: rgba(240,100,0,0.2);
}
&.error {
a, a:active, a:visited {
@@ -102,7 +102,7 @@
width: 16px;
height: 16px;
&.thumb {
- border: 1px solid #eee;
+ // border: 1px solid #ddd;
}
}
}
@@ -132,18 +132,6 @@
width: 80px;
white-space: nowrap;
}
- &.entry.thumb .icon.small {
- overflow: hidden;
- padding: 5px;
-
- img {
- background-color: #eee;
- width: 16px;
- height: 16px;
- border: 1px solid #ddd;
- overflow: hidden;
- }
- }
}
}
.empty, .no-match {
@@ -206,10 +194,6 @@
border-color: #eee;
background-color: #f6f6f6;
}
- &.selected:not(.selecting), &.selecting:not(.selected) {
- border-color: rgba(240,100,0,0.2);
- background-color: rgba(240,100,0,0.2);
- }
.icon {
display: block;
@@ -218,7 +202,7 @@
height: 48px;
margin-bottom: 8px;
&.thumb {
- border: 1px solid #eee;
+ // border: 1px solid #ddd;
}
}
}
@@ -233,6 +217,10 @@
display: none;
}
}
+ &.selected:not(.selecting) a, &.selecting:not(.selected) a {
+ border-color: rgba(240,100,0,0.2);
+ background-color: rgba(240,100,0,0.2);
+ }
&.error {
a, a:active, a:visited {
color: #aaa;
@@ -253,21 +241,6 @@
}
}
}
- &.entry.thumb .icon.big {
- width: 100px;
- height: 58px;
- overflow: hidden;
-
- img {
- background-color: #eee;
- min-width: 46px;
- min-height: 46px;
- min-width: 12px;
- min-height: 12px;
- border: 1px solid #ddd;
- overflow: hidden;
- }
- }
}
}
.empty, .no-match {
diff --git a/src/_h5ai/css/inc/footer.less b/src/_h5ai/css/inc/footer.less
deleted file mode 100644
index e8cd26ef..00000000
--- a/src/_h5ai/css/inc/footer.less
+++ /dev/null
@@ -1,120 +0,0 @@
-
-body > footer {
- position: fixed;
- z-index: 5;
- width: 100%;
- left: 0;
- bottom: 0;
- padding: 6px 0 8px 0;
- .vert-gradient(rgb(241,241,241), rgb(228,228,228));
- border-top: 1px solid rgb(210,210,210);
-
- color: #999;
- font-size: 0.85em;
- text-align: center;
-
- a, a:active, a:visited {
- color: #555;
- text-decoration: none;
- .transition(all 0.2s ease-in-out);
- opacity: 0.7;
-
- &:hover {
- color: #e80;
- opacity: 1;
- }
- }
- .left {
- display: block;
- padding: 0 8px;
- float: left
- }
- .center {
- display: block;
- margin: 0 100px;
- }
- .right {
- display: block;
- padding: 0 8px;
- float: right
- }
- .noJsMsg {
- color: #c33;
- margin-left: 16px;
- }
- .oldBrowser {
- display: none;
- color: #c33;
- margin-left: 16px;
- a, a:active, a:visited {
- color: #c33;
- text-decoration: underline;
- &:hover {
- color: #e80;
- }
- }
- }
- .status {
- .sep {
- display: inline-block;
- padding: 0 6px;
- }
- &.default {
- }
- &.dynamic {
- display: none;
- }
- }
- #langSelector {
- position: relative;
- cursor: pointer;
-
- .langOptions {
- position: absolute;
- z-index: 2;
- overflow: auto;
- display: none;
- right: 0;
- top: 0;
- max-height: 200px;
- background-color: rgb(241,241,241);
- border: 1px solid rgb(210,210,210);
-
- > .scrollbar {
- margin: 0;
- width: 6px;
- background-color: rgb(210,210,210);
-
- .drag {
- background-color: rgb(180,180,180);
- }
- &.dragOn .drag {
- background-color: rgb(150,150,150);
- }
- }
-
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- text-align: left;
-
- li {
- padding: 8px 24px 10px 24px;
- white-space: nowrap;
- border-top: 1px solid rgb(231,231,231);
- .transition(all 0.2s ease-in-out);
-
- &.current {
- color: #333;
- background-color: rgba(255,255,255,0.8);
- }
- &:hover {
- color: #e80;
- background-color: rgba(255,255,255,0.8);
- }
- }
- }
- }
- }
-}
diff --git a/src/_h5ai/css/inc/h5ai-info.less b/src/_h5ai/css/inc/h5ai-info.less
new file mode 100644
index 00000000..e63d8664
--- /dev/null
+++ b/src/_h5ai/css/inc/h5ai-info.less
@@ -0,0 +1,59 @@
+
+body#h5ai-info {
+ font-family: Ubuntu, Arial, sans;
+ margin: 0 auto;
+ font-size: 20px;
+ color: #555;
+ max-width: 600px;
+ text-align: center;
+
+ .h5ai {
+ font-family: 'Miltonian Tattoo';
+ font-weight: normal;
+ }
+ h1 {
+ font-size: 3.6em;
+ margin: 0.9em 0 0 0;
+ }
+ h2 {
+ font-size: 1.15em;
+ margin: 2.6em 0 0 0;
+ }
+ p {
+ line-height: 1.6em;
+ }
+ p + p {
+ margin-top: 1.2em;
+ }
+ li {
+ margin-top: 0.6em;
+ line-height: 1.4em;
+ }
+
+ #tests {
+ display: inline-block;
+ list-style-type: none;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+
+ .test-label {
+ display: inline-block;
+ width: 300px;
+ }
+ .test-result {
+ display: inline-block;
+ width: 70px;
+ text-align: right;
+ font-weight: bold;
+ color: #aaa;
+
+ &.test-passed {
+ color: #5a5;
+ }
+ &.test-failed {
+ color: #a55;
+ }
+ }
+ }
+}
diff --git a/src/_h5ai/css/inc/l10n.less b/src/_h5ai/css/inc/l10n.less
new file mode 100644
index 00000000..c47f9746
--- /dev/null
+++ b/src/_h5ai/css/inc/l10n.less
@@ -0,0 +1,53 @@
+
+#langSelector {
+ position: relative;
+ cursor: pointer;
+
+ .langOptions {
+ position: absolute;
+ z-index: 2;
+ overflow: auto;
+ display: none;
+ right: 0;
+ top: 0;
+ max-height: 200px;
+ background-color: rgb(241,241,241);
+ border: 1px solid rgb(210,210,210);
+
+ > .scrollbar {
+ margin: 0;
+ width: 6px;
+ background-color: rgb(210,210,210);
+
+ .drag {
+ background-color: rgb(180,180,180);
+ }
+ &.dragOn .drag {
+ background-color: rgb(150,150,150);
+ }
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ text-align: left;
+
+ li {
+ padding: 8px 24px 10px 24px;
+ white-space: nowrap;
+ border-top: 1px solid rgb(231,231,231);
+ .transition(all 0.2s ease-in-out);
+
+ &.current {
+ color: #333;
+ background-color: rgba(255,255,255,0.8);
+ }
+ &:hover {
+ color: #e80;
+ background-color: rgba(255,255,255,0.8);
+ }
+ }
+ }
+ }
+}
diff --git a/src/_h5ai/css/inc/mixins.less b/src/_h5ai/css/inc/mixins.less
index a9691734..e1ecd862 100644
--- a/src/_h5ai/css/inc/mixins.less
+++ b/src/_h5ai/css/inc/mixins.less
@@ -1,5 +1,4 @@
-
.border-radius (@radius) {
-webkit-border-radius: @radius; /* Saf3-4, iOS 1-3.2, Android <1.6 */
-moz-border-radius: @radius; /* FF1-3.6 */
@@ -56,4 +55,3 @@
-moz-background-size: @size; /* FF3.6 */
background-size: @size; /* Opera, IE9, Saf5, Chrome, FF4 */
}
-
diff --git a/src/_h5ai/css/inc/responsive.less b/src/_h5ai/css/inc/responsive.less
index 917b5236..3b0b52ca 100644
--- a/src/_h5ai/css/inc/responsive.less
+++ b/src/_h5ai/css/inc/responsive.less
@@ -1,5 +1,6 @@
+
@media only screen and (max-width: 500px) {
-body > nav {
+#topbar {
.view span {
display: none;
}
@@ -12,7 +13,7 @@ body > nav {
}
@media only screen and (max-width: 350px) {
-body > nav {
+#topbar {
.crumb {
display: none;
}
@@ -28,7 +29,7 @@ body > nav {
display: none;
}
}
-body > footer {
+#bottombar {
.center {
display: none;
}
@@ -39,18 +40,18 @@ body > footer {
a[href]:after {
content: "";
}
-body > nav {
+#topbar {
position: static;
margin-bottom: 2em;
.view, #download {
display: none;
}
}
-body > footer {
+#bottombar {
position: static;
margin-top: 2em;
}
#tree {
display: none !important;
}
-}
\ No newline at end of file
+}
diff --git a/src/_h5ai/css/inc/splash.less b/src/_h5ai/css/inc/splash.less
deleted file mode 100644
index c1d5e101..00000000
--- a/src/_h5ai/css/inc/splash.less
+++ /dev/null
@@ -1,59 +0,0 @@
-
-html.h5ai-splash {
- body {
- font-family: Ubuntu, Arial, sans;
- margin: 0 auto;
- font-size: 20px;
- color: #555;
- max-width: 600px;
- text-align: center;
-
- .h5ai {
- font-family: 'Miltonian Tattoo';
- font-weight: normal;
- }
- h1 {
- font-size: 3.6em;
- margin: 0.9em 0 0 0;
- }
- h2 {
- font-size: 1.15em;
- margin: 2.6em 0 0 0;
- }
- p {
- line-height: 1.6em;
- }
- p + p {
- margin-top: 1.2em;
- }
- li {
- margin-top: 0.6em;
- line-height: 1.4em;
- }
- #tests {
- display: inline-block;
- list-style-type: none;
- text-align: left;
- margin: 0;
- padding: 0;
-
- .test-label {
- display: inline-block;
- width: 300px;
- }
- .test-result {
- display: inline-block;
- width: 70px;
- text-align: right;
- font-weight: bold;
-
- &.test-passed {
- color: #5a5;
- }
- &.test-failed {
- color: #a55;
- }
- }
- }
- }
-}
diff --git a/src/_h5ai/css/inc/nav.less b/src/_h5ai/css/inc/topbar.less
similarity index 73%
rename from src/_h5ai/css/inc/nav.less
rename to src/_h5ai/css/inc/topbar.less
index 89c4f580..231fa4ee 100644
--- a/src/_h5ai/css/inc/nav.less
+++ b/src/_h5ai/css/inc/topbar.less
@@ -1,4 +1,16 @@
+#topbar {
+ position: fixed;
+ z-index: 5;
+ width: 100%;
+ left: 0;
+ top: 0;
+ font-size: @smaller-font;
+ .vert-gradient(rgb(241,241,241), rgb(228,228,228));
+ border-bottom: 1px solid rgb(210,210,210);
+}
+
+
.nav-highlight {
background-color: rgba(255,255,255,0.5);
opacity: 1.0;
@@ -21,23 +33,13 @@
border-left: @nav-sep-border;
}
-body > nav {
- position: fixed;
- z-index: 5;
- width: 100%;
- left: 0;
- top: 0;
- font-size: 0.85em;
- .vert-gradient(rgb(241,241,241), rgb(228,228,228));
- border-bottom: 1px solid rgb(210,210,210);
- span.jsDisabledFallback {
- display: block;
- height: 30px;
- line-height: 30px;
- padding: 0 10px;
- color: #999;
- }
+#navbar {
+ list-style: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+
a, a:active, a:visited, span.element {
color: #555;
cursor: pointer;
@@ -76,50 +78,54 @@ body > nav {
color: #999;
}
img.hint {
- width: 10px;
- height: 10px;
+ width: 14px;
+ height: 14px;
+ opacity: 0.8;
}
}
.view {
.nav-right;
}
- #download {
+}
+
+
+#filter {
+ .nav-right;
+
+ input {
display: none;
- .nav-right;
- .transition(all 0.2s ease-in-out);
-
- &.failed {
- background-color: rgba(255,0,0,0.5);
- }
+ border: none;
+ font-family: Ubuntu, sans-serif;
+ color: #555;
+ background-color: rgba(0,0,0,0);
+ width: 100px;
}
- #filter {
- .nav-right;
+ &.current {
input {
- display: none;
- border: none;
- font-family: Ubuntu, sans-serif;
- color: #555;
- background-color: rgba(0,0,0,0);
- width: 100px;
- }
-
- &.current {
- input {
- display: inline;
- }
+ display: inline;
}
}
}
+#download {
+ display: none;
+ .nav-right;
+ .transition(all 0.2s ease-in-out);
+
+ &.failed {
+ background-color: rgba(255,0,0,0.5);
+ }
+}
+
#download-auth {
display: none;
position: fixed;
z-index: 5;
left: 0;
top: 0;
- font-size: 0.85em;
+ font-size: @smaller-font;
.vert-gradient(rgb(241,241,241), rgb(228,228,228));
border: 1px solid rgb(210,210,210);
diff --git a/src/_h5ai/css/inc/tree.less b/src/_h5ai/css/inc/tree.less
index 6bd2e477..2c96fe3f 100644
--- a/src/_h5ai/css/inc/tree.less
+++ b/src/_h5ai/css/inc/tree.less
@@ -7,7 +7,7 @@
height: 100%;
z-index: 3;
overflow: auto;
- font-size: 0.85em;
+ font-size: @smaller-font;
padding: 8px;
background-color: rgb(241,241,241);
border-right: 2px solid rgb(221,221,221);
@@ -28,20 +28,12 @@
}
.entry {
- .blank, .indicator {
+ .indicator {
display: inline-block;
width: 16px;
height: 25px;
float: left;
- }
- .indicator {
- opacity: 0.7;
- .transition(all 0.2s ease-in-out);
- cursor: pointer;
- &:hover {
- opacity: 1;
- }
img {
position: relative;
left: 0;
@@ -52,13 +44,23 @@
.transition(all 0.2s ease-in-out);
}
&.open {
+ cursor: pointer;
+ opacity: 0.7;
img {
.transform(rotate(90deg));
}
}
+ &.close {
+ cursor: pointer;
+ opacity: 0.7;
+ }
&.unknown {
+ cursor: pointer;
opacity: 0.3;
}
+ &.none {
+ opacity: 0;
+ }
}
> a, > a:active, > a.visited {
margin-left: 16px;
@@ -92,16 +94,8 @@
margin-left: 12px;
font-size: 0.9em;
color: #ccc;
- img {
- width: 10px;
- height: 10px;
- vertical-align: baseline;
- }
}
}
- &.file {
- display: none;
- }
&.current {
> a, > a:active, > a:visited {
border: 1px solid rgb(221,221,221);
diff --git a/src/_h5ai/css/styles.less b/src/_h5ai/css/styles.less
index 0fd957b1..40923bd8 100644
--- a/src/_h5ai/css/styles.less
+++ b/src/_h5ai/css/styles.less
@@ -2,63 +2,37 @@
@import "inc/h5bp-norm";
@import "inc/mixins";
+::-moz-selection { background: #68A9FF; color: #fff; text-shadow: none; }
+::selection { background: #68A9FF; color: #fff; text-shadow: none; }
body {
font-family: Ubuntu, sans-serif;
font-size: 16px;
color: #555;
background-color: #fff;
- margin: 80px 30px;
+ margin: 30px;
}
-@import "inc/nav";
+@smaller-font: 15px;
+
+@import "inc/topbar";
@import "inc/content";
-@import "inc/table";
@import "inc/extended";
+@import "inc/bottombar";
+@import "inc/l10n";
@import "inc/tree";
@import "inc/context";
-@import "inc/footer";
+@import "inc/apache-autoindex-table";
@import "inc/responsive";
-html.js {
- .hideOnJs {
- display: none;
- }
-}
-html.no-js {
- .hideOnNoJs {
- display: none;
- }
-}
-html.h5ai-js {
- #h5ai-reference:after {
- content: " (js)";
- }
-}
-html.h5ai-php {
- #h5ai-reference:after {
- content: " (php)";
- }
-
- #table {
- display: none;
- }
-
- #tree, #content > header, #content > footer {
- display: block;
- }
-
- &.no-js {
- #extended.details-view, #extended.icons-view {
- display: block;
- }
- }
+html.js .hideOnJs, html.no-js .hideOnNoJs {
+ display: none;
}
html.oldie {
.oldBrowser {
- display: inline;
+ display: inline !important;
}
#tree {
display: none !important;
@@ -66,5 +40,4 @@ html.oldie {
}
-@import "inc/splash";
-
+@import "inc/h5ai-info";
diff --git a/src/_h5ai/footer.html b/src/_h5ai/footer.html
index f4d6a019..12a8c4d2 100644
--- a/src/_h5ai/footer.html
+++ b/src/_h5ai/footer.html
@@ -1,32 +1,4 @@
-
-
-
-
-
-
-
+
+