better display for buttons on service page

tosdr · Feb 23, 2018 · 16abd64 · 16abd64
1 parent 807f675
commit 16abd64
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/app/assets/stylesheets/components/_tabs.scss b/app/assets/stylesheets/components/_tabs.scss
@@ -3,13 +3,16 @@
   justify-content: center;
   padding: 0px;
   margin: 0px;
+
 }
 
 .tabs-bar {
-  padding: 5px;
+  padding: 10px;
   margin: 5px;
-  padding-left: 5px;
-  padding-right: 5px;
+}
 
+.tabs-bar.active {
+  background-color: transparent;
+  color: black;
 }
 
diff --git a/app/views/services/show.html.erb b/app/views/services/show.html.erb
@@ -42,8 +42,8 @@
 
 <div class="row">
   <div class="tabs-bar-container">
-    <div class="tabs-bar btn-primary" onclick="openTab('Points')">Points</div>
-    <div class="tabs-bar btn-primary" onclick="openTab('Versions')">Versions</div>
+    <div class="tabs-bar btn-primary" onclick="openTab('Points', event)">Points</div>
+    <div class="tabs-bar btn-primary active" onclick="openTab('Versions', event)">Versions</div>
   </div>
   <div id="Points" class="tabs-container tab" style="">
     <h2>Points</h2>
@@ -60,13 +60,19 @@
 </div>
 
 <script>
-function openTab(tabName) {
+function openTab(tabName, event) {
+  document.querySelectorAll(".tabs-bar").forEach(
+    function(tab){
+      tab.classList.add('active');
+    });
+  event.currentTarget.classList.remove("active");
     var i;
     var x = document.getElementsByClassName("tab");
     for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
     }
     document.getElementById(tabName).style.display = "block";
+    document.getElementById(tabName).style.backgroundColor = "none";
 }
 </script>
 </div>