Removes some redundancy.

This commit is contained in:
Lars Jung 2012-02-20 02:46:02 +01:00
parent 6bfbdb4d05
commit 8ee901517b
14 changed files with 293 additions and 323 deletions

View file

@ -0,0 +1,18 @@
#content {
max-width: 960px;
margin: 0 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;
}
}

View file

@ -0,0 +1,111 @@
body > footer {
position: fixed;
z-index: 1;
width: 100%;
left: 0;
bottom: 0;
padding: 6px 0 8px 0;
background-color: rgb(241,241,241);
border-top: 2px 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;
}
.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);
}
}
li:nth-child(3n+1) {
}
}
}
}
}

View file

@ -1,260 +0,0 @@
@import "h5bp-norm";
@import "mixins";
html.js {
.hideOnJs {
display: none;
}
}
html.no-js {
.hideOnNoJs {
display: none;
}
}
body {
font-family: Ubuntu, sans-serif;
font-size: 16px;
color: #555;
background-color: #fff;
margin: 80px 30px;
}
body > nav {
position: fixed;
z-index: 1;
width: 100%;
left: 0;
top: 0;
font-size: 0.85em;
background-color: rgb(241,241,241);
border-bottom: 2px solid rgb(210,210,210);
span.jsDisabledFallback {
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: #999;
}
a, a:active, a:visited, span.element {
color: #555;
cursor: pointer;
text-decoration: none;
opacity: 0.7;
.transition(all 0.2s ease-in-out);
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px;
&:hover, &.hover {
color: #e80;
background-color: rgba(255,255,255,0.5);
opacity: 1.0;
}
}
.current {
a, span.element {
background-color: rgba(255,255,255,0.5);
opacity: 1.0;
}
}
img {
position: relative;
top: -2px;
width: 16px;
height: 16px;
}
img + span, img + input {
margin-left: 6px;
}
.crumb {
float: left;
border-right: 1px solid rgb(231,231,231);
.hint {
margin-left: 8px;
font-style: italic;
color: #999;
}
img.hint {
width: 10px;
height: 10px;
}
}
.view {
float: right;
border-left: 1px solid rgb(231,231,231);
}
#download {
display: none;
float: right;
border-left: 1px solid rgb(231,231,231);
.transition(all 0.2s ease-in-out);
&.zipping {
}
&.failed {
background-color: rgba(255,0,0,0.5);
}
}
#filter {
float: right;
border-left: 1px solid rgb(231,231,231);
input {
border: none;
font-family: Ubuntu, sans-serif;
color: #555;
background-color: rgba(0,0,0,0);
width: 100px;
}
}
}
#content {
max-width: 960px;
margin: 0 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;
}
}
@import "table";
@import "extended";
@import "tree";
@import "context";
body > footer {
position: fixed;
z-index: 1;
width: 100%;
left: 0;
bottom: 0;
padding: 6px 0 8px 0;
background-color: rgb(241,241,241);
border-top: 2px 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;
}
.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);
}
}
li:nth-child(3n+1) {
}
}
}
}
}
@import "responsive";

View file

@ -0,0 +1,94 @@
body > nav {
position: fixed;
z-index: 1;
width: 100%;
left: 0;
top: 0;
font-size: 0.85em;
background-color: rgb(241,241,241);
border-bottom: 2px solid rgb(210,210,210);
span.jsDisabledFallback {
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: #999;
}
a, a:active, a:visited, span.element {
color: #555;
cursor: pointer;
text-decoration: none;
opacity: 0.7;
.transition(all 0.2s ease-in-out);
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px;
&:hover, &.hover {
color: #e80;
background-color: rgba(255,255,255,0.5);
opacity: 1.0;
}
}
.current {
a, span.element {
background-color: rgba(255,255,255,0.5);
opacity: 1.0;
}
}
img {
position: relative;
top: -2px;
width: 16px;
height: 16px;
}
img + span, img + input {
margin-left: 6px;
}
.crumb {
float: left;
border-right: 1px solid rgb(231,231,231);
.hint {
margin-left: 8px;
font-style: italic;
color: #999;
}
img.hint {
width: 10px;
height: 10px;
}
}
.view {
float: right;
border-left: 1px solid rgb(231,231,231);
}
#download {
display: none;
float: right;
border-left: 1px solid rgb(231,231,231);
.transition(all 0.2s ease-in-out);
&.zipping {
}
&.failed {
background-color: rgba(255,0,0,0.5);
}
}
#filter {
float: right;
border-left: 1px solid rgb(231,231,231);
input {
border: none;
font-family: Ubuntu, sans-serif;
color: #555;
background-color: rgba(0,0,0,0);
width: 100px;
}
}
}

View file

@ -1,2 +0,0 @@
@import "inc/main";

View file

@ -1,17 +0,0 @@
@import "inc/main";
#table {
display: none;
}
#tree, #content > header, #content > footer {
display: block;
}
html.no-js {
#extended.details-view, #extended.icons-view {
display: block;
}
}

58
src/_h5ai/css/main.less Normal file
View file

@ -0,0 +1,58 @@
@import "inc/h5bp-norm";
@import "inc/mixins";
body {
font-family: Ubuntu, sans-serif;
font-size: 16px;
color: #555;
background-color: #fff;
margin: 80px 30px;
}
@import "inc/nav";
@import "inc/content";
@import "inc/table";
@import "inc/extended";
@import "inc/tree";
@import "inc/context";
@import "inc/footer";
@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;
}
html.no-js {
#extended.details-view, #extended.icons-view {
display: block;
}
}
}

View file

@ -1,12 +1,10 @@
<!-- generated code ends here --> <!-- generated code ends here -->
</section> </section>
<section id="extended" class="clearfix"></section>
<footer></footer>
</section> </section>
<section id="tree"></section> <div id="selection-rect"></div>
<footer class="clearfix"> <footer class="clearfix">
<span class="left"> <span class="left">
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (js)</a> <a id="h5ai-reference" href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION%</a>
<span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span> <span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
</span> </span>
<span class="right"> <span class="right">

View file

@ -1,4 +0,0 @@
<!-- generated code ends here -->
</section>
</body>
</html>

View file

@ -13,16 +13,18 @@
<link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.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="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="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
<link rel="stylesheet" href="/_h5ai/css/main-js.css"> <link rel="stylesheet" href="/_h5ai/css/main.css">
<script src="/_h5ai/js/modernizr.min.js"></script> <script src="/_h5ai/js/modernizr.min.js"></script>
</head> </head>
<body> <body>
<div id="selection-rect"></div>
<nav class="clearfix hideOnNoJs"> <nav class="clearfix hideOnNoJs">
<ul id="navbar"></ul> <ul id="navbar"></ul>
</nav> </nav>
<section id="tree"></section>
<section id="content"> <section id="content">
<header></header> <header></header>
<section id="extended" class="clearfix"></section>
<footer></footer>
<section id="table" class="hideOnJs"> <section id="table" class="hideOnJs">
<!-- <!--
The following code was generated by Apache's autoindex module. It is not valid HTML5, but this The following code was generated by Apache's autoindex module. It is not valid HTML5, but this

View file

@ -14,11 +14,10 @@
<link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.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="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="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
<link rel="stylesheet" href="/_h5ai/css/main-php.css"> <link rel="stylesheet" href="/_h5ai/css/main.css">
<script src="/_h5ai/js/modernizr.min.js"></script> <script src="/_h5ai/js/modernizr.min.js"></script>
</head> </head>
<body> <body>
<div id="selection-rect"></div>
<nav class="clearfix"> <nav class="clearfix">
<ul id="navbar"> <ul id="navbar">
<?php echo $crumb->toHtml(); ?> <?php echo $crumb->toHtml(); ?>
@ -29,32 +28,5 @@
<?php echo $customize->getHeader(); ?> <?php echo $customize->getHeader(); ?>
<?php echo $extended->toHtml(); ?> <?php echo $extended->toHtml(); ?>
<?php echo $customize->getFooter(); ?> <?php echo $customize->getFooter(); ?>
</section> <section id="table" class="hideOnJs">
<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 id="langSelector">
<span class="lang">en</span> - <span class="l10n-lang">english</span>
<span class="langOptions"></span>
</span>
</span>
<span class="center">
<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/config.js"></script>
<script src="/_h5ai/js/main.js"></script>
<section id="table">
<!-- The following code was generated by Apache's autoindex module and gets ignored and removed from the DOM tree. --> <!-- The following code was generated by Apache's autoindex module and gets ignored and removed from the DOM tree. -->

View file

@ -6,6 +6,7 @@
* kudos to http://github.com/jeromeetienne/jquery-qrcode * kudos to http://github.com/jeromeetienne/jquery-qrcode
*/ */
(function ($) { (function ($) {
'use strict';
// @include "qrcode.js" // @include "qrcode.js"

View file

@ -5,7 +5,6 @@
* *
* still quick and dirty! * still quick and dirty!
*/ */
(function (window, $) { (function (window, $) {
"use strict"; "use strict";

View file

@ -8,11 +8,11 @@
# pure JavaScript version # pure JavaScript version
HeaderName /_h5ai/header.html HeaderName /_h5ai/header.html
ReadmeName /_h5ai/footer.html
# PHP version # PHP version
# HeaderName /_h5ai/header.php # HeaderName /_h5ai/header.php
# ReadmeName /_h5ai/footer.php
ReadmeName /_h5ai/footer.html
IndexIgnore _h5ai* IndexIgnore _h5ai*