thayol/sso-timer
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign after "more" has been added

Browse Source
This commit is contained in:
Thayol
2023-12-02 18:06:35 +01:00
parent 6f2d74019f
commit 9e82d9a6b4
3 changed files with 89 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11 -4
View File
@@ -7,19 +7,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/png" sizes="32x32" href="src/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="src/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="background-image"></div> <div class="background-image"></div>
<div class="timer-container"> <div class="timer-panel-container">
<div class="timer-panel"> <div class="timer-panel">
<h3 class="location-container">The <span id="location">...</span> Championship</h3> <div class="timer-container">
<h3 class="location-container"><span class="no-mobile">The </span><span id="location">...</span><span class="no-mobile"> Championship</span></h3>
<p class="championship">at <span id="time">00:00</span></p> <p class="championship">at <span id="time">00:00</span></p>
<p class="remaining">Remaining: <span id="timer">00:00:00</span></p> <p class="remaining">Remaining: <span id="timer">00:00:00</span></p>
</div>
<details> <details class="more">
<summary>More</summary> <summary>More</summary>
<p class="paranoia-disclaimer">Make my timers shorter by <input id="paranoia" type="number" step="1" value="2"></input></p> <div class="more-content">
<p class="paranoia-disclaimer">Make my timers shorter by <input id="paranoia" type="number" step="1" value="2"></input> minute<span id="minutes_plural">s</span>.</p>
</div>
</details> </details>
</div> </div>
</div> </div>
js/ui.js
+11 -3
View File
@@ -23,7 +23,9 @@ export default class UI {
get paranoiaOffset() { get paranoiaOffset() {
let currentParanoiaOffset = this.rootObject.getElementById('paranoia').value let currentParanoiaOffset = this.rootObject.getElementById('paranoia').value
if (this.savedParanoiaOffset != currentParanoiaOffset) { if (this.savedParanoiaOffset != currentParanoiaOffset) {
this.savedParanoiaOffset = currentParanoiaOffset
localStorage.setItem('paranoiaOffset', currentParanoiaOffset) localStorage.setItem('paranoiaOffset', currentParanoiaOffset)
this.#updateParanoiaPlural()
} }
return currentParanoiaOffset return currentParanoiaOffset
@@ -54,6 +56,7 @@ export default class UI {
#setParanoiaOffset(value) { #setParanoiaOffset(value) {
this.rootObject.getElementById('paranoia').value = value this.rootObject.getElementById('paranoia').value = value
this.#updateParanoiaPlural()
} }
#loadResponseIntoData(response) { #loadResponseIntoData(response) {
@@ -64,6 +67,10 @@ export default class UI {
fetch(Data.championshipsURL).then(this.#loadResponseIntoData) fetch(Data.championshipsURL).then(this.#loadResponseIntoData)
} }
#updateParanoiaPlural() {
this.rootObject.getElementById('minutes_plural').innerHTML = this.paranoiaOffset == 1 ? '' : 's'
}
#updateChampionshipDetails() { #updateChampionshipDetails() {
this.rootObject.getElementById('time').innerHTML = Transform.time(this.next?.time) this.rootObject.getElementById('time').innerHTML = Transform.time(this.next?.time)
this.rootObject.getElementById('location').innerHTML = this.next?.location this.rootObject.getElementById('location').innerHTML = this.next?.location
@@ -90,11 +97,12 @@ export default class UI {
#buildChampionshipDay(dayDetails) { #buildChampionshipDay(dayDetails) {
const [day, details] = dayDetails const [day, details] = dayDetails
let dayContainer = `<h1 class="day-title">${Day.names[day]}</h1>`
dayContainer += this.#buildChampionshipTimes(day, details) let dayContainer = this.#buildChampionshipTimes(day, details)
dayContainer = `<h1 class="day-title">${Day.names[day]}</h1><ul class="times">${dayContainer}</ul>`
let dayContainerClasses = 'day-container' + ((Day.today == day) ? ' today' : '') let dayContainerClasses = 'day-container' + ((Day.today == day) ? ' today' : '')
return `<div class="${dayContainerClasses}"><ul class="times">${dayContainer}</ul></div>` return `<div class="${dayContainerClasses}">${dayContainer}</div>`
} }
#buildChampionshipTimes(day, details) { #buildChampionshipTimes(day, details) {
style.css
+65 -12
View File
@@ -1,9 +1,18 @@
:root { :root {
--border: black; --text: black;
--background: white;
--border: white;
--border-size: 0px;
--border-pattern: solid;
--border-radius: 10px;
--box-shadow-offset: 0 0;
--box-shadow-spread: 10px;
--box-shadow: white;
--sso-pink: #e53bb9; --sso-pink: #e53bb9;
--modal-background: rgba(255, 255, 255, 0.7); --modal-background: rgba(255, 255, 255, 0.7);
--highlighted-modal-background: rgba(255, 210, 242, 0.7); --highlighted-modal-background: rgba(255, 210, 242, 0.7);
--highlighted-row: rgba(229, 59, 185, 0.55); --highlighted-row: rgba(229, 59, 185, 0.55);
--more: var(--highlighted-modal-background);
} }
* { * {
@@ -12,8 +21,9 @@
html { html {
margin: 0; margin: 0;
font-family: sans-serif; font-family: 'Quicksand', sans-serif;
background-color: white; background-color: var(--background);
color: var(--text);
} }
body { body {
@@ -21,6 +31,22 @@ body {
padding: 20px; padding: 20px;
} }
.more summary {
padding: 7px 5px;
cursor: pointer;
}
.more .more-content {
padding: 2px 5px 7px;
}
.more {
margin: 0;
background-color: var(--more);
border-radius: 0 0 var(--border-radius) var(--border-radius);
box-shadow: var(--box-shadow-offset) var(--box-shadow-spread) var(--more);
}
.background-image { .background-image {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -31,19 +57,28 @@ body {
background-size: cover; background-size: cover;
} }
.timer-container { .timer-panel-container {
min-height: 600px; min-height: 600px;
padding-top: 50px; padding-top: 50px;
} }
.timer-container, .day-container {
background-color: var(--modal-background);
border: var(--border-size) var(--border-pattern) var(--border);
box-shadow: var(--box-shadow-offset) var(--box-shadow-spread) var(--box-shadow);
border-radius: var(--border-radius);
}
.timer-container {
padding: 5px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.timer-panel { .timer-panel {
text-align: center; text-align: center;
max-width: 40em; max-width: 40em;
margin: 5px auto; margin: 5px auto;
background-color: var(--modal-background); padding: 0;
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px;
} }
.location-container { .location-container {
@@ -55,6 +90,21 @@ body {
margin-top: 0; margin-top: 0;
} }
.paranoia-disclaimer {
font-style: italic;
}
.paranoia-disclaimer input#paranoia {
font-family: inherit;
font-size: inherit;
background-color: transparent;
border: none;
border-bottom: 2px var(--border-pattern) var(--text);
padding: 1px 4px;
text-align: center;
width: 2em;
}
.days { .days {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@@ -63,9 +113,6 @@ body {
.day-container { .day-container {
flex: 1 1 auto; flex: 1 1 auto;
background-color: var(--modal-background);
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px; padding: 5px;
} }
@@ -84,9 +131,15 @@ body {
.time-container { .time-container {
list-style-type: none; list-style-type: none;
padding: 3px 5px; padding: 3px 5px;
border-radius: 5px; border-radius: var(--border-radius);
} }
.next-time { .next-time {
background-color: var(--highlighted-row); background-color: var(--highlighted-row);
} }
@media screen and (max-width: 600px) {
.no-mobile {
display: none;
}
}