engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Update common.css

Browse source 
Added .col-status { display: none; } and mobile portrait media rules to hide columns 3–6, show the new Status column, and size Sellable/Price/Size for mobile.

Enabled title wrapping, ensured consistent header fonts, tuned column widths (Sellable wider, Status fixed, Size narrower), and added status-line spacing plus decimal-dot styling.
This commit is contained in:
Groupr 2025-10-28 23:03:05 +00:00
parent 0565342c8c
commit 42da9d35fa
1 changed files with 122 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

122
make_post_sell/static/css/common.css
View file

@ -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;