UI: Add toggling effect on buttons

anitab-org · Sep 30, 2020 · 0c4db04 · 0c4db04
1 parent b58bc98
commit 0c4db04
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/vms/administrator/templates/administrator/settings.html b/vms/administrator/templates/administrator/settings.html
@@ -5,7 +5,7 @@
 {% block content %}
     <div class="spacer"></div>
     <ul class="nav nav-tabs">
-        <li class="active"><a href="{% url 'event:list' %}">{% trans "Events" %}</a></li>
+        <li class="active"><a class = "tabActive" href="{% url 'event:list' %}">{% trans "Events" %}</a></li>
         <li class="active"><a href="{% url 'job:list' %}">{% trans "Jobs" %}</a></li>
         <li class="active"><a href="{% url 'shift:list_jobs' %}">{% trans "Shifts" %}</a></li>
         <li class="active"><a href="{% url 'organization:list' %}">{% trans "Organizations" %}</a></li>

diff --git a/vms/vms/static/vms/css/style.css b/vms/vms/static/vms/css/style.css
@@ -203,7 +203,12 @@ body > .container {
   border-color: #158cba;
 }
 
-
+  /* Custom  Css for administrator/settings.html */
+ul.nav.nav-tabs li.active a.tabActive{
+  background-color: #158cba !important;
+  color: white !important;
+  border-radius: 8px !important;
+}
 /* Featurettes
 ------------------------- */
 

diff --git a/vms/vms/static/vms/js/tabswitcher.js b/vms/vms/static/vms/js/tabswitcher.js
@@ -0,0 +1,12 @@
+$(document).ready(function () {
+    $(function () {
+        $('.nav.nav-tabs li a.tabActive').removeClass('tabActive');
+        var current =location.pathname;
+        $('ul.nav.nav-tabs li.active a').each(function(){
+            var $this =$(this);
+            if($this.attr('href').indexOf(current) !== -1){
+                $this.addClass('tabActive');
+            }
+        });
+    });
+});   
diff --git a/vms/vms/templates/vms/base.html b/vms/vms/templates/vms/base.html
@@ -33,6 +33,7 @@
     <script src="{% static "vms/js/load_city.js" %}"></script>
     <script src="{% static "vms/js/load_state.js" %}"></script>
     <script src="{% static "vms/js/hide_resume_textbox.js" %}"></script>
+    <script src="{% static "vms/js/tabswitcher.js" %}"></script>
   </head>
   <body>
     <div class="navbar navbar-default navbar-fixed-top" role="navigation">