A lot of changes!

ramlmn · Oct 14, 2016 · a36e7e8 · a36e7e8
1 parent b5b1792
commit a36e7e8
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 260 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -1,21 +1,25 @@
-# Apache-directory-listing
-`Apache directory listing` is a theme inspired from [Apaxy](https://github.com/AdamWhitcroft/Apaxy) which uses Apache's `mod_autoindex` module.  
+# Apache-Directory-Listing
+'Apache Directory Listing' is a theme inspired from [Apaxy](https://github.com/AdamWhitcroft/Apaxy) which uses Apache's `mod_autoindex` module.  
 
-# Installation
-* Download and copy all the files of directory-listing folder to any folder in the server(root directory is highly preferred).
-* Copy any one of the `.htaccess` from either the 'grid' or 'table' folder to the root directory.
-* Open the `.htaccess` file and replace `{SOME_FOLDER}` to the location of folder that you copied the files.  
+# Usage
+* Download or clone the repo and copy all the files of `directory-listing` folder to any folder in the server(root directory is highly preferred).
+* Copy the `.htaccess` file to the root directory of your server.
+* Open the `.htaccess` file and
+  * Replace `{SOME_FOLDER}` to the location of `directory-listing` folder on your server.
+  * Finally replace `{VIEW}` to either `grid` or `table`.
 
 # Themes
-The theme is included with two css files for grid(grid.css) and normal(row.css) table styled indexing.  
-Just use any one of the .htaccess file from the 'grid' folder or 'table' folder.  
+The theme is included with two css files for grid(`grid.css`) and normal(`table.css`) for table styled indexing.
+
+Just change the `{VIEW}` in `.htaccess` to either `grid` or `table`.
+
 You can add your custom code in the `header.html` and `footer.html`.
 
 ### Grid style:  
-![Grid Screenshot](https://raw.githubusercontent.com/Ramlmn/Apache-directory-listing/master/screenshots/grid.png)  
+![grid](https://cloud.githubusercontent.com/assets/12368291/19376773/8444eaa6-91fe-11e6-9a1e-d233553191a6.png)  
 
 ### Table style:  
-![Table Screenshot](https://raw.githubusercontent.com/Ramlmn/Apache-directory-listing/master/screenshots/table.png)  
+![table](https://cloud.githubusercontent.com/assets/12368291/19376783/951cc542-91fe-11e6-91d1-4a41b7880f7f.png)  
 
-# Credits
-This theme uses icons from [File Types Icons Set](http://uifest.com/product/file-types-icons-set).
+## Credits
+Icons referenced from [File Types Icons Set](http://uifest.com/product/file-types-icons-set).
diff --git a/directory-listing/.htaccess b/directory-listing/.htaccess
@@ -0,0 +1,64 @@
+# Indexing
+
+Options +Indexes
+
+  # INDEX OPTIONS
+  IndexOptions +Charset=UTF-8 +FancyIndexing +IgnoreCase +FoldersFirst +XHTML +HTMLTable +SuppressRules +SuppressDescription -SuppressSize -SuppressLastModified +NameWidth=* +IconsAreLinks
+
+  # META TAGS
+  IndexHeadInsert "<meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1'><meta http-equiv='X-UA-Compatible' content='IE=edge'>"
+
+# GENERAL ICONS (BLANK, DIRECTORY, PARENT DIRECTORY)
+
+  AddIcon /{SOME_FOLDER}/icons/blank.svg ^^BLANKICON^^
+  AddIcon /{SOME_FOLDER}/icons/folder.svg ^^DIRECTORY^^
+  AddIcon /{SOME_FOLDER}/icons/folder-home.svg ..
+
+  #AddIconByType (TXT,/{SOME_FOLDER}/icons/text.svg) text/*
+  AddIconByType (IMG,/{SOME_FOLDER}/icons/img.svg) image/*
+  AddIconByType (SND,/{SOME_FOLDER}/icons/audio.svg) audio/*
+  AddIconByType (VID,/{SOME_FOLDER}/icons/video.svg) video/*
+
+#
+# EXTENSION SPECIFIC ICONS
+#
+
+  DefaultIcon /{SOME_FOLDER}/icons/unknown.svg
+
+  AddIcon /{SOME_FOLDER}/icons/archive.svg .zip .7z .bz2 .cab .gz .tar .rar
+  AddIcon /{SOME_FOLDER}/icons/audio.png .aac .aif .aifc .aiff .ape .au .flac .iff .m4a .mid .mp3 .mpa .ra .wav .wma .f4a .f4b .oga .ogg .xm .it .s3m .mod
+  AddIcon /{SOME_FOLDER}/icons/bin.svg .bin .hex
+  AddIcon /{SOME_FOLDER}/icons/code.svg .xml
+  AddIcon /{SOME_FOLDER}/icons/doc.svg .doc .docx .docm .dot .dotx .dotm .log .msg .odt .pages .rtf .tex .wpd .wps
+  AddIcon /{SOME_FOLDER}/icons/img.svg .bmp .png .tiff .tif .gif .jpg .jpeg .jpe .psd .ai .ico
+  AddIcon /{SOME_FOLDER}/icons/spreadsheet.svg .xlsx .xlsm .xltx .xltm .xlam .xlr .xls .csv
+  AddIcon /{SOME_FOLDER}/icons/presentation.svg .ppt .pptx .pot .potx .pptm .potm .xps
+  AddIcon /{SOME_FOLDER}/icons/c++.svg .cpp
+  AddIcon /{SOME_FOLDER}/icons/c.svg .c
+  AddIcon /{SOME_FOLDER}/icons/css3.svg .css .sass .scss .less
+  AddIcon /{SOME_FOLDER}/icons/font.svg .ttf .TTF .woff .WOFF .woff2 .WOFF2 .otf .OTF
+  AddIcon /{SOME_FOLDER}/icons/h.svg .h
+  AddIcon /{SOME_FOLDER}/icons/html5.svg .html .xhtml .shtml .htm .URL .url
+  AddIcon /{SOME_FOLDER}/icons/info.svg .nfo .info
+  AddIcon /{SOME_FOLDER}/icons/iso.svg .iso .img
+  AddIcon /{SOME_FOLDER}/icons/java.svg .jar .java
+  AddIcon /{SOME_FOLDER}/icons/js.svg .js .json
+  AddIcon /{SOME_FOLDER}/icons/markdown.svg .md
+  AddIcon /{SOME_FOLDER}/icons/package.svg .pkg .dmg .rpm .deb
+  AddIcon /{SOME_FOLDER}/icons/pdf.svg .pdf
+  AddIcon /{SOME_FOLDER}/icons/php.svg .php .phtml
+  AddIcon /{SOME_FOLDER}/icons/py.svg .py
+  AddIcon /{SOME_FOLDER}/icons/rb.svg .rb
+  AddIcon /{SOME_FOLDER}/icons/script.svg .bat .BAT .cmd .sh .ps .exe .EXE .msi .MSI
+  AddIcon /{SOME_FOLDER}/icons/sql.svg .sql
+  AddIcon /{SOME_FOLDER}/icons/text.svg .txt .cnf .conf .map .yaml
+  AddIcon /{SOME_FOLDER}/icons/vector.svg .svg .svgz
+  AddIcon /{SOME_FOLDER}/icons/video.svg .asf .asx .avi .flv .mkv .mov .mp4 .mpg .rm .srt .swf .vob .wmv .m4v .f4v .f4p .ogv
+
+#
+# THEME FILES
+#
+
+  HeaderName /{SOME_FOLDER}/header.html
+  ReadmeName /{SOME_FOLDER}/footer.html
+  IndexStyleSheet "/{SOME_FOLDER}/{VIEW}.css"
diff --git a/directory-listing/footer.html b/directory-listing/footer.html
@@ -1,16 +1,25 @@
-</div><!--/.wrapper-->
+  </main>
 
-  <div class="footer block">
+  <footer>
     <i>Apache directory</i>
-  </div><!--/.footer-->
-  <script type="text/javascript">
-    // grab the 2nd child and add the parent class. tr:nth-child(2)
-    document.getElementsByTagName('tr')[1].className = 'parent';
+  </footer>
+
+  <script>
+
+    (function(){
+
+      var parent = document.querySelector('tr:not(.indexhead)');
+      parent.classList.add('parent');
 
-    [].forEach.call(document.querySelectorAll('tr'), function(tr) {
-      tr.addEventListener("click", function(){
-        window.location.href = this.querySelectorAll('a')[0].href;
-      });
-    });
+      // Make all the icon links unfocusable with tab
+      var icolinks = document.querySelectorAll('.indexcolicon a');
+      [].forEach.call(icolinks, function(link) {
+
+        link.setAttribute('tabindex', '-1');
 
+      });
+
+    })();
+
   </script>
+
diff --git a/directory-listing/grid.css b/directory-listing/grid.css
@@ -1,47 +1,42 @@
 * {
-  margin: 0;
-  padding: 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
-html {
-  min-height: 100%;
-  color: #61666c;
+html,
+body {
+  margin: 0;
+  color: #404040;
   font-size: 16px;
   font-family: Roboto, Ubuntu, 'Open Sans', sans-serif;
-  line-height: 1.5em;
-  border-top: 10px solid #7f8c8d;
-  border-bottom: 10px solid #7f8c8d;
+  line-height: 1.5;
 }
 
 body {
-  padding: 0;
-  margin: 0;
-  -webkit-backface-visibility: hidden;
+  min-height: 100vh;
+  border-top: 10px solid #7f8c8d;
+  border-bottom: 10px solid #7f8c8d;
 }
 
-.wrapper {
+main {
   margin: 0 auto;
   padding-top: 50px;
   max-width: 1120px;
 }
 
-.block {
-  margin: 20px 0;
-  padding: 20px;
-  color: #9099A3;
-}
-
 table {
   width: 100%;
   border-collapse: collapse;
 }
 
+tbody {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 tr {
   width: 120px;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   margin: 10px;
   border: 1px solid #ddd;
   cursor: pointer;
@@ -59,29 +54,9 @@ tr.indexhead {
 	display: none;
 }
 
-th {
-  text-align: left;
-	font-size: 1.05em;
-  padding: 5px 10px;
-}
-
-th + th {
-  width: 70%;
-}
-
-th + th + th + th {
-  width: 5%;
-}
-
-td {
-  display: inline-block;
-  padding: 5px 10px;
-  vertical-align: middle;
-  text-align: left;
-}
-
-td.indexcolname {
-  max-width: 100%;
+tr td {
+  display: flex;
+  padding: 0;
 }
 
 td.indexcolname a {
@@ -90,61 +65,67 @@ td.indexcolname a {
   text-overflow: ellipsis;
 }
 
-td a {
-  display: block;
+td.indexcollastmod,
+td.indexcolsize {
+  display: none;
 }
 
-tr a {
+td a {
 	color: #2980b9;
 	text-decoration: none;
+  padding: 8px;
+  flex: 1;
 }
 
 img {
+  width: 100%;
   height: 100%;
 }
 
-.footer {
+footer {
   text-align: center;
+  margin: 20px 0;
+  padding: 20px;
+  color: #9099A3;
 }
 
 
-/* SCREEN RULES */
-/*=============================================================================*/
-
-/* MOBILE DEVICES */
+
+
+
 @media only screen and (min-width: 320px) {
-  .wrapper {
+  main {
     max-width: 280px;
   }
 }
- 
+
 @media only screen and (min-width: 480px) {
-  .wrapper {
+  main {
     max-width: 420px;
   }
 }
- 
- 
+
+
 @media only screen and (min-width: 640px) {
-  .wrapper {
+  main {
     max-width: 560px;
   }
 }
- 
+
 @media only screen and (min-width: 768px) {
-  .wrapper {
+  main {
     max-width: 700px;
   }
 }
- 
+
 @media only screen and (min-width: 1024px) {
-  .wrapper {
+  main {
     max-width: 980px;
   }
 }
- 
+
 @media only screen and (min-width: 1280px) {
-  .wrapper {
+  main {
     max-width: 1120px;
   }
 }
diff --git a/directory-listing/grid/.htaccess b/directory-listing/grid/.htaccess
diff --git a/directory-listing/header.html b/directory-listing/header.html
@@ -1 +1 @@
-<div class="wrapper">
+  <main>