From 95f087cfd6f902c5a305b571326c433590bb1654 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Thu, 14 May 2015 14:22:40 +0200
Subject: [PATCH] Refactor info page.

---
 src/_h5ai/backend/php/pages/info.php.jade |  8 -----
 src/_h5ai/public/css/inc/main/info.less   | 13 +++----
 src/_h5ai/public/js/inc/main/info.js      | 42 +++++++++++++++++------
 3 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/_h5ai/backend/php/pages/info.php.jade b/src/_h5ai/backend/php/pages/info.php.jade
index 9fc61fee..9db6d1e7 100644
--- a/src/_h5ai/backend/php/pages/info.php.jade
+++ b/src/_h5ai/backend/php/pages/info.php.jade
@@ -10,11 +10,3 @@ block body
     div#content
         h1#header
             a(href='#{pkg.homepage}') #{pkg.name}
-
-        div#support
-            | Show your support with a donation!
-            div.paypal
-                form(action='https://www.paypal.com/cgi-bin/webscr', method='post', target='_blank')
-                    input(type='hidden', name='cmd', value='_s-xclick')
-                    input(type='hidden', name='hosted_button_id', value='8WSPKWT7YBTSQ')
-                    input(type='image', src!='#{public_href}images/ui/paypal.svg', name='submit', alt='PayPal')
diff --git a/src/_h5ai/public/css/inc/main/info.less b/src/_h5ai/public/css/inc/main/info.less
index d13f258b..1d36e6bd 100644
--- a/src/_h5ai/public/css/inc/main/info.less
+++ b/src/_h5ai/public/css/inc/main/info.less
@@ -33,20 +33,17 @@
     }
 
     #support {
-        margin: 12px auto 24px auto;
-        padding: 6px 18px;
-        width: 210px;
+        margin: 24px auto;
+        padding: 18px 0 6px 0;
+        width: 292px;
         background: @col-back-panel;
         border: 1px solid @col-border;
         border-radius: 4px;
 
-        .paypal {
-            margin: 12px 0 0 0;
-        }
-
         input[type="image"] {
             border: 0;
             width: 100px;
+            padding: 12px 48px;
         }
     }
 
@@ -78,7 +75,7 @@
         display: inline-block;
         text-align: left;
         list-style-type: none;
-        margin: 96px 0;
+        margin: 48px 0;
         padding: 0;
 
         .test {
diff --git a/src/_h5ai/public/js/inc/main/info.js b/src/_h5ai/public/js/inc/main/info.js
index 35918664..506a71ad 100644
--- a/src/_h5ai/public/js/inc/main/info.js
+++ b/src/_h5ai/public/js/inc/main/info.js
@@ -1,14 +1,14 @@
-modulejs.define('main/info', ['$', 'config', 'core/server'], function ($, config, server) {
+modulejs.define('main/info', ['$', 'config', 'core/resource', 'core/server'], function ($, config, resource, server) {
 
-    var testsTemp =
+    var tplTests =
             '<ul id="tests">';
-    var testTemp =
+    var tplTest =
             '<li class="test">' +
                 '<span class="label"></span>' +
                 '<span class="result"></span>' +
                 '<div class="info"></div>' +
             '</li>';
-    var loginTemp =
+    var tplLogin =
             '<div id="login-wrapper">' +
                 '<input id="pass" type="password" placeholder="password"/>' +
                 '<span id="login">login</span>' +
@@ -18,12 +18,23 @@ modulejs.define('main/info', ['$', 'config', 'core/server'], function ($, config
                     'Change it in \'_h5ai/conf/options.json\'.' +
                 '</div>' +
             '</div>';
+    var tplSupport =
+            '<div id="support">' +
+                'Show your support with a donation!' +
+                '<div class="paypal">' +
+                    '<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">' +
+                        '<input type="hidden" name="cmd" value="_s-xclick" />' +
+                        '<input type="hidden" name="hosted_button_id" value="8WSPKWT7YBTSQ" />' +
+                        '<input type="image" src="' + resource.image('paypal') + '" name="submit" alt="PayPal" />' +
+                    '</form>' +
+                '</div>' +
+            '</div>';
     var setup = config.setup;
 
 
     function addTest(label, info, passed, result) {
 
-        var $test = $(testTemp).appendTo('#tests');
+        var $test = $(tplTest).appendTo('#tests');
         $test.find('.label').text(label);
         $test.find('.result')
                 .addClass(passed ? 'passed' : 'failed')
@@ -33,13 +44,20 @@ modulejs.define('main/info', ['$', 'config', 'core/server'], function ($, config
 
     function addTests() {
 
-        $(testsTemp).appendTo('#content');
+        $(tplTests).appendTo('#content');
 
         addTest(
             'h5ai version', 'Only green if this is an official h5ai release',
             /^\d+\.\d+\.\d+$/.test(setup.VERSION), setup.VERSION
         );
 
+        if (setup.AS_ADMIN) {
+            addAdminTests();
+        }
+    }
+
+    function addAdminTests() {
+
         addTest(
             'Index file found', 'Add <code>' + setup.INDEX_HREF + '</code> to your index file list',
             setup.INDEX_HREF
@@ -133,9 +151,14 @@ modulejs.define('main/info', ['$', 'config', 'core/server'], function ($, config
         }
     }
 
+    function addSupport() {
+
+        $(tplSupport).appendTo('#content');
+    }
+
     function addLogin() {
 
-        $(loginTemp).appendTo('#content');
+        $(tplLogin).appendTo('#content');
 
         if (setup.AS_ADMIN) {
             $('#pass').remove();
@@ -153,10 +176,9 @@ modulejs.define('main/info', ['$', 'config', 'core/server'], function ($, config
 
     function init() {
 
+        addSupport();
         addLogin();
-        if (setup.AS_ADMIN) {
-            addTests();
-        }
+        addTests();
     }