diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index ebce1d0..0157d86 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -44,6 +44,128 @@ table { width: 100%; } +/* Products editor: Status column hidden by default (desktop/landscape) */ +.col-status { display: none; } + +/* Mobile PORTRAIT only adjustments for products table */ +@media (max-width: 640px) and (orientation: portrait) { + /* Let columns size naturally and tighten spacing */ + .table-fixed-layout { table-layout: auto; } + .table-fixed-layout th, .table-fixed-layout td { padding: 6px; font-size: 14px; } + + /* Hide low-priority columns: Visibility(3), Bundle(4), Physical(5), Ready(6) */ + .table-fixed-layout th:nth-child(3), .table-fixed-layout td:nth-child(3), + .table-fixed-layout th:nth-child(4), .table-fixed-layout td:nth-child(4), + .table-fixed-layout th:nth-child(5), .table-fixed-layout td:nth-child(5), + .table-fixed-layout th:nth-child(6), .table-fixed-layout td:nth-child(6) { + display: none; + } + + /* Show compact Status column (now header index 8, cell .col-status) */ + .table-fixed-layout th.col-status, .table-fixed-layout td.col-status { display: table-cell; } + + /* Allow Title (7) to wrap to multiple lines and keep bold */ + .table-fixed-layout th:nth-child(7), .table-fixed-layout td:nth-child(7) { + white-space: normal; + width: 88px; + min-width: 88px; + max-width: 88px; + word-wrap: break-word; + overflow-wrap: break-word; + } + .table-fixed-layout td:nth-child(7) b { + font-weight: bold; + } + + /* Make Sellable (1) and Price (2) sit closer together and more compact */ + .table-fixed-layout th:nth-child(1), .table-fixed-layout td:nth-child(1) { + width: auto; + max-width: 66px; + min-width: 36px; + padding-right: 6px; + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; + } + .table-fixed-layout th:nth-child(2), .table-fixed-layout td:nth-child(2) { + width: auto; + max-width: 65px; + min-width: 32px; + padding-left: 4px; + padding-right: 4px; + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; + } + + /* Constrain Size column (9) to give Title more space */ + .table-fixed-layout th:nth-child(9), .table-fixed-layout td:nth-child(9) { + max-width: 66px; + min-width: 32px; + padding-left: 4px; + padding-right: 4px; + white-space: normal; + word-wrap: break-word; + font-size: 14px; + } + + /* Ensure check/cross glyphs render consistently and add visual polish */ + .table-fixed-layout td.col-status { + font-family: system-ui, "Segoe UI Symbol", "Noto Sans Symbols", "Apple Color Emoji", + "Noto Color Emoji", "Helvetica", "Arial", sans-serif; + padding: 8px 6px; + } + + /* Align status lines with fixed-width labels for easier eye tracking */ + .status-line { + display: flex; + gap: 2px; + margin-bottom: 4px; + align-items: baseline; + white-space: nowrap; + } + .status-line:last-child { + margin-bottom: 0; + } + .status-label { + display: inline-block; + min-width: 44px; + max-width: 44px; + text-align: left; + flex-shrink: 0; + margin-right: 3px; + } + .status-dot { + margin: 0 4px 0 2px; + } + .status-value { + flex-shrink: 0; + } + + .decimal-dot { + font-weight: 700; + display: inline-block; + padding: 0 1px; + } + + /* Allow Status column to wrap rows but keep each line intact */ + .table-fixed-layout th.col-status, .table-fixed-layout td.col-status { + white-space: normal; + width: 84px; + min-width: 84px; + max-width: 84px; + } + + /* Ensure table doesn't overflow on very small screens */ + @media (max-width: 400px) { + .table-fixed-layout th:nth-child(1), .table-fixed-layout td:nth-child(1) { width: 52px; font-size: 13px; } + .table-fixed-layout th:nth-child(2), .table-fixed-layout td:nth-child(2) { width: 80px; font-size: 13px; } + .table-fixed-layout td:nth-child(9) { width: 50px; font-size: 13px; } + .table-fixed-layout th:nth-child(9) { width: 50px; } + .status-label { min-width: 56px; max-width: 56px; font-size: 13px; } + } +} + table tr:nth-child(even) { /* Light gray background for even rows */ background-color: #f2f2f2;