From a946d877380c5f383edb91005608f60aae5deaf2 Mon Sep 17 00:00:00 2001
From: Insiyah Hajoori <insiyahhajoori@gmail.com>
Date: Wed, 21 Mar 2018 01:27:05 +0530
Subject: [PATCH] Fix #409: Show the distribution and evolution views as tabs
 in dashboard (#488)

* Add tabs for dist and evo views

* Remove extra button
---
 new-pipeline/dist.html            |  5 ++++-
 new-pipeline/evo.html             |  5 ++++-
 new-pipeline/style/dashboards.css | 11 ++++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/new-pipeline/dist.html b/new-pipeline/dist.html
index ef6ca21..8fd12cb 100644
--- a/new-pipeline/dist.html
+++ b/new-pipeline/dist.html
@@ -24,12 +24,15 @@
             <form class="navbar-form inline pull-right">
                 <span class="permalink-control"></span>
                 <a href="https://github.com/mozilla/telemetry-dashboard/issues" class="btn btn-success" title="Report a bug in Telemetry dashboards" target="_blank"><i class="fa fa-bug"></i> Report bug</a>
-                <a href="./evo.html" class="btn btn-default" id="switch-views" title="Switch to the evolution view"><i class="fa fa-line-chart"></i> Evolution View</a>
                 <a href="/" class="btn btn-default btn-primary" title="Landing page for Telemetry dashboards"><i class="fa fa-home"></i> Telemetry Portal</a>
                 <a href="./tutorial.html#HistogramDashboard" class="btn btn-default" id="tutorial" title="Usage tutorial for Telemetry dashboards"><i class="fa fa-question-circle"></i> Usage Tutorial</a>
             </form>
             <h1>Measurement Dashboard</h1>
         </header>
+        <ul class="nav nav-tabs">
+            <li class="active" ><a href="#"><i class="fa fa-bar-chart"></i><strong>  Distribution</strong></a></li>
+            <li><a href="./evo.html"><i class="fa fa-line-chart"></i><strong>  Evolution</strong></a></li>
+        </ul>
         <div class="row">
             <div class="col-md-12">
                 <h2 style="font-size: 18px; margin-bottom: 0">
diff --git a/new-pipeline/evo.html b/new-pipeline/evo.html
index 6ab2c11..251cd67 100644
--- a/new-pipeline/evo.html
+++ b/new-pipeline/evo.html
@@ -22,12 +22,15 @@
             <form class="navbar-form inline pull-right">
                 <span class="permalink-control"></span>
                 <a href="https://github.com/mozilla/telemetry-dashboard/issues" class="btn btn-success" title="Report a bug in Telemetry dashboards" target="_blank"><i class="fa fa-bug"></i> Report bug</a>
-                <a href="./dist.html" class="btn btn-default" id="switch-views" title="Switch to the distribution view"><i class="fa fa-bar-chart"></i> Distribution View</a>
                 <a href="/" class="btn btn-default btn-primary" title="Landing page for Telemetry dashboards"><i class="fa fa-home"></i> Telemetry Portal</a>
                 <a href="./tutorial.html#EvolutionDashboard" class="btn btn-default" id="tutorial" title="Usage tutorial for Telemetry dashboards"><i class="fa fa-question-circle"></i> Usage Tutorial</a>
             </form>
             <h1>Evolution Dashboard</h1>
         </header>
+        <ul class="nav nav-tabs">
+            <li><a href="./dist.html"><i class="fa fa-bar-chart"></i><strong>  Distribution</strong></a></li>
+            <li class="active"><a href="#"><i class="fa fa-line-chart"></i><strong>  Evolution</strong></a></li>
+        </ul>
         <div class="row">
             <div class="col-md-12">
                 <h2 style="font-size: 18px; margin-bottom: 0">
diff --git a/new-pipeline/style/dashboards.css b/new-pipeline/style/dashboards.css
index 0de6a54..a1f4936 100644
--- a/new-pipeline/style/dashboards.css
+++ b/new-pipeline/style/dashboards.css
@@ -128,7 +128,7 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  margin-bottom: 3em;
+  margin-bottom: 0;
 }
 
 .overflow {
@@ -167,3 +167,12 @@
 .measure-headers th {
   text-align: right;
 }
+
+/* Tabs for distribution and evolution views */
+.nav-tabs a.active{
+  color: black;
+}
+
+.nav-tabs a {
+  color: #7A7A7A;
+}