From 49a4a2b2d5f89271f44be072ebdd8695d1f3d129 Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Thu, 4 Aug 2022 20:50:14 -0500 Subject: [PATCH] css cleanup --- server/scripts/modules/regionalforecast.js | 38 ++-------------------- server/styles/compiled.css | 6 ++-- server/styles/scss/_hourly.scss | 4 +-- server/styles/scss/_weatherdisplay.scss | 2 +- views/index.ejs | 2 +- 5 files changed, 9 insertions(+), 43 deletions(-) diff --git a/server/scripts/modules/regionalforecast.js b/server/scripts/modules/regionalforecast.js index 28201a3..a26d6cf 100644 --- a/server/scripts/modules/regionalforecast.js +++ b/server/scripts/modules/regionalforecast.js @@ -1,12 +1,12 @@ // regional forecast and observations // type 0 = observations, 1 = first forecast, 2 = second forecast -/* globals WeatherDisplay, utils, STATUS, icons, UNITS, draw, navigation, luxon, StationInfo, RegionalCities */ +/* globals WeatherDisplay, utils, STATUS, icons, UNITS, navigation, luxon, StationInfo, RegionalCities */ // eslint-disable-next-line no-unused-vars class RegionalForecast extends WeatherDisplay { constructor(navId, elemId) { - super(navId, elemId, 'Regional Forecast'); + super(navId, elemId, 'Regional Forecast', true, true); // pre-load background image (returns promise) this.backgroundImage = utils.image.load('images/BackGround5_1.png'); @@ -333,14 +333,8 @@ class RegionalForecast extends WeatherDisplay { // break up data into useful values const { regionalData: data, sourceXY, offsetXY } = this.data; - // fixed offset for all y values when drawing to the map - const mapYOff = 90; - const { DateTime } = luxon; // draw the header graphics - this.context.drawImage(await this.backgroundImage, 0, 0); - draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2); - draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90); // draw the appropriate title const titleTop = this.elem.querySelector('.title.dual .top'); @@ -348,7 +342,6 @@ class RegionalForecast extends WeatherDisplay { if (this.screenIndex === 0) { titleTop.innerHTML = 'Regional'; titleBottom.innerHTML = 'Observations'; - draw.titleText(this.context, 'Regional', 'Observations'); } else { const forecastDate = DateTime.fromISO(data[0][this.screenIndex].time); @@ -358,10 +351,8 @@ class RegionalForecast extends WeatherDisplay { // draw the title if (data[0][this.screenIndex].daytime) { titleBottom.innerHTML = dayName; - draw.titleText(this.context, 'Forecast for', dayName); } else { titleBottom.innerHTML = `${dayName} Night`; - draw.titleText(this.context, 'Forecast for', `${dayName} Night`); } } @@ -371,7 +362,6 @@ class RegionalForecast extends WeatherDisplay { map.style.zoom = scale; map.style.top = `-${sourceXY.y}px`; map.style.left = `-${sourceXY.x}px`; - this.context.drawImage(await this.baseMap, sourceXY.x, sourceXY.y, (offsetXY.x * 2), (offsetXY.y * 2), 0, mapYOff, 640, 312); const cities = data.map((city) => { const fill = {}; @@ -394,30 +384,6 @@ class RegionalForecast extends WeatherDisplay { locationContainer.innerHTML = ''; locationContainer.append(...cities); - await Promise.all(data.map(async (city) => { - const period = city[this.screenIndex]; - // draw the icon if possible - const icon = icons.getWeatherRegionalIconFromIconLink(period.icon, !period.daytime); - if (icon) { - this.gifs.push(await utils.image.superGifAsync({ - src: icon, - max_width: 42, - auto_play: true, - canvas: this.canvas, - x: period.x, - y: period.y - 15 + mapYOff, - })); - } - - // City Name - draw.text(this.context, 'Star4000', '20px', '#ffffff', period.x - 40, period.y - 15 + mapYOff, period.name, 2); - - // Temperature - let { temperature } = period; - if (navigation.units() === UNITS.metric) temperature = Math.round(utils.units.fahrenheitToCelsius(temperature)); - draw.text(this.context, 'Star4000 Large Compressed', '28px', '#ffff00', period.x - (temperature.toString().length * 15), period.y + 20 + mapYOff, temperature, 2); - })); - this.finishDraw(); } } diff --git a/server/styles/compiled.css b/server/styles/compiled.css index dcfec28..7f4309d 100644 --- a/server/styles/compiled.css +++ b/server/styles/compiled.css @@ -27,7 +27,7 @@ font-family: "Star4000"; font-size: 24pt; position: absolute; - width: 200px; + width: 250px; } .weather-display .header .title.single { left: 170px; @@ -134,10 +134,10 @@ text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; } .weather-display .main.hourly.main .column-headers .temp { - left: 345px; + left: 355px; } .weather-display .main.hourly.main .column-headers .like { - left: 425px; + left: 435px; } .weather-display .main.hourly.main .column-headers .wind { left: 535px; diff --git a/server/styles/scss/_hourly.scss b/server/styles/scss/_hourly.scss index 4ab639f..f7fee46 100644 --- a/server/styles/scss/_hourly.scss +++ b/server/styles/scss/_hourly.scss @@ -29,11 +29,11 @@ } .temp { - left: 345px; + left: 355px; } .like { - left: 425px; + left: 435px; } .wind { diff --git a/server/styles/scss/_weatherdisplay.scss b/server/styles/scss/_weatherdisplay.scss index 014e9ec..0b169f9 100644 --- a/server/styles/scss/_weatherdisplay.scss +++ b/server/styles/scss/_weatherdisplay.scss @@ -30,7 +30,7 @@ font-family: 'Star4000'; font-size: 24pt; position: absolute; - width: 200px; + width: 250px; &.single { left: 170px; diff --git a/views/index.ejs b/views/index.ejs index 6c9d8d6..8581583 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -102,7 +102,7 @@
<%- include('partials/latest-observations.ejs') %>
-
+
<%- include('partials/regional-forecast.ejs') %>