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

@@ -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">

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">

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;
+}