Use list.js for Index listing and search

List.js - http://listjs.com/ - allows us to paginate the results
so the height does not get out of hand.
Fuzzy search would be cool: http://listjs.com/docs/fuzzysearch/
...but it gives too big of a perf hit with our 5700 items.
Might try to bribe the creator to look into perf.
Thanks a lot to David Tardon for the makefile solution and to
Christian Lohmaier for playing a rubber duck.

Change-Id: I359eed541470ccaa309b0b6ff5d809a796d9befd
Reviewed-on: https://gerrit.libreoffice.org/48335
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>

1 files changed, 88 insertions, 27 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 9efce4d33a..70af31efb5 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -347,14 +347,8 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     float: left;
     font-size: 29px;
     color: #18A303;
-    margin-right: 10px;
-}
-#SearchBox {
     padding-left: 20px;
-    margin: 20px 0 20px 0;
-}
-#SearchBox p {
-    font-size: 29px;
+    margin: 20px 0 0 0;
 }
 #Index {
     margin-top: 10px;
@@ -363,21 +357,88 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     padding-left: 15px;
 }
 #Index ul li {
-    list-style-type: none;
+    list-style: none;
     font-size: 16px;
     margin-bottom: 5px;
 }
+#Bookmarks {
+    padding: 0 20px;
+}
 #Bookmarks p {
     font-size: 22px;
     font-weight: bold;
     color: #18A303;
 }
+#writer::before {
+    content: "WRITER";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#calc::before {
+    content: "CALC";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#impress::before {
+    content: "IMPRESS";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#draw::before {
+    content: "DRAW";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#base::before {
+    content: "BASE";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#math::before {
+    content: "MATH";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#chart::before {
+    content: "CHART";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#basic::before {
+    content: "BASIC";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+#shared::before {
+    content: "GLOBAL";
+    display: block;
+    font-size: 22px;
+    font-weight: bold;
+    color: #18A303;
+}
+.pagination li {
+    display: inline-block;
+    padding: 5px;
+}
 #search-bar {
     margin-top: 10px;
 }
-#Bookmarks {
-    padding: 0 20px;
-}
 .google-search {
     max-width: 300px;
     margin: 0 auto;
@@ -399,41 +460,41 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     float: left;
     display: none;
 }
-.calc,
-.chart,
-.writer,
-.impress,
-.draw,
-.math,
-.basic,
-.base {
+.calc-icon,
+.chart-icon,
+.writer-icon,
+.impress-icon,
+.draw-icon,
+.math-icon,
+.basic-icon,
+.base-icon {
     width: 21.5px;
     height: 26px;
     position: relative;
     margin-right: 5px;
 }
-.calc {
+.calc-icon {
     background-image: url(media/navigation/libo-calc.svg);
 }
-.writer {
+.writer-icon {
     background-image: url(media/navigation/libo-writer.svg);
 }
-.impress {
+.impress-icon {
     background-image: url(media/navigation/libo-impress.svg);
 }
-.draw {
+.draw-icon {
     background-image: url(media/navigation/libo-draw.svg);
 }
-.math {
+.math-icon {
     background-image: url(media/navigation/libo-math.svg);
 }
-.base {
+.base-icon {
     background-image: url(media/navigation/libo-base.svg);
 }
-.chart {
+.chart-icon {
     background-image: url(media/navigation/libo-chart.svg);
 }
-.basic {
+.basic-icon {
     background-image: url(media/navigation/libo-basic.svg);
 }
 /* tree view */