Changes a lot... forgot to commit.

README.md

@@ -1,10 +1,17 @@
 # h5ai
 
+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).
+
+Please create [a new issue](http://github.com/lrsjng/h5ai/issues/new)
+to report a bug or make a feature request.
+
 * Website with download, docs and demo: <http://larsjung.de/h5ai>
 * Sources: <http://github.com/lrsjng/h5ai>
 * Q&A group: <http://groups.google.com/group/h5ai>
 
-h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).  
+h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).
 
 
 ## h5ai profits from these great projects
@@ -20,6 +27,22 @@ h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h
 
 ## Changelog
 
+### v0.17 · *2011-11-??*
+
+* h5ai is now located in `_h5ai` to reduce collisions
+* switches from HTML5 Boilerplate reset to normalization
+* adds some style changes for small devices
+* configuration (options, types, translations) now via `config.js`
+* icons for JS version are now configured via `config.js`
+* sort order configuration changed
+* sorting is now done without page reload
+* adds `customHeader` and `customFooter` to `config.js`
+* supports restricted folders to some extent
+* some style changes on tree and language menu
+* fixes total file/folder count in status bar
+* adds support for use with userdir (requires some manual changes)
+
+
 ### v0.16 · *2011-11-02*
 
 * sorts translations in `options.js`
@@ -153,7 +176,7 @@ h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h
 
 * removed slashes from folder labels
 * optionally rename parent folder entries to real folder names, see `options.js`
-* long breadcrumbs (multiple rows) no longer hide content 
+* long breadcrumbs (multiple rows) no longer hide content
 * error folder icons are opaque now
 * refactored js a lot (again...)
 

build.properties

@@ -3,7 +3,7 @@ custom             = true
 
 # project
 project.name       = h5ai
-project.version    = 0.16
+project.version    = 0.17
 
 
 # src
@@ -17,4 +17,7 @@ release.dir        = release
 
 # tools
 tool.wepp          = tools/wepp
+tool.jslint        = jslint
+tool.jshint        = jshint
+tool.jsxint.file   = ${build.dir}/_h5ai/js/main-js.js
 

build.xml

@@ -37,13 +37,13 @@
     </target>
 
     <target name="build" depends="build-prepare">
-        <wepp.dir dir="${build.dir}/h5ai/css" />
-        <wepp.dir dir="${build.dir}/h5ai/js" />
+        <wepp.dir dir="${build.dir}/_h5ai/css" />
+        <wepp.dir dir="${build.dir}/_h5ai/js" />
     </target>
 
     <target name="build-uncompressed" depends="build-prepare">
-        <wepp.dir dir="${build.dir}/h5ai/css" args="--nc" />
-        <wepp.dir dir="${build.dir}/h5ai/js" args="--nc" />
+        <wepp.dir dir="${build.dir}/_h5ai/css" args="--nc" />
+        <wepp.dir dir="${build.dir}/_h5ai/js" args="--nc" />
     </target>
 
     <target name="release" depends="build">
@@ -54,4 +54,25 @@
         <delete file="${release.dir}/${project.name}-${project.version}.tar" />
     </target>
 
+    <target name="pre-xint" depends="build-prepare">
+        <wepp file="${tool.jsxint.file}" tofile="${tool.jsxint.file}" args="--nc" />
+    </target>
+
+    <target name="lint" depends="pre-xint">
+        <echo>JSLint "${tool.jsxint.file}"</echo>
+        <exec executable="${tool.jslint}" failonerror="true">
+            <arg value="${tool.jsxint.file}" />
+        </exec>
+    </target>
+
+    <target name="hint" depends="pre-xint">
+        <echo>JSHint "${tool.jsxint.file}"</echo>
+        <exec executable="${tool.jshint}" failonerror="true">
+            <arg value="${tool.jsxint.file}" />
+        </exec>
+    </target>
+
+    <target name="xint" depends="lint,hint">
+    </target>
+
 </project>

src/_h5ai/config.js

@@ -0,0 +1,411 @@
+/*
+ * h5ai %BUILD_VERSION%
+ *
+ * Configuration
+ * options, types and localization
+ */
+
+H5AI_CONFIG = {
+
+    "options": {
+
+        /*
+         * The absolute links to webroot and h5ai.
+         * Do not change this unless you know what you are doing.
+         */
+        "rootAbsHref": "/",
+        "h5aiAbsHref": "/_h5ai/",
+
+        /*
+         * Filenames of customized header and footer files to look for
+         * in each folder.
+         */
+        "customHeader": "_h5ai.header.html",
+        "customFooter": "_h5ai.footer.html",
+
+        /*
+         * An array of view modes the user may choose from. Currently there
+         * are two possible values: "details" and "icons". 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
+         * so that it will be persistent.
+         */
+        "viewmodes": ["details", "icons"],
+
+        /*
+         * Default sort order is a two letter code. The first letter specifies
+         * the column: "n" for "Name", "d" for "Date" or "s" for "Size". The
+         * second letter specifies the sort order: "a" for "ascending" or "d"
+         * for "descending".
+         */
+        "sortorder": "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.
+         */
+        "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 date.js
+         * http://code.google.com/p/datejs/wiki/FormatSpecifiers
+         */
+        "dateFormat": "yyyy-MM-dd HH:mm",
+
+        /*
+         * Requires PHP on the server.
+         * Show thumbnails for image files.
+         */
+        "showThumbs": true,
+
+        /*
+         * Requires PHP on the server.
+         * Enable zipped download of selected entries.
+         */
+        "zippedDownload": true
+    },
+
+
+    /*
+     * File types mapped to file extensions.
+     */
+    "types": {
+        "archive":          [".tar.bz2", ".tar.gz", ".tgz"],
+        "audio":            [".aif", ".m4a", ".mid", ".mp3", ".mpa", ".ra", ".ogg", ".wav", ".wma"],
+        "authors":          ["authors"],
+        "bin":              [".class", ".o", ".so"],
+        "blank":            [],
+        "bmp":              [".bmp"],
+        "c":                [".c"],
+        "calc":             [".ods", ".ots", ".xlr", ".xls", ".xlsx"],
+        "cd":               [".cue", ".iso"],
+        "copying":          ["copying", "license"],
+        "cpp":              [".cpp"],
+        "css":              [".css", ".less"],
+        "deb":              [".deb"],
+        "default":          [],
+        "doc":              [".doc", ".docx", ".odm", ".odt", ".ott"],
+        "draw":             [".drw"],
+        "eps":              [".eps"],
+        "exe":              [".exe"],
+        "folder":           [],
+        "folder-home":      [],
+        "folder-open":      [],
+        "folder-page":      [],
+        "folder-parent":    [],
+        "gif":              [".gif"],
+        "gzip":             [".gz"],
+        "h":                [".h"],
+        "hpp":              [".hpp"],
+        "html":             [".htm", ".html", ".shtml"],
+        "ico":              [".ico"],
+        "image":            [".xpm"],
+        "install":          ["install"],
+        "java":             [".java"],
+        "jpg":              [".jpg", ".jpeg"],
+        "js":               [".js", ".json"],
+        "log":              [".log", "changelog"],
+        "makefile":         [".pom", "build.xml", "pom.xml"],
+        "package":          [],
+        "pdf":              [".pdf"],
+        "php":              [".php"],
+        "playlist":         [".m3u"],
+        "png":              [".png"],
+        "pres":             [".odp", ".otp", ".pps", ".ppt", ".pptx"],
+        "psd":              [".psd"],
+        "py":               [".py"],
+        "rar":              [".rar"],
+        "rb":               [".rb"],
+        "readme":           ["readme"],
+        "rpm":              [".rpm"],
+        "rss":              [".rss"],
+        "rtf":              [".rtf"],
+        "script":           [".conf", ".csh", ".ini", ".ksh", ".sh", ".shar", ".tcl"],
+        "source":           [],
+        "sql":              [],
+        "tar":              [".tar"],
+        "tex":              [".tex"],
+        "text":             [".markdown", ".md", ".text", ".txt"],
+        "tiff":             [".tiff"],
+        "unknown":          [],
+        "vcal":             [".vcal"],
+        "video":            [".avi", ".flv", ".mov", ".mp4", ".mpg", ".rm", ".swf", ".vob", ".wmv"],
+        "xml":              [".xml"],
+        "zip":              [".bz2", ".jar", ".war", ".z", ".Z", ".zip"]
+    },
+
+
+    /*
+     * Available translations.
+     */
+    "langs": {
+
+        "en": {
+            "lang": "english",
+            "details": "details",
+            "icons": "icons",
+            "name": "Name",
+            "lastModified": "Last modified",
+            "size": "Size",
+            "parentDirectory": "Parent Directory",
+            "empty": "empty",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "bg": {
+            "lang": "български",
+            "details": "детайли",
+            "icons": "икони",
+            "name": "Име",
+            "lastModified": "Последна промяна",
+            "size": "Размер",
+            "parentDirectory": "Предходна директория",
+            "empty": "празно",
+            "folders": "папки",
+            "files": "файлове",
+            "download": "download"
+        },
+
+        "cs": {
+            "lang": "čeština",
+            "details": "podrobnosti",
+            "icons": "ikony",
+            "name": "Název",
+            "lastModified": "Upraveno",
+            "size": "Velikost",
+            "parentDirectory": "Nadřazený adresář",
+            "empty": "prázdný",
+            "folders": "složek",
+            "files": "souborů",
+            "download": "download"
+        },
+
+        "de": {
+            "lang": "deutsch",
+            "details": "Details",
+            "icons": "Icons",
+            "name": "Name",
+            "lastModified": "Geändert",
+            "size": "Größe",
+            "parentDirectory": "Übergeordnetes Verzeichnis",
+            "empty": "leer",
+            "folders": "Ordner",
+            "files": "Dateien",
+            "download": "Download"
+        },
+
+        "es": {
+            "lang": "español",
+            "details": "Detalles",
+            "icons": "Íconos",
+            "name": "Nombre",
+            "lastModified": "Última modificación",
+            "size": "Tamaño",
+            "parentDirectory": "Directorio superior",
+            "empty": "vacío",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "fr": {
+            "lang": "français",
+            "details": "détails",
+            "icons": "icônes",
+            "name": "Nom",
+            "lastModified": "Dernière modification",
+            "size": "Taille",
+            "parentDirectory": "Dossier parent",
+            "empty": "vide",
+            "folders": "Répertoires",
+            "files": "Fichiers",
+            "download": "télécharger"
+        },
+
+        "it": {
+            "lang": "italiano",
+            "details": "dettagli",
+            "icons": "icone",
+            "name": "Nome",
+            "lastModified": "Ultima modifica",
+            "size": "Dimensione",
+            "parentDirectory": "Cartella Superiore",
+            "empty": "vuota",
+            "folders": "cartelle",
+            "files": "file",
+            "download": "download"
+       },
+
+        "lv": {
+            "lang": "latviešu",
+            "details": "detaļas",
+            "icons": "ikonas",
+            "name": "Nosaukums",
+            "lastModified": "Pēdējoreiz modificēts",
+            "size": "Izmērs",
+            "parentDirectory": "Vecākdirektorijs",
+            "empty": "tukšs",
+            "folders": "mapes",
+            "files": "faili",
+            "download": "lejupielādēt"
+        },
+
+        "nl": {
+            "lang": "nederlands",
+            "details": "details",
+            "icons": "iconen",
+            "name": "Naam",
+            "lastModified": "Laatste wijziging",
+            "size": "Grootte",
+            "parentDirectory": "Bovenliggende map",
+            "empty": "lege",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "pl": {
+            "lang": "polski",
+            "details": "szczegóły",
+            "icons": "ikony",
+            "name": "Nazwa",
+            "lastModified": "Ostatnia modyfikacja",
+            "size": "Rozmiar",
+            "parentDirectory": "Katalog nadrzędny",
+            "empty": "pusty",
+            "folders": "foldery",
+            "files": "pliki",
+            "download": "download"
+        },
+
+        "pt": {
+            "lang": "português",
+            "details": "detalhes",
+            "icons": "ícones",
+            "name": "Nome",
+            "lastModified": "Última modificação",
+            "size": "Tamanho",
+            "parentDirectory": "Diretório superior",
+            "empty": "vazio",
+            "folders": "pastas",
+            "files": "arquivos",
+            "download": "download"
+        },
+
+        "ru": {
+            "lang": "русский",
+            "details": "детали",
+            "icons": "иконки",
+            "name": "Имя",
+            "lastModified": "Последние изменения",
+            "size": "Размер",
+            "parentDirectory": "Главная директория",
+            "empty": "пусто",
+            "folders": "папки",
+            "files": "файлы",
+            "download": "download"
+        },
+
+        "sk": {
+            "lang": "slovenčina",
+            "details": "podrobnosti",
+            "icons": "ikony",
+            "name": "Názov",
+            "lastModified": "Upravené",
+            "size": "Velkosť",
+            "parentDirectory": "Nadriadený priečinok",
+            "empty": "prázdny",
+            "folders": "priečinkov",
+            "files": "súborov",
+            "download": "download"
+        },
+
+        "sv": {
+            "lang": "svenska",
+            "details": "detaljerad",
+            "icons": "ikoner",
+            "name": "Filnamn",
+            "lastModified": "Senast ändrad",
+            "size": "Filstorlek",
+            "parentDirectory": "Till överordnad mapp",
+            "empty": "tom",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "tr": {
+            "lang": "türkçe",
+            "details": "detaylar",
+            "icons": "ikonlar",
+            "name": "İsim",
+            "lastModified": "Son Düzenleme",
+            "size": "Boyut",
+            "parentDirectory": "Üst Dizin",
+            "empty": "boş",
+            "folders": "klasörler",
+            "files": "dosyalar",
+            "download": "indir"
+        },
+
+        "zh-cn": {
+            "lang": "简体中文",
+            "details": "详情",
+            "icons": "图标",
+            "name": "文件名",
+            "lastModified": "上次修改",
+            "size": "大小",
+            "parentDirectory": "上层文件夹",
+            "empty": "空文件夹",
+            "folders": "文件夹",
+            "files": "文件",
+            "download": "download"
+        }
+    }
+};

src/_h5ai/css/inc/extended.less

@@ -21,14 +21,23 @@
                     cursor: pointer;
                     .transition(all 0.2s ease-in-out);
 
+                    img.ascending, img.descending {
+                        position: relative;
+                        top: -2px;
+                        display: none;
+                        width: 12px;
+                        height: 12px;
+                        padding: 0 8px;
+                    }
                     &:hover {
                         color: #555;
                         opacity: 0.9;
                     }
-                    img {
-                        width: 12px;
-                        height: 12px;
-                        padding: 0 8px;
+                    &.ascending img.ascending {
+                        display: inline;
+                    }
+                    &.descending img.descending {
+                        display: inline;
                     }
                 }
             }
@@ -86,12 +95,15 @@
                 display: inline-block;
                 position: absolute;
                 left: 0;
-                top: 2px;
+                top: -2px;
                 width: 16px;
 
                 img {
                     width: 16px;
                     height: 16px;
+                    &.thumb {
+                        border: 1px solid #eee;
+                    }
                 }
             }
             .icon.big {
@@ -204,6 +216,9 @@
                             min-width: 48px;
                             min-height: 48px;
                             margin-bottom: 8px;
+                            &.thumb {
+                                border: 1px solid #eee;
+                            }
                         }
                     }
                     .icon.small {

src/_h5ai/css/inc/h5bp-norm.less

@@ -0,0 +1,295 @@
+/* 
+ * HTML5 ✰ Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling. 
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ * 
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Force vertical scrollbar in non-IE
+ * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+//html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+/* 
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9 
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/* 
+ * 1. Correct color not inheriting in IE6/7/8/9 
+ * 2. Correct alignment displayed oddly in IE6/7 
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ * 2. Correct inner spacing displayed oddly in IE6/7
+ */
+
+button, input { line-height: normal; *overflow: visible; }
+
+/*
+ * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
+ */
+
+table button, table input { *overflow: auto; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+/* 
+ * Remove inner padding and border in FF3/4: h5bp.com/l 
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/* 
+ * 1. Remove default vertical scrollbar in IE6/7/8/9 
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+/* Colors for form validity */
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author: 
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */ 
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+
+/* ==|== media queries ======================================================
+   PLACEHOLDER Media Queries for Responsive Design.
+   These override the primary ('mobile first') styles
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 480px) {
+  /* Style adjustments for viewports 480px and over go here */
+
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over go here */
+
+}
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+ 
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
+

src/_h5ai/css/inc/main.less

@@ -1,5 +1,5 @@
 
-@import "html5reset";
+@import "h5bp-norm";
 @import "mixins";
 
 
@@ -19,10 +19,12 @@ body {
     font-family: Ubuntu, sans-serif;
     font-size: 16px;
     color: #555;
+    background-color: #fff;
     margin: 80px 30px;
 }
 
 
+
 body > nav {
     position: fixed;
     z-index: 1;
@@ -63,10 +65,13 @@ body > nav {
         opacity: 1.0;
     }
     img {
+        position: relative;
+        top: -2px;
         width: 16px;
         height: 16px;
-        vertical-align: bottom;
-        padding: 0 6px 6px 0;
+    }
+    img + span {
+        margin-left: 6px;
     }
     .crumb {
         float: left;
@@ -79,8 +84,6 @@ body > nav {
         img.hint {
             width: 10px;
             height: 10px;
-            vertical-align: baseline;
-            padding: 0px;
         }
     }
     .view {
@@ -151,13 +154,17 @@ body > footer {
     }
     .center {
         display: block;
-        margin: 0 300px;
+        margin: 0 100px;
     }
     .right {
         display: block;
         padding: 0 8px;
         float: right
     }
+    .noJsMsg {
+        color: #c33;
+        margin-left: 16px;
+    }
     .status {
         .sep {
             display: inline-block;
@@ -176,12 +183,27 @@ body > footer {
         .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;
@@ -203,8 +225,13 @@ body > footer {
                         background-color: rgba(255,255,255,0.8);
                     }
                 }
+                li:nth-child(3n+1) {
+
+                }
             }
         }
     }
 }
 
+@import "responsive";
+

src/_h5ai/css/inc/responsive.less

@@ -0,0 +1,36 @@
+@media only screen and (max-width: 500px) {
+body > nav {
+    .view span {
+        display: none;
+    }
+}
+#extended.icons-view {
+    padding: 0;
+    border: none;
+    margin: 0 -14px;
+}
+}
+
+@media only screen and (max-width: 350px) {
+body > nav {
+    .crumb {
+        display: none;
+    }
+    .current {
+        display: block;
+    }
+} 
+#extended.details-view {
+    .header .label, .entry .label {
+        margin-right: 110px;
+    }
+    .header .date, .entry .date {
+        display: none;
+    }
+}
+body > footer {
+    .center {
+        display: none;
+    }
+}
+}

src/_h5ai/css/inc/tree.less

@@ -7,14 +7,14 @@
     z-index: 1;
     overflow: auto;
     font-size: 0.85em;
-    padding: 16px 16px 16px 16px;
+    padding: 8px;
     background-color: rgb(241,241,241);
-    border: 2px solid rgb(210,210,210);
+    border: 1px solid rgb(210,210,210);
     border-left: none;
-    .border-radius (0 15px 15px 0);
+    .border-radius(0 10px 10px 0);
 
     > .scrollbar {
-        margin: 12px 12px 12px 0;
+        margin: 8px 8px 8px 0;
         width: 6px;
         background-color: rgb(210,210,210);
         .border-radius(3px);
@@ -121,9 +121,10 @@
                 color: #c55;
             }
         }
-        .content {
+        .content, ul.content {
             list-style: none;
-            margin-left: 20px;
+            margin: 0;
+            padding: 0 0 0 24px;
         }
     }
 }

src/_h5ai/footer.html

@@ -7,9 +7,9 @@
     <footer class="clearfix">
         <span class="left">
             <a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (js)</a>
+            <span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
         </span>
         <span class="right">
-            <span class="hideOnJs">JavaScript is disabled!</span>
             <span id="langSelector">
                 <span class="lang">en</span> - <span class="l10n-lang">english</span>
                 <span class="langOptions"></span>
@@ -18,17 +18,17 @@
         <span class="center">
             <span class="hideOnNoJs">
                 <span class="status default">
-                    <span class="folderCount"></span> <span class="l10n-folders">folders</span>
+                    <span class="folderTotal"></span> <span class="l10n-folders">folders</span>
                     <span class='sep'>·</span>
-                    <span class="fileCount"></span> <span class="l10n-files">files</span>
+                    <span class="fileTotal"></span> <span class="l10n-files">files</span>
                 </span>
                 <span class="status dynamic">
                 </span>
             </span>
         </span>
     </footer>
-    <script src="/h5ai/js/libs.js"></script>
-    <script src="/h5ai/options.js"></script>
-    <script src="/h5ai/js/main-js.js"></script>
+    <script src="/_h5ai/js/libs.js"></script>
+    <script src="/_h5ai/config.js"></script>
+    <script src="/_h5ai/js/main-js.js"></script>
 </body>
 </html>

src/_h5ai/header.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Directory index · styled with h5ai</title>
+    <meta name="h5ai-version" content="h5ai %BUILD_VERSION% (js)">
+    <meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.png">
+    <link rel="apple-touch-icon" type="image/png" href="/_h5ai/images/h5ai-48x48.png">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
+    <link rel="stylesheet" href="/_h5ai/css/main-js.css">
+    <script src="/_h5ai/js/modernizr.min.js"></script>
+</head>
+<body>
+    <div id="selection-rect"></div>
+    <nav class="clearfix hideOnNoJs">
+        <ul id="navbar"></ul>
+    </nav>
+    <section id="content">
+        <header></header>
+        <section id="table" class="hideOnJs">
+            <!--
+                The following code was generated by Apache's autoindex module. It is not valid HTML5, but this
+                section gets removed from the DOM tree as soon as its information is parsed. The actual page
+                should render as valid HTML5, even if the produced source is not valid HTML5.
+            -->

src/_h5ai/header.php

@@ -11,26 +11,17 @@
     <meta name="h5ai-version" content="h5ai %BUILD_VERSION% (php)">
     <meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png">
-    <link rel="apple-touch-icon" type="image/png" href="/h5ai/images/h5ai-48x48.png">
+    <link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.png">
+    <link rel="apple-touch-icon" type="image/png" href="/_h5ai/images/h5ai-48x48.png">
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
-    <link rel="stylesheet" href="/h5ai/css/main-php.css">
-    <script src="/h5ai/js/modernizr.min.js"></script>
+    <link rel="stylesheet" href="/_h5ai/css/main-php.css">
+    <script src="/_h5ai/js/modernizr.min.js"></script>
 </head>
 <body>
     <div id="selection-rect"></div>
     <nav class="clearfix">
-        <ul>
+        <ul id="navbar">
             <?php echo $crumb->toHtml(); ?>
-            <li id="viewicons" class="view hideOnNoJs">
-                <a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-icons">icons</span></a>
-            </li>
-            <li id="viewdetails" class="view hideOnNoJs" >
-                <a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-details">details</span></a>
-            </li>
-            <li id="download" class="hideOnNoJs">
-                <a href="#"><img src="/h5ai/images/download.png" alt="download" /><span class="l10n-download">download</span></a>
-            </li>
         </ul>
     </nav>
     <?php echo $tree->toHtml(); ?>
@@ -38,30 +29,35 @@
         <?php echo $customize->getHeader(); ?>
         <?php echo $extended->toHtml(); ?>
         <?php echo $customize->getFooter(); ?>
+        <?php echo $h5ai->getDocRoot() . "<br/>"; ?>
+        <?php echo $h5ai->getH5aiRoot() . "<br/>"; ?>
+        <?php echo $h5ai->getHrefRoot() . "<br/>"; ?>
     </section>
     <footer class="clearfix">
         <span class="left">
             <a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (php)</a>
+            <span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
         </span>
         <span class="right">
-            <span class="hideOnJs">JavaScript is disabled!</span>
             <span id="langSelector">
                 <span class="lang">en</span> - <span class="l10n-lang">english</span>
                 <span class="langOptions"></span>
             </span>
         </span>
         <span class="center">
-            <span class="status default">
-                <?php echo $extended->getFolderCount(); ?> <span class="l10n-folders">folders</span>
-                <span class='sep'>·</span>
-                <?php echo $extended->getFileCount(); ?> <span class="l10n-files">files</span>
-            </span>
-            <span class="status dynamic">
+            <span class="hideOnNoJs">
+                <span class="status default">
+                    <span class="folderTotal"></span> <span class="l10n-folders">folders</span>
+                    <span class='sep'>·</span>
+                    <span class="fileTotal"></span> <span class="l10n-files">files</span>
+                </span>
+                <span class="status dynamic">
+                </span>
             </span>
         </span>
     </footer>
-    <script src="/h5ai/js/libs.js"></script>
-    <script src="/h5ai/options.js"></script>
-    <script src="/h5ai/js/main-php.js"></script>
+    <script src="/_h5ai/js/libs.js"></script>
+    <script src="/_h5ai/config.js"></script>
+    <script src="/_h5ai/js/main-php.js"></script>
     <section id="table">
-        <!-- the following code was generated by apache's autoindex module and gets ignored -->
+        <!-- The following code was generated by Apache's autoindex module and gets ignored and removed from the DOM tree. -->