From 70e348ac502665ff5e2ea401ca9a6e1c38c4bbc9 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Thu, 4 Dec 2014 13:13:08 +0100
Subject: [PATCH] Fix info page.

---
 src/_h5ai/client/css/inc/filter.less      |   5 +-
 src/_h5ai/client/css/inc/h5ai-info.less   | 104 ++++++++++------------
 src/_h5ai/client/css/inc/topbar.less      |   4 +-
 src/_h5ai/client/js/inc/ext/thumbnails.js |   2 +-
 src/_h5ai/client/js/inc/info.js           |   8 +-
 src/_h5ai/index.html.jade                 |   4 +-
 6 files changed, 60 insertions(+), 67 deletions(-)

diff --git a/src/_h5ai/client/css/inc/filter.less b/src/_h5ai/client/css/inc/filter.less
index 9909d2e8..9320b630 100644
--- a/src/_h5ai/client/css/inc/filter.less
+++ b/src/_h5ai/client/css/inc/filter.less
@@ -5,10 +5,11 @@
     input {
         border: none;
         font-family: @font-family;
+        font-weight: lighter;
         color: @col;
-        background-color: rgba(0,0,0,0);
+        background: transparent;
         width: 30px;
-        outline: none;
+        outline: 0;
     }
 
     &.current {
diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less
index 2ad595b0..82055ca0 100644
--- a/src/_h5ai/client/css/inc/h5ai-info.less
+++ b/src/_h5ai/client/css/inc/h5ai-info.less
@@ -1,20 +1,15 @@
 
 body#h5ai-info {
-    margin: 2em auto 4em auto;
-    // font-size: 20px;
-    color: @col;
-    max-width: 600px;
-    text-align: center;
 
-    a, a:active, a:visited {
+    #content {
+        flex: 1 1 auto;
+        order: 50;
         color: @col;
-        text-decoration: none;
-        .transition(all 0.2s ease-in-out);
-
-        &:hover {
-            color: @col-hover;
-        }
+        text-align: center;
+        background: #fff;
+        overflow-y: scroll;
     }
+
     code {
         margin: 0 0.2em;
         padding: 2px 4px;
@@ -23,21 +18,33 @@ body#h5ai-info {
         letter-spacing: 0.1em;
         background-color: @col-widget-back;
         border: @border-widget;
+        font-size: 0.8em;
     }
+
     h1 {
         font-size: 3.6em;
-        margin: 0;
+        margin: 0.8em 0 0 0;
     }
+
     h2 {
         font-size: 1.15em;
         margin: 2.6em 0 0 0;
     }
 
+    #header a {
+        color: @col;
+        text-decoration: none;
+        .transition(all 0.2s ease-in-out);
+
+        &:hover {
+            color: @col-hover;
+        }
+    }
 
     #support {
         margin: 12px auto 24px auto;
         padding: 6px 18px;
-        width: 164px;
+        width: 180px;
         background: @col-widget-back;
         border: @border-widget;
         border-radius: 4px;
@@ -47,11 +54,6 @@ body#h5ai-info {
         }
     }
 
-
-    #login-wrapper {
-        font-size: 14px;
-    }
-
     #pass {
         -moz-appearance: none;
         -ms-appearance: none;
@@ -82,63 +84,53 @@ body#h5ai-info {
         text-decoration: none;
         .transition(all 0.2s ease-in-out);
 
-        &:hover, &.hover {
-            background-color: @col-widget-back-highlight;
+        &:hover {
             color: @col-hover;
         }
     }
 
     #hint {
         margin: 12px auto;
-        width: 360px;
+        width: 380px;
         color: @col;
     }
 
-
-    #tests-wrapper {
-        margin: 96px 0;
-    }
-
     #tests {
         display: inline-block;
-        list-style-type: none;
         text-align: left;
-        margin: 0;
+        list-style-type: none;
+        margin: 96px 0;
         padding: 0;
+        font-size: 1.4em;
 
         .test {
             margin: 12px 0 0 0;
             padding: 6px;
+        }
+        .label {
+            display: inline-block;
+            width: 250px;
+        }
+        .result {
+            display: inline-block;
+            width: 250px;
+            text-align: right;
+            font-weight: bold;
 
-            .label {
-                display: inline-block;
-                width: 250px;
+            &.passed {
+                color: #5a5;
             }
-            .result {
-                display: inline-block;
-                width: 250px;
-                text-align: right;
-                font-weight: bold;
-
-                &.passed {
-                    color: #5a5;
-                }
-                &.failed {
-                    color: #a55;
-                }
-            }
-            .info {
-                margin: 4px 0 12px 12px;
-                font-size: 0.7em;
-                color: #aaa;
-                width: 460px;
-                line-height: 1.2em;
+            &.failed {
+                color: #a55;
             }
         }
-    }
-
-
-    #bottombar {
-
+        .info {
+            margin: 4px 0 12px 12px;
+            font-size: 0.7em;
+            font-weight: lighter;
+            color: #aaa;
+            width: 460px;
+            line-height: 1.2em;
+        }
     }
 }
diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less
index 993a27ee..d5ccc076 100644
--- a/src/_h5ai/client/css/inc/topbar.less
+++ b/src/_h5ai/client/css/inc/topbar.less
@@ -25,7 +25,7 @@
 
 .topbar-right {
     float: right;
-    border-left: @border-widget-sep;
+    // border-left: @border-widget-sep;
 }
 
 
@@ -57,6 +57,8 @@
     .current {
         font-weight: bold;
     }
+    .element {
+    }
     img {
         position: relative;
         top: -1px;
diff --git a/src/_h5ai/client/js/inc/ext/thumbnails.js b/src/_h5ai/client/js/inc/ext/thumbnails.js
index 5dc59fdd..39c1b7d6 100644
--- a/src/_h5ai/client/js/inc/ext/thumbnails.js
+++ b/src/_h5ai/client/js/inc/ext/thumbnails.js
@@ -1,4 +1,4 @@
-modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/server'], function (_, allsettings, event, server) {
+modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/server', 'core/resource'], function (_, allsettings, event, server, resource) {
 
     var settings = _.extend({
             enabled: false,
diff --git a/src/_h5ai/client/js/inc/info.js b/src/_h5ai/client/js/inc/info.js
index 84b9225e..209da696 100644
--- a/src/_h5ai/client/js/inc/info.js
+++ b/src/_h5ai/client/js/inc/info.js
@@ -1,9 +1,7 @@
 modulejs.define('info', ['$', 'config'], function ($, config) {
 
     var testsTemp =
-            '<div id="tests-wrapper">' +
-                '<ul id="tests">' +
-            '</div>';
+            '<ul id="tests">';
     var testTemp =
             '<li class="test">' +
                 '<span class="label"></span>' +
@@ -41,7 +39,7 @@ modulejs.define('info', ['$', 'config'], function ($, config) {
 
     function addTests() {
 
-        $(testsTemp).appendTo('body');
+        $(testsTemp).appendTo('#content');
 
         addTest(
             'Index file found', 'Add <code>' + setup.INDEX_HREF + '</code> to your index file list',
@@ -147,7 +145,7 @@ modulejs.define('info', ['$', 'config'], function ($, config) {
 
     function addLogin() {
 
-        $(loginTemp).appendTo('body');
+        $(loginTemp).appendTo('#content');
 
         if (setup.AS_ADMIN) {
             $('#pass').remove();
diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade
index 8259a35d..90692f2b 100644
--- a/src/_h5ai/index.html.jade
+++ b/src/_h5ai/index.html.jade
@@ -14,8 +14,8 @@ head
 
 body#h5ai-info
 
-    div#main-row
-        h1
+    div#content
+        h1#header
             a( href="#{pkg.homepage}" ) #{pkg.name}
 
         div#support