chore(tailwind): config and pulse class

entur · May 22, 2024 · 37fbdd8 · 37fbdd8
1 parent fdd99e3
commit 37fbdd8
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 12 deletions.
diff --git a/next-tavla/app/globals.css b/next-tavla/app/globals.css
@@ -188,6 +188,10 @@
         border-radius: 0.5em;
     }
 
+    .pulse {
+        @apply inline-flex rounded-full bg-success h-em-0.75 w-em-0.75 left-[calc(50%-(0.75em/2))] bottom-[calc(50%-(0.75em/2))];
+    }
+
     /* For Tavla using pages */
 
     .root {

diff --git a/next-tavla/src/Board/scenarios/Board/index.tsx b/next-tavla/src/Board/scenarios/Board/index.tsx
@@ -25,7 +25,7 @@ function Board({ board, style }: { board: TBoard; style?: CSSProperties }) {
 
     return (
         <div
-            className={`grid grid-cols-auto-fit-minmax gap-[10px] h-full overflow-hidden supports-[not(display:grid)]:flex supports-[not(display:grid)]:*:m-[10px] ${getFontScale(
+            className={`grid grid-cols-auto-fit-minmax gap-2.5 h-full overflow-hidden supports-[not(display:grid)]:flex supports-[not(display:grid)]:*:m-2.5 ${getFontScale(
                 board.meta?.fontSize || defaultFontSize(board),
             )} `}
             style={{

diff --git a/next-tavla/src/Board/scenarios/Table/components/Line/index.tsx b/next-tavla/src/Board/scenarios/Table/components/Line/index.tsx
@@ -19,7 +19,7 @@ function Line() {
         <TableColumn title="Linje">
             {lines.map((line) => (
                 <TableRow key={line.key}>
-                    <div className="flex gap-2 justify-start items-center p-r-2 w-full">
+                    <div className="flex gap-2 justify-start items-center pr-2 w-full">
                         <TravelTag
                             transportMode={line.transportMode}
                             transportSubmode={line.transportSubmode}

diff --git a/next-tavla/src/Board/scenarios/Table/components/Situation/index.tsx b/next-tavla/src/Board/scenarios/Table/components/Situation/index.tsx
@@ -21,9 +21,7 @@ function Situation({
             <div className="fill-warning flex items-center mr-[0.1em] text-[1.8em]">
                 <ValidationExclamation />
             </div>
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-                {situationText}
-            </div>
+            <div className="truncate">{situationText}</div>
         </div>
     )
 }

diff --git a/next-tavla/src/Board/scenarios/Table/components/StopPlaceDeviation/index.tsx b/next-tavla/src/Board/scenarios/Table/components/StopPlaceDeviation/index.tsx
@@ -13,7 +13,7 @@ function StopPlaceDeviation({
     if (!situations || numberOfSituations === 0) return null
 
     return (
-        <div className="pb-[0.5em]">
+        <div className="pb-em-0.5">
             <Situation situation={situations[index % numberOfSituations]} />
         </div>
     )

diff --git a/next-tavla/src/Board/scenarios/Table/components/TableRow/index.tsx b/next-tavla/src/Board/scenarios/Table/components/TableRow/index.tsx
@@ -1,7 +1,7 @@
 function TableRow({ children }: { children: React.ReactNode }) {
     return (
         <div className="flex items-center h-em-3 border-t border-solid border-t-secondary">
-            <div className="w-full mx-[0.25em]">{children}</div>
+            <div className="w-full mx-em-0.25">{children}</div>
         </div>
     )
 }

diff --git a/next-tavla/src/Shared/components/Pulse/index.tsx b/next-tavla/src/Shared/components/Pulse/index.tsx
@@ -1,8 +1,8 @@
 function Pulse() {
     return (
         <div className="relative flex h-full w-full">
-            <span className="animate-ping-slow absolute inline-flex rounded-full bg-success h-[0.75em] w-[0.75em] left-[calc(50%-(0.75em/2))] bottom-[calc(50%-(0.75em/2))]"></span>
-            <span className="relative inline-flex rounded-full bg-success  h-[0.75em] w-[0.75em] left-[calc(50%-(0.75em/2))] bottom-[calc(50%-(0.75em/2))]"></span>
+            <span className="animate-ping-slow absolute pulse"></span>
+            <span className="relative pulse"></span>
         </div>
     )
 }

diff --git a/next-tavla/tailwind.config.ts b/next-tavla/tailwind.config.ts
@@ -61,16 +61,16 @@ module.exports = {
                 'em-lg': '1.3em',
             },
             spacing: {
+                'em-0.25': '0.25em',
+                'em-0.5': '0.5em',
+                'em-0.75': '0.75em',
                 'em-1': '1em',
                 'em-2': '2em',
                 'em-3': '3em',
             },
             gridTemplateColumns: {
                 'auto-fit-minmax': 'repeat(auto-fit, minmax(60vmin, 1fr))',
             },
-            content: {
-                content: ' ',
-            },
             animation: {
                 'ping-slow': 'ping 8s  infinite',
             },