align weather better to the right screen edge

mgeraci · Nov 12, 2015 · a495633 · a495633
1 parent 3c9fae0
commit a495633
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/static/css/app.css b/static/css/app.css
@@ -2990,8 +2990,11 @@ body {
 
 .hud-section-weather .degree-symbol {
   margin-left: -0.2em; }
-.hud-section-weather .hud-section-weather-current {
+.hud-section-weather-current {
   font-size: 60px; }
+.hud-section-weather-line {
+  float: left;
+  width: 100%; }
 
 .hud-section-subway .hud-section-subway-line {
   display: inline-block;

diff --git a/static/css/app.sass b/static/css/app.sass
@@ -97,9 +97,13 @@ body
   .degree-symbol
     margin-left: -0.2em
 
-  .hud-section-weather-current
+  &-current
     font-size: $text-size-secondary
 
+  &-line
+    float: left
+    width: 100%
+
 .hud-section-subway
   .hud-section-subway-line
     display: inline-block

diff --git a/templates/index.html b/templates/index.html
@@ -42,18 +42,27 @@ <h2>
 						<% } %>
 					</li>
 					<li class="hud-section-weather-preview">
-						<% if (d.weather.preview.tomorrow) { %>
-							Tomorrow:
+							<% if (d.weather.preview.tomorrow) { %>
+								<span class="hud-section-weather-line">
+									Tomorrow:
+									<%= d.weather.preview.low %>
+									/
+									<%= d.weather.preview.high %>
+								</span>
+								<span class="hud-section-weather-line">
+									<%= d.weather.preview.summary %>
+								</span>
+							<% } else { %>
+								<span class="hud-section-weather-line">
+									<%= d.weather.preview.low %>
+									/
+									<%= d.weather.preview.high %>
+									<%= d.weather.preview.summary %>
+								</span>
 						<% } %>
-						<%= d.weather.preview.low %>
-						/
-						<%= d.weather.preview.high %>
-						<% if (d.weather.preview.tomorrow) { %>
-							<br />
-						<% } %>
-						<%= d.weather.preview.summary %>
-						<br />
-						<%= d.weather.preview.precip %>% chance of rain
+						<span class="hud-section-weather-line">
+							<%= d.weather.preview.precip %>% chance of rain
+						</span>
 					</li>
 				</div>
 			<% } %>