mostly fixed layouts
This commit is contained in:
+205
-197
@@ -54,17 +54,27 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
|||||||
return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
MOBILE layout (<md): stacked card
|
||||||
|
DESKTOP layout (≥md): flat flex row, columns
|
||||||
|
match header widths exactly:
|
||||||
|
w-4 | flex-1 min-w-[200px] | w-20 | w-24 |
|
||||||
|
w-24 | w-32 | w-32 | w-28 | w-16
|
||||||
|
──────────────────────────────────────────── */
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class={`group flex flex-col md:flex-row items-stretch md:items-start gap-3 md:gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 w-full
|
class={`group transition-all animate-in fade-in slide-in-from-left-2 w-full border
|
||||||
${props.isSelected
|
${props.isSelected
|
||||||
? 'bg-primary/5 border-primary shadow-premium z-10'
|
? 'bg-primary/5 border-primary shadow-premium z-10'
|
||||||
: 'bg-card border-border hover:shadow-premium-hover hover:border-border/80'
|
: 'bg-card border-border hover:shadow-premium-hover hover:border-border/80'
|
||||||
}
|
}
|
||||||
${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : 'rounded-2xl'}
|
${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30 rounded-2xl' : 'rounded-2xl'}
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
<div class="flex items-start gap-3">
|
{/* ── DESKTOP ROW ── */}
|
||||||
|
<div class="hidden md:flex items-center gap-4 px-3 py-2">
|
||||||
|
|
||||||
|
{/* Grip / Select — w-4 */}
|
||||||
<div
|
<div
|
||||||
draggable={!isEditing() || props.anySelected}
|
draggable={!isEditing() || props.anySelected}
|
||||||
onDragStart={(e) => props.onDragStart(e, props.item.id)}
|
onDragStart={(e) => props.onDragStart(e, props.item.id)}
|
||||||
@@ -72,24 +82,21 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
|
props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
|
||||||
}}
|
}}
|
||||||
class={`cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
|
class={`cursor-grab shrink-0 w-4 p-1 rounded hover:bg-muted transition-colors ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
|
||||||
title="Drag to move or click to select"
|
title="Drag to move or click to select"
|
||||||
>
|
>
|
||||||
<GripVertical class="w-4 h-4" />
|
<GripVertical class="w-4 h-4" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-1 relative min-w-[200px]">
|
{/* Description — flex-1 min-w-[200px] */}
|
||||||
|
<div class="flex-1 min-w-[200px] relative">
|
||||||
<textarea
|
<textarea
|
||||||
ref={descriptionRef}
|
ref={descriptionRef}
|
||||||
value={localDescription()}
|
value={localDescription()}
|
||||||
onFocus={() => {
|
onFocus={() => { if (!props.anySelected) setIsEditing(true); }}
|
||||||
if (!props.anySelected) setIsEditing(true);
|
|
||||||
}}
|
|
||||||
onBlur={handleBlur}
|
onBlur={handleBlur}
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
setLocalDescription(e.currentTarget.value);
|
setLocalDescription(e.currentTarget.value);
|
||||||
|
|
||||||
// Fallback auto-resize for browsers without field-sizing support
|
|
||||||
if (!('fieldSizing' in document.documentElement.style)) {
|
if (!('fieldSizing' in document.documentElement.style)) {
|
||||||
e.currentTarget.style.height = 'auto';
|
e.currentTarget.style.height = 'auto';
|
||||||
e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
|
e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
|
||||||
@@ -97,24 +104,138 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
|||||||
}}
|
}}
|
||||||
disabled={props.anySelected}
|
disabled={props.anySelected}
|
||||||
rows="1"
|
rows="1"
|
||||||
class={`w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90
|
class={`w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-sm font-medium text-foreground/90
|
||||||
${props.anySelected ? 'cursor-default pointer-events-none' : ''}
|
${props.anySelected ? 'cursor-default pointer-events-none' : ''}
|
||||||
`}
|
`}
|
||||||
style={{
|
style={{ "field-sizing": "content", "min-height": "1.5em" }}
|
||||||
"field-sizing": "content",
|
|
||||||
"min-height": "1.5em"
|
|
||||||
}}
|
|
||||||
placeholder="Item description..."
|
placeholder="Item description..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Actions Container */}
|
{/* Qty — w-20 */}
|
||||||
<div class="flex md:hidden items-center gap-1.5 mt-1.5 px-1">
|
<div class="w-20 shrink-0">
|
||||||
<button
|
<NumericInput
|
||||||
onClick={(e) => {
|
dataFieldName="qty"
|
||||||
|
value={props.item.quantity}
|
||||||
|
onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
|
||||||
|
onDragStart={(e) => {
|
||||||
|
const val = props.item.quantity;
|
||||||
|
const data = { type: 'item-field', itemId: props.item.id, fieldName: 'qty', value: val, label: `${props.item.description || 'Unnamed Item'}: Qty` };
|
||||||
|
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
||||||
|
e.dataTransfer!.setData('text/plain', String(val));
|
||||||
|
e.dataTransfer!.effectAllowed = 'copy';
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
props.onDuplicateItem(props.item.id);
|
|
||||||
}}
|
}}
|
||||||
|
draggable="true"
|
||||||
|
disabled={props.anySelected}
|
||||||
|
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 cursor-text font-bold text-foreground/80 transition-all"
|
||||||
|
placeholder="Qty"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price — w-24 */}
|
||||||
|
<div class="w-24 shrink-0 relative">
|
||||||
|
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px] pointer-events-none">$</span>
|
||||||
|
<NumericInput
|
||||||
|
dataFieldName="price"
|
||||||
|
step="0.1"
|
||||||
|
value={props.item.unitPrice}
|
||||||
|
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
|
||||||
|
onDragStart={(e) => {
|
||||||
|
const val = props.item.unitPrice;
|
||||||
|
const data = { type: 'item-field', itemId: props.item.id, fieldName: 'price', value: val, label: `${props.item.description || 'Unnamed Item'}: Price` };
|
||||||
|
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
||||||
|
e.dataTransfer!.setData('text/plain', String(val));
|
||||||
|
e.dataTransfer!.effectAllowed = 'copy';
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
draggable="true"
|
||||||
|
disabled={props.anySelected}
|
||||||
|
class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 cursor-text font-bold text-foreground/80 transition-all"
|
||||||
|
placeholder="Price"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subtotal — w-24 */}
|
||||||
|
<div
|
||||||
|
draggable="true"
|
||||||
|
onDragStart={(e) => {
|
||||||
|
const val = baseTotal();
|
||||||
|
const data = { type: 'item-field', itemId: props.item.id, fieldName: 'subtotal', value: val, label: `${props.item.description || 'Unnamed Item'}: Subtotal` };
|
||||||
|
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
||||||
|
e.dataTransfer!.setData('text/plain', String(val));
|
||||||
|
e.dataTransfer!.effectAllowed = 'copy';
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
class="w-24 shrink-0 text-right text-muted-foreground/60 text-[11px] font-bold uppercase tracking-tighter cursor-grab hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
${formatNumber(baseTotal())}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Markup — w-32 (conditional) */}
|
||||||
|
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||||
|
<div class="w-32 shrink-0">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<NumericInput
|
||||||
|
dataFieldName="markup"
|
||||||
|
value={props.item.markup}
|
||||||
|
onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
|
||||||
|
disabled={props.anySelected}
|
||||||
|
class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all"
|
||||||
|
placeholder="Markup"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' }); }}
|
||||||
|
disabled={props.anySelected}
|
||||||
|
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
|
||||||
|
>
|
||||||
|
{props.item.markupType === 'percent' ? '%' : '$'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contingency — w-32 */}
|
||||||
|
<div class="w-32 shrink-0">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<NumericInput
|
||||||
|
dataFieldName="contingency"
|
||||||
|
value={props.item.contingency}
|
||||||
|
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
|
||||||
|
disabled={props.anySelected}
|
||||||
|
class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all"
|
||||||
|
placeholder="Contingency"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); }}
|
||||||
|
disabled={props.anySelected}
|
||||||
|
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
|
||||||
|
>
|
||||||
|
{props.item.contingencyType === 'percent' ? '%' : '$'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
{/* Total — w-28 */}
|
||||||
|
<div
|
||||||
|
draggable="true"
|
||||||
|
onDragStart={(e) => {
|
||||||
|
const val = total();
|
||||||
|
const data = { type: 'item-field', itemId: props.item.id, fieldName: 'total', value: val, label: `${props.item.description || 'Unnamed Item'}: Total` };
|
||||||
|
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
||||||
|
e.dataTransfer!.setData('text/plain', String(val));
|
||||||
|
e.dataTransfer!.effectAllowed = 'copy';
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
class={`w-28 shrink-0 text-right font-black text-sm cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
|
||||||
|
>
|
||||||
|
${formatNumber(total())}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions — w-16 */}
|
||||||
|
<div class="w-16 shrink-0 flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }}
|
||||||
class="text-muted-foreground/40 hover:text-primary transition-colors"
|
class="text-muted-foreground/40 hover:text-primary transition-colors"
|
||||||
title="Duplicate Item"
|
title="Duplicate Item"
|
||||||
>
|
>
|
||||||
@@ -122,12 +243,8 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
|||||||
<Copy class="w-3 h-3" />
|
<Copy class="w-3 h-3" />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={(e) => {
|
onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }}
|
||||||
e.stopPropagation();
|
|
||||||
props.onDelete(props.item.id);
|
|
||||||
}}
|
|
||||||
class="text-muted-foreground/40 hover:text-destructive transition-colors"
|
class="text-muted-foreground/40 hover:text-destructive transition-colors"
|
||||||
title="Delete Item"
|
title="Delete Item"
|
||||||
>
|
>
|
||||||
@@ -138,192 +255,83 @@ const ItemRow: Component<ItemRowProps> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Numeric Fields Group */}
|
{/* ── MOBILE LAYOUT ── (stacked card, shown below md) */}
|
||||||
<div class="flex flex-wrap md:flex-nowrap items-center gap-3 md:gap-4 pl-7 md:pl-0">
|
<div class="md:hidden flex flex-col gap-3 p-3">
|
||||||
{/* Qty & Price Group */}
|
<div class="flex items-start gap-3">
|
||||||
<div class="flex items-center gap-2">
|
{/* Grip */}
|
||||||
<div class="w-20 shrink-0">
|
<div
|
||||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
|
draggable={!isEditing() || props.anySelected}
|
||||||
<NumericInput
|
onDragStart={(e) => props.onDragStart(e, props.item.id)}
|
||||||
dataFieldName="qty"
|
onClick={(e) => {
|
||||||
value={props.item.quantity}
|
e.stopPropagation();
|
||||||
onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
|
props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
|
||||||
onDragStart={(e) => {
|
}}
|
||||||
const val = props.item.quantity;
|
class={`cursor-grab shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted transition-colors ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
|
||||||
const data = {
|
>
|
||||||
type: 'item-field',
|
<GripVertical class="w-4 h-4" />
|
||||||
itemId: props.item.id,
|
</div>
|
||||||
fieldName: 'qty',
|
{/* Description */}
|
||||||
value: val,
|
<div class="flex-1 relative">
|
||||||
label: `${props.item.description || 'Unnamed Item'}: Qty`
|
<textarea
|
||||||
};
|
value={localDescription()}
|
||||||
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
onFocus={() => { if (!props.anySelected) setIsEditing(true); }}
|
||||||
e.dataTransfer!.setData('text/plain', String(val));
|
onBlur={handleBlur}
|
||||||
e.dataTransfer!.effectAllowed = 'copy';
|
onInput={(e) => {
|
||||||
e.stopPropagation();
|
setLocalDescription(e.currentTarget.value);
|
||||||
|
if (!('fieldSizing' in document.documentElement.style)) {
|
||||||
|
e.currentTarget.style.height = 'auto';
|
||||||
|
e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
draggable="true"
|
|
||||||
disabled={props.anySelected}
|
disabled={props.anySelected}
|
||||||
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 cursor-text font-bold text-foreground/80 transition-all"
|
rows="1"
|
||||||
placeholder="Qty"
|
class="w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90"
|
||||||
|
style={{ "field-sizing": "content", "min-height": "1.5em" }}
|
||||||
|
placeholder="Item description..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Mobile actions */}
|
||||||
<div class="w-24 shrink-0">
|
<div class="flex items-center gap-1.5 mt-1">
|
||||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</div>
|
<button onClick={(e) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }} class="text-muted-foreground/40 hover:text-primary transition-colors">
|
||||||
|
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10"><Copy class="w-3 h-3" /></div>
|
||||||
|
</button>
|
||||||
|
<button onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }} class="text-muted-foreground/40 hover:text-destructive transition-colors">
|
||||||
|
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10"><Trash2 class="w-3 h-3" /></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Numeric fields — wrapping grid on mobile */}
|
||||||
|
<div class="flex flex-wrap gap-3 pl-7">
|
||||||
|
<div class="w-20">
|
||||||
|
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
|
||||||
|
<NumericInput value={props.item.quantity} onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })} disabled={props.anySelected} class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Qty" />
|
||||||
|
</div>
|
||||||
|
<div class="w-24">
|
||||||
|
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
|
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
|
||||||
<NumericInput
|
<NumericInput step="0.1" value={props.item.unitPrice} onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })} disabled={props.anySelected} class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Price" />
|
||||||
dataFieldName="price"
|
|
||||||
step="0.1"
|
|
||||||
value={props.item.unitPrice}
|
|
||||||
onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
|
|
||||||
onDragStart={(e) => {
|
|
||||||
const val = props.item.unitPrice;
|
|
||||||
const data = {
|
|
||||||
type: 'item-field',
|
|
||||||
itemId: props.item.id,
|
|
||||||
fieldName: 'price',
|
|
||||||
value: val,
|
|
||||||
label: `${props.item.description || 'Unnamed Item'}: Price`
|
|
||||||
};
|
|
||||||
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
|
||||||
e.dataTransfer!.setData('text/plain', String(val));
|
|
||||||
e.dataTransfer!.effectAllowed = 'copy';
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
draggable="true"
|
|
||||||
disabled={props.anySelected}
|
|
||||||
class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 cursor-text font-bold text-foreground/80 transition-all"
|
|
||||||
placeholder="Price"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||||
|
<div class="w-32">
|
||||||
<div
|
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Markup</div>
|
||||||
draggable="true"
|
|
||||||
onDragStart={(e) => {
|
|
||||||
const val = baseTotal();
|
|
||||||
const data = {
|
|
||||||
type: 'item-field',
|
|
||||||
itemId: props.item.id,
|
|
||||||
fieldName: 'subtotal',
|
|
||||||
value: val,
|
|
||||||
label: `${props.item.description || 'Unnamed Item'}: Subtotal`
|
|
||||||
};
|
|
||||||
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
|
||||||
e.dataTransfer!.setData('text/plain', String(val));
|
|
||||||
e.dataTransfer!.effectAllowed = 'copy';
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
class={`hidden md:block w-24 shrink-0 text-right text-muted-foreground/60 text-[11px] mt-2 font-bold uppercase tracking-tighter cursor-grab hover:text-primary transition-colors`}
|
|
||||||
>
|
|
||||||
${formatNumber(baseTotal())}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Markup & Contingency Group */}
|
|
||||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-32 shrink-0">
|
|
||||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Markup</div>
|
|
||||||
<div class="flex items-center gap-1.5">
|
<div class="flex items-center gap-1.5">
|
||||||
<NumericInput
|
<NumericInput value={props.item.markup} onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })} disabled={props.anySelected} class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all" placeholder="Markup" />
|
||||||
dataFieldName="markup"
|
<button onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' }); }} disabled={props.anySelected} class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40">{props.item.markupType === 'percent' ? '%' : '$'}</button>
|
||||||
value={props.item.markup}
|
|
||||||
onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
|
|
||||||
disabled={props.anySelected}
|
|
||||||
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all"
|
|
||||||
placeholder="Markup"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' });
|
|
||||||
}}
|
|
||||||
disabled={props.anySelected}
|
|
||||||
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
|
|
||||||
>
|
|
||||||
{props.item.markupType === 'percent' ? '%' : '$'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-32">
|
||||||
<div class="w-32 shrink-0">
|
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</div>
|
||||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</div>
|
|
||||||
<div class="flex items-center gap-1.5">
|
<div class="flex items-center gap-1.5">
|
||||||
<NumericInput
|
<NumericInput value={props.item.contingency} onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })} disabled={props.anySelected} class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Contingency" />
|
||||||
dataFieldName="contingency"
|
<button onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); }} disabled={props.anySelected} class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40">{props.item.contingencyType === 'percent' ? '%' : '$'}</button>
|
||||||
value={props.item.contingency}
|
|
||||||
onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
|
|
||||||
disabled={props.anySelected}
|
|
||||||
class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all"
|
|
||||||
placeholder="Contingency"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' });
|
|
||||||
}}
|
|
||||||
disabled={props.anySelected}
|
|
||||||
class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
|
|
||||||
>
|
|
||||||
{props.item.contingencyType === 'percent' ? '%' : '$'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Show>
|
||||||
</Show>
|
<div class="w-28">
|
||||||
|
<div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
|
||||||
<div class="flex items-center gap-3">
|
<div class={`font-black text-sm text-right ${props.isSelected ? 'text-primary' : 'text-foreground'}`}>${formatNumber(total())}</div>
|
||||||
<div
|
|
||||||
draggable="true"
|
|
||||||
onDragStart={(e) => {
|
|
||||||
const val = total();
|
|
||||||
const data = {
|
|
||||||
type: 'item-field',
|
|
||||||
itemId: props.item.id,
|
|
||||||
fieldName: 'total',
|
|
||||||
value: val,
|
|
||||||
label: `${props.item.description || 'Unnamed Item'}: Total`
|
|
||||||
};
|
|
||||||
e.dataTransfer!.setData('application/json', JSON.stringify(data));
|
|
||||||
e.dataTransfer!.setData('text/plain', String(val));
|
|
||||||
e.dataTransfer!.effectAllowed = 'copy';
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
class={`w-28 shrink-0 text-right font-black text-sm md:mt-2 cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
|
|
||||||
>
|
|
||||||
<div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
|
|
||||||
${formatNumber(total())}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden md:flex w-16 shrink-0 items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
props.onDuplicateItem(props.item.id);
|
|
||||||
}}
|
|
||||||
class="text-muted-foreground/40 hover:text-primary transition-colors"
|
|
||||||
title="Duplicate Item"
|
|
||||||
>
|
|
||||||
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10">
|
|
||||||
<Copy class="w-3 h-3" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
props.onDelete(props.item.id);
|
|
||||||
}}
|
|
||||||
class="text-muted-foreground/40 hover:text-destructive transition-colors"
|
|
||||||
title="Delete Item"
|
|
||||||
>
|
|
||||||
<div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10">
|
|
||||||
<Trash2 class="w-3 h-3" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import ItemRow from './ItemRow';
|
|||||||
import SubScopeCard from './SubScopeCard';
|
import SubScopeCard from './SubScopeCard';
|
||||||
import NoteEditor from './NoteEditor';
|
import NoteEditor from './NoteEditor';
|
||||||
import LazyItem from './LazyItem';
|
import LazyItem from './LazyItem';
|
||||||
|
import ScopeScaleWrapper from './ui/ScopeScaleWrapper';
|
||||||
|
|
||||||
interface ScopeCardProps {
|
interface ScopeCardProps {
|
||||||
scope: Scope;
|
scope: Scope;
|
||||||
@@ -200,49 +201,47 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<div
|
<ScopeScaleWrapper>
|
||||||
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
|
{/* Sticky Column Headers */}
|
||||||
class="relative overflow-x-auto min-w-0"
|
<div class="scope-sticky-header py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3">
|
||||||
>
|
<div class="w-4 shrink-0"></div> {/* Grip space */}
|
||||||
<div class="p-6 space-y-4 min-w-full md:min-w-max flex flex-col items-stretch">
|
<div class="flex-1 min-w-[200px]">Description</div>
|
||||||
<Show when={scopeItems().length > 0}>
|
<div class="w-20 shrink-0 text-right">Qty</div>
|
||||||
<div class="relative">
|
<div class="w-24 shrink-0 text-right">Price</div>
|
||||||
{/* Column Headers - Sticky, Square Top */}
|
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
||||||
<div class="sticky top-0 z-20 bg-background/95 backdrop-blur-sm border-b border-border py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3 rounded-none">
|
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||||
<div class="w-4 shrink-0"></div> {/* Grip space */}
|
<div class="w-32 shrink-0 text-center">Markup</div>
|
||||||
<div class="flex-1 min-w-[200px]">Description</div>
|
<div class="w-32 shrink-0 text-center">Contingency</div>
|
||||||
<div class="w-20 shrink-0 text-right">Qty</div>
|
</Show>
|
||||||
<div class="w-24 shrink-0 text-right">Price</div>
|
<div class="w-28 shrink-0 text-right">Total</div>
|
||||||
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
<div class="w-16 shrink-0"></div> {/* Action space */}
|
||||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
</div>
|
||||||
<div class="w-32 shrink-0 text-center">Markup</div>
|
|
||||||
<div class="w-32 shrink-0 text-center">Contingency</div>
|
|
||||||
</Show>
|
|
||||||
<div class="w-28 shrink-0 text-right">Total</div>
|
|
||||||
<div class="w-16 shrink-0"></div> {/* Action space */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid gap-2">
|
{/* Scope-level items */}
|
||||||
{/* Scope Level Items */}
|
<div
|
||||||
<For each={props.items.filter(i => !i.subScopeId)}>
|
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
|
||||||
{(item) => (
|
class="px-3 pb-3 space-y-2"
|
||||||
<LazyItem estimatedHeight={60}>
|
>
|
||||||
<ItemRow
|
<Show when={scopeItems().length > 0}>
|
||||||
item={item}
|
<div class="grid gap-2">
|
||||||
onUpdate={props.onUpdateItem}
|
<For each={props.items.filter(i => !i.subScopeId)}>
|
||||||
onDelete={props.onDeleteItem}
|
{(item) => (
|
||||||
onDragStart={props.onDragStart}
|
<LazyItem estimatedHeight={60}>
|
||||||
onDuplicateItem={props.onDuplicateItem}
|
<ItemRow
|
||||||
isSidebarCollapsed={props.isSidebarCollapsed}
|
item={item}
|
||||||
isSelected={props.selectedIds.includes(item.id)}
|
onUpdate={props.onUpdateItem}
|
||||||
anySelected={props.selectedIds.length > 0}
|
onDelete={props.onDeleteItem}
|
||||||
onToggleSelection={props.onToggleSelection}
|
onDragStart={props.onDragStart}
|
||||||
hideColumns={props.hideColumns}
|
onDuplicateItem={props.onDuplicateItem}
|
||||||
/>
|
isSidebarCollapsed={props.isSidebarCollapsed}
|
||||||
</LazyItem>
|
isSelected={props.selectedIds.includes(item.id)}
|
||||||
)}
|
anySelected={props.selectedIds.length > 0}
|
||||||
</For>
|
onToggleSelection={props.onToggleSelection}
|
||||||
</div>
|
hideColumns={props.hideColumns}
|
||||||
|
/>
|
||||||
|
</LazyItem>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
@@ -252,11 +251,9 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 pt-0 space-y-4 relative">
|
{/* Sub-scopes — rendered inside the same scale wrapper so they zoom together */}
|
||||||
{/* Sub-scopes */}
|
<div class="px-3 pb-3 space-y-4">
|
||||||
<div class="space-y-6 pt-4">
|
|
||||||
<For each={props.subScopes}>
|
<For each={props.subScopes}>
|
||||||
{(subScope) => (
|
{(subScope) => (
|
||||||
<SubScopeCard
|
<SubScopeCard
|
||||||
@@ -281,9 +278,11 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
|
|||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
|
</ScopeScaleWrapper>
|
||||||
|
|
||||||
|
<div class="p-6 pt-4 space-y-4">
|
||||||
{/* Scope Extras & Totals */}
|
{/* Scope Extras & Totals */}
|
||||||
<div class="mt-8 pt-6 border-t border-border space-y-3">
|
<div class="mt-4 pt-6 border-t border-border space-y-3">
|
||||||
{/* Management Line */}
|
{/* Management Line */}
|
||||||
<div class="flex items-center justify-between group">
|
<div class="flex items-center justify-between group">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
|
|||||||
@@ -166,26 +166,26 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
|
|||||||
<Show when={!isCollapsed()}>
|
<Show when={!isCollapsed()}>
|
||||||
<div
|
<div
|
||||||
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
|
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
|
||||||
class="relative overflow-x-auto min-w-0"
|
class="relative"
|
||||||
>
|
>
|
||||||
<div class="p-2 space-y-1.5 min-w-full md:min-w-max flex flex-col items-stretch">
|
{/* SubScope Column Headers */}
|
||||||
{/* SubScope Column Headers */}
|
<Show when={props.items.length > 0}>
|
||||||
<Show when={props.items.length > 0}>
|
<div class="scope-sticky-header py-2 mb-2 hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3">
|
||||||
<div class="sticky top-0 z-20 bg-background/95 backdrop-blur-sm hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3 pb-2 pt-1 mb-2 border-b border-border/40">
|
<div class="w-4 shrink-0"></div>
|
||||||
<div class="w-4 shrink-0"></div>
|
<div class="flex-1 min-w-[200px]">Description</div>
|
||||||
<div class="flex-1 min-w-[200px]">Description</div>
|
<div class="w-20 shrink-0 text-right">Qty</div>
|
||||||
<div class="w-20 shrink-0 text-right">Qty</div>
|
<div class="w-24 shrink-0 text-right">Price</div>
|
||||||
<div class="w-24 shrink-0 text-right">Price</div>
|
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
||||||
<div class="w-24 shrink-0 text-right">Subtotal</div>
|
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
||||||
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
|
<div class="w-32 shrink-0 text-center">Markup</div>
|
||||||
<div class="w-32 shrink-0 text-center">Markup</div>
|
<div class="w-32 shrink-0 text-center">Contingency</div>
|
||||||
<div class="w-32 shrink-0 text-center">Contingency</div>
|
</Show>
|
||||||
</Show>
|
<div class="w-28 shrink-0 text-right px-2">Total</div>
|
||||||
<div class="w-28 shrink-0 text-right px-2">Total</div>
|
<div class="w-16 shrink-0"></div>
|
||||||
<div class="w-16 shrink-0"></div>
|
</div>
|
||||||
</div>
|
</Show>
|
||||||
</Show>
|
|
||||||
|
|
||||||
|
<div class="px-3 pb-3 space-y-1.5">
|
||||||
<For each={props.items}>
|
<For each={props.items}>
|
||||||
{(item) => (
|
{(item) => (
|
||||||
<LazyItem estimatedHeight={60}>
|
<LazyItem estimatedHeight={60}>
|
||||||
|
|||||||
@@ -0,0 +1,95 @@
|
|||||||
|
/**
|
||||||
|
* ScopeScaleWrapper
|
||||||
|
*
|
||||||
|
* Wraps a scope's grid area (header + rows) in a container that:
|
||||||
|
* 1. Scales the inner content DOWN to fit the available width on
|
||||||
|
* small screens, so there is no excess horizontal scroll.
|
||||||
|
* 2. If content is even too wide at minScale, falls back to
|
||||||
|
* horizontal scroll only at that point.
|
||||||
|
*
|
||||||
|
* Key behaviour:
|
||||||
|
* - When content fits (scale = 1): inner is width:100%, outer has
|
||||||
|
* overflow-x:hidden — zero unused scroll space.
|
||||||
|
* - When too wide to fit: inner is width:max-content so it renders
|
||||||
|
* at its natural size, scale transform shrinks it visually, and
|
||||||
|
* outer height is corrected for the scaled layout height.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { Component, JSX } from 'solid-js';
|
||||||
|
import { onMount, onCleanup, createSignal } from 'solid-js';
|
||||||
|
|
||||||
|
interface ScopeScaleWrapperProps {
|
||||||
|
children: JSX.Element;
|
||||||
|
class?: string;
|
||||||
|
/** minimum scale — won't zoom below this (default 0.65) */
|
||||||
|
minScale?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ScopeScaleWrapper: Component<ScopeScaleWrapperProps> = (props) => {
|
||||||
|
let outerEl: HTMLDivElement | undefined;
|
||||||
|
let innerEl: HTMLDivElement | undefined;
|
||||||
|
const [scale, setScale] = createSignal(1);
|
||||||
|
const [isZooming, setIsZooming] = createSignal(false);
|
||||||
|
|
||||||
|
const recalculate = () => {
|
||||||
|
if (!outerEl || !innerEl) return;
|
||||||
|
|
||||||
|
// Temporarily switch inner to max-content so we can measure
|
||||||
|
// its natural width without being constrained by the parent.
|
||||||
|
innerEl.style.width = 'max-content';
|
||||||
|
const naturalWidth = innerEl.scrollWidth;
|
||||||
|
|
||||||
|
const outerWidth = outerEl.clientWidth;
|
||||||
|
|
||||||
|
if (naturalWidth <= outerWidth) {
|
||||||
|
// Content fits — no zoom, no excess scroll
|
||||||
|
setScale(1);
|
||||||
|
setIsZooming(false);
|
||||||
|
innerEl.style.width = '100%';
|
||||||
|
innerEl.style.height = '';
|
||||||
|
innerEl.style.removeProperty('--scale-factor');
|
||||||
|
} else {
|
||||||
|
const min = props.minScale ?? 0.65;
|
||||||
|
const newScale = Math.max(min, outerWidth / naturalWidth);
|
||||||
|
setScale(newScale);
|
||||||
|
setIsZooming(true);
|
||||||
|
// Keep width:max-content so content renders at natural size
|
||||||
|
innerEl.style.width = 'max-content';
|
||||||
|
// Correct height so the card shrinks with the scaled content
|
||||||
|
const naturalHeight = innerEl.scrollHeight;
|
||||||
|
innerEl.style.height = (naturalHeight * newScale) + 'px';
|
||||||
|
innerEl.style.setProperty('--scale-factor', String(newScale));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let ro: ResizeObserver;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
ro = new ResizeObserver(recalculate);
|
||||||
|
if (outerEl) ro.observe(outerEl);
|
||||||
|
recalculate();
|
||||||
|
});
|
||||||
|
|
||||||
|
onCleanup(() => ro?.disconnect());
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={outerEl}
|
||||||
|
class={`relative ${isZooming() ? 'overflow-x-auto' : 'overflow-x-hidden'} overflow-y-visible ${props.class ?? ''}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref={innerEl}
|
||||||
|
style={{
|
||||||
|
'transform-origin': 'top left',
|
||||||
|
'transform': `scale(${scale()})`,
|
||||||
|
'transition': 'transform 0.2s ease',
|
||||||
|
'will-change': 'transform',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScopeScaleWrapper;
|
||||||
@@ -105,3 +105,29 @@
|
|||||||
@apply hidden;
|
@apply hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Scope Sticky Header
|
||||||
|
A shared class for scope and sub-scope column headers.
|
||||||
|
position:sticky works inside the ScopeScaleWrapper because
|
||||||
|
the outer container has overflow-y:visible.
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
.scope-sticky-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
background: hsl(0 0% 100% / 0.97);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
-webkit-backdrop-filter: blur(4px);
|
||||||
|
border-bottom: 1px solid hsl(240 5.9% 90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* shadow-premium custom utility */
|
||||||
|
.shadow-premium {
|
||||||
|
box-shadow: var(--shadow-premium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-premium-hover:hover {
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user