BART columns

BlinkTagInc · Jun 7, 2018 · af087b9 · af087b9
1 parent b6ea1ab
commit af087b9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 47 deletions.
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -67,13 +67,16 @@ function updateWeather() {
 
     //Forecast
     var forecast = data[1].forecast.simpleforecast.forecastday[0];
-    $('#weather .forecast').html(
+    $('#weather .forecast1').html(
       '<img src="http://icons-ak.wxug.com/i/c/a/' + forecast.icon + '.gif" class="weathericon">' +
       forecast.conditions +
-      '<br>High: <span style="color:' + colorTemp(forecast.high.fahrenheit) + ';">' + forecast.high.fahrenheit + '&deg;F</span>' +
-      '<br>Low: <span style="color:' + colorTemp(forecast.low.fahrenheit) + ';">' + forecast.low.fahrenheit + '&deg;F' + '</span>' +
       '<br>Precip: ' + forecast.pop + '%'
     );
+
+    $('#weather .forecast2').html(
+      'High: <span style="color:' + colorTemp(forecast.high.fahrenheit) + ';">' + forecast.high.fahrenheit + '&deg;F</span>' +
+      '<br>Low: <span style="color:' + colorTemp(forecast.low.fahrenheit) + ';">' + forecast.low.fahrenheit + '&deg;F' + '</span>'
+    );
   });
 
   function colorTemp(temp) {
@@ -134,6 +137,10 @@ function updateBARTDepartures(){
       departure.destination = 'Dublin/ Pleasanton';
     }
 
+    if(departure.destination == 'SFO/Millbrae') {
+      departure.destination = 'SFO/ Millbrae';
+    }
+
     $(data).find('estimate').each(function(j, data){
       //Only add times where minutes are less than 100
       if($(data).find('minutes').text() < 100){
@@ -194,15 +201,15 @@ function updateBARTAdvisories(){
     },
     dataType: 'xml',
     success:function(result){
-      $('#bart .advisories').empty();
+      $('.bart-advisories').empty();
       $(result).find('bsa').each(function(i, data){
         //Process advisories
         var description = $(data).find('description').text();
         if(description != 'No delays reported.') {
           $('<div>')
             .addClass('advisory')
             .text(description)
-            .appendTo('#bart .advisories');
+            .appendTo('.bart-advisories');
         }
       });
     }

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -45,15 +45,20 @@ header {
 }
 h2 {
   text-transform: uppercase;
-  margin: 20px 0 0 30px;
+  margin: 20px 0 0 0;
   background: rgba(0, 0, 0, 0.1);
-  padding: 0 4px;
+  padding: 0 10px 0 30px;
   box-sizing: border-box;
   letter-spacing: 1px;
 }
 h3 {
   text-transform: uppercase;
 }
+.col {
+  float: left;
+  width: 50%;
+}
+
 .muniContainer,
 .bartContainer,
 .uberContainer {
@@ -119,7 +124,7 @@ h3 {
 .laterbuses .time:first-child {
   border-bottom: 3px solid #2f363c;
 }
-#bart .advisories .advisory {
+.bart-advisories .advisory {
   font-size: 24px;
   font-weight: bold;
   background-color: #b94a48;
@@ -138,15 +143,19 @@ h3 {
 .bart .destination {
   float: left;
   height: 100px;
-  width: 166px;
+  width: 120px;
   box-sizing: border-box;
   padding: 20px 4px 0;
   overflow:hidden;
-  font-size: 24px;
+  font-size: 22px;
   text-align: center;
   position: relative;
 }
-.bart .nextbus,
+.bart .nextbus {
+  height: 100px;
+  line-height: 100px;
+  width: 90px;
+}
 .bart .laterbuses {
   height: 100px;
   line-height: 100px;
@@ -155,11 +164,6 @@ h3 {
   height: 49px;
   line-height: 50px;
 }
-.muniContainer .col1,
-.muniContainer .col2 {
-  float: left;
-  width: 49%;
-}
 
 #muni-north,
 #muni-south {
@@ -188,12 +192,6 @@ h3 {
   background: #b4304f;
 }
 
-#uber .col1,
-#uber .col2 {
-  float: left;
-  width: 49%;
-}
-
 .uber {
   background: rgba(0, 0, 0, 0.1);
   height: 40px;
@@ -229,15 +227,12 @@ h3 {
   height: 40px;
 }
 
-
-
 #time {
-  margin-left: 30px;
   background: rgba(0,0,0,0.1);
-  width: 381px;
+  width: 30%;
   height: 80px;
   overflow: hidden;
-  padding-left: 10px;
+  padding-left: 40px;
   box-sizing: border-box;
 }
 #clock {
@@ -255,13 +250,11 @@ h3 {
 }
 
 #weatherContainer {
-  width: 33.3%;
+  width: 30%;
   float: right;
 }
 #weather {
-  width: 381px;
-  padding: 7px 0 0 30px;
-  margin-left: 30px;
+  padding: 7px 30px 0 30px;
   background: rgba(0,0,0,0.1);
   height:80px;
   box-sizing: border-box;
@@ -270,14 +263,24 @@ h3 {
   font-size: 48px;
   float: left;
 }
-#weather .forecast {
+#weather .forecast1 {
   display: inline-block;
-  font-size: 12px;
-  width: 175px;
+  font-size: 16px;
+  width: 205px;
+  vertical-align: top;
+  margin-top: 8px;
+}
+
+#weather .forecast2 {
+  display: inline-block;
+  font-size: 16px;
+  width: 75px;
+  vertical-align: top;
+  margin-top: 8px;
 }
-#weather .forecast img {
+#weather .forecast1 img {
   float: left;
-  margin: 8px 12px 0 8px;
+  margin: 0 12px 0 8px;
   width: 50px;
 }
 .rotate {

diff --git a/views/index.jade b/views/index.jade
@@ -7,28 +7,32 @@ block content
       #weatherContainer
         #weather
           .temp
-          .forecast
+          .forecast1
+          .forecast2
       #time
         #clock
         #date.slabtext
-    #bart.grid-three
+    .grid-three
       h2 Uber
       #uber.uberContainer
-        .col1
-        .col2
-      .advisories
-      h2 BART Northbound
-      #bart-north.bartContainer
-      h2 BART Southbound
-      #bart-south.bartContainer
+        .col
+        .col
+      .bartContainer
+        .bart-advisories
+        .col
+          h2 BART Northbound
+          #bart-north
+        .col
+          h2 BART Southbound
+          #bart-south
     .grid-three
       .muniContainer
-        .col1
+        .col
           h2.clear MUNI Northbound
           #muni-north
           h2.clear MUNI Westbound
           #muni-west
-        .col2
+        .col
           h2.clear MUNI Southbound
           #muni-south
           h2.clear MUNI Eastbound