style the active view button for better visual comfort and feedback

README.md

@@ -576,3 +576,7 @@ Now we have uniform visibility across result cards, contributing to a subtle but
 ![alt](docs/img/before-after-mb-styling.png)
 
 You can see I've also opted for the more scalable '3 dots - more' button to meet requirements not yet known without cluttering the card too much.
+
+Also, it's not terribly clear on the results page /which/ view format is active based upon the bottom-appbar buttons themselves. Sure, you could infer from the content, but why make the user work this hard. There is supposed to be a tab-bar indicator below the button that reflects the active view, but this doesn't work well for choices at the buttom of the screen since it seems to get cut off. I wrestled with trying to style / raise the active tab but got no joy. So I opted to style the icon buttons themselves, using the primary color for the active button and gray for the others:
+
+![alt](docs/img/active-view-styling.png)

assets/css/style.css

@@ -264,6 +264,14 @@ footer.mdl-mini-footer {
   font-size: 0.8em;
 }
 
+a[class~="is-active"] .view-button {
+  color: #3f52b5;
+}
+
+a .view-button {
+  color: #777;
+}
+
 .view-buttons {
   height: 2.6em;
   width: 100%;
@@ -276,6 +284,10 @@ footer.mdl-mini-footer {
   padding: 0.2em 0.15em;
 }
 
+.view-icons {
+  margin-bottom: 0.5em;
+}
+
 .mdl-tabs__tab {
   padding: 0 0;
 }

assets/js/view.js

@@ -696,15 +696,15 @@ View.prototype.createResultsFooter = function(fabIcon) {
       <i class="material-icons">${fabIcon}</i>
       </button>
       <div class="view-buttons mdl-tabs mdl-js-tabs">
-        <div class="mdl-tabs__tab-bar">
+        <div class="mdl-tabs__tab-bar view-button-tab-bar">
           <a id="photo-view" href="#photo-button" class="mdl-tabs__tab view-link is-active">
             <div id="photo-button" class="view-button mdl-button mdl-js-button" role="button" aria-expanded="false">
-              <i class="material-icons">photo</i>
+              <i class="material-icons view-icons">photo</i>
             </div>
           </a>
           <a id="list-view" href="#list-button" class="mdl-tabs__tab view-link">
             <div id="list-button" class="view-button mdl-button mdl-js-button" role="button" aria-expanded="false">
-              <i class="material-icons">list</i>
+              <i class="material-icons view-icons">list</i>
             </div>
           </a>
           <a id="hidden-view" href="#hidden-button" class="mdl-tabs__tab view-link" style="visibility: hidden">
@@ -713,17 +713,17 @@ View.prototype.createResultsFooter = function(fabIcon) {
             aria-expanded="false"
             style="visibility: hidden; margin-left: 1.5em; margin-right: 1.5em;"
           >
-              <i class="material-icons">place</i>
+              <i class="material-icons view-icons">place</i>
             </div>
           </a>
           <a id="chart-view" href="#chart-button" class="mdl-tabs__tab view-link">
             <div id="chart-button" class="view-button mdl-button mdl-js-button" role="button" aria-expanded="false">
-              <i class="material-icons">insert_chart</i>
+              <i class="material-icons view-icons">insert_chart</i>
             </div>
           </a>
           <a id="map-view" href="#map-button" class="mdl-tabs__tab view-link">
             <div id="map-button" class="view-button mdl-button mdl-js-button" role="button" aria-expanded="false">
-              <i class="material-icons">map</i>
+              <i class="material-icons view-icons">map</i>
             </div>
           </a>
         </div>