diff --git a/README.md b/README.md
index 09b07593..71fe04eb 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# h5ai v0.4 · a beautified Apache index
+# h5ai v0.5 · a beautified Apache index
## Screenshots
@@ -47,6 +47,13 @@ please respect their rights.
## Changelog
+### v0.5
+*2011-07-01*
+
+* added tree sidebar
+* some refactorings
+
+
### v0.4
*2011-06-27*
diff --git a/build.properties b/build.properties
index 49916daa..453bf8d1 100644
--- a/build.properties
+++ b/build.properties
@@ -3,7 +3,7 @@ custom = true
# project
project.name = h5ai
-project.version = 0.4
+project.version = 0.5
# src
diff --git a/src/h5ai/css/inc/extended.less b/src/h5ai/css/inc/extended.less
index 589111c7..ca79f4ff 100644
--- a/src/h5ai/css/inc/extended.less
+++ b/src/h5ai/css/inc/extended.less
@@ -1,86 +1,82 @@
#extended.details-view {
display: none;
+
ul {
margin: 0;
padding: 0;
list-style: none;
- }
- li {
- white-space: nowrap;
- }
- li.header a {
- padding-bottom: 18px;
- color: #555;
- opacity: 0.4;
- cursor: pointer;
- .transition( all 0.2s ease-in-out );
- &:visited {
- color: #555;
- }
- &:hover {
- color: #555;
- opacity: 0.9;
- }
- img {
- width: 12px;
- height: 12px;
- padding: 0 8px;
- }
- }
- li.entry {
- display: block;
- border-bottom: 1px solid #ddd;
- &:first-child {
- border-top: 1px solid #ddd;
- }
- a, a:hover {
- display: block;
- cursor: pointer;
- &:hover {
- background-color: #f0f0f0;
- color: #e80;
+ li {
+ white-space: nowrap;
+
+ &.header a {
+ padding-bottom: 18px;
+ color: #555;
+ opacity: 0.4;
+ cursor: pointer;
+ .transition( all 0.2s ease-in-out );
+
+ &:visited {
+ color: #555;
+ }
+ &:hover {
+ color: #555;
+ opacity: 0.9;
+ }
+ img {
+ width: 12px;
+ height: 12px;
+ padding: 0 8px;
+ }
+ }
+ &.entry {
+ border-bottom: 1px solid #ddd;
+
+ a {
+ display: block;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #f6f6f6;
+ color: #e80;
+ }
+ }
+ }
+ .icon, .label, .date, .size {
+ display: inline-block;
+ padding: 3px 6px 6px 6px;
+ text-align: left;
+ }
+ .icon {
+ text-align: center;
+ width: 16px;
+
+ img {
+ padding-top: 4px;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ .icon.big {
+ display: none;
+ }
+ .label {
+ width: 682px;
+ white-space: nowrap;
+ }
+ .date {
+ text-align: right;
+ width: 160px;
+ white-space: nowrap;
+ }
+ .size {
+ text-align: right;
+ width: 70px;
+ white-space: nowrap;
}
}
}
- .icon, .label, .date, .size {
- display: inline-block;
- padding: 3px 6px 6px 6px;
- text-align: left;
- border: none;
- }
- .icon {
- text-align: center;
- width: 16px;
-
- img {
- padding-top: 4px;
- width: 16px;
- height: 16px;
- }
- }
- .icon.big {
- display: none;
- }
- .label {
- width: 682px;
- max-width: 682px;
- overflow: hidden;
- white-space: nowrap;
- }
- .date {
- text-align: right;
- width: 160px;
- min-width: 160px;
- white-space: nowrap;
- }
- .size {
- text-align: right;
- width: 70px;
- min-width: 70px;
- white-space: nowrap;
- }
.empty {
text-align: center;
margin: 50px 0;
@@ -101,48 +97,54 @@
margin: 0;
padding: 0;
list-style: none;
- }
- li.header {
- display: none;
- }
- li.entry {
- float: left;
- a {
- display: block;
- margin: 8px;
- padding: 8px;
- width: 100px;
- height: 120px;
- float: left;
- text-align: center;
- overflow: hidden;
- border-radius: 5px;
- cursor: pointer;
- border: 1px solid rgba(0,0,0,0);
-
- &:hover {
- color: #e80;
- border-color: #eee;
- .box-shadow( 0, 0, 20px, #999 );
+ li {
+ &.header {
+ display: none;
}
- .icon {
- display: block;
- img {
- width: 48px;
- height: 48px;
- margin-bottom: 8px;
+ &.entry {
+ float: left;
+
+ a {
+ display: block;
+ margin: 8px;
+ padding: 8px;
+ width: 100px;
+ height: 120px;
+ float: left;
+ text-align: center;
+ overflow: hidden;
+ border-radius: 5px;
+ cursor: pointer;
+ border: 2px solid rgba(0,0,0,0);
+
+ &:hover {
+ color: #e80;
+ border-color: #eee;
+ background-color: #f6f6f6;
+ //.box-shadow( 0, 0, 20px, #999 );
+ }
+ .icon {
+ display: block;
+
+ img {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 8px;
+ }
+ }
+ .icon.small {
+ display: none;
+ }
+ .label {
+ display: block;
+ word-wrap: break-word;
+ }
+ .date, .size {
+ display: none;
+ }
}
}
- .icon.small {
- display: none;
- }
- .label {
- display: block;
- }
- .date, .size {
- display: none;
- }
}
}
.empty {
diff --git a/src/h5ai/css/inc/mixins.less b/src/h5ai/css/inc/mixins.less
index b3a70839..ad807251 100644
--- a/src/h5ai/css/inc/mixins.less
+++ b/src/h5ai/css/inc/mixins.less
@@ -6,20 +6,6 @@
}
-.border-top-right-radius ( @radius: 5px ) {
- -moz-border-radius-topright: @radius;
- -webkit-border-top-right-radius: @radius;
- border-top-right-radius: @radius;
-}
-
-
-.border-bottom-right-radius ( @radius: 5px ) {
- -moz-border-radius-bottomright: @radius;
- -webkit-border-bottom-right-radius: @radius;
- border-bottom-right-radius: @radius;
-}
-
-
.box-shadow ( @x: 10px, @y: 10px, @blur: 5px, @color: #ccc ) {
-moz-box-shadow: @x @y @blur @color;
-webkit-box-shadow: @x @y @blur @color;
@@ -50,46 +36,3 @@
background-size: @size;
}
-
-.rhythm ( @height, @size ) {
-
- @base: @size / 16;
- font-size: 1% * @base * 100;
- @factor: @height / @size;
- @rhythm: 1em * @factor;
-
- p {
- font-size: 1em;
- line-height: @rhythm;
- margin-top: @rhythm;
- margin-bottom: @rhythm;
- }
-
- h1 {
- font-size: @rhythm;
- line-height: 1em;
- margin-bottom: 1em;
- margin-top: 1em;
- }
-
- h2 {
- font-size: @rhythm / 1.1;
- line-height: 1.1em;
- margin-bottom: 1.1em;
- margin-top: 1.1em;
- }
-
- h3 {
- font-size: @rhythm / 1.2;
- line-height: 1.2em;
- margin-bottom: 1.2em;
- margin-top: 1.2em;
- }
-
- h4 {
- font-size: @rhythm / 1.3;
- line-height: 1.3em;
- margin-bottom: 1.3em;
- margin-top: 1.3em;
- }
-}
diff --git a/src/h5ai/css/inc/tree.less b/src/h5ai/css/inc/tree.less
new file mode 100644
index 00000000..9377317f
--- /dev/null
+++ b/src/h5ai/css/inc/tree.less
@@ -0,0 +1,71 @@
+
+#tree {
+ display: none;
+ position: fixed;
+ left: 0;
+ top: 80px;
+ font-size: 0.85em;
+ padding: 16px 32px 16px 16px;
+ background-color: rgb(240,240,240);
+ border: 1px solid rgb(225,225,225);
+ border-left: none;
+ .border-radius ( 0 15px 15px 0 );
+ .box-shadow( 0, 0, 30px, #999 );
+
+ .entry {
+ > a, > a.visited {
+ padding: 4px 6px;
+ border: 1px solid rgba(0,0,0,0);
+ .border-radius( 5px );
+ display: block;
+ opacity: 0.7;
+
+ &:hover {
+ background-color: rgba(255,255,255,0.5);
+ opacity: 1;
+ }
+ .label {
+ display: inline-block;
+ }
+ .icon {
+ display: inline-block;
+ width: 20px;
+ img {
+ width: 16px;
+ height: 16px;
+ vertical-align: bottom;
+ }
+ }
+ .hint {
+ display: inline-block;
+ margin-left: 12px;
+ font-style: italic;
+ color: #ccc;
+ img {
+ width: 10px;
+ height: 10px;
+ vertical-align: baseline;
+ }
+ }
+ .error {
+ color: #c55;
+ }
+ }
+ &.current {
+ > a, > a:visited {
+ border: 1px solid rgba(0,0,0,0.1);
+ background-color: rgba(255,255,255,0.5);
+ opacity: 1;
+ }
+ }
+ &.notListable {
+ > a, > a:visited {
+ color: #999;
+ }
+ }
+ ul {
+ list-style: none;
+ margin-left: 20px;
+ }
+ }
+}
diff --git a/src/h5ai/css/main.less b/src/h5ai/css/main.less
index 701e2780..d390a4ce 100644
--- a/src/h5ai/css/main.less
+++ b/src/h5ai/css/main.less
@@ -58,14 +58,29 @@ body > nav {
&.crumb {
float: left;
border-right: 1px dotted rgb(225,225,225);
+ .hint {
+ margin-left: 8px;
+ font-style: italic;
+ color: #999;
+ }
+ img.hint {
+ width: 10px;
+ height: 10px;
+ vertical-align: baseline;
+ padding: 0px;
+ }
+ }
+ &.current {
+ background-color: rgba(255,255,255,0.5);
+ opacity: 1.0;
}
&.view {
float: right;
border-left: 1px dotted rgb(225,225,225);
}
&:hover, &:hover a {
- color: #e80;
background-color: rgba(255,255,255,0.5);
+ color: #e80;
opacity: 1.0;
}
}
@@ -105,6 +120,7 @@ body > nav {
@import "inc/table";
@import "inc/extended";
+@import "inc/tree";
body > footer {
diff --git a/src/h5ai/footer.html b/src/h5ai/footer.html
index 3e6ae4f6..5f9f10e4 100644
--- a/src/h5ai/footer.html
+++ b/src/h5ai/footer.html
@@ -3,6 +3,7 @@
+