Many styling changes

Author: angiehjort

client/index.html

@@ -100,6 +100,9 @@
         }, DURATION_LAGOM)  
 
         window.onresize = resize;
+        
+        //make fullscreen on mobile
+        window.scrollTo(0,1);
     })
 
 </script>

client/init.js

@@ -27,19 +27,22 @@
             .append("svg")
             .selectAll(".column")
             .data(weatherColumns)
-            .enter().append("g")
+            .enter().append("svg")
             .attr("class","column")
             .each(function(departure,index){
                 var weatherOne = d3.select(this);
                 weatherOne.append("circle").attr("class","sun");
+                weatherOne.append("g").attr("class","curtains");
+                weatherOne.append("rect").attr("class","grid");
+                weatherOne.append("rect").attr("class","grid bottom");
                 weatherOne.append("rect").attr("class","rain");
                 weatherOne.append("rect").attr("class","wind");
-                weatherOne.append("text").attr("class","sun");
+                weatherOne.append("text").attr("class","temp shadow");
                 weatherOne.append("text").attr("class","temp");
                 weatherOne.append("text").attr("class","rain");
+                weatherOne.append("text").attr("class","wind shadow");
                 weatherOne.append("text").attr("class","wind");
-                weatherOne.append("line").attr("class","grid");
-                weatherOne.append("text").attr("class","grid").text(index==0?"NOW":index+config.weather.unitShort);
+                weatherOne.append("text").attr("class","grid").text(index==0?"now":(index==1?1+config.weather.unitShort:index));
 
             })
     }

client/resize.js

@@ -3,12 +3,13 @@
 
     function resize(){
         DEPARTURES_AXIS_HEIGHT = window.innerHeight*0.05;//px
-        WEATHER_AXIS_HEIGHT = 20;//px
+        WEATHER_AXIS_HEIGHT = window.innerHeight*0.05;//px
         DEPARTURES_WIDTH_GRAPH = 1; //fraction
         WIDTH = window.innerWidth;
         WEATHER_HEIGHT = parseInt(d3.select("#weather").style("height")) - WEATHER_AXIS_HEIGHT;
         DEPARTURES_ROW_HEIGHT = (parseInt(d3.select("#departures").style("height")) - DEPARTURES_AXIS_HEIGHT) / config.departures.length;
         WEATHER_WIDTH_ONE = WIDTH/config.weather.steps;
+        WEATHER_CURTAIN_HEIGHT = 8; //px
 
         TEXTHEIGHT_LAGOM = Math.min(24, Math.max(6, DEPARTURES_ROW_HEIGHT - 8));
         TEXTHEIGHT_SMALL = Math.min(18, Math.max(4, DEPARTURES_ROW_HEIGHT - 20));
@@ -74,34 +75,51 @@
 
             })
         d3.select("#weather").select("svg").selectAll(".column")
-            .attr("transform",function(d,i){return "translate("+(i* WEATHER_WIDTH_ONE)+",0)"})
+            .attr("width",WEATHER_WIDTH_ONE)
+            .attr("height",WEATHER_HEIGHT+WEATHER_AXIS_HEIGHT)
+            .attr("x",function(d,i){return i* WEATHER_WIDTH_ONE})
             .each(function(departure,index){
                 var weatherOne = d3.select(this);
 
                 weatherOne.select("circle.sun")
+                    .attr("r", WEATHER_WIDTH_ONE/2*0.8)
                     .attr("cx", WEATHER_WIDTH_ONE/2);
+            
+                var curtainsData = new Array(Math.floor(WEATHER_WIDTH_ONE/WEATHER_CURTAIN_HEIGHT));
+                var curtains = weatherOne.select("g.curtains").selectAll("rect").data(curtainsData);
+                curtains.exit().remove();
+                curtains.enter().append("rect");
+                curtains.attr("width", WEATHER_WIDTH_ONE);
+            
                 weatherOne.select("rect.rain")
                     .attr("width", WEATHER_WIDTH_ONE/2)
                     .attr("x", WEATHER_WIDTH_ONE/4);
                 weatherOne.select("rect.wind")
-                    .attr("x", WEATHER_WIDTH_ONE/2-WEATHER_WIDTH_ONE/6/2)
-                    .attr("width", WEATHER_WIDTH_ONE/6);
+                    .attr("x", WEATHER_WIDTH_ONE-WEATHER_WIDTH_ONE/8)
+                    .attr("width", WEATHER_WIDTH_ONE/8);
 
-                weatherOne.select("text.sun")
-                    .attr("x", WEATHER_WIDTH_ONE/2);
                 weatherOne.select("text.rain")
                     .attr("x", WEATHER_WIDTH_ONE/2);
-                weatherOne.select("text.wind")
-                    .attr("x", WEATHER_WIDTH_ONE/2)
-                    .attr("dy", "-0.32em");
-                weatherOne.select("text.temp")
+                weatherOne.selectAll("text.wind")
+                    .attr("x", WEATHER_WIDTH_ONE)
+                    .attr("dy", "-0.18em")
+                    .attr("dx", "-0.72em");
+                weatherOne.selectAll("text.temp")
                     .attr("x", WEATHER_WIDTH_ONE/2)
                     .attr("dy", "0.32em");
 
 
 
-                weatherOne.select("line.grid")
-                        .attr("y2",WEATHER_HEIGHT)                
+                weatherOne.select("rect.grid")
+                        .attr("y",0)                
+                        .attr("x",WEATHER_WIDTH_ONE-1)                
+                        .attr("height",WEATHER_HEIGHT)                
+                        .attr("width",1)  
+                weatherOne.select("rect.grid.bottom")
+                        .attr("y",WEATHER_HEIGHT)                
+                        .attr("x",0)                
+                        .attr("height",1)                
+                        .attr("width",WEATHER_WIDTH_ONE)  
                 weatherOne.select("text.grid")
                         .attr("x", WEATHER_WIDTH_ONE/2)
                         .attr("y",WEATHER_HEIGHT + WEATHER_AXIS_HEIGHT);

client/style.css

@@ -9,6 +9,7 @@ body, head{height: 100%; width: 100%;}
 #departures{height: 55%; width: 100%; top: 0%}
 #weather{height: 45%; width: 100%; top: 55%}
 
+
 #title{font-size: 24px; line-height: 100%; text-transform: uppercase; color: #a3a3a3}
 
 .stay{fill:#ffccb6;}
@@ -17,15 +18,16 @@ body, head{height: 100%; width: 100%;}
 
 .sun{fill:#ffcf64; opacity: 0.8;}
 .sun.moon{fill:#bec9d1; opacity: 0.8;}
+.curtains rect{fill: white; opacity:0.9}
 .rain{fill:#0027a8; opacity: 0.8;}
-.wind{fill:#bee9ff; opacity: 0.8;}
+.wind{fill:#91cfef; opacity: 1.0; text-anchor: end;}
 .temp{fill:#5a4f35; opacity: 0.8;}
+text.shadow{stroke: white; stroke-width: 3}
 
-text.sun{visibility: hidden};
+text.sun{visibility: hidden}
 
 
-line.grid{stroke-width: 1; stroke: #dbdbdb;}
-text.grid{ fill: #dbdbdb;}
+rect.grid{fill: #91cfef; stroke: none}
 
 .invisible{opacity: 0;}
 .bus{
@@ -41,4 +43,6 @@ rect.bus{fill: #a2009c; opacity: 0.7}
     fill: none;
     stroke: grey;
     shape-rendering: crispEdges;
-}
+}
+
+.axis text, text.grid{fill: grey}

client/update.js

@@ -60,31 +60,33 @@
 
                 weatherOne.select("circle.sun")
                     .classed("moon", !dataWeather.day)
-                    .transition().duration(DURATION_LAGOM).ease("linear")
-                    .attr("r", Math.abs(sunScale(dataWeather.sun)) || 1)
+                    //.attr("r", Math.abs(sunScale(dataWeather.sun)) || 1)
+                    .transition().duration(DURATION_LAGOM)
                     .attr("cy", tempScale(dataWeather.temp))
+                weatherOne.select("g.curtains")
+                    .selectAll("rect")
+                    .attr("transform", "rotate(45)")
+                    .attr("y", function(d,i){return i*WEATHER_CURTAIN_HEIGHT + WEATHER_CURTAIN_HEIGHT/2})
+                    .attr("height", WEATHER_CURTAIN_HEIGHT * (1-dataWeather.sun))
+                weatherOne.select("g.curtains")
+                    .transition().duration(DURATION_LAGOM)
+                    .attr("transform", "translate("+WEATHER_WIDTH_ONE/2+","+ (tempScale(dataWeather.temp) - WEATHER_WIDTH_ONE/1.5) +")")
                 weatherOne.select("rect.rain")
-                    .transition().duration(DURATION_LAGOM).ease("linear")
                     .attr("height", rainScale(dataWeather.rain))
                 weatherOne.select("rect.wind")
-                    .transition().duration(DURATION_LAGOM).ease("linear")
                     .attr("height", windScale(dataWeather.windspeed))
                     .attr("y", WEATHER_HEIGHT - windScale(dataWeather.windspeed))
 
-                weatherOne.select("text.sun")
-                    .transition().duration(DURATION_LAGOM).ease("linear")
-                    .text(dataWeather.sun)
-                weatherOne.select("text.temp")
+                weatherOne.selectAll("text.temp")
+                    .transition().duration(DURATION_LAGOM)
                     .attr("y", tempScale(dataWeather.temp))
                     .text(Math.round(dataWeather.temp) + "°C")
                 weatherOne.select("text.rain")
-                    .transition().duration(DURATION_LAGOM).ease("linear")
                     .attr("y", rainScale(dataWeather.rain) + 20 )
-                    .text((dataWeather.rain==0?"":dataWeather.rain) + (index==0?"mm/h":""))
-                weatherOne.select("text.wind")
-                    .transition().duration(DURATION_LAGOM).ease("linear")
-                    .attr("y", WEATHER_HEIGHT - windScale(dataWeather.windspeed))
-                    .text(Math.round(dataWeather.windspeed) + (index==0?"m/s":""))
+                    .text(dataWeather.rain==0?"":dataWeather.rain)
+                weatherOne.selectAll("text.wind")
+                    .attr("y", WEATHER_HEIGHT)
+                    .text(Math.round(dataWeather.windspeed)==0?"":Math.round(dataWeather.windspeed))
 
             })