eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-21 11:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

portrait hourly graph #167

Browse Source
This commit is contained in:
Matt Walsh
2026-04-19 22:13:53 -05:00
parent 125490c158
commit cd2035490a
9 changed files with 342 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
server/styles/scss/_current-weather.scss
View File

@@ -7,22 +7,6 @@
width: calc(p.$standard-width - (2 * p.$blue-box-margin));
@include u.text-shadow();
.portrait-only {
display: none;
.portrait.enhanced & {
display: block;
}
}
.standard-only {
display: block;
.portrait.enhanced & {
display: none;
}
}
.portrait-location {
text-align: center;
margin-top: 175px;

329
server/styles/scss/_hourly-graph.scss
View File

@@ -1,5 +1,6 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/_positions'as p;
#hourly-graph-html {
background-image: url(../images/backgrounds/1-chart.png);
@@ -10,36 +11,54 @@
background-position-x: 0px;
}
.header {
.right {
position: absolute;
// change background for portrait
.portrait.enhanced & {
background-image: url(../images/backgrounds/1-chart-portrait.png);
background-position-x: 0px;
}
}
.legend {
.right & {
position: absolute;
.header & {
top: 35px;
right: 60px;
width: 360px;
font-family: 'Star4000 Small';
font-size: 28px;
@include u.text-shadow();
text-align: right;
}
div {
margin-top: -18px;
}
right: 60px;
width: 360px;
font-family: 'Star4000 Small';
font-size: 28px;
@include u.text-shadow();
text-align: right;
.temperature {
color: red;
}
div {
margin-top: -18px;
}
.dewpoint {
color: green;
}
.temperature {
color: red;
.cloud {
color: lightgrey;
// shift down when only 2 legend elements are shown in portrait
.header & {
.portrait.enhanced & {
margin-top: 12px;
}
}
}
.rain {
color: aqua;
}
.dewpoint {
color: green;
}
.cloud {
color: lightgrey;
}
.rain {
color: aqua;
}
}
}
@@ -47,136 +66,216 @@
.weather-display .main.hourly-graph {
&.main {
>div {
position: absolute;
}
.label {
font-family: 'Star4000 Small';
font-size: 24pt;
color: c.$column-header-text;
@include u.text-shadow();
margin-top: -15px;
position: absolute;
}
.chart-container {
position: absolute;
top: 0px;
height: p.$standard-scroll-height;
&.portrait-only {
top: 495px;
}
>div {
position: absolute;
}
.portrait.enhanced & {
height: 470px;
}
.x-axis {
bottom: 0px;
left: 54px;
width: 532px;
height: 20px;
.label {
text-align: center;
transform: translateX(-50%);
white-space: nowrap;
font-family: 'Star4000 Small';
font-size: 24pt;
color: c.$column-header-text;
@include u.text-shadow();
margin-top: -15px;
position: absolute;
}
&.l-1 {
left: 0px;
}
.x-axis {
bottom: 0px;
left: 54px;
width: 532px;
height: 20px;
&.l-2 {
left: calc(532px / 4 * 1);
}
&.l-3 {
left: calc(532px / 4 * 2);
}
&.l-4 {
left: calc(532px / 4 * 3);
}
&.l-5 {
left: calc(532px / 4 * 4);
}
// adjust when enhanced
.wide.enhanced & {
.label {
text-align: center;
transform: translateX(-50%);
white-space: nowrap;
&.l-1 {
left: 0px;
}
&.l-2 {
left: calc(726px / 6 * 1);
left: calc(532px / 4 * 1);
}
&.l-3 {
left: calc(726px / 6 * 2);
left: calc(532px / 4 * 2);
}
&.l-4 {
left: calc(726px / 6 * 3);
left: calc(532px / 4 * 3);
}
&.l-5 {
left: calc(726px / 6 * 4);
left: calc(532px / 4 * 4);
}
&.l-6 {
left: calc(726px / 6 * 5);
}
&.l-7 {
left: calc(726px / 6 * 6);
}
}
// only in wide + enhanced
&.l-6,
&.l-7 {
display: none;
// adjust when enhanced
.wide.enhanced & {
display: block;
&.l-1 {
left: 0px;
}
&.l-2 {
left: calc(726px / 6 * 1);
}
&.l-3 {
left: calc(726px / 6 * 2);
}
&.l-4 {
left: calc(726px / 6 * 3);
}
&.l-5 {
left: calc(726px / 6 * 4);
}
&.l-6 {
left: calc(726px / 6 * 5);
}
&.l-7 {
left: calc(726px / 6 * 6);
}
}
// only in wide + enhanced
&.l-6,
&.l-7 {
display: none;
.wide.enhanced & {
display: block;
}
}
}
}
}
.chart {
top: 0px;
left: 50px;
.chart {
top: 0px;
left: 50px;
img {
width: 532px;
height: 285px;
img {
width: 532px;
// wide and enhanced
.wide.enhanced & {
width: 746px;
}
.portrait.enhanced & {
height: 450px;
}
}
}
.y-axis {
top: 0px;
left: 0px;
width: 50px;
height: 285px;
// wide and enhanced
.wide.enhanced & {
width: 746px;
.portrait.enhanced & {
height: 450px;
}
.label {
text-align: right;
right: 0px;
&.l-1 {
top: 0px;
}
&.l-2 {
top: calc(280px / 3);
}
&.l-3 {
bottom: calc(280px / 3 - 11px);
}
&.l-4 {
bottom: 0px;
}
.portrait.enhanced & {
&.l-1 {
top: 0px;
}
&.l-2 {
top: calc(445px / 3);
}
&.l-3 {
bottom: calc(445px / 3 - 11px);
}
&.l-4 {
bottom: 0px;
}
}
}
}
&.bottom {
.y-axis .label {
.portrait.enhanced & {
&.l-1 {
top: 0px;
}
&.l-2 {
top: calc(445px / 4);
}
&.l-3 {
top: calc(445px / 2 - 11px);
}
&.l-4 {
bottom: calc(445px / 4 - 11px);
}
&.l-5 {
bottom: 0px;
}
;
}
}
}
}
.y-axis {
top: 0px;
left: 0px;
width: 50px;
height: 285px;
.chart-container.bottom {
.label {
text-align: right;
right: 0px;
&.l-1 {
top: 0px;
}
&.l-2 {
top: calc(280px / 3);
}
&.l-3 {
bottom: calc(280px / 3 - 11px);
}
&.l-4 {
bottom: 0px;
}
.right {
width: p.$standard-width;
position: absolute;
top: -25px;
}
}

16
server/styles/scss/_page.scss
View File

@@ -850,4 +850,20 @@ body.kiosk #loading .instructions {
.item {
display: inline-block;
}
}
.portrait-only {
display: none;
.portrait.enhanced & {
display: block;
}
}
.standard-only {
display: block;
.portrait.enhanced & {
display: none;
}
}