Changes on the serach.html page for the research questions, now it is…

… highlighted on which tab we are currently on.
keitaroinc · Dec 16, 2019 · 3d39025 · 3d39025
1 parent c45c1ab
commit 3d39025
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 deletions.
diff --git a/ckanext/knowledgehub/fanstatic/css/main.css b/ckanext/knowledgehub/fanstatic/css/main.css
diff --git a/ckanext/knowledgehub/fanstatic/javascript/modules/render_homepage_results.js b/ckanext/knowledgehub/fanstatic/javascript/modules/render_homepage_results.js
@@ -1,16 +1,23 @@
-function showSearchResults(evt, entity) {
-
-    // hide elements
-    tabcontent = document.getElementsByClassName("tab_content");
-    for (i = 0; i < tabcontent.length; i++) {
-      tabcontent[i].style.display = "none";
-    }
-    var x = document.getElementById(entity);
-            if (x.style.display === "none") {
-                x.style.display = "inline-block";
-            } else {
-                x.style.display = "none";
-            } 
-
-    document.getElementById(entity).style.display = "inline-block";
+function showSearchResults(evt, entity, id) {
+
+  // hide elements
+  tabcontent = document.getElementsByClassName("tab_content");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
   }
+  var x = document.getElementById(entity);
+  if (x.style.display === "none") {
+    x.style.display = "inline-block";
+  } else {
+    x.style.display = "none";
+  }
+  tabs = document.getElementsByClassName("tab");
+  for (i = 0; i < tabs.length; i++) {
+    tabs[i].className = tabs[i].className.replace(" activateTab", "");
+  }
+  evt.currentTarget.className += " activateTab";
+
+
+
+  document.getElementById(entity).style.display = "inline-block";
+}
diff --git a/ckanext/knowledgehub/fanstatic/less/_base.less b/ckanext/knowledgehub/fanstatic/less/_base.less
@@ -50,4 +50,8 @@ a {
   text-decoration: underline;
   background-color: transparent;
   cursor: pointer;
+}
+
+.activateTab {
+  text-decoration: underline;
 }
diff --git a/ckanext/knowledgehub/templates/package/search.html b/ckanext/knowledgehub/templates/package/search.html
@@ -108,19 +108,20 @@ <h4>{{dashboard.title}}</h4>
 
                             <ul class="nav navbar-nav" id="navlinks">
                                 <li>
-                                    <a class="group-list-items"
-                                        onclick="showSearchResults(event, 'package_list')">DATASETS</a>
+                                    <a class="group-list-items tab"
+                                        onclick="showSearchResults(event, 'package_list', this.id)">DATASETS</a>
                                 </li>
                                 <li>
-                                    <a class="group-list-items" id="search_rq_button"
-                                        onclick="showSearchResults(event, 'hidden_rqs')">RESEARCH QUESTIONS</a>
+                                    <a class="group-list-items tab"
+                                        onclick="showSearchResults(event, 'hidden_rqs', this.id)">RESEARCH QUESTIONS</a>
                                 </li>
                                 <li>
-                                    <a class="group-list-items"
-                                        onclick="showSearchResults(event, 'hidden_dashs')">DASHBOARDS</a>
+                                    <a class="group-list-items tab"
+                                        onclick="showSearchResults(event, 'hidden_dashs', this.id)">DASHBOARDS</a>
                                 </li>
                                 <li>
-                                    <a class="group-list-items" onclick="showSearchResults(event, 'hidden_visuals')">
+                                    <a class="group-list-items tab"
+                                        onclick="showSearchResults(event, 'hidden_visuals', this.id)">
                                         VISUALIZATIONS</a>
                                 </li>
                             </ul>
@@ -148,7 +149,7 @@ <h4>{{dashboard.title}}</h4>
                                 <div class="row flex flex-wrap">
                                     {% for rq in rqs %}
                                     <div class="col-lg-2 rq-box rq-item"
-                                        style="flex: 1;background:linear-gradient(0deg,rgba(4, 114, 187, 0.75),rgba(4, 114, 187, 0.75)), url({{ rq.get('image_url') }}); background-blend-mode: multiply; background-size: cover;">
+                                        style="flex-grow: 1;margin: 5px;background:linear-gradient(0deg,rgba(4, 114, 187, 0.75),rgba(4, 114, 187, 0.75)), url({{ rq.get('image_url') }}); background-blend-mode: multiply; background-size: cover;">
                                         <h3 class="rq-heading text-wrap">
                                             <a
                                                 href="{% url_for 'research_question.read', name=rq.get('name') %}">{{ rq.get('title') }}</a>