nzambello/work-timer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: mobile styles + viewport

Browse source
This commit is contained in:
Nicola Zambello 2023-02-18 20:37:37 +01:00
parent e0843fc89a
commit cf3b79d4aa
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
3 changed files with 191 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/components/TimeElapsed.tsx
View file

@ -1,3 +1,4 @@
import { Box, MediaQuery } from '@mantine/core';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
export interface Props { export interface Props {
@ -33,8 +34,8 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
.padStart(2, '0')}`; .padStart(2, '0')}`;
return ( return (
<div <Box
style={{ sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -50,6 +51,12 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
> >
<code>{hoursString}</code> <code>{hoursString}</code>
</pre> </pre>
<MediaQuery
smallerThan="sm"
styles={{
display: 'none'
}}
>
<p <p
style={{ style={{
fontSize: '0.75rem', fontSize: '0.75rem',
@ -74,7 +81,8 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
: 'now'} : 'now'}
</span> </span>
</p> </p>
</div> </MediaQuery>
</Box>
); );
}; };

15
app/root.tsx
View file

@ -126,6 +126,17 @@ function Document({
<html lang="en"> <html lang="en">
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="default"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
{title ? <title>{title}</title> : null} {title ? <title>{title}</title> : null}
<StylesPlaceholder /> <StylesPlaceholder />
<Meta /> <Meta />
@ -355,7 +366,7 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton
component={Link} component={Link}
to="/" to="/importexport"
sx={(theme) => ({ sx={(theme) => ({
display: 'block', display: 'block',
width: '100%', width: '100%',
@ -379,7 +390,7 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<Upload size={16} /> <Upload size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Import</Text> <Text size="sm">Import/Export</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton

88
app/routes/time-entries.tsx
View file

@ -14,7 +14,8 @@ import {
Progress, Progress,
Badge, Badge,
ThemeIcon, ThemeIcon,
Alert Alert,
Box
} from '@mantine/core'; } from '@mantine/core';
import { json, LoaderArgs, MetaFunction, redirect } from '@remix-run/node'; import { json, LoaderArgs, MetaFunction, redirect } from '@remix-run/node';
import { import {
@ -138,7 +139,8 @@ export default function TimeEntriesPage() {
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'flex-end', alignItems: 'flex-end',
justifyContent: 'space-between' justifyContent: 'space-between',
margin: '0.5rem 0'
}} }}
> >
<NativeSelect <NativeSelect
@ -248,38 +250,83 @@ export default function TimeEntriesPage() {
radius="md" radius="md"
mb="sm" mb="sm"
display="flex" display="flex"
style={{ sx={() => ({
alignItems: 'center',
flexDirection: 'column'
}}
>
<div
style={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
width: '100%' flexDirection: 'row'
}} })}
> >
<span <Box
style={{ sx={() => ({
marginRight: 'auto' display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
justifyContent: 'space-between',
flexGrow: 1,
width: '100%',
'@media (min-width: 601px)': {
alignItems: 'center',
flexDirection: 'row'
}
})}
>
<Box
component="span"
sx={{
display: 'inline-block',
marginRight: 'auto',
'@media (max-width: 600px)': {
marginBottom: '0.33rem'
}
}} }}
> >
{timeEntry.description} {timeEntry.description}
</span> </Box>
{timeEntry.projectId && timeEntry.project && ( {timeEntry.projectId && timeEntry.project && (
<Badge color={timeEntry.project.color}> <Badge color={timeEntry.project.color}>
{timeEntry.project.name} {timeEntry.project.name}
</Badge> </Badge>
)} )}
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-between',
flexShrink: 1,
flexGrow: 0,
'@media (min-width: 601px)': {
flexDirection: 'row'
}
}}
>
<TimeElapsed <TimeElapsed
startTime={timeEntry.startTime} startTime={timeEntry.startTime}
endTime={timeEntry.endTime} endTime={timeEntry.endTime}
/> />
<Box
sx={{
display: 'flex',
flexShrink: 0,
'@media (max-width: 600px)': {
marginTop: '0.33rem'
}
}}
>
<Menu shadow="md" width={200}> <Menu shadow="md" width={200}>
<Menu.Target> <Menu.Target>
<ActionIcon title="Edit" mr="xs"> <ActionIcon
title="Edit"
mr="xs"
sx={{
marginLeft: 'auto'
}}
>
<Settings size={14} /> <Settings size={14} />
</ActionIcon> </ActionIcon>
</Menu.Target> </Menu.Target>
@ -302,7 +349,9 @@ export default function TimeEntriesPage() {
<Menu.Item <Menu.Item
component="button" component="button"
type="submit" type="submit"
icon={<Trash size={14} color={theme.colors.red[8]} />} icon={
<Trash size={14} color={theme.colors.red[8]} />
}
> >
Delete Delete
</Menu.Item> </Menu.Item>
@ -364,7 +413,8 @@ export default function TimeEntriesPage() {
</ActionIcon> </ActionIcon>
</Form> </Form>
)} )}
</div> </Box>
</Box>
</Paper> </Paper>
))} ))}
</section> </section>