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
+13 -6
View File
@@ -7,19 +7,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<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>
<body>
<div class="background-image"></div>
<div class="timer-container">
<div class="timer-panel-container">
<div class="timer-panel">
<h3 class="location-container">The <span id="location">...</span> Championship</h3>
<p class="championship">at <span id="time">00:00</span></p>
<p class="remaining">Remaining: <span id="timer">00:00:00</span></p>
<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="remaining">Remaining: <span id="timer">00:00:00</span></p>
</div>
<details>
<details class="more">
<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>
</div>
</div>
js/ui.js
+11 -3
View File
@@ -23,7 +23,9 @@ export default class UI {
get paranoiaOffset() {
let currentParanoiaOffset = this.rootObject.getElementById('paranoia').value
if (this.savedParanoiaOffset != currentParanoiaOffset) {
this.savedParanoiaOffset = currentParanoiaOffset
localStorage.setItem('paranoiaOffset', currentParanoiaOffset)
this.#updateParanoiaPlural()
}
return currentParanoiaOffset
@@ -54,6 +56,7 @@ export default class UI {
#setParanoiaOffset(value) {
this.rootObject.getElementById('paranoia').value = value
this.#updateParanoiaPlural()
}
#loadResponseIntoData(response) {
@@ -64,6 +67,10 @@ export default class UI {
fetch(Data.championshipsURL).then(this.#loadResponseIntoData)
}
#updateParanoiaPlural() {
this.rootObject.getElementById('minutes_plural').innerHTML = this.paranoiaOffset == 1 ? '' : 's'
}
#updateChampionshipDetails() {
this.rootObject.getElementById('time').innerHTML = Transform.time(this.next?.time)
this.rootObject.getElementById('location').innerHTML = this.next?.location
@@ -90,11 +97,12 @@ export default class UI {
#buildChampionshipDay(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' : '')
return `<div class="${dayContainerClasses}"><ul class="times">${dayContainer}</ul></div>`
return `<div class="${dayContainerClasses}">${dayContainer}</div>`
}
#buildChampionshipTimes(day, details) {
style.css
+65 -12
View File
@@ -1,9 +1,18 @@
: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;
--modal-background: rgba(255, 255, 255, 0.7);
--highlighted-modal-background: rgba(255, 210, 242, 0.7);
--highlighted-row: rgba(229, 59, 185, 0.55);
--more: var(--highlighted-modal-background);
}
* {
@@ -12,8 +21,9 @@
html {
margin: 0;
font-family: sans-serif;
background-color: white;
font-family: 'Quicksand', sans-serif;
background-color: var(--background);
color: var(--text);
}
body {
@@ -21,6 +31,22 @@ body {
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 {
position: fixed;
inset: 0;
@@ -31,19 +57,28 @@ body {
background-size: cover;
}
.timer-container {
.timer-panel-container {
min-height: 600px;
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 {
text-align: center;
max-width: 40em;
margin: 5px auto;
background-color: var(--modal-background);
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px;
padding: 0;
}
.location-container {
@@ -55,6 +90,21 @@ body {
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 {
display: flex;
flex-flow: row wrap;
@@ -63,9 +113,6 @@ body {
.day-container {
flex: 1 1 auto;
background-color: var(--modal-background);
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px;
}
@@ -84,9 +131,15 @@ body {
.time-container {
list-style-type: none;
padding: 3px 5px;
border-radius: 5px;
border-radius: var(--border-radius);
}
.next-time {
background-color: var(--highlighted-row);
}
@media screen and (max-width: 600px) {
.no-mobile {
display: none;
}
}