Added information about querybuilders features and help-section. Show/Hide section with button

3 files changed, 63 insertions, 1 deletions

diff --git a/container-search-gui/src/main/resources/gui/_includes/css/vespa.css b/container-search-gui/src/main/resources/gui/_includes/css/vespa.css
index 24cfd32cbb2..c63690581c6 100644
--- a/container-search-gui/src/main/resources/gui/_includes/css/vespa.css
+++ b/container-search-gui/src/main/resources/gui/_includes/css/vespa.css
@@ -109,6 +109,13 @@ section h3.section-subheading {
     margin-top: 0;
 }
 
+header .help-title {
+    color: #FFC43C;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+
 .text-muted {
     color: #303030;
 }
@@ -242,7 +249,7 @@ header .methodselector{
   -webkit-transition:.3s;
   transition:.3s
 }
-
+header .intro-help:hover {background-color: #4EA2D6 !important;}
 header .methodselector:hover {background-color: #79B4D8;}
 header .button:hover {background-color: #79B4D8;}
 header .removeRow:hover {background-color: #79B4D8;}
@@ -480,12 +487,28 @@ header .intro-copy {
     padding-left: 50px;
     transform: translateX(-50%);
 }
+
+header .intro-help {
+    display: inline-block;
+    margin-top: 15px;
+    width: 134px;
+    height: 45px;
+
+    border-top-left-radius: 29%;
+    border-top-right-radius: 26%;
+    border-bottom-right-radius: 27%;
+    border-bottom-left-radius: 29%;
+
+}
+
 header .intro-refresh {
     display: inline-block;
     margin-top: 15px;
+    margin-left: 25px;
     transform: translateX(-50%);
 }
 
+
 @media (min-height: 1150px) {
     header .intro-down-arrow {
         /* Hard code top: 1150 (height of top section) - 20 (bottom) - 36 (image height) = 1094 */
diff --git a/container-search-gui/src/main/resources/gui/_includes/index.html b/container-search-gui/src/main/resources/gui/_includes/index.html
index ca3302dd404..d08a237bddf 100644
--- a/container-search-gui/src/main/resources/gui/_includes/index.html
+++ b/container-search-gui/src/main/resources/gui/_includes/index.html
@@ -116,6 +116,30 @@
                     <div class="intro-refresh" onclick="refresh();" style="cursor:pointer;">
                       <img src="/querybuilder/img/reload.svg" height="30" width="30" />
                     </div>
+                    </br>
+                    </br>
+                    <div id="helpbutton" class="intro-help" onclick="toggleHelp();" style="cursor:pointer;">
+                      <img src="/querybuilder/img/features-help.png" height="47" width="138" style="margin-left: -1px;"/>
+                    </div>
+                    <div id="help" style="display: none;">
+                    <div class="intro-param" id="help">
+                      </br>
+                      <div class="help-title">Features</div>
+                      <span> ○  Autocompletion of YQL-syntax</span> </br>
+                      <span> ○  Drop-down lists of all valid parameters</span> </br>
+                      <span> ○  Sending both POST and GET-requests to <i>Vespa</i></span> </br>
+                      <span> ○  Easy access to the <a href="https://docs.vespa.ai/documentation/reference/search-api-reference.html">documentation</a> of each parameter</span> </br>
+                      <span> ○  Conversion of POST- to GET-query</span> </br>
+                      <span> ○  Pasting already built JSON-query</span> </br>
+                      <span> ○  View and copy the response of queries</span> </br>
+                      <span> ○  View the finished JSON-query as you build </span> </br>
+                    </div>
+                    </br>
+                    <div class="intro-param" id="help">
+                      <div class="help-title">Help</div>
+                      <span> If you find errors, spelling mistakes, faulty pieces of code or want to improve the querybuilder, please submit a pull request or create an <a href="https://github.com/vespa-engine/vespa/issues">issue</a>.</span> </br>
+                    </div>
+                  </div>
                   </div>
               </div>
             </div>
@@ -243,6 +267,21 @@
         var yqlID = "v1";
 
 
+
+      function toggleHelp(){
+        var div = document.getElementById("help");
+        var buttonDiv = document.getElementById("helpbutton");
+        if (div.style.display === "none") {
+          console.log("VISER")
+            div.style.display = "block";
+            buttonDiv.style.backgroundColor = '#4EA2D6';
+        } else {
+          console.log("SKJULER");
+            div.style.display = "none";
+            buttonDiv.style.backgroundColor = 'transparent';
+        }
+      }
+
       function updateFields(){
       	var temp = number;
       	while (temp > 0){
diff --git a/container-search-gui/src/main/resources/gui/img/features-help.png b/container-search-gui/src/main/resources/gui/img/features-help.png
new file mode 100644
index 00000000000..65702f8b91f
--- /dev/null
+++ b/container-search-gui/src/main/resources/gui/img/features-help.png