From cf3b79d4aacf5579dbe250c12f111450b343dc6c Mon Sep 17 00:00:00 2001 From: nzambello Date: Sat, 18 Feb 2023 20:37:37 +0100 Subject: [PATCH] fix: mobile styles + viewport --- app/components/TimeElapsed.tsx | 58 ++++---- app/root.tsx | 15 ++- app/routes/time-entries.tsx | 240 ++++++++++++++++++++------------- 3 files changed, 191 insertions(+), 122 deletions(-) diff --git a/app/components/TimeElapsed.tsx b/app/components/TimeElapsed.tsx index ae0aa53..8e2c5f9 100644 --- a/app/components/TimeElapsed.tsx +++ b/app/components/TimeElapsed.tsx @@ -1,3 +1,4 @@ +import { Box, MediaQuery } from '@mantine/core'; import React, { useState, useEffect } from 'react'; export interface Props { @@ -33,8 +34,8 @@ const TimeElapsed = ({ startTime, endTime }: Props) => { .padStart(2, '0')}`; return ( -
{ > {hoursString} -

- - {Intl.DateTimeFormat('it-IT', { - hour: '2-digit', - minute: '2-digit', - hour12: false - }).format(new Date(startTime))} - - - - {endTime - ? Intl.DateTimeFormat('it-IT', { - hour: '2-digit', - minute: '2-digit', - hour12: false - }).format(new Date(endTime)) - : 'now'} - -

-
+

+ + {Intl.DateTimeFormat('it-IT', { + hour: '2-digit', + minute: '2-digit', + hour12: false + }).format(new Date(startTime))} + + + + {endTime + ? Intl.DateTimeFormat('it-IT', { + hour: '2-digit', + minute: '2-digit', + hour12: false + }).format(new Date(endTime)) + : 'now'} + +

+ + ); }; diff --git a/app/root.tsx b/app/root.tsx index 4858898..ea1459f 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -126,6 +126,17 @@ function Document({ + + + + + {title ? {title} : null} @@ -355,7 +366,7 @@ function Layout({ children }: React.PropsWithChildren<{}>) { ({ display: 'block', width: '100%', @@ -379,7 +390,7 @@ function Layout({ children }: React.PropsWithChildren<{}>) { - Import + Import/Export ({ alignItems: 'center', - flexDirection: 'column' - }} + justifyContent: 'space-between', + flexDirection: 'row' + })} > -
({ display: 'flex', - alignItems: 'center', + alignItems: 'flex-start', + flexDirection: 'column', justifyContent: 'space-between', - width: '100%' - }} + flexGrow: 1, + width: '100%', + + '@media (min-width: 601px)': { + alignItems: 'center', + flexDirection: 'row' + } + })} > - {timeEntry.description} - + {timeEntry.projectId && timeEntry.project && ( {timeEntry.project.name} )} + + - - - - - - + - Edit time entry - - } - > - Edit - + '@media (max-width: 600px)': { + marginTop: '0.33rem' + } + }} + > + + + + + + + + + Edit time entry + + } + > + Edit + +
+ + } + > + Delete + +
+ + + {timeEntry.endTime ? ( +
+ + + + + + + + + +
+ ) : (
- + } + variant="filled" + title="Stop" + style={{ + backgroundColor: theme.colors.red[7], + color: 'white', + borderRadius: '50%' + }} > - Delete - + + - -
- {timeEntry.endTime ? ( -
- - - - - - - - - -
- ) : ( -
- - - - -
- )} -
+ )} + + ))}