/* ===================================================================== MOBILE LAYOUT "OPTION C" — signals.html + gold.html ===================================================================== DESKTOP IS UNTOUCHED. Every rule in this file lives inside @media (max-width:640px), except the one line that hides the mobile column-label strip on wide screens. Nothing here changes a single pixel above 640px, and nothing here changes the markup either: ONE DOM, TWO LAYOUTS. The two tables in signals.html / gold.html keep the exact same rows the renderers in js/signals.js emit. On a phone each becomes a 4-track CSS grid and every is placed by :nth-child, so renderActive() and renderHistory() needed no change at all. That is deliberate: a second mobile renderer would be a second place for the P/L formula, the fill test and the "never fabricate a value" rule to drift out of sync with the desktop one. The layout comes from signals-mobile-option-c.html (Option C): col 1 Pair / direction / live price / chart button col 2 the levels stack - E, SL, TP (and X on a closed row) col 3 status + take-profit progress bar col 4 P/L, right aligned WHAT WAS TAKEN FROM THE MOCKUP AND WHAT WAS NOT Taken: the four-track grid, the compact levels stack with its E/SL/TP key letters, the tight summary strip, the small uppercase label row. NOT taken: the mockup's own colour palette and its own .page.light class. This site already has a light/dark system driven by js/theme.js and [data-theme="dark"], shared with every other page; adding a second theme mechanism to one page would mean two toggles fighting over the same screen. So this file only ever uses the existing CSS variables and inherits both themes for free. NOT taken either: the mockup's amber progress fill. On the live page the bar's colour already carries meaning (blue under 50%, green from 50%, solid green past 70% - the level that decides whether a near-miss really was one) and amber is already spoken for by the WAITING badge. Layout adopted, palette kept. ROWS ARE NOT THINNED DOWN TO THE MOCKUP'S THREE LINES. The mockup drops the live price, the entry zone and the chart button. All three are real information a phone user needs - the zone is the price a limit order actually goes at - so they are kept and shrunk instead. Only Time and Close Time are hidden, because the row already carries a date, and on a closed row the exit price is the fact that matters. ===================================================================== */ /* The mobile column-label strip. It is real markup in both pages (the real cannot be reflowed into a 4-track grid AND keep its desktop widths), so it has to be switched off on desktop from here. */ .m-thead { display: none; } @media (max-width: 640px) { /* --------------------------------------------------------------- 1. PAGE CHROME Panels go edge to edge: on a 390px screen a 16px card margin plus 18px of panel padding spends 68px of the 390 on nothing. --------------------------------------------------------------- */ .app-main { padding: 12px 0; } .panel { padding: 12px 0; border-radius: 0; border-left: none; border-right: none; margin-bottom: 12px; } .panel-header { padding: 0 14px; margin-bottom: 10px; } .panel-header h2 { font-size: .92rem; } .pill { font-size: .66rem; padding: 4px 10px; } .search-row { padding: 0 14px; margin-bottom: 10px; } .search-input { font-size: .82rem; padding: 8px 12px; } /* Column dragging is a mouse gesture; there is nothing to drag here. */ .grip-hint, .col-grip { display: none; } .app-header { padding: 10px 14px; gap: 8px; } .brand-logo { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; } .brand-title { font-size: .95rem; } .system-live { font-size: .62rem; padding: 2px 8px; } .market-badge { font-size: .64rem; padding: 5px 9px; } .nav-link, .theme-toggle { padding: 6px 10px; font-size: .7rem; } .user-menu { padding: 6px 8px 6px 6px; gap: 8px; } .user-avatar { width: 30px; height: 30px; font-size: .76rem; } .user-name { font-size: .8rem; } .user-role { font-size: .64rem; } .logout-btn, .signin-btn { padding: 6px 10px; font-size: .7rem; } .filter-bar { border-radius: 0; border-left: none; border-right: none; padding: 10px 14px; gap: 8px; margin-bottom: 12px; } .filter-title { font-size: .62rem; } .filter-chip { padding: 6px 11px; font-size: .72rem; } .filter-label { font-size: .72rem; } .date-input { font-size: .78rem; padding: 6px 8px; } .range-label { margin-left: 0; font-size: .7rem; } /* --------------------------------------------------------------- 2. SUMMARY STRIP (three cards side by side, like the mockup) --------------------------------------------------------------- */ .summary-grid { display: flex; gap: 8px; padding: 0 14px; margin-bottom: 14px; } .sum-card { flex: 1; min-width: 0; padding: 9px 7px; text-align: center; border-radius: 10px; } .sum-card .label { font-size: .55rem; letter-spacing: .03em; } .sum-card .big { font-size: .92rem; margin-top: 3px; } .sum-sub { font-size: .58rem; } /* .spark is a FIXED polyline in the markup - decoration, not data. It is the first thing to go when there are only 390px to spend. */ .spark { display: none; } .card-foot { flex-direction: column; gap: 6px; align-items: center; } .donut-wrap, .donut { width: 52px; height: 52px; } .donut-center b { font-size: .78rem; } /* --------------------------------------------------------------- 3. THE TABLES BECOME GRIDS The real is clipped rather than display:none so it stays in the accessibility tree - a screen reader still hears the column names even though the visible header is the .m-thead strip. --------------------------------------------------------------- */ .table-wrap { overflow-x: visible; } .data-table { display: block; width: 100%; white-space: normal; } .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .data-table tbody { display: block; } /* A width dragged on desktop must not follow the page onto a phone. */ .data-table.cols-resized { table-layout: auto; } .data-table.cols-resized td { overflow: hidden; text-overflow: ellipsis; } .m-thead { display: grid; grid-template-columns: .95fr 1.35fr .8fr .7fr; column-gap: 8px; padding: 6px 14px; font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted2); border-bottom: 1px solid var(--border); } .m-thead span:last-child { text-align: right; } .data-table tr { display: grid; grid-template-columns: .95fr 1.35fr .8fr .7fr; column-gap: 8px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--border); } .data-table td { display: block; border: none; padding: 1px 0; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* No hover state on a touch screen, and the row tints read as noise at this density - the direction word and the P/L colour already say it. */ .data-table tbody tr:hover, .tr-running, .tr-profit, .tr-loss { background: transparent; } /* Both empty-state rows are a single . Without this it would be squeezed into the 25% first track. The inline padding in the renderer is what !important is overriding here. */ .data-table td[colspan] { grid-column: 1 / -1; white-space: normal; text-overflow: clip; padding: 14px 0 !important; font-size: .8rem; } /* --------------------------------------------------------------- 4. THE E / SL / TP / X KEY LETTERS Generated content, so js/signals.js emits no extra markup and the desktop table gains no label column. --------------------------------------------------------------- */ #runningSignalsBody td:nth-child(3)::before, #runningSignalsBody td:nth-child(4)::before, #runningSignalsBody td:nth-child(5)::before, #runningSignalsBody td:nth-child(7)::before, #historyBody td:nth-child(5)::before, #historyBody td:nth-child(6)::before, #historyBody td:nth-child(7)::before, #historyBody td:nth-child(8)::before { display: inline-block; width: 17px; margin-right: 2px; font-size: .6rem; font-weight: 700; color: var(--muted2); } #runningSignalsBody td:nth-child(3)::before { content: 'E'; } #runningSignalsBody td:nth-child(4)::before { content: 'SL'; } #runningSignalsBody td:nth-child(5)::before { content: 'TP'; } #runningSignalsBody td:nth-child(7)::before { content: 'LP'; } #historyBody td:nth-child(5)::before { content: 'E'; } #historyBody td:nth-child(6)::before { content: 'SL'; } #historyBody td:nth-child(7)::before { content: 'TP'; } #historyBody td:nth-child(8)::before { content: 'X'; } /* --------------------------------------------------------------- 5. LIVE TABLE PLACEMENT Header order: Pair, Direction, Entry, SL, TP, Time, Live Price, P/L, Status, Action. Change that order in signals.html / gold.html and these ten rules have to move with it. --------------------------------------------------------------- */ #runningSignalsBody td:nth-child(1) { grid-area: 1 / 1; } #runningSignalsBody td:nth-child(2) { grid-area: 2 / 1; } #runningSignalsBody td:nth-child(3) { grid-area: 1 / 2; } #runningSignalsBody td:nth-child(4) { grid-area: 2 / 2; } #runningSignalsBody td:nth-child(5) { grid-area: 3 / 2; } #runningSignalsBody td:nth-child(6) { display: none; } /* Time - the row is live, the clock adds nothing */ #runningSignalsBody td:nth-child(7) { grid-area: 3 / 1; } /* Live price */ #runningSignalsBody td:nth-child(8) { grid-column: 4; grid-row: 1 / span 4; align-self: center; text-align: right; } #runningSignalsBody td:nth-child(9) { grid-column: 3; grid-row: 1 / span 4; align-self: center; } #runningSignalsBody td:nth-child(10) { grid-area: 4 / 1; padding-top: 5px; } /* --------------------------------------------------------------- 6. HISTORY TABLE PLACEMENT Header order: Pair, Date, Time, Direction, Entry, SL, TP, Exit, Result, Close Time, P&L, Action. --------------------------------------------------------------- */ #historyBody td:nth-child(1) { grid-area: 1 / 1; } #historyBody td:nth-child(2) { grid-area: 3 / 1; font-size: .64rem; } /* Date */ #historyBody td:nth-child(3) { display: none; } /* Time - the date is enough at this width */ #historyBody td:nth-child(4) { grid-area: 2 / 1; } /* Direction */ #historyBody td:nth-child(5) { grid-area: 1 / 2; } #historyBody td:nth-child(6) { grid-area: 2 / 2; } #historyBody td:nth-child(7) { grid-area: 3 / 2; } #historyBody td:nth-child(8) { grid-area: 4 / 2; } /* Exit */ #historyBody td:nth-child(9) { grid-column: 3; grid-row: 1 / span 4; align-self: center; white-space: normal; } #historyBody td:nth-child(10) { display: none; } /* Close Time */ #historyBody td:nth-child(11) { grid-column: 4; grid-row: 1 / span 4; align-self: center; text-align: right; } #historyBody td:nth-child(12) { grid-area: 4 / 1; padding-top: 5px; } /* --------------------------------------------------------------- 7. CELL CONTENTS AT PHONE SIZE --------------------------------------------------------------- */ /* Pair: the pill becomes plain bold text, as in the mockup. */ .data-table .pair-pill { background: transparent; padding: 0; font-weight: 800; font-size: .82rem; color: var(--text); } /* Direction: a small coloured word under the pair, not a badge. The two colours are the shared variables, so both themes stay legible. */ .data-table .badge-type-buy, .data-table .badge-type-sell { background: transparent; padding: 0; font-size: .58rem; font-weight: 800; letter-spacing: .05em; } .data-table .badge-type-buy { color: var(--green); } .data-table .badge-type-sell { color: var(--red); } .badge-status-running, .badge-status-waiting { font-size: .58rem; padding: 2px 7px; } .badge-result-tp, .badge-result-sl, .badge-result-none { font-size: .56rem; padding: 2px 6px; } /* The progress bar fills its track instead of sitting at a fixed 60px: the desktop width is fixed only because that table scrolls sideways. */ .tpbar-wrap { display: flex; align-items: center; gap: 5px; margin-top: 4px; } .tpbar { flex: 1; width: auto; height: 4px; } .tpbar-txt { margin-left: 0; font-size: .6rem; } .tp-peak { font-size: .56rem; white-space: normal; margin-top: 3px; } .pnl-green, .pnl-red, .pnl-flat { font-size: .8rem; font-weight: 800; } .px-live { font-size: .76rem; } .px-sub { font-size: .56rem; } /* The zone still shows both bounds; its two copy glyphs are dropped so the line fits, and the level copy buttons that matter for a broker ticket (E / SL / TP / LP) stay. */ .entry-zone { font-size: .58rem; } .entry-zone .copy-px { display: none; } /* A 15px tap target is not a tap target. */ .copy-px { width: 20px; height: 20px; font-size: .92rem; opacity: .75; top: -1px; } .btn-view-chart { padding: 4px 8px; font-size: .58rem; border-radius: 7px; font-weight: 800; } /* --------------------------------------------------------------- 8. DARK THEME The row rule is the only border this file draws that the existing dark overrides do not already recolour (they target td/th, which are borderless here), so it is repainted explicitly. --------------------------------------------------------------- */ [data-theme="dark"] .data-table tr, [data-theme="dark"] .m-thead { border-color: #1f2937; } }