Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Made font size match device preference

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-17 17:15:07 -06:00
parent 49cbe6abb2
commit 759083ea7d
10 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/MatrixView.tsx
+11 -11
View File
@@ -17,10 +17,10 @@ export const MatrixView: Component = () => {
<div class="flex-1 relative border-2 border-dashed border-muted rounded-2xl md:rounded-3xl overflow-hidden bg-muted/20">
{/* Axis Labels */}
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-1 md:gap-2 z-30 w-[calc(100%-2rem)] justify-center">
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[0.5625rem] md:text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-1 md:gap-2 z-30 w-[calc(100%-2rem)] justify-center">
<span class="truncate">← Soon</span>
<div class="flex items-center gap-1 bg-background/50 backdrop-blur-sm px-1.5 md:px-2 py-0.5 rounded-full border border-border/50 group hover:bg-background/80 transition-colors cursor-pointer shrink-0">
<span class="text-[8px] md:text-[9px]">Time:</span>
<span class="text-[0.5rem] md:text-[0.5625rem]">Time:</span>
<Select
value={store.matrixScaleDays.toString()}
onChange={(val) => val && setStore("matrixScaleDays", parseInt(val))}
@@ -32,7 +32,7 @@ export const MatrixView: Component = () => {
</SelectItem>
)}
>
<SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[8px] md:text-[10px] font-black text-foreground">
<SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[0.5rem] md:text-[0.625rem] font-black text-foreground">
<span>{store.matrixScaleDays} {store.matrixScaleDays === 1 ? 'day' : 'days'}</span>
</SelectTrigger>
<SelectContent class="z-[150]" />
@@ -40,7 +40,7 @@ export const MatrixView: Component = () => {
</div>
<span class="truncate">Later →</span>
</div>
<div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[8px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
<div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[0.5rem] md:text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
← Low (Priority) High →
</div>
@@ -55,10 +55,10 @@ export const MatrixView: Component = () => {
</div>
{/* Quadrant Labels */}
<div class="absolute top-4 left-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">DO FIRST</div>
<div class="absolute top-4 right-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">SCHEDULE</div>
<div class="absolute bottom-4 left-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">DELEGATE</div>
<div class="absolute bottom-4 right-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">ELIMINATE</div>
<div class="absolute top-4 left-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">DO FIRST</div>
<div class="absolute top-4 right-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">SCHEDULE</div>
<div class="absolute bottom-4 left-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">DELEGATE</div>
<div class="absolute bottom-4 right-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">ELIMINATE</div>
{/* Task Pips */}
<For each={activeTasks()}>
@@ -122,9 +122,9 @@ export const MatrixView: Component = () => {
<div class="bg-popover text-popover-foreground border border-border rounded-xl p-3 shadow-2xl scale-95 group-hover:scale-100 transition-transform">
<p class="text-xs font-bold leading-tight">{task.title}</p>
<div class="flex items-center justify-between mt-2 pt-2 border-t border-border">
<span class="text-[9px] text-muted-foreground">U: {urgencyScore}</span>
<span class="text-[9px] text-muted-foreground">S: {task.size ?? 5}</span>
<span class="text-[9px] text-muted-foreground">P: {task.priority}</span>
<span class="text-[0.5625rem] text-muted-foreground">U: {urgencyScore}</span>
<span class="text-[0.5625rem] text-muted-foreground">S: {task.size ?? 5}</span>
<span class="text-[0.5625rem] text-muted-foreground">P: {task.priority}</span>
</div>
</div>
<div class={cn(