From dcce4d05e55d6b83b38ce06a79c5f0c259e19815 Mon Sep 17 00:00:00 2001
From: Anton Sarukhanov <code@ant.sr>
Date: Wed, 4 May 2016 11:04:20 -0400
Subject: [PATCH] CSS cleanup (add classes)

---
 static/css/map.css         | 54 +++++++++++++++++++-------------------
 static/css/predictions.css | 10 +++----
 templates/map.html         |  2 +-
 templates/predictions.html |  2 +-
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/static/css/map.css b/static/css/map.css
index 53904d4..c3b91b1 100644
--- a/static/css/map.css
+++ b/static/css/map.css
@@ -26,17 +26,17 @@ legend {
 fieldset legend ~ label {
     font-size: .9em;
 }
-#map {
+.map {
     height: 100%;
     width: 100%;
 }
-#map .prediction.lt1min {
+.map .prediction.lt1min {
     color: #f00;
 }
-#map .prediction.lt2mins {
+.map .prediction.lt2mins {
     color: #f80;
 }
-#map .prediction.lt5mins {
+.map .prediction.lt5mins {
     color: #ff0;
 }
 
@@ -59,8 +59,8 @@ fieldset legend ~ label {
 }
 
 /* Embed Mode - Hide UI stuff */
-#map.embed .leaflet-control-zoom,
-#map.embed ~ #locate {
+.map.embed .leaflet-control-zoom,
+.map.embed ~ #locate {
     display: none;
 }
 
@@ -90,64 +90,64 @@ fieldset legend ~ label {
 }
 
 /* Attribution link / "About" popup */
-#map .leaflet-control-attribution {
+.map .leaflet-control-attribution {
     background-color: rgba(0,0,0,.8);
     border-top: 1px solid #eee;
     border-left: 1px solid #eee;
     border-top-left-radius: 3px;
     color: #eee;
 }
-#map .leaflet-control-attribution a {
+.map .leaflet-control-attribution a {
     cursor: pointer;
 }
-#map .leaflet-control-zoom,
-#map .leaflet-control-zoom a {
+.map .leaflet-control-zoom,
+.map .leaflet-control-zoom a {
     border: 1px solid #666;
     background-color: #222;
 }
-#map a,
-#map a:hover,
-#map a:visited,
-#map a:active {
+.map a,
+.map a:hover,
+.map a:visited,
+.map a:active {
     color: #fff;
     font-weight: bold;
     text-decoration: none;
 }
-#map div.leaflet-popup header,
-#map div.leaflet-popup footer {
+.map div.leaflet-popup header,
+.map div.leaflet-popup footer {
     text-align: center;
 }
-#map div.leaflet-popup footer {
+.map div.leaflet-popup footer {
     opacity: .75;
 }
-#map div.leaflet-popup .predictions .none {
+.map div.leaflet-popup .predictions .none {
     opacity: .75;
 }
-#map div.leaflet-popup .predictions.vehicle-predictions .stop:nth-child(n+6) {
+.map div.leaflet-popup .predictions.vehicle-predictions .stop:nth-child(n+6) {
     display: none;
 }
-#map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .stop:nth-child(n+6) {
+.map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .stop:nth-child(n+6) {
     display: block;
 }
-#map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .more {
+.map div.leaflet-popup .show-all-predictions .predictions.vehicle-predictions .more {
     display: none;
 }
-#map div.leaflet-popup .predictions.vehicle-predictions .more {
+.map div.leaflet-popup .predictions.vehicle-predictions .more {
     text-align: center;
 }
-#map div.leaflet-popup div.leaflet-popup-content-wrapper,
-#map div.leaflet-label {
+.map div.leaflet-popup div.leaflet-popup-content-wrapper,
+.map div.leaflet-label {
     border: 3px solid #666;
     background: #222;
     color: #eee;
 }
-#map div.leaflet-popup div.leaflet-popup-tip {
+.map div.leaflet-popup div.leaflet-popup-tip {
     background-color: #666;
 }
-#map div.leaflet-popup div.leaflet-popup-content {
+.map div.leaflet-popup div.leaflet-popup-content {
     margin: .5em .66em;
 }
-#map div.leaflet-popup div.leaflet-popup-content header {
+.map div.leaflet-popup div.leaflet-popup-content header {
     font-weight: bold;
     font-size: 1.3em;
     color: #fff;
diff --git a/static/css/predictions.css b/static/css/predictions.css
index 82724f4..74b3c17 100644
--- a/static/css/predictions.css
+++ b/static/css/predictions.css
@@ -5,21 +5,21 @@ body {
     color: #fff;
     font-family: sans-serif;
 }
-#predictions header {
+.predictions header {
     text-align: center;
     font-weight: bold;
     text-align: center;
 }
-#predictions p {
+.predictions p {
 
 }
-#predictions .prediction.lt1min {
+.predictions .prediction.lt1min {
     color: #f00;
 }
-#predictions .prediction.lt2mins {
+.predictions .prediction.lt2mins {
     color: #f80;
 }
-#predictions .prediction.lt5mins {
+.predictions .prediction.lt5mins {
     color: #ff0;
 }
 
diff --git a/templates/map.html b/templates/map.html
index b092a41..2e56c85 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -11,7 +11,7 @@
     <link href="static/css/map.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div id="map"></div>
+    <div class="map" id="map"></div>
     {# TODO: Generate these using JS, not here. #}
     <div id="msg">
         <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>
diff --git a/templates/predictions.html b/templates/predictions.html
index e8de515..162a54b 100644
--- a/templates/predictions.html
+++ b/templates/predictions.html
@@ -8,7 +8,7 @@
     <link href="static/css/predictions.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div id="predictions"></div>
+    <div class="predictions" id="predictions"></div>
     <script src="bower/jquery/dist/jquery.min.js"></script>
     <script src="static/js/map.js"></script>
     <script src="static/js/predictions.js"></script>
-- 
GitLab