error msg moved into results list and info message added describing how recommendations can be searched when the sidebar was loaded. #9 fixed

Author: kunzstef

Scripts.html

@@ -30,10 +30,12 @@
      * the sidebar UI with the results from the privacy proxy.
      */
     function getRecommendationsFromInput() {
+        removeInfo();
         removeError();
+
         var keyword = $("#eexcess-search").val();
         if(keyword == "") {
-            showError("Please enter some text.", $('#button-bar'));
+            showError("Please enter some text.");
         } else {
             this.disabled = true;
             fetchAndDisplayRecommendations(keyword, this);
@@ -86,7 +88,7 @@
                 removeAjaxLoader();
 
                 if (lastSearchedText == text)
-                    showError("The server timed out waiting for the request.", $('#button-bar'));
+                    showError("The server timed out waiting for the request.");
 
                 if (button)
                     button.disabled = false;
@@ -110,7 +112,7 @@
                 function(errorMsg, button) {
                     if(!timeout && lastSearchedText ==  text) {
                         removeAjaxLoader();
-                        showError(errorMsg, $('#button-bar'));
+                        showError(errorMsg);
 
                         if (button)
                             button.disabled = false;
@@ -195,7 +197,7 @@
                 container.append(template);
             })
         } else {
-            showError("No results found", $('#button-bar'));
+            showError("No results found");
         }
     }
 
@@ -205,10 +207,10 @@
      * @param msg The error message to display.
      * @param element The element after which to display the error.
      */
-    function showError(msg, element) {
+    function showError(msg) {
         removeError();
         var div = $('<div id="error" class="error">' + msg + '</div>');
-        $(element).after(div);
+        $("#eexcess-recommendations-list").after(div);
     }
 
     /**
@@ -218,12 +220,21 @@
         $("#error").remove();
     }
 
+    /**
+     * Removes the initially added info message.
+     */
+    function removeInfo() {
+        $("#info").remove();
+    }
+
     /**
      * Inserts the ajax loader icon.
      */
     function showAjaxLoader() {
-        if ($("#ajax-loader-container").length == 0)
-            $('<div id="ajax-loader-container"><img src="http://mics.fim.uni-passau.de/wp-content/uploads/2014/10/ajax-loader.gif" width="16px" height="16px" alt="ajax loader"/></div>').insertAfter("#eexcess-recommendations-list");
+        if ($("#ajax-loader-container").length == 0) {
+            var div = $('<div id="ajax-loader-container"><img src="http://mics.fim.uni-passau.de/wp-content/uploads/2014/10/ajax-loader.gif" width="16px" height="16px" alt="ajax loader"/></div>');
+            $("#eexcess-recommendations-list").after(div);
+        }
     }
 
     /**

Sidebar.html

@@ -1,20 +1,5 @@
 <?!= include('Stylesheet') ?>
 
-<style>
-    .fixed-top {
-        position: fixed;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 1030;
-        width: 100%;
-    }
-    #eexcess-recommendations {
-        top:65px;
-        padding-top:0px;
-    }
-</style>
-
 <div class="sidebar fixed-top">
     <div id="search-container" class="form-group inline-form">
         <input id="eexcess-search" placeholder="Search" aria-label="Search" type="search" />
@@ -23,17 +8,14 @@
     <div class="block"></div>
 </div>
 
-<div id="eexcess-recommendations" class="sidebar form-group height-75">
+<div id="eexcess-recommendations" class="sidebar form-group">
     <ul id="eexcess-recommendations-list">
     </ul>
-</div>
-
-<div class="sidebar branding-below">
-    <div class="block" id="button-bar">
-    </div>
+    <div id="info" class="gray">Please select some text or use the search bar.</div>
 </div>
 
 <div class="sidebar bottom">
+    <div id="bottom-separator" class="block"></div>
     <img alt="Add-on logo" class="logo" width="222" height="70" src="http://eexcess.eu/wp-content/uploads/2013/04/eexcess_Logo_neu1.jpg">
     <span class†="gray branding-text"> Recommendations by EEXCESS</span>
 </div>

Stylesheet.html

@@ -2,6 +2,17 @@
 <!-- The CSS package above applies Google styling to buttons and other elements. -->
 
 <style>
+    #bottom-separator {
+        padding-top: 12px;
+    }
+    .fixed-top {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 1030;
+        width: 100%;
+    }
     .inline-form {
         width:100%;
     }
@@ -14,9 +25,6 @@
         width: 72px;
         height: 29px;
     }
-    .branding-below {
-        bottom: 94px;
-    }
     .branding-text {
         left: 7px;
         position: relative;
@@ -25,9 +33,6 @@
     .logo {
         vertical-align: middle;
     }
-    .height-75 {
-        height: 75%;
-    }
     #ajax-loader-container {
         text-align: center;
         margin-top: 50px;
@@ -39,6 +44,10 @@
 
     #eexcess-recommendations {
         clear: both;
+        top:65px;
+        padding-top:0;
+        bottom: 125px;
+        height: auto;
     }
 
     .result-details {