mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-14 07:39:29 -07:00
Add responsive scaling; improve scanlines and Mobile Safari support
- Replace CSS zoom with CSS transform scaling for better mobile compatibility - Implement wrapper-based scaling approach that includes both content and navigation bar - Replace Almanac layout with CSS Grid for better cross-browser layout - Greatly improve scanline algorithm to handle a wide variety of displays - Add setting to override automatic scanlines to user-specified scale factor - Remove scanline scaling debug functions - Refactor settings module: initialize settings upfront and improve change handler declarations - Enhance scanline SCSS with repeating-linear-gradient for better performance - Add app icon for iOS/iPadOS - Add 'fullscreen' event listener - De-bounce 'resize' event listener - Add 'orientationchange' event listener - Implement three resize scaling algorithms: - Baseline (when no scaling is needed, like on the index page) - Mobile scaling (except Mobile Safari kiosk mode) - Mobile Safari kiosk mode (using manual offset calculations) - Standard fullscreen/kiosk mode (using CSS centering)
This commit is contained in:
Eddy G
186
views/index.ejs
186
views/index.ejs
@@ -14,6 +14,7 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<link rel="icon" href="images/logos/logo192.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="images/logos/app-icon-180.png" />
|
||||
<link rel="preload" href="playlist.json" as="fetch" crossorigin="anonymous"/>
|
||||
<meta property="og:image" content="https://weatherstar.netbymatt.com/images/social/1200x600.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
@@ -80,64 +81,66 @@
|
||||
</div>
|
||||
|
||||
<div id="divTwc">
|
||||
<div id="container">
|
||||
<div id="loading" width="640" height="480">
|
||||
<div>
|
||||
<div class="title">WeatherStar 4000+</div>
|
||||
<div class="version">v<%- version %></div>
|
||||
<div class="instructions">Enter your location above to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="progress-html" class="weather-display">
|
||||
<%- include('partials/progress.ejs') %>
|
||||
</div>
|
||||
<div id="hourly-html" class="weather-display">
|
||||
<%- include('partials/hourly.ejs') %>
|
||||
</div>
|
||||
<div id="hourly-graph-html" class="weather-display">
|
||||
<%- include('partials/hourly-graph.ejs') %>
|
||||
</div>
|
||||
<div id="travel-html" class="weather-display">
|
||||
<%- include('partials/travel.ejs') %>
|
||||
</div>
|
||||
<div id="current-weather-html" class="weather-display">
|
||||
<%- include('partials/current-weather.ejs') %>
|
||||
</div>
|
||||
<div id="local-forecast-html" class="weather-display">
|
||||
<%- include('partials/local-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="latest-observations-html" class="weather-display">
|
||||
<%- include('partials/latest-observations.ejs') %>
|
||||
</div>
|
||||
<div id="regional-forecast-html" class="weather-display">
|
||||
<%- include('partials/regional-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="almanac-html" class="weather-display">
|
||||
<%- include('partials/almanac.ejs') %>
|
||||
</div>
|
||||
<div id="spc-outlook-html" class="weather-display">
|
||||
<%- include('partials/spc-outlook.ejs') %>
|
||||
</div>
|
||||
<div id="extended-forecast-html" class="weather-display">
|
||||
<%- include('partials/extended-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="radar-html" class="weather-display">
|
||||
<%- include('partials/radar.ejs') %>
|
||||
</div>
|
||||
<div id="hazards-html" class="weather-display">
|
||||
<%- include('partials/hazards.ejs') %>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divTwcBottom">
|
||||
<div id="divTwcBottomLeft">
|
||||
<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
|
||||
<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
|
||||
<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
|
||||
<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
|
||||
</div>
|
||||
<div id="divTwcBottomMiddle">
|
||||
<img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
|
||||
</div>
|
||||
<div id="divTwcMain">
|
||||
<div id="container">
|
||||
<div id="loading" width="640" height="480">
|
||||
<div>
|
||||
<div class="title">WeatherStar 4000+</div>
|
||||
<div class="version">v<%- version %></div>
|
||||
<div class="instructions">Enter your location above to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="progress-html" class="weather-display">
|
||||
<%- include('partials/progress.ejs') %>
|
||||
</div>
|
||||
<div id="hourly-html" class="weather-display">
|
||||
<%- include('partials/hourly.ejs') %>
|
||||
</div>
|
||||
<div id="hourly-graph-html" class="weather-display">
|
||||
<%- include('partials/hourly-graph.ejs') %>
|
||||
</div>
|
||||
<div id="travel-html" class="weather-display">
|
||||
<%- include('partials/travel.ejs') %>
|
||||
</div>
|
||||
<div id="current-weather-html" class="weather-display">
|
||||
<%- include('partials/current-weather.ejs') %>
|
||||
</div>
|
||||
<div id="local-forecast-html" class="weather-display">
|
||||
<%- include('partials/local-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="latest-observations-html" class="weather-display">
|
||||
<%- include('partials/latest-observations.ejs') %>
|
||||
</div>
|
||||
<div id="regional-forecast-html" class="weather-display">
|
||||
<%- include('partials/regional-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="almanac-html" class="weather-display">
|
||||
<%- include('partials/almanac.ejs') %>
|
||||
</div>
|
||||
<div id="spc-outlook-html" class="weather-display">
|
||||
<%- include('partials/spc-outlook.ejs') %>
|
||||
</div>
|
||||
<div id="extended-forecast-html" class="weather-display">
|
||||
<%- include('partials/extended-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="radar-html" class="weather-display">
|
||||
<%- include('partials/radar.ejs') %>
|
||||
</div>
|
||||
<div id="hazards-html" class="weather-display">
|
||||
<%- include('partials/hazards.ejs') %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divTwcBottom">
|
||||
<div id="divTwcBottomLeft">
|
||||
<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
|
||||
<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
|
||||
<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
|
||||
<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
|
||||
</div>
|
||||
<div id="divTwcBottomMiddle">
|
||||
<img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
|
||||
</div>
|
||||
<div id="divTwcBottomRight">
|
||||
<div id="ToggleMedia">
|
||||
<img class="navButton off" src="images/nav/ic_volume_off_white_24dp_2x.png" title="Unmute" />
|
||||
@@ -152,41 +155,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div class="content-wrapper">
|
||||
<br />
|
||||
|
||||
<div class="info">
|
||||
<a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
|
||||
<div class="info">
|
||||
<a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
|
||||
</div>
|
||||
<div class="media"></div>
|
||||
|
||||
<div class='heading'>Selected displays</div>
|
||||
<div id='enabledDisplays'>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='heading'>Settings</div>
|
||||
<div id='settings'>
|
||||
</div>
|
||||
|
||||
<div class='heading'>Sharing</div>
|
||||
<div class='info'>
|
||||
<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
|
||||
<div id="share-link-instructions">
|
||||
Copy this long URL:
|
||||
<input type='text' id="share-link-url">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='heading'>Forecast Information</div>
|
||||
<div id="divInfo">
|
||||
Location: <span id="spanCity"></span> <span id="spanState"></span><br />
|
||||
Station Id: <span id="spanStationId"></span><br />
|
||||
Radar Id: <span id="spanRadarId"></span><br />
|
||||
Zone Id: <span id="spanZoneId"></span><br />
|
||||
Music: <span id="musicTrack">Not playing</span><br />
|
||||
Ws4kp Version: <span><%- version %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media"></div>
|
||||
|
||||
<div class='heading'>Selected displays</div>
|
||||
<div id='enabledDisplays'>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='heading'>Settings</div>
|
||||
<div id='settings'>
|
||||
</div>
|
||||
|
||||
<div class='heading'>Sharing</div>
|
||||
<div class='info'>
|
||||
<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
|
||||
<div id="share-link-instructions">
|
||||
Copy this long URL:
|
||||
<input type='text' id="share-link-url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='heading'>Forecast Information</div>
|
||||
<div id="divInfo">
|
||||
Location: <span id="spanCity"></span> <span id="spanState"></span><br />
|
||||
Station Id: <span id="spanStationId"></span><br />
|
||||
Radar Id: <span id="spanRadarId"></span><br />
|
||||
Zone Id: <span id="spanZoneId"></span><br />
|
||||
Music: <span id="musicTrack">Not playing</span><br />
|
||||
Ws4kp Version: <span><%- version %></span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
<%- include('header.ejs', {title:'Almanac', hasTime: true}) %>
|
||||
<div class="main has-scroll almanac">
|
||||
<div class="sun">
|
||||
<div class="days">
|
||||
<div class="day"></div>
|
||||
<div class="day day-1">Monday</div>
|
||||
<div class="day day-2">Tuesday</div>
|
||||
</div>
|
||||
<div class="times times-1">
|
||||
<div class="name">Sunrise:</div>
|
||||
<div class="sun-time rise-1">6:24 am</div>
|
||||
<div class="sun-time rise-2">6:25 am</div>
|
||||
</div>
|
||||
<div class="times times-2">
|
||||
<div class="name">Sunset:</div>
|
||||
<div class="sun-time set-1">6:24 am</div>
|
||||
<div class="sun-time set-2">6:25 am</div>
|
||||
</div>
|
||||
<div class="grid-item empty"></div>
|
||||
<div class="grid-item header day-1"></div>
|
||||
<div class="grid-item header day-2"></div>
|
||||
<div class="grid-item row-label">Sunrise:</div>
|
||||
<div class="grid-item time rise-1"></div>
|
||||
<div class="grid-item time rise-2"></div>
|
||||
<div class="grid-item row-label">Sunset:</div>
|
||||
<div class="grid-item time set-1"></div>
|
||||
<div class="grid-item time set-2"></div>
|
||||
</div>
|
||||
<div class="moon">
|
||||
<div class="title">Moon Data:</div>
|
||||
@@ -28,4 +22,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('scroll.ejs') %>
|
||||
<%- include('scroll.ejs') %>
|
||||
|
||||
Reference in New Issue
Block a user