gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.0

Browse Source 
Layout fixes
Mobile cleanup
Location right hand side
Moon style updated - again
This commit is contained in:
fraxle
2026-05-27 20:30:39 +01:00
parent 7a2a8dcb6f
commit 9b7089ca06
6 changed files with 57 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/header.css
+19 -8
View File
@@ -9,8 +9,8 @@
grid-template-columns: 1fr auto 1fr; /* title | dial | search */
gap: 32px;
align-items: center;
padding-bottom: 32px;
margin-bottom: 32px;
padding-bottom: 14px;
margin-bottom: 14px;
}
.header-right {
@@ -58,8 +58,10 @@
font-style: italic;
font-weight: 800;
font-size: 18px;
margin-top: 12px;
margin-top: 8px;
margin-bottom: 0;
color: #1e1208;
text-align: right;
}
/* The lat/lon below the location */
@@ -70,7 +72,7 @@
color: #b09870;
display: block;
margin-top: 4px;
margin-left: 15px;
margin-left: 0;
letter-spacing: 0.08em;
}
@@ -273,17 +275,26 @@
}
.scope-ring {
width: 160px;
height: 160px;
margin: 0 auto; /* centre the dial */
width: 250px;
height: 250px;
margin: 0 auto;
}
.scope-env-row {
width: 160px; /* match dial width on mobile */
width: 250px;
}
.utci-current-loc {
margin-top: 4px; /* tighten gap above location on mobile */
text-align: center;
}
.utci-loc-coords {
text-align: center;
}
.utci-fetch-time {
text-align: center;
}
.utci-search-wrap {
assets/css/table.css
-1
View File
@@ -11,7 +11,6 @@
/* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
.utci-day-tabs-wrap {
position: relative;
margin-bottom: 18px;
}
/* Edge fade gradients — only show when there's content to scroll to. */
assets/css/ui.css
+14 -4
View File
@@ -616,10 +616,10 @@
margin-bottom: 18px;
}
.utci-fetch-time {
text-align: left;
text-align: right;
font-size: 0.72rem;
opacity: 0.5;
margin: 0.70rem 0 0.4rem;
margin: 0.3rem 0 0;
letter-spacing: 0.03em;
}
@@ -810,16 +810,26 @@
align-items: center;
}
.utci-current-loc,
.utci-loc-coords,
.utci-fetch-time {
text-align: center;
}
.utci-search-wrap {
width: 100%;
}
.scope-ring {
width: 180px; /* smaller dial on mobile */
height: 180px;
width: 250px;
height: 250px;
margin: 0 auto;
}
.scope-env-row {
width: 250px;
}
/* Halve the hourly-table cell padding on mobile so more columns fit
in the viewport before the horizontal scrollbar kicks in. */
.utci-table th {
assets/js/app.js
+8 -9
View File
@@ -277,14 +277,6 @@ export function UTCIForecast() {
<span class="title-sun">SUN</span><span class="title-scope">Scope</span>
</h1>
<div class="utci-tagline">See the sun the way your body does.</div>
<div class="utci-current-loc">
↳ ${location.name}
<span class="utci-loc-coords">
${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
</span>
</div>
${fetchedAt && !loading && html`
<div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
</div>
<div class="scope-col">
@@ -316,7 +308,6 @@ export function UTCIForecast() {
<div class="header-right">
<div class="utci-search-wrap">
<label class="utci-search-label">Change location</label>
<input
class="utci-search"
type="text"
@@ -350,6 +341,14 @@ export function UTCIForecast() {
</div>`}
${searching && html`<div class="utci-searching">Searching…</div>`}
</div>
<div class="utci-current-loc">
↳ ${location.name}
<span class="utci-loc-coords">
${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
</span>
</div>
${fetchedAt && !loading && html`
<div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
</div>
</div>
assets/js/components.js
+12 -12
View File
@@ -234,9 +234,9 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
<circle cx=${shadowCx} cy=${r} r=${moonR} fill="black" />
</mask>
<!-- Moon texture pattern - sized to fit the moon disk -->
<pattern id=${`moon-tex-${uid}`} x=${r - moonR} y=${r - moonR}
width=${moonR * 2} height=${moonR * 2} patternUnits="userSpaceOnUse">
<image href=${MOON_TEX} x="0" y="0" width=${moonR * 2} height=${moonR * 2} />
<pattern id=${`moon-tex-${uid}`} x=${r - moonR - 2} y=${r - moonR - 2}
width=${moonR * 2 + 4} height=${moonR * 2 + 4} patternUnits="userSpaceOnUse">
<image href=${MOON_TEX} x="0" y="0" width=${moonR * 2 + 4} height=${moonR * 2 + 4} />
</pattern>
</defs>
@@ -258,15 +258,15 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
<g clip-path=${`url(#${clipId})`}>
<!-- Lit crescent via mask -->
<circle cx=${r} cy=${r} r=${moonR}
fill="#ddd8c8" mask=${`url(#moon-mask-${uid})`} />
fill="#e7e3d4" mask=${`url(#moon-mask-${uid})`} />
<!-- Texture overlay on lit face -->
<circle cx=${r} cy=${r} r=${moonR}
fill=${`url(#moon-tex-${uid})`}
mask=${`url(#moon-mask-${uid})`}
opacity="0.45" />
opacity="0.55" />
<!-- Dim unlit face so the full disk outline remains visible -->
<circle cx=${r} cy=${r} r=${moonR}
fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.4" />
fill="rgba(200,192,230,0.08)" stroke="none" />
</g>`}
<!-- Brass scope ring -->
@@ -562,9 +562,9 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
<circle cx=${moonShadowCx} cy=${moonY} r=${moonDrawR} fill="black" />
</mask>
<!-- Moon texture pattern - sized to fit the landscape moon disk -->
<pattern id="scope-moon-tex" x=${cx - moonDrawR} y=${moonY - moonDrawR}
width=${moonDrawR * 2} height=${moonDrawR * 2} patternUnits="userSpaceOnUse">
<image href=${MOON_TEX} x="0" y="0" width=${moonDrawR * 2} height=${moonDrawR * 2} />
<pattern id="scope-moon-tex" x=${cx - moonDrawR - 2} y=${moonY - moonDrawR - 2}
width=${moonDrawR * 2 + 4} height=${moonDrawR * 2 + 4} patternUnits="userSpaceOnUse">
<image href=${MOON_TEX} x="0" y="0" width=${moonDrawR * 2 + 4} height=${moonDrawR * 2 + 4} />
</pattern>
</defs>
<circle cx=${cx} cy=${cy} r="96" fill="url(#scope-bg-glow)" />
@@ -581,15 +581,15 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
${(isTwil || (!isDay && !isTwil)) && html`<${Fragment}>
<!-- Lit crescent — full moon disk clipped by the phase mask -->
<circle cx=${cx} cy=${moonY} r=${moonDrawR}
fill="#ddd8c8" mask="url(#scope-moon-mask)" />
fill="#e7e3d4" mask="url(#scope-moon-mask)" />
<!-- Texture overlay on lit face -->
<circle cx=${cx} cy=${moonY} r=${moonDrawR}
fill="url(#scope-moon-tex)"
mask="url(#scope-moon-mask)"
opacity="0.45" />
opacity="0.55" />
<!-- Dim unlit face so the full disk outline is still visible -->
<circle cx=${cx} cy=${moonY} r=${moonDrawR}
fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.7" />
fill="rgba(200,192,230,0.08)" stroke="none" />
</>`}
</g>
${(() => {
assets/js/components/DayTabs.js
+3 -1
View File
@@ -166,6 +166,7 @@ export function DayTabs({
right: 0,
height: isActive ? '5px' : '4px',
background: band.bg,
borderTop: '1px solid #c9b08a',
borderRadius: '0 0 2px 2px',
transition: 'height 0.1s',
}} aria-hidden="true"></span>
@@ -396,10 +397,11 @@ export function DayTabs({
display: 'flex',
alignItems: 'center',
gap: '10px',
margin: '8px 0 4px',
margin: '0 0 14px',
padding: '6px 10px',
background: band.tint,
borderLeft: `3px solid ${band.edge}`,
borderBottom: `1px solid ${band.edge}`,
borderRadius: '0 4px 4px 0',
fontSize: '12px',
color: '#3a2a18',