Mobile UI: compact card layout for tables; switch Gemini default to 2.5-pro
This commit is contained in:
Georges Haddad
+140
-71
@@ -1382,77 +1382,6 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
|
||||
.doc-thumb img { height: 70px; }
|
||||
.stats-bar .stat { flex-basis: 100%; }
|
||||
|
||||
.responsive-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.responsive-table thead {
|
||||
display: none;
|
||||
}
|
||||
.responsive-table tbody,
|
||||
.responsive-table tr,
|
||||
.responsive-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.responsive-table tbody {
|
||||
padding: .35rem .75rem .85rem;
|
||||
}
|
||||
.responsive-table tr {
|
||||
margin-bottom: .75rem;
|
||||
border: 1px solid rgba(23,37,44,.08);
|
||||
border-radius: 18px;
|
||||
background: rgba(255,255,255,.96);
|
||||
box-shadow: 0 10px 24px rgba(23,37,44,.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
.responsive-table td {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(92px, 110px) 1fr;
|
||||
gap: .65rem;
|
||||
align-items: center;
|
||||
padding: .7rem .9rem;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid rgba(23,37,44,.06);
|
||||
}
|
||||
.responsive-table td:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.responsive-table td[data-label]::before {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: .76rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.responsive-table .doc-actions,
|
||||
.responsive-table td[data-label="الإجراءات"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: stretch;
|
||||
gap: .5rem;
|
||||
}
|
||||
.responsive-table td[data-label="الإجراءات"]::before {
|
||||
width: 100%;
|
||||
}
|
||||
.responsive-table .doc-actions .btn,
|
||||
.responsive-table td[data-label="الإجراءات"] .btn,
|
||||
.responsive-table td[data-label="الإجراءات"] .inline-form,
|
||||
.responsive-table td[data-label="الإجراءات"] .inline-form .btn {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.responsive-table .doc-thumb-mini {
|
||||
width: 72px;
|
||||
height: 54px;
|
||||
}
|
||||
.ownership-alert td {
|
||||
background: transparent;
|
||||
}
|
||||
.ownership-alert {
|
||||
border-color: #fecaca;
|
||||
background: #fff8f8;
|
||||
}
|
||||
.mobile-dock {
|
||||
right: .5rem;
|
||||
left: .5rem;
|
||||
@@ -1465,6 +1394,146 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================
|
||||
Responsive tables — compact list cards on mobile/tablet
|
||||
Each row becomes a card with property number prominent on top
|
||||
and other fields laid out 2-per-row for density.
|
||||
============================ */
|
||||
@media (max-width: 640px) {
|
||||
.responsive-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.responsive-table thead { display: none; }
|
||||
.responsive-table tbody,
|
||||
.responsive-table tr,
|
||||
.responsive-table td { display: block; width: 100%; }
|
||||
|
||||
.responsive-table tbody { padding: .25rem .5rem .6rem; }
|
||||
|
||||
.responsive-table tr {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 0;
|
||||
column-gap: .5rem;
|
||||
margin-bottom: .55rem;
|
||||
padding: .5rem .65rem .6rem;
|
||||
border: 1px solid rgba(23,37,44,.08);
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,.96);
|
||||
box-shadow: 0 6px 16px rgba(23,37,44,.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.responsive-table td {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: .1rem;
|
||||
padding: .3rem .15rem;
|
||||
text-align: right;
|
||||
border: none;
|
||||
font-size: .85rem;
|
||||
line-height: 1.3;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
.responsive-table td[data-label]::before {
|
||||
display: block;
|
||||
content: attr(data-label);
|
||||
color: var(--text-muted);
|
||||
font-size: .68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .01em;
|
||||
margin-bottom: .05rem;
|
||||
}
|
||||
|
||||
/* Prominent / full-width fields */
|
||||
.responsive-table td[data-label="رقم العقار"] {
|
||||
grid-column: 1 / -1;
|
||||
order: -1;
|
||||
padding-top: .15rem;
|
||||
padding-bottom: .4rem;
|
||||
border-bottom: 1px solid rgba(23,37,44,.08);
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
.responsive-table td[data-label="رقم العقار"]::before {
|
||||
font-size: .7rem;
|
||||
}
|
||||
.responsive-table td[data-label="رقم العقار"] {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.responsive-table td[data-label="المالك"],
|
||||
.responsive-table td[data-label="اسم الفريق"],
|
||||
.responsive-table td[data-label="المنطقة العقارية"],
|
||||
.responsive-table td[data-label="الإجراءات"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Row index: small corner badge, hide label */
|
||||
.responsive-table td[data-label="#"] {
|
||||
order: -2;
|
||||
grid-column: 1 / -1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 0 .15rem;
|
||||
font-size: .7rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
.responsive-table td[data-label="#"]::before {
|
||||
content: '#';
|
||||
margin-inline-end: .25rem;
|
||||
color: var(--text-muted);
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
/* Ownership-alert rows stay visually flagged */
|
||||
.ownership-alert {
|
||||
border-color: #fecaca !important;
|
||||
background: #fff8f8 !important;
|
||||
}
|
||||
.ownership-alert td { background: transparent; }
|
||||
|
||||
/* Actions cell: buttons flow full width */
|
||||
.responsive-table .doc-actions,
|
||||
.responsive-table td[data-label="الإجراءات"] {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
gap: .4rem;
|
||||
padding-top: .4rem;
|
||||
border-top: 1px dashed rgba(23,37,44,.08);
|
||||
margin-top: .2rem;
|
||||
}
|
||||
.responsive-table td[data-label="الإجراءات"]::before {
|
||||
width: 100%;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
.responsive-table .doc-actions .btn,
|
||||
.responsive-table td[data-label="الإجراءات"] .btn,
|
||||
.responsive-table td[data-label="الإجراءات"] .inline-form,
|
||||
.responsive-table td[data-label="الإجراءات"] .inline-form .btn {
|
||||
flex: 1 1 calc(50% - .2rem);
|
||||
min-width: 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
.responsive-table .doc-thumb-mini {
|
||||
width: 64px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
/* Table wrapper padding tweaks */
|
||||
.table-wrapper.table-wrapper-spaced,
|
||||
.table-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================
|
||||
Upload & Staging (mobile-first)
|
||||
============================ */
|
||||
|
||||
Reference in New Issue
Block a user