/* ========================================================================== จงเจริญการทอด — สไตล์เฉพาะจอมือถือ (บนเซิร์ฟเวอร์ชื่อ jjk-mobile.css) กฎเหล็กของไฟล์นี้ มีข้อเดียว: ทุกบรรทัดต้องอยู่ใน @media (max-width: …) เท่านั้น ห้ามมีอะไรอยู่นอกนั้นเด็ดขาด เพราะจอคอมต้องไม่เปลี่ยนแม้แต่พิกเซลเดียว — และวิธีที่รับประกันได้จริงคือ "เบราว์เซอร์ไม่อ่านโค้ดนี้เลยเมื่อจอกว้าง" ไม่ใช่ "เราระวังไม่ให้ชน" มีสคริปต์ test-mobile.js คอยตรวจข้อนี้ทุกครั้ง ถ้าเผลอเขียนนอกกรอบจะฟ้องทันที สวิตช์ปิด: ถ้า ทุกกฎในไฟล์นี้จะไม่ทำงาน ผู้ใช้กดปุ่มลอยมุมล่างซ้ายเพื่อกลับไปใช้หน้าจอแบบเดิมได้ตลอดเวลา ========================================================================== */ @media (max-width: 640px) { /* ---- 1) กล่องเนื้อหาต้องไม่ดันตัวเองให้กว้างเกินจอ ---- เจตนาคือ "ทำให้พอดีจอ" ไม่ใช่ "ซ่อนส่วนที่เกิน" เคยลองใส่ overflow-x:hidden ที่ body แล้วพบว่ามันตัดเนื้อหาที่ล้นออกจากสายตาเลย ปุ่มและตัวเลขที่อยู่ขวาสุดหายไปโดยที่ไม่มีทางเลื่อนไปดู — แย่กว่าปล่อยให้เลื่อนได้ จึงไม่ใช้วิธีนั้น แต่ไล่แก้ต้นเหตุทีละจุดแทน (มีสคริปต์วัดว่าจุดไหนล้นกี่พิกเซล) */ html:not([data-view="desktop"]) .wrap, html:not([data-view="desktop"]) .card { max-width: 100%; } /* ---- 2) ตารางทุกอันเลื่อนในตัวเองได้ ---- display:block ทำให้ กลายเป็นกล่องเลื่อน ส่วนแถวข้างในยังจัดคอลัมน์ตรงกันเหมือนเดิม (เบราว์เซอร์สร้างกล่องตารางซ้อนให้เอง) จึงไม่ต้องไปแก้ HTML ทีละอัน ตารางที่มีกล่อง .tw ครอบอยู่แล้วก็ยังทำงานปกติ ไม่ชนกัน */ html:not([data-view="desktop"]) table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } html:not([data-view="desktop"]) .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- 3) ปลดความกว้างที่ถูกล็อกไว้ ---- หลายที่ตั้ง min-width ไว้ให้คอลัมน์สวยบนคอม แต่บนมือถือมันคือสาเหตุที่ล้นจอ ปลดเฉพาะกล่องที่จัดวางแบบยืดหยุ่น ไม่แตะช่องกรอกที่ต้องกดด้วยนิ้ว */ html:not([data-view="desktop"]) .row > *, html:not([data-view="desktop"]) .grid > * { min-width: 0; } /* ---- 4) แถวปุ่มบนหัวหน้าจอ ---- ปุ่มเยอะ (บางหน้า 7–9 ปุ่ม) พอจอแคบเลยเบียดกันจนกดผิด ให้เลื่อนเป็นแถวเดียวแทนการตกบรรทัด จะได้ไม่ดันเนื้อหาลงไป */ html:not([data-view="desktop"]) header.top, html:not([data-view="desktop"]) .top { gap: 6px; /* ปุ่มบนหัวมีเยอะจนรวมกันกว้างเกินจอ (วัดได้ 411 จุดบนจอ 390) ถ้าไม่ยอมให้ตกบรรทัด มันจะไปดันทั้งหน้าให้กว้างตาม แล้วต้องเลื่อนซ้ายขวาทั้งหน้า เลือกให้ตกบรรทัดแทนการทำกล่องเลื่อน เพราะกล่องเลื่อนจะตัดเมนูที่กางลงมาจากหัวหน้าจอหายไปด้วย */ flex-wrap: wrap; row-gap: 6px; } html:not([data-view="desktop"]) .iconbtn { padding: 7px 9px; font-size: 12.5px; } /* ---- 4b) หัวการ์ดต้องยอมตกบรรทัด ---- หัวการ์ดเกือบทุกใบเป็น flex แถวเดียว: ชื่อเรื่อง + ตัวดันช่องว่าง + ปุ่ม บนจอแคบผลรวมความกว้างเกินจอ แล้วทั้งการ์ดถูกดันให้กว้างตาม เนื้อหาข้างในจึงโดนตัดหายไปทางขวาทั้งใบ ทั้งที่ตัวเนื้อหาเองไม่ได้กว้างเลย วิธีแก้: ให้ตัวดันช่องว่าง (.spacer) กินเต็มบรรทัด มันจะดันของที่อยู่หลังมันลงบรรทัดใหม่ทันที ได้ผลเป็น "ชื่อเรื่องบรรทัดบน · ปุ่มบรรทัดล่าง" โดยไม่ต้องแก้ HTML สักหน้าเดียว */ html:not([data-view="desktop"]) .card > h2, html:not([data-view="desktop"]) .card > h3 { flex-wrap: wrap; row-gap: 8px; } html:not([data-view="desktop"]) .card > h2 > .spacer, html:not([data-view="desktop"]) .card > h3 > .spacer { flex: 1 0 100%; height: 0; } /* ---- 5) ปุ่มต้องใหญ่พอให้นิ้วโป้งกดโดน ---- มาตรฐานสากลคือ 44×44 จุด ปุ่มเล็กกว่านี้คือกดพลาดบ่อย */ html:not([data-view="desktop"]) button, html:not([data-view="desktop"]) .btn, html:not([data-view="desktop"]) a.btn { min-height: 38px; } html:not([data-view="desktop"]) .btn.sm, html:not([data-view="desktop"]) .btn.xs, html:not([data-view="desktop"]) .iconbtn { /* 34 ไม่พอจริง — วัดหน้าคลังบนจอ 390 แล้วเจอปุ่มขนาดนี้ 43 ปุ่มในหน้าเดียว ปุ่มพวกนี้อยู่ติดกันในตาราง กดพลาดทีเดียวคือแก้ข้อมูลผิดแถว */ min-height: 38px; } html:not([data-view="desktop"]) select { min-height: 38px; } /* ช่องกรอกก็เป็นเป้าที่ต้องแตะเหมือนปุ่ม — วัดจริงเจอช่องสูงไม่ถึง 38 อยู่ 113 ช่อง ในแท็บพนักงานหน้าตั้งค่าหน้าเดียว · ยกเว้นช่องติ๊กกับปุ่มวงกลม เพราะมันมีกล่อง
(ไม่มีคลาสที่ตัวตาราง) จึงต้องยิงผ่านกล่อง .tw ไม่ใช่ยิงที่คลาสของตาราง — เคยเขียนเป็น table.table แล้วไม่โดนสักอัน ข้ามช่องที่มี colspan เพราะเป็นแถวหัวข้อ/แถวกางรายละเอียด ตรึงแล้วหน้าตาเพี้ยน */ html:not([data-view="desktop"]) .tw > table th:first-child:not([colspan]), html:not([data-view="desktop"]) .tw > table td:first-child:not([colspan]), html:not([data-view="desktop"]) table.gs-tab th:first-child:not([colspan]), html:not([data-view="desktop"]) table.gs-tab td:first-child:not([colspan]), html:not([data-view="desktop"]) table.ptab th:first-child:not([colspan]), html:not([data-view="desktop"]) table.ptab td:first-child:not([colspan]), html:not([data-view="desktop"]) table.bm-tab th:first-child:not([colspan]), html:not([data-view="desktop"]) table.bm-tab td:first-child:not([colspan]) { position: sticky; left: 0; z-index: 2; background: var(--surface, #fff); box-shadow: 1px 0 0 var(--line, rgba(0,0,0,.12)); } /* ---- 6c) แถบแท็บด้านบนให้เลื่อนข้างเป็นแถวเดียว ---- หน้าคลังมี 9 เมนูหลัก หน้าตั้งค่ามี 17 แท็บ ถ้าปล่อยให้ตกบรรทัด แท็บจะกินความสูงไปครึ่งจอ เหลือที่ให้เนื้อหาจริงนิดเดียว */ html:not([data-view="desktop"]) nav.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html:not([data-view="desktop"]) nav.tabs::-webkit-scrollbar { display: none } html:not([data-view="desktop"]) nav.tabs > * { flex: 0 0 auto } /* ---- 7) เว้นที่ด้านล่างให้ปุ่มลอยไม่ทับเนื้อหาบรรทัดสุดท้าย ---- */ html:not([data-view="desktop"]) body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } /* ══ ตารางกลายเป็นการ์ด — จอมือถือเลื่อนลงอย่างเดียว ═══════════════════════ เจ้าของสั่งไว้ชัด: "หน้ามือถือควรใช้แบบ fitpage เท่านั้น ไม่สามารถเลื่อนซ้ายขวาได้" ตัวที่พาข้อความจากหัวตารางลงมาที่ช่อง (data-lb) อยู่ใน จงเจริญ-มือถือ.js ตารางที่ยังไม่ถูกแปลง (ไม่มีคลาส .jjkcards) จะยังเลื่อนซ้ายขวาได้เหมือนเดิม จึงไม่มีทางที่หน้าไหนจะพังเพราะกฎชุดนี้ — แย่ที่สุดคือ "เหมือนเดิม" ⚠️ กฎชุดนี้ต้องมาหลังกฎ "ตารางเลื่อนในตัวเองได้" ในไฟล์นี้ ไม่งั้นจะถูกทับ */ html:not([data-view="desktop"]) table.jjkcards { display: block; overflow-x: visible; /* ไม่ต้องเลื่อนแล้ว การ์ดพอดีจออยู่แล้ว */ width: 100%; /* ⚠️ หน้าเว็บตั้ง table{min-width:max-content} ไว้ให้คอลัมน์บนคอมไม่ถูกบีบ ซึ่งถูกสำหรับตารางจริง แต่พอเป็นการ์ดแล้วมันบังคับให้กล่องกว้างตามเนื้อหา วัดได้ 403px บนจอ 390 → ทั้งหน้าเลื่อนซ้ายขวาได้ ซึ่งเป็นสิ่งที่ต้องเลิก ปลดตรงนี้ที่เดียว การ์ดจึงหดตามจอได้จริง */ min-width: 0; max-width: 100%; border-collapse: separate; border-spacing: 0; } html:not([data-view="desktop"]) table.jjkcards > tbody, html:not([data-view="desktop"]) table.jjkcards > tfoot, html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr, html:not([data-view="desktop"]) table.jjkcards > tfoot > tr { min-width: 0; max-width: 100%; } html:not([data-view="desktop"]) table.jjkcards > thead { display: none } html:not([data-view="desktop"]) table.jjkcards > tbody, html:not([data-view="desktop"]) table.jjkcards > tfoot { display: block; width: 100% } /* แต่ละแถว = การ์ดหนึ่งใบ */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr { display: block; width: 100%; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line, #e1e0d9); border-radius: 10px; background: var(--surface, #fff); } html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr:last-child { margin-bottom: 0 } /* แต่ละช่อง = หนึ่งบรรทัด "ป้าย : ค่า" */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td { display: grid; grid-template-columns: minmax(72px, 40%) minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 5px 0; border: 0; border-bottom: 1px dashed var(--line, #e1e0d9); text-align: left; white-space: normal; /* ปลดการห้ามตัดบรรทัด ไม่งั้นข้อความยาวจะดันจน */ word-break: break-word; } html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td:last-child { border-bottom: 0 } html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td::before { content: attr(data-lb); color: var(--muted, #898781); font-size: 12px; line-height: 1.35; font-weight: 600; } /* ช่องแรกของแถว = ชื่อของรายการนั้น ทำเป็นหัวการ์ด ไม่ต้องมีป้ายกำกับ */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td:first-child { display: block; padding: 0 0 7px; margin-bottom: 4px; border-bottom: 1px solid var(--line, #e1e0d9); font-size: 15px; font-weight: 700; } html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td:first-child::before { content: none } /* ช่องที่หัวตารางว่าง (คอลัมน์ปุ่ม) = ให้เต็มความกว้าง ไม่ต้องเว้นที่ให้ป้าย */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td[data-nolb], html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td[data-full] { display: block; padding: 7px 0 0; } html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td[data-nolb]::before, html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td[data-full]::before { content: none } /* แถวสรุป (มีช่องกินหลายคอลัมน์) — ทำให้ดูต่างจากการ์ดข้อมูลปกติ */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr[data-rowfull] { background: var(--surface-2, #f2f1ec); font-weight: 600; } /* ตัวเลขที่เดิมชิดขวาในตาราง บนการ์ดต้องชิดซ้ายให้ตรงแนวกับค่าอื่น */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td.num { text-align: left } /* ช่องกรอกในการ์ดต้องเต็มความกว้างที่เหลือ ไม่ใช่กว้างตามค่าเริ่มต้นของตาราง */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td input, html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td select, html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td textarea { width: 100%; min-width: 0; max-width: 100%; } /* ปุ่มในการ์ด — เรียงต่อกันได้ ไม่ดันจนล้น */ html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td button { max-width: 100% } html:not([data-view="desktop"]) table.jjkcards > :is(tbody, tfoot) > tr > td[data-nolb] { display: flex; flex-wrap: wrap; gap: 6px; } /* กล่องครอบตารางไม่ต้องเลื่อนแล้วถ้าข้างในเป็นการ์ด */ html:not([data-view="desktop"]) .tw:has(> table.jjkcards) { overflow-x: visible } /* ══ หน้าปรับสต๊อกแบบขั้นตอน — กรอกลงล่างแล้วกดถัดไป ═══════════════════ เจ้าของสั่งไว้: "ไม่สามารถเลื่อนซ้ายขวาได้ มีแต่กรอกลงล่างเรื่อยๆ แล้ว next" ตารางเดิมยังอยู่ครบในหน้า แค่ถูกซ่อน — กดปุ่ม "ใช้จอคอม" ก็กลับมาทันที */ html:not([data-view="desktop"]) .adjdesk { display: none } html:not([data-view="desktop"]) .adjmob { display: block } /* แถบหัว: บอกว่าอยู่ขั้นไหน จากทั้งหมดกี่ขั้น */ html:not([data-view="desktop"]) .asbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 9px 11px; border: 1px solid var(--line, #e1e0d9); border-radius: 10px; background: var(--surface, #fff); } html:not([data-view="desktop"]) .asbar .astitle { font-size: 15px; font-weight: 700 } html:not([data-view="desktop"]) .asbar .assub { grid-column: 1 / -1; color: var(--muted, #898781); font-size: 12px; } html:not([data-view="desktop"]) .asdots { display: flex; gap: 5px; justify-self: end } html:not([data-view="desktop"]) .asdot { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line, #e1e0d9); border-radius: 999px; background: var(--surface-2, #f2f1ec); color: var(--text-2, #52514e); font: 700 12.5px/1 inherit; cursor: pointer; } html:not([data-view="desktop"]) .asdot.ok { border-color: var(--good, #0ca30c); color: var(--good, #0ca30c); } html:not([data-view="desktop"]) .asdot.on { border-color: var(--brand, #0f766e); background: var(--brand, #0f766e); color: #fff; } /* การ์ดของหนึ่งรายการ — ทุกช่องเรียงลง ไม่มีอะไรอยู่นอกจอ */ html:not([data-view="desktop"]) .ascards { display: block } html:not([data-view="desktop"]) .ascard { margin: 0 0 9px; padding: 11px 12px; border: 1px solid var(--line, #e1e0d9); border-radius: 11px; background: var(--surface, #fff); } html:not([data-view="desktop"]) .ascard.filled { border-color: color-mix(in srgb, var(--brand, #0f766e) 45%, transparent); background: color-mix(in srgb, var(--brand, #0f766e) 5%, var(--surface, #fff)); } html:not([data-view="desktop"]) .ascard .ashead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #e1e0d9); font-size: 15.5px; } html:not([data-view="desktop"]) .ascard .asrow { display: grid; grid-template-columns: minmax(88px, 38%) minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 0; } html:not([data-view="desktop"]) .ascard .aslb { color: var(--muted, #898781); font-size: 12.5px; font-weight: 600; } html:not([data-view="desktop"]) .ascard .asnum { font-size: 15px; font-variant-numeric: tabular-nums } html:not([data-view="desktop"]) .ascard .asrow input { width: 100%; min-width: 0; } /* ช่อง "นับได้จริง" คือช่องที่ต้องกดบ่อยที่สุด ทำให้ใหญ่และกดง่าย */ html:not([data-view="desktop"]) .ascard .asrow.big input { height: 46px; font-size: 17px; font-weight: 700; text-align: center; } /* สรุปก่อนบันทึก */ html:not([data-view="desktop"]) .assum { margin-bottom: 12px; border: 1px solid var(--line, #e1e0d9); border-radius: 11px; background: var(--surface, #fff); overflow: hidden; } html:not([data-view="desktop"]) .assumrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line, #e1e0d9); } html:not([data-view="desktop"]) .assumrow .nm { font-weight: 600; word-break: break-word } html:not([data-view="desktop"]) .assumrow .vv, html:not([data-view="desktop"]) .assumrow .dd { font-variant-numeric: tabular-nums; white-space: nowrap } html:not([data-view="desktop"]) .assumtot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-2, #f2f1ec); font-weight: 700; } /* แถวปุ่มเดินขั้น — ติดขอบล่างจอ กดได้ตลอดโดยไม่ต้องเลื่อนกลับขึ้นไป */ html:not([data-view="desktop"]) .asnav { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 12px; padding: 9px 0 max(9px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg, #f9f9f7) 62%, color-mix(in srgb, var(--bg, #f9f9f7) 0%, transparent)); } html:not([data-view="desktop"]) .asnav .btn { min-height: 46px; font-size: 15px } } /* ========================================================================== ปุ่มสลับ "จอมือถือ / จอคอม" โผล่เฉพาะจอแคบ และโผล่ทั้งสองโหมด เพราะต้องกดกลับได้เสมอ ต้องอยู่นอก :not([data-view="desktop"]) ไม่งั้นพอสลับไปโหมดคอมแล้วปุ่มจะหายไปด้วย ========================================================================== */ @media (max-width: 640px) { #jjk-viewbtn { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 2147482000; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 2px 10px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.10); color: #1b1b1b; font: 650 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; opacity: .5; transition: opacity .2s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; } #jjk-viewbtn:hover, #jjk-viewbtn:focus-visible { opacity: 1 } #jjk-viewbtn:active { transform: scale(.95) } #jjk-viewbtn:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px } /* อยู่โหมดจอคอมบนมือถืออยู่ = ต้องเห็นชัดกว่าเดิม เพราะเป็นสถานะที่ไม่ปกติ */ html[data-view="desktop"] #jjk-viewbtn { opacity: 1; background: rgba(15,118,110,.92); border-color: rgba(255,255,255,.35); color: #fff; } @media (prefers-color-scheme: dark) { #jjk-viewbtn { background: rgba(38,38,36,.76); border-color: rgba(255,255,255,.14); color: #f4f3ef; } } } /* จอกว้าง = ไม่ต้องมีปุ่มนี้เลย */ @media (min-width: 641px) { #jjk-viewbtn { display: none } } /* ═══════════════════════════════════════════════════════════════════════ ข้อความพม่าต้องตัดบรรทัดได้ — ใช้ร่วมทุกหน้า ภาษาพม่าหลายคำเขียนติดกันโดยไม่มีช่องว่าง เบราว์เซอร์จึงหาที่ตัดบรรทัดไม่เจอ ข้อความยาว ๆ จะดันกล่องให้กว้างเกินจอมือถือ แล้วหน้าเลื่อนออกข้างได้ (วัดเจอที่หน้ารายละเอียดรายวัน 28 ส.ค. 2569 — กล่องกว้าง 401px บนจอ 375px) overflow-wrap:anywhere ปลอดภัยกว่า word-break:break-all เพราะจะตัดเฉพาะตอนที่ไม่มีทางอื่นแล้วเท่านั้น ไม่ไปตัดคำที่ตัดได้ปกติ ═══════════════════════════════════════════════════════════════════════ */ .my, .sub .my, td .my, th .my { overflow-wrap: anywhere; word-break: normal; }