parent
3c82cdd594
commit
2fbcd3b200
|
|
@ -133,6 +133,15 @@ $existingJson = json_encode($existing, JSON_UNESCAPED_UNICODE);
|
||||||
.slrow.end.off .endlbl { color: #999; }
|
.slrow.end.off .endlbl { color: #999; }
|
||||||
.endlbl input { width: 18px; height: 18px; flex: none; cursor: pointer; accent-color: #d9932f; }
|
.endlbl input { width: 18px; height: 18px; flex: none; cursor: pointer; accent-color: #d9932f; }
|
||||||
|
|
||||||
|
/* hour tick ruler under each slider */
|
||||||
|
.ticks-row { display: flex; align-items: flex-start; gap: 10px; margin: -3px 0 4px; }
|
||||||
|
.tkspace-l { width: 66px; flex: none; }
|
||||||
|
.tkspace-r { width: 54px; flex: none; }
|
||||||
|
.ticks { position: relative; flex: 1; min-width: 60px; height: 16px; margin: 0 8px; }
|
||||||
|
.tick { position: absolute; top: 0; width: 1px; height: 5px; background: #cbd9c4; transform: translateX(-0.5px); }
|
||||||
|
.tick.major { height: 8px; background: #a7c295; }
|
||||||
|
.ticklab { position: absolute; top: 7px; font-size: 9px; color: #96ab88; transform: translateX(-50%); white-space: nowrap; }
|
||||||
|
|
||||||
.ed-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
.ed-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
||||||
.ed-line input.note { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; flex: 1; min-width: 90px; }
|
.ed-line input.note { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; flex: 1; min-width: 90px; }
|
||||||
|
|
||||||
|
|
@ -183,6 +192,7 @@ $existingJson = json_encode($existing, JSON_UNESCAPED_UNICODE);
|
||||||
<input type="range" id="openR">
|
<input type="range" id="openR">
|
||||||
<span class="sltime" id="openT">09:00</span>
|
<span class="sltime" id="openT">09:00</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ticks-row"><span class="tkspace-l"></span><div class="ticks" id="ticksOpen"></div><span class="tkspace-r"></span></div>
|
||||||
<div class="slrow end off" id="endRow">
|
<div class="slrow end off" id="endRow">
|
||||||
<label class="endlbl"><span>End</span><input type="checkbox" id="endChk"></label>
|
<label class="endlbl"><span>End</span><input type="checkbox" id="endChk"></label>
|
||||||
<input type="range" id="closeR">
|
<input type="range" id="closeR">
|
||||||
|
|
@ -268,6 +278,24 @@ $existingJson = json_encode($existing, JSON_UNESCAPED_UNICODE);
|
||||||
[openR, closeR].forEach(function (r) { r.min = DAY_MIN; r.max = DAY_MAX; r.step = STEP; });
|
[openR, closeR].forEach(function (r) { r.min = DAY_MIN; r.max = DAY_MAX; r.step = STEP; });
|
||||||
openR.value = DEF_OPEN; closeR.value = DEF_CLOSE; endChk.checked = false;
|
openR.value = DEF_OPEN; closeR.value = DEF_CLOSE; endChk.checked = false;
|
||||||
|
|
||||||
|
// hour tick ruler (a mark + label every hour); shown once under Start, guides both sliders
|
||||||
|
function buildTicks(el) {
|
||||||
|
const startH = DAY_MIN / 60, endH = DAY_MAX / 60, span = endH - startH;
|
||||||
|
for (let h = startH; h <= endH; h++) {
|
||||||
|
const pct = ((h - startH) / span) * 100;
|
||||||
|
const t = document.createElement('span');
|
||||||
|
t.className = 'tick major';
|
||||||
|
t.style.left = pct + '%';
|
||||||
|
el.appendChild(t);
|
||||||
|
const l = document.createElement('span');
|
||||||
|
l.className = 'ticklab';
|
||||||
|
l.style.left = pct + '%';
|
||||||
|
l.textContent = h;
|
||||||
|
el.appendChild(l);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
buildTicks(document.getElementById('ticksOpen'));
|
||||||
|
|
||||||
function paintEditor() {
|
function paintEditor() {
|
||||||
openT.textContent = minToStr(+openR.value);
|
openT.textContent = minToStr(+openR.value);
|
||||||
if (endChk.checked) {
|
if (endChk.checked) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue