webapps.help: switch to pure-css tabs

diff --git a/extra/webapps/help/search.css b/extra/webapps/help/search.css
index 2caa39e7750bedc4bd696b291bc9f608063c748e..0c63534001253cb608d90946be11af37d78d0676 100644 (file)
--- a/extra/webapps/help/search.css
+++ b/extra/webapps/help/search.css
@@ -1,43 +1,28 @@
-h2 {
-    padding: 10px;
-    background-color: #f3f2ea;
-    color: #222;
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-hr {
-    border: 0;
-    background-color: #ccc;
-    color: #ccc;
-    height: 1px;
+.radiotab {
+  position: absolute;
+  opacity: 0;
 }
 
-.tab {
-  overflow: hidden;
-  border: 1px solid #ccc;
-  background-color: #f1f1f1;
-}
-
-.tab button {
-  background-color: inherit;
-  float: left;
-  border: none;
-  outline: none;
+.label {
+  width: 100%;
+  background: #e5e5e5;
   cursor: pointer;
-  padding: 14px 16px;
-  transition: 0.3s;
 }
 
-.tab button:hover {
-  background-color: #ddd;
+.label:active {
+  background: #ccc;  
 }
 
-.tab button.active {
-  background-color: #ccc;
+.panel {
+  display: none;
+  width: 100%;
 }
 
-.tabcontent {
-  display: none;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-top: none;
+.input:checked + .label + .panel {
+  display: block;
 }

diff --git a/extra/webapps/help/search.js b/extra/webapps/help/search.js
deleted file mode 100644 (file)
index d344f0f..0000000
--- a/extra/webapps/help/search.js
+++ /dev/null
@@ -1,17 +0,0 @@
-function openTab(evt, tabName) {
-
-  var i, tabcontent, tablinks;
-
-  tabcontent = document.getElementsByClassName("tabcontent");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
-
-  tablinks = document.getElementsByClassName("tablinks");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-
-  document.getElementById(tabName).style.display = "block";
-  evt.currentTarget.className += " active";
-}

diff --git a/extra/webapps/help/search.xml b/extra/webapps/help/search.xml
index c9cc3a2d0cc4c38a24dbcf13a821f146e8b66b62..65be3b1da856c0828cd1494aa01fdef1432b60e3 100644 (file)
--- a/extra/webapps/help/search.xml
+++ b/extra/webapps/help/search.xml
@@ -4,21 +4,16 @@
 
     <t:title>Search - Factor Documentation</t:title>
     <t:style t:include="resource:extra/webapps/help/search.css" />
-    <t:script t:include="resource:extra/webapps/help/search.js" />
 
     <t:html t:name="navbar"/>
 
     <div class="page">
 
-    <h2>Search results for '<t:label name="search" />'</h2>
+    <div class="tabs">
 
-    <div class="tab">
-        <button class="tablinks" onclick="openTab(event, 'words')">Words</button>
-        <button class="tablinks" onclick="openTab(event, 'vocabs')">Vocabs</button>
-        <button class="tablinks" onclick="openTab(event, 'articles')">Articles</button>
-    </div>
-
-    <div id="words" class="tabcontent">
+    <input class="radiotab" name="tabs" tabindex="1" type="radio" id="words" checked="checked" />
+    <label class="label" for="words">Words</label>
+    <div class="panel">
     <t:if t:value="words">
         <ul>
             <t:each t:name="words">
@@ -28,7 +23,9 @@
     </t:if>
     </div>
 
-    <div id="vocabs" class="tabcontent">
+    <input class="radiotab" name="tabs" tabindex="1" type="radio" id="vocabs" checked="checked" />
+    <label class="label" for="vocabs">Vocabs</label>
+    <div class="panel">
     <t:if t:value="vocabs">
         <ul>
             <t:each t:name="vocabs">
@@ -38,7 +35,9 @@
     </t:if>
     </div>
 
-    <div id="articles" class="tabcontent">
+    <input class="radiotab" name="tabs" tabindex="1" type="radio" id="articles" checked="checked" />
+    <label class="label" for="articles">Articles</label>
+    <div class="panel">
     <t:if t:value="articles">
         <ul>
             <t:each t:name="articles">
@@ -48,6 +47,8 @@
     </t:if>
     </div>
 
+    </div>
+
     <br />
     <div class="footer">
     <p style="font-size: smaller;">