diff --git a/app/static/style.css b/app/static/style.css index 9feaee1..bb47685 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -152,7 +152,7 @@ input[type="text"], input[type="number"], input[type="password"], textarea, sele border: 1px solid #999; background: #fff; padding: 4px 6px; width: 100%; } -textarea { resize: vertical; } +textarea { resize: both; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 0; } diff --git a/app/static/tabel.js b/app/static/tabel.js index 023140f..5283a92 100644 --- a/app/static/tabel.js +++ b/app/static/tabel.js @@ -72,4 +72,48 @@ var kosong = wadah.querySelector(".cari-kosong"); if (kosong) kosong.style.display = ada ? "none" : ""; }); + + /* Tabel rencana mingguan RPS (#tabel-f): kolomnya sempit untuk 9 kolom x + 16 baris, jadi textarea-nya kecil sekali. Saat fokus, textarea membesar + dan "mengambang" (position:fixed) di atas sel-sel lain tanpa mengubah + lebar tabel; kembali normal saat pindah fokus. */ + var grAktif = null; + + function grBesarkan(el) { + if (grAktif === el) return; + if (grAktif) grKecilkan(grAktif); + var r = el.getBoundingClientRect(); + el.dataset.grLebar = el.style.width; + el.dataset.grTinggi = el.style.height; + el.style.position = "fixed"; + el.style.left = r.left + "px"; + el.style.top = r.top + "px"; + el.style.width = Math.max(r.width, 380) + "px"; + el.style.height = Math.max(r.height, 140) + "px"; + el.style.zIndex = "50"; + el.style.boxShadow = "0 6px 18px rgba(0,0,0,.35)"; + el.style.background = "#fff"; + grAktif = el; + } + + function grKecilkan(el) { + el.style.position = ""; + el.style.left = ""; + el.style.top = ""; + el.style.width = el.dataset.grLebar || ""; + el.style.height = el.dataset.grTinggi || ""; + el.style.zIndex = ""; + el.style.boxShadow = ""; + el.style.background = ""; + if (grAktif === el) grAktif = null; + } + + document.addEventListener("focusin", function (ev) { + if (ev.target.matches && ev.target.matches("#tabel-f textarea")) { + grBesarkan(ev.target); + } + }); + document.addEventListener("focusout", function (ev) { + if (ev.target === grAktif) grKecilkan(ev.target); + }); })();