From eb20529d08f351cd0754e60845cdd26c0b847913 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Thu, 16 Jun 2011 01:24:49 +0200
Subject: [PATCH] Some fixes and colored links.

---
 README.md        | 64 ++++++++++++++++++++++++++++++++----------------
 dot.htaccess     | 23 ++++++++---------
 h5ai/footer.html |  2 +-
 h5ai/header.html |  2 +-
 h5ai/main.css    | 39 ++++++++++++++++++++++++-----
 h5ai/main.js     |  1 +
 6 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 49d11fd2..1044d0fa 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,67 @@
 h5ai - a beautified Apache index
 ================================
 
-Screenshot
-----------
+Screenshots
+-----------
 
-<img
-	width="800"
+<a href="http://repo.larsjung.de/screens/h5ai.png"><img
+	width="400"
 	src="http://repo.larsjung.de/screens/h5ai.png"
 	alt="screenshot"
 	title="screenshot"
 	style="border: 1px solid #ccc"
-/>
+/></a>
 
-
-compare it to apache's built in autoindex:
-
-<img
-	width="800"
-	src="http://repo.larsjung.de/screens/ai.png"
-	alt="apache autoindex"
-	title="apache autoindex"
+<a href="http://repo.larsjung.de/screens/h5ai-0.2.png"><img
+	width="400"
+	src="http://repo.larsjung.de/screens/h5ai-0.2.png"
+	alt="screenshot"
+	title="screenshot"
 	style="border: 1px solid #ccc"
-/>
+/></a>
 
 
 Live example
 ------------
 
-For a live experience browse [here](http://repo.larsjung.de/h5ai-sample)  
+View a [sample folder](http://repo.larsjung.de/h5ai-sample)  
 *(the files are all empty to save webspace)*
 
 
 Install
 -------
 
-* Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
-  this folder.
-* Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
-  you want to be indexed (you might have to create this file). This directory and any subdirectories will be
-  styled.
+1. Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
+   this folder.
+2. Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
+   you want to be indexed (you might have to create this file). This directory and any subdirectories will be
+   styled.
+
+
+Changelog
+---------
+
+### v0.2.1
+*2011-06-16*
+
+* fixed croped filenames
+* fixed missing .png extension in header
+* removed .html extension from Header-/ReadmeName references in dot.htaccess
+* added some color to the links
+* added changelog
+
+### v0.2
+*2011-06-15*
+
+* added icon view
+
+
+Author
+------
+
+Lars Jung  
+[project site](http://github.com/larrrs/h5ai)  
+[website](http://larsjung.de)
 
 
 License
@@ -53,4 +76,3 @@ It is based on the awesome [HTML5 Boilerplate](http://html5boilerplate.com) and
 [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228), please respect their rights.
 
 
-
diff --git a/dot.htaccess b/dot.htaccess
index f5e312ab..daf72ac9 100644
--- a/dot.htaccess
+++ b/dot.htaccess
@@ -16,8 +16,8 @@
 	# h5ai header and footer
 	################################
 
-	HeaderName           /h5ai/header.html
-	ReadmeName           /h5ai/footer.html
+	HeaderName           /h5ai/header
+	ReadmeName           /h5ai/footer
 
 
 	################################
@@ -44,21 +44,26 @@
 	IndexOptions         IgnoreCase
 	IndexOptions         IconsAreLinks
 	IndexOptions         VersionSort
+	IndexOptions         NameWidth=*
 
 
 	################################
 	# icon mapping
 	################################
 
-	AddIcon              /h5ai/icons/log.png         log  Log  LOG
-	AddIcon              /h5ai/icons/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/install.png     INSTALL
-	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/parent.png      ..
+	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
+	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
+
 	AddIcon              /h5ai/icons/readme.png      README
+	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/log.png         LOG  Log  log
 
 	AddIcon              /h5ai/icons/css.png         .less
-	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
 	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
 	AddIcon              /h5ai/icons/bin.png         .so  .o
 
 	AddIcon              /h5ai/icons/zip.png         .zip  .Z  .z  .jar  .war
@@ -105,10 +110,6 @@
 
 	AddIconByEncoding    /h5ai/icons/zip.png         x-compress  x-gzip  x-bzip2
 
-	AddIcon              /h5ai/icons/parent.png      ..
-	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
-
 	DefaultIcon          /h5ai/icons/unknown.png
 
 </IfModule>
diff --git a/h5ai/footer.html b/h5ai/footer.html
index faf27983..ca2d2214 100644
--- a/h5ai/footer.html
+++ b/h5ai/footer.html
@@ -9,7 +9,7 @@
 			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
 			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
 		</a>
-		<a href="http://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2">h5ai</a>
+		<a href="http://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2.1">h5ai</a>
 		using
 		<a href="http://html5boilerplate.com" target="_blank" title="a rock-solid default for HTML5 awesome">HTML5 Boilerplate</a>
 		and
diff --git a/h5ai/header.html b/h5ai/header.html
index e421cb6f..01265b91 100644
--- a/h5ai/header.html
+++ b/h5ai/header.html
@@ -12,7 +12,7 @@
 	<nav>
 		<ul>
 			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
-			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons" alt="view-icons" />icons</a></li>
+			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
 			<li id="details" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
 		</ul>
 		<div class="clearfix"></div>
diff --git a/h5ai/main.css b/h5ai/main.css
index 3400bed1..0891c342 100644
--- a/h5ai/main.css
+++ b/h5ai/main.css
@@ -15,7 +15,7 @@ a, a:visited {
 	text-decoration: none;
 }
 a:hover {
-	color: #333;
+	color: #e80;
 }
 
 
@@ -34,8 +34,13 @@ nav {
 nav li {
 	cursor: pointer;
 	opacity: 0.7;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 }
 nav li:hover, nav li:hover a {
+	color: #e80;
 	background-color: rgba(255,255,255,0.5);
 	opacity: 1.0;
 }
@@ -91,8 +96,8 @@ table {
 }
 table tr.entry:hover, table tr.entry:hover a {
 	background-color: rgb(235,245,250);
-	background-color: #eeeeee;
-	color: #333;
+	background-color: #f0f0f0;
+	color: #e80;
 	cursor: pointer;
 }
 table th, table td {
@@ -103,8 +108,13 @@ table th, table td {
 table th {
 	padding-bottom: 18px;
 	opacity: 0.4;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 }
-table th.header:hover {
+table th.header:hover, table th.header:hover a {
+	color: #555;
 	cursor: pointer;
 	opacity: 0.9;
 }
@@ -167,7 +177,7 @@ div#empty {
 	border-radius: 15px;
 }
 #box .entry {
-	margin: 10px;
+	margin: 8px;
 	padding: 8px;
 	width: 100px;
 	height: 120px;
@@ -176,8 +186,11 @@ div#empty {
 	overflow: hidden;
 	border-radius: 5px;
 	cursor: pointer;
+	border: 1px solid rgba(0,0,0,0);
 }
 #box .entry:hover {
+	color: #e80;
+	border-color: #eee;
 	-webkit-box-shadow: 0px 0px 20px #555;
 	-moz-box-shadow: 0px 0px 20px #555;
 	box-shadow: 0px 0px 20px #999;
@@ -211,6 +224,16 @@ footer {
 	-moz-box-shadow: 0px 0px 30px #555;
 	box-shadow: 0px 0px 30px #555;
 }
+footer a, footer a:visited {
+	color: #555;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
+}
+footer a:hover {
+	color: #e80;
+}
 
 
 #html5 {
@@ -220,9 +243,13 @@ footer {
 	float: left;
 }
 #html5 img {
-	opacity: 0.4;
 	width: 20px;
 	height: 20px;
+	opacity: 0.4;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 }
 #html5:hover img {
 	opacity: 0.8;
diff --git a/h5ai/main.js b/h5ai/main.js
index 92cdc6d1..aa8c48e8 100644
--- a/h5ai/main.js
+++ b/h5ai/main.js
@@ -140,6 +140,7 @@
 			$( "#content #box" ).show();
 		} else {
 			$( "#content table" ).show();
+			$( "#content #empty" ).show();
 			$( "#content #box" ).hide();
 		}
 	};