css

chaloBEST/templates/area.html

@@ -21,6 +21,7 @@ a:hover {
 
 {% block body %}
     <div id="stopListWrapper" class="listColumn">
+        <h4>Stops in {{ area.display_name }}:</h4>
         <input class="listFilterInput" placeholder="Filter..." />
         <ul id="stopList">
             {% for stop in stops %}
@@ -31,6 +32,7 @@ a:hover {
         </ul>
     </div>
     <div id="routeListWrapper" class="listColumn">
+        <h4>Routes passing through {{ area.display_name }}:</h4>
         <input class="listFilterInput" placeholder="Filter..." />
             <ul id="routeList">
                 {% for route in routes %}
@@ -42,6 +44,7 @@ a:hover {
             </ul>
     </div>
     <div id="areaListWrapper" class="listColumn">
+        <h4>Nearby areas:</h4>
         <input class="listFilterInput" placeholder="Filter..." />
         <ul id="areaList">
             {% for area in area.nearby_areas %}

chaloBEST/templates/base.html

@@ -12,6 +12,12 @@ body,html {
     width: 100%;
 }
 
+* {
+	-moz-box-sizing:border-box;
+	-webkit-box-sizing:border-box;
+	box-sizing:border-box; /*vendor*/
+}
+
 #wrapper {
     width: 100%;
 }

chaloBEST/templates/route.html

@@ -105,7 +105,7 @@ function onFeatureUnselect(obj) {
 {% endblock %}
 
 {% block body %}
-    <div id="stopListWrapper">
+    <div id="stopListWrapper" class="listColumn">
         <input class="listFilterInput" placeholder="Filter..." />
         <ul id="stopList">            
             {% for r in routeDetails %}
@@ -116,7 +116,7 @@ function onFeatureUnselect(obj) {
         </ul>
     </div>
 
-    <div id="areaListWrapper">
+    <div id="areaListWrapper" class="listColumn">
         <input class="listFilterInput" placeholder="Filter..." />
         <ul id="areaList">
             {% for area in route.areas_passed %}