diff --git a/2026.tajmcal.css b/2026.tajmcal.css new file mode 100644 index 0000000..cc260e4 --- /dev/null +++ b/2026.tajmcal.css @@ -0,0 +1,532 @@ +body { + font-size: small; + font-family: sans-serif; + margin: 0; +} + +article { + background: red; + color: white; + padding: 0.5em; + border: 2px solid transparent; +} + +article:not(.break, .holiday):hover { + background-color: #f44; +} + +article:focus { + border-color: #300; +} + +.break { + background-color: #f0f; + background-image: repeating-linear-gradient( + -45deg, + transparent, + transparent 10px, + rgba(255, 255, 255, 0.5) 10px, + rgba(255, 255, 255, 0.5) 20px + ); + color: #fff; +} + +.holiday { + background-color: #0f0; + background-image: repeating-linear-gradient( + -45deg, + transparent, + transparent 10px, + rgba(255, 255, 255, 0.5) 10px, + rgba(255, 255, 255, 0.5) 20px + ); + color: #080; +} + +header { + background-color: #d70000; + color: #fff; + padding: 0 1em; + display: flex; + gap: 1em; + + b { + text-transform: uppercase; + padding: 5px 0; + font-size: 1.4em; + } +} + +nav { + flex: 1; + align-self: flex-end; + display: flex; + gap: 0.33em; + justify-content: flex-end; + + a, + strong { + padding: 0.5em; + } + + a { + background-color: #a00; + color: #fff; + } + + strong { + background-color: #fff; + color: #000; + font-weight: normal; + } +} + +[data-draggable], +[data-resizeable] { + position: relative; +} + +[data-draggable]::before, +[data-resizeable]::after { + position: absolute; + padding: 0.1em 0.25em; +} + +[data-draggable]::before { + content: "↕"; + top: 0; + right: 0; + cursor: move; +} + +[data-resizeable]::after { + content: "⥙"; + bottom: 0; + left: 0; + right: 0; + text-align: center; + cursor: s-resize; +} + +.calendar { + border: 1px solid #aaa; + background: #eee; + display: grid; + gap: 2px; + grid-template-columns: auto repeat(5, 1fr); + grid-template-rows: auto repeat(52, 25px); + + .nt { + background-color: #fff; + } + + .wh { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: span 5 / span 5; + grid-column-start: 2; + grid-row: span 1 / span 1; + grid-row-start: 1; + text-align: center; + + > b { + font-weight: normal; + font-size: smaller; + padding: 0.25em; + background-color: #000; + color: #fff; + } + } + + .ts { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: span 1 / span 1; + grid-column-start: 1; + grid-row: span 52 / span 52; + grid-row-start: 2; + text-align: right; + + > b { + font-weight: normal; + background-color: #fef9c2; + font-size: smaller; + border-bottom: 2px solid #aaa; + padding: 0.25em; + grid-row: span 4 / span 4; + } + } + + .log { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: span 5 / span 5; + grid-column-start: 2; + grid-row: span 52 / span 52; + grid-column-start: 2; + } +} + +i { + background-color: #fff; + + &.pressed { + background-color: #ff0; + } +} + +.panel { + background: #333; + color: #fff; + position: fixed; + top: 0; + bottom: 0; + width: 0; + overflow: hidden; + + &.left { + border-left: 5px solid #000; + left: 0; + } +} + +/* +Day +*/ + +[data-day="mon"] { + grid-column: 1; +} +[data-day="tue"] { + grid-column: 2; +} +[data-day="wed"] { + grid-column: 3; +} +[data-day="thu"] { + grid-column: 4; +} +[data-day="fri"] { + grid-column: 5; +} + +/* +Timestamps +*/ + +[data-start="0600"] { + grid-row-start: 1; +} +[data-start="0615"] { + grid-row-start: 2; +} +[data-start="0630"] { + grid-row-start: 3; +} +[data-start="0645"] { + grid-row-start: 4; +} +[data-start="0700"] { + grid-row-start: 5; +} +[data-start="0715"] { + grid-row-start: 6; +} +[data-start="0730"] { + grid-row-start: 7; +} +[data-start="0745"] { + grid-row-start: 8; +} +[data-start="0800"] { + grid-row-start: 9; +} +[data-start="0815"] { + grid-row-start: 10; +} +[data-start="0830"] { + grid-row-start: 11; +} +[data-start="0845"] { + grid-row-start: 12; +} +[data-start="0900"] { + grid-row-start: 13; +} +[data-start="0915"] { + grid-row-start: 14; +} +[data-start="0930"] { + grid-row-start: 15; +} +[data-start="0945"] { + grid-row-start: 16; +} +[data-start="1000"] { + grid-row-start: 17; +} +[data-start="1015"] { + grid-row-start: 18; +} +[data-start="1030"] { + grid-row-start: 19; +} +[data-start="1045"] { + grid-row-start: 20; +} +[data-start="1100"] { + grid-row-start: 21; +} +[data-start="1115"] { + grid-row-start: 22; +} +[data-start="1130"] { + grid-row-start: 23; +} +[data-start="1145"] { + grid-row-start: 24; +} +[data-start="1200"] { + grid-row-start: 25; +} +[data-start="1215"] { + grid-row-start: 26; +} +[data-start="1230"] { + grid-row-start: 27; +} +[data-start="1245"] { + grid-row-start: 28; +} +[data-start="1300"] { + grid-row-start: 29; +} +[data-start="1315"] { + grid-row-start: 30; +} +[data-start="1330"] { + grid-row-start: 31; +} +[data-start="1345"] { + grid-row-start: 32; +} +[data-start="1400"] { + grid-row-start: 33; +} +[data-start="1415"] { + grid-row-start: 34; +} +[data-start="1430"] { + grid-row-start: 35; +} +[data-start="1445"] { + grid-row-start: 36; +} +[data-start="1500"] { + grid-row-start: 37; +} +[data-start="1515"] { + grid-row-start: 38; +} +[data-start="1530"] { + grid-row-start: 39; +} +[data-start="1545"] { + grid-row-start: 40; +} +[data-start="1600"] { + grid-row-start: 41; +} +[data-start="1615"] { + grid-row-start: 42; +} +[data-start="1630"] { + grid-row-start: 43; +} +[data-start="1645"] { + grid-row-start: 44; +} +[data-start="1700"] { + grid-row-start: 45; +} +[data-start="1715"] { + grid-row-start: 46; +} +[data-start="1730"] { + grid-row-start: 47; +} +[data-start="1745"] { + grid-row-start: 48; +} +[data-start="1800"] { + grid-row-start: 49; +} +[data-start="1815"] { + grid-row-start: 50; +} +[data-start="1830"] { + grid-row-start: 51; +} +[data-start="1845"] { + grid-row-start: 52; +} + +[data-end="0615"] { + grid-row-end: 2; +} +[data-end="0630"] { + grid-row-end: 3; +} +[data-end="0645"] { + grid-row-end: 4; +} +[data-end="0700"] { + grid-row-end: 5; +} +[data-end="0715"] { + grid-row-end: 6; +} +[data-end="0730"] { + grid-row-end: 7; +} +[data-end="0745"] { + grid-row-end: 8; +} +[data-end="0800"] { + grid-row-end: 9; +} +[data-end="0815"] { + grid-row-end: 10; +} +[data-end="0830"] { + grid-row-end: 11; +} +[data-end="0845"] { + grid-row-end: 12; +} +[data-end="0900"] { + grid-row-end: 13; +} +[data-end="0915"] { + grid-row-end: 14; +} +[data-end="0930"] { + grid-row-end: 15; +} +[data-end="0945"] { + grid-row-end: 16; +} +[data-end="1000"] { + grid-row-end: 17; +} +[data-end="1015"] { + grid-row-end: 18; +} +[data-end="1030"] { + grid-row-end: 19; +} +[data-end="1045"] { + grid-row-end: 20; +} +[data-end="1100"] { + grid-row-end: 21; +} +[data-end="1115"] { + grid-row-end: 22; +} +[data-end="1130"] { + grid-row-end: 23; +} +[data-end="1145"] { + grid-row-end: 24; +} +[data-end="1200"] { + grid-row-end: 25; +} +[data-end="1215"] { + grid-row-end: 26; +} +[data-end="1230"] { + grid-row-end: 27; +} +[data-end="1245"] { + grid-row-end: 28; +} +[data-end="1300"] { + grid-row-end: 29; +} +[data-end="1315"] { + grid-row-end: 30; +} +[data-end="1330"] { + grid-row-end: 31; +} +[data-end="1345"] { + grid-row-end: 32; +} +[data-end="1400"] { + grid-row-end: 33; +} +[data-end="1415"] { + grid-row-end: 34; +} +[data-end="1430"] { + grid-row-end: 35; +} +[data-end="1445"] { + grid-row-end: 36; +} +[data-end="1500"] { + grid-row-end: 37; +} +[data-end="1515"] { + grid-row-end: 38; +} +[data-end="1530"] { + grid-row-end: 39; +} +[data-end="1545"] { + grid-row-end: 40; +} +[data-end="1600"] { + grid-row-end: 41; +} +[data-end="1615"] { + grid-row-end: 42; +} +[data-end="1630"] { + grid-row-end: 43; +} +[data-end="1645"] { + grid-row-end: 44; +} +[data-end="1700"] { + grid-row-end: 45; +} +[data-end="1715"] { + grid-row-end: 46; +} +[data-end="1730"] { + grid-row-end: 47; +} +[data-end="1745"] { + grid-row-end: 48; +} +[data-end="1800"] { + grid-row-end: 49; +} +[data-end="1815"] { + grid-row-end: 50; +} +[data-end="1830"] { + grid-row-end: 51; +} +[data-end="1845"] { + grid-row-end: 52; +} +[data-end="1900"] { + grid-row-end: 53; +} diff --git a/2026.tajmcal.html b/2026.tajmcal.html new file mode 100644 index 0000000..6ebd54d --- /dev/null +++ b/2026.tajmcal.html @@ -0,0 +1,171 @@ + + + + + Tidrapportering + + + + +
+ Tajm 0.1 + + + + +
+ +
+

Vecka 5

+
+ +
+ 5 jan + 6 jan + 7 jan + 8 jan + 9 jan +
+
+ 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18 +
+
+
+ Installerar Zed +
+ +
+ Skapar en HTML-mockup +
+ +
+ Subgrid experiment +
+ +
+ Lunch +
+ +
+ Trettondagen +
+ +
+ Installerar Zed +
+ +
+ Lunch +
+ +
+ Skapar en HTML-mockup +
+ +
+ Subgrid experiment +
+
+
+
+ + + diff --git a/2026.tajmcal.js b/2026.tajmcal.js new file mode 100644 index 0000000..d42864d --- /dev/null +++ b/2026.tajmcal.js @@ -0,0 +1,102 @@ +(function (W) { + let lock, pressed; + const D = ["mon", "tue", "wed", "thu", "fri"]; + const log = document.querySelector("[data-log]"); + + const cursor = document.createElement("i"); + cursor.hidden = 1; + log.appendChild(cursor); + + const { width, height, y, x } = log.getClientRects()[0]; + + const drag = (elm) => { + // copy node + // on mouse down: + // move node by grid + // on mouse up: + // re-render grid + }; + + const resize = (elm) => { + // copy node + // on mouse down: + // move node by grid + // on mouse up: + // re-render grid + }; + + const create = () => { + cursor.hidden = 1; + const a = document.createElement("article"); + const f = document.createElement("form"); + f.style.position = "absolute"; + f.method = "post"; + f.action = ""; + const i = document.createElement("input"); + i.addEventListener("keydown", ({ key: k }) => { + if (k == "Escape") { + i.blur(); + a.parentNode.removeChild(a); + } + }); + f.addEventListener("submit", (evt) => { + evt.preventDefault(); + a.dataset.draggable = 1; + a.dataset.resizeable = 1; + a.insertAdjacentHTML("afterbegin", i.value); + i.blur(); + f.parentNode.removeChild(f); + }); + a.dataset.day = cursor.dataset.day; + a.dataset.start = cursor.dataset.start; + a.dataset.end = cursor.dataset.end; + f.appendChild(i); + a.appendChild(f); + log.appendChild(a); + i.focus(); + return; + }; + + const updateCursorPos = ({ pageY, pageX }) => { + clearTimeout(lock); + lock = setTimeout(() => { + const r = Math.floor(((pageY - y) / height) * 52); + const c = Math.floor(((pageX - x) / width) * 5); + const p = ((r - (r % 4)) / 4 + 6) * 100 + (r % 4) * 15; + if (!pressed) { + cursor.dataset.day = D[c]; + cursor.dataset.start = ("0000" + p).slice(-4); + } + cursor.dataset.end = ( + "0000" + ((p % 100) % 45 == 0 ? p + 55 : p + 15) + ).slice(-4); + }, 1); + }; + + log.onmousedown = (evt) => { + if (evt.target == cursor) { + evt.preventDefault(); + cursor.classList.add("pressed"); + pressed = true; + } + }; + + log.onmouseup = (evt) => { + if (evt.target == cursor) { + evt.preventDefault(); + cursor.classList.remove("pressed"); + pressed = false; + create(); + } + }; + + log.onmouseover = ({ target: elm }) => { + if (elm == log) { + log.onmousemove = updateCursorPos; + cursor.hidden = 0; + } else if (elm != cursor) { + cursor.hidden = 1; + cursor.onmousemove = ""; + } + }; +})(this);