feat(app): App font and widget size adjustments to better fit smaller…

… screens
signalco-io · Jan 3, 2024 · dec739f · dec739f
1 parent 26bbcbc
commit dec739f
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 13 deletions.
diff --git a/web/apps/app/components/dashboards/DashboardView.tsx b/web/apps/app/components/dashboards/DashboardView.tsx
@@ -66,18 +66,19 @@ function DashboardView(props: { dashboard: IDashboardModel, isEditing: boolean,
     }
 
     const WidgetComponent = isEditing ? DragableWidget : DisplayWidget;
-    const widgetSize = 1 + 76 + 1 + 8; // Default widget is 76x76 + 2px for border + 8 spacing between widgets (2x4px)
-    const numberOfColumns = Math.max(4, Math.floor(windowInnerWidth / widgetSize)); // When width is less than 400, set to quad column
-    const dynamicWidgetSize = windowInnerWidth / numberOfColumns;
+    const widgetSize = 1 + 64 + 1 + 4; // Default widget is 64x64 + 2px for border + 8 spacing between widgets (2x4px)
+    const dashboardWidth = windowInnerWidth;
+    const numberOfColumns = Math.max(2, Math.floor(dashboardWidth / widgetSize));
+    const dynamicWidgetSize = `calc((${dashboardWidth}px - ${(numberOfColumns - 1) * 0.5}rem) / ${numberOfColumns})`;
 
     return (
         <div ref={resizeObserverRef}>
             <div
-                className="grid-rows-[repeat(auto-fill,--widget-size)]] grid w-[--dashboard-w] grid-cols-[repeat(var(--dashboard-cols),1fr)] gap-2"
+                className="grid-rows-[repeat(auto-fill,var(--widget-size))]] grid w-[--dashboard-w] grid-cols-[repeat(auto-fill,var(--widget-size))] gap-2"
                 style={{
                     '--dashboard-cols': numberOfColumns,
-                    '--dashboard-w': `${dynamicWidgetSize * numberOfColumns}px`,
-                    '--widget-size': `${dynamicWidgetSize}px`
+                    '--dashboard-w': `${dashboardWidth}px`,
+                    '--widget-size': `${dynamicWidgetSize}`
                 } as CSSProperties}
             >
                 <GridWrapper isEditing={isEditing} order={widgetsOrder} orderChanged={handleOrderChanged}>

diff --git a/web/apps/app/components/widgets/parts/WidgetCard.tsx b/web/apps/app/components/widgets/parts/WidgetCard.tsx
@@ -63,8 +63,8 @@ export default function WidgetCard(props: IWidgetCardProps) {
         <>
             <Card className="relative h-[--widget-instance-h] w-[--widget-instance-w] overflow-hidden p-0"
                 style={{
-                    '--widget-instance-w': `calc(var(--widget-size)*${width}-${width}*2px)`,
-                    '--widget-instance-h': `calc(var(--widget-size)*${height})`,
+                    '--widget-instance-w': `calc(${width} * var(--widget-size) + ${0.5 * (width - 1)}rem)`,
+                    '--widget-instance-h': `calc(${height} * var(--widget-size) + ${0.5 * (height - 1)}rem)`,
                 } as CSSProperties}>
                     {(!isLoading && needsConfiguration) ? (
                         <Stack justifyContent="stretch" className="h-full">

diff --git a/web/apps/app/components/widgets/parts/WidgetShades.tsx b/web/apps/app/components/widgets/parts/WidgetShades.tsx
@@ -104,7 +104,7 @@ function WidgetShades({ config, onOptions }: WidgetSharedProps<ConfigProps>) {
             {columns > 1 && (
                 <div className="h-full">
                     <Stack
-                        className="h-full py-4 pl-5 pr-4"
+                        className="h-full pb-4 pl-5 pr-4 pt-2"
                         justifyContent={columns > 2 ? 'space-between' : 'center'}>
                         <WindowVisual shadePerc={1 - shadePerc} size={68} />
                         {columns > 2 && <Typography semiBold noWrap>{label}</Typography>}

diff --git a/web/apps/app/components/widgets/parts/WidgetState.tsx b/web/apps/app/components/widgets/parts/WidgetState.tsx
@@ -152,8 +152,8 @@ function WidgetState(props: WidgetSharedProps<ConfigProps>) {
         <Button
             onClick={handleStateChangeRequest}
             variant="plain"
-            className="m-0 h-full w-full !items-start !justify-start p-0">
-            <Stack className="h-full py-4">
+            className="m-0 h-full w-full !items-start !justify-start p-0 text-start">
+            <Stack className="h-full pb-4 pt-2 pl-1">
                 <div className="px-2">
                     <Visual state={state} size={68} />
                 </div>

diff --git a/web/apps/app/tailwind.config.cjs b/web/apps/app/tailwind.config.cjs
@@ -1,9 +1,9 @@
-import { baseConfig } from '@signalco/tailwindcss-config-signalco';
+import { appBaseConfig } from '@signalco/tailwindcss-config-signalco';
 
 /** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
-    presets: [baseConfig],
+    presets: [appBaseConfig],
     content: [
         './app/**/*.{ts,tsx}',
         './components/**/*.{ts,tsx}',

diff --git a/web/packages/tailwindcss-config-signalco/index.js b/web/packages/tailwindcss-config-signalco/index.js
@@ -75,3 +75,27 @@ export const baseConfig = {
     plugins: [require("tailwindcss-animate")],
 }
 
+const appFontCoef = 0.875;
+/** @type {import('tailwindcss').Config} */
+export const appBaseConfig = {
+    ...baseConfig,
+    theme: {
+        ...baseConfig.theme,
+        // Reduce font size by to 0.875rem (14px)
+        fontSize: {
+            xs: [`${0.75 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+            sm: [`${0.875 * appFontCoef}rem`, { lineHeight: `${1.25 * appFontCoef}rem` }],
+            base: [`${1 * appFontCoef}rem`, { lineHeight: `${1.5 * appFontCoef}rem` }],
+            lg: [`${1.125 * appFontCoef}rem`, { lineHeight: `${1.75 * appFontCoef}rem` }],
+            xl: [`${1.25 * appFontCoef}rem`, { lineHeight: `${1.75 * appFontCoef}rem` }],
+            '2xl': [`${1.5 * appFontCoef}rem`, { lineHeight: `${2 * appFontCoef}rem` }],
+            '3xl': [`${1.875 * appFontCoef}rem`, { lineHeight: `${2.25 * appFontCoef}rem` }],
+            '4xl': [`${2.25 * appFontCoef}rem`, { lineHeight: `${2.5 * appFontCoef}rem` }],
+            '5xl': [`${3 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+            '6xl': [`${3.75 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+            '7xl': [`${4.5 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+            '8xl': [`${6 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+            '9xl': [`${8 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+        }
+    }
+};
diff --git a/web/packages/ui/src/index.css b/web/packages/ui/src/index.css
@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer base {
+    span, p {
+        @apply text-base;
+    }
+
     :root {
         --background: 0 0% 100%;
         --foreground: 222.2 47.4% 11.2%;