20210319 fix timeline narrrow ports (#1220)

* Added a navigation row on narrow view ports for all properties menu

* Added changes

static/sass/main.scss

@@ -215,6 +215,11 @@ footer {
   line-height: 1.4;
 }
 
+.sub-nav-links {
+  padding-left: var(--content-padding-quarter); 
+  padding-right: var(--content-padding-quarter);
+}
+
 #subheader, .subheader {
   display: flex;
   align-items: center;
@@ -427,6 +432,11 @@ footer {
 
 }
 
+//Horizontal Properties Row should be visible only in narrow view ports
+@media only screen and (min-width: 700px){
+  #horizontal-sub-nav{display: none}
+}
+
 // When banner doesn't block navigation buttons.
 @media only screen and (min-width: 1100px) {
   #site-banner {

templates/_base.html

@@ -92,6 +92,7 @@ limitations under the License.
         <div id="column-container">
            <div id="drawer-column">{% block drawer %}{% endblock %}</div>
            <div id="content-column">
+           <div id="horizontal-sub-nav">{% block horizontalsubnav %}{% endblock %}</div>
              {% block subheader %}{% endblock %}
              {% block content %}{% endblock %}
            </div>

templates/metrics/css/popularity.html

@@ -9,6 +9,14 @@
   {% include "metrics/css/_css_metric_nav.html" %}
 {% endblock %}
 
+{% block horizontalsubnav %}
+<nav class="data-panel">
+  View As:<a href="/metrics/css/timeline/popularity" class="sub-nav-links">Timeline</a> | 
+  <a href="/metrics/css/popularity"  class="sub-nav-links">Stack Rank</a>
+</nav>
+
+{% endblock %}
+
 {% block subheader %}
 <div id="subheader">
   <h2>CSS usage &gt; all properties > stack rank</h2>

templates/metrics/css/timeline/popularity.html

@@ -13,6 +13,14 @@
   {% include "metrics/css/_css_metric_nav.html" %}
 {% endblock %}
 
+{% block horizontalsubnav %}
+<nav class="data-panel">
+  View As:<a href="/metrics/css/timeline/popularity" class="sub-nav-links">Timeline</a> | 
+  <a href="/metrics/css/popularity"  class="sub-nav-links">Stack Rank</a>
+</nav>
+
+{% endblock %}
+
 {% block subheader %}
 <div id="subheader">
   <h2>CSS usage metrics &gt; all properties > timeline</h2>