fix: mobile styles + viewport
This commit is contained in:
parent
e0843fc89a
commit
cf3b79d4aa
GPG key ID:
56E4A92C2C1E50BA
|
|
@ -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 (
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
|
@ -50,31 +51,38 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
|
|||
>
|
||||
<code>{hoursString}</code>
|
||||
</pre>
|
||||
<p
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
margin: 0
|
||||
<MediaQuery
|
||||
smallerThan="sm"
|
||||
styles={{
|
||||
display: 'none'
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{Intl.DateTimeFormat('it-IT', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}).format(new Date(startTime))}
|
||||
</span>
|
||||
<span dangerouslySetInnerHTML={{ __html: ' — ' }} />
|
||||
<span>
|
||||
{endTime
|
||||
? Intl.DateTimeFormat('it-IT', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}).format(new Date(endTime))
|
||||
: 'now'}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
margin: 0
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{Intl.DateTimeFormat('it-IT', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}).format(new Date(startTime))}
|
||||
</span>
|
||||
<span dangerouslySetInnerHTML={{ __html: ' — ' }} />
|
||||
<span>
|
||||
{endTime
|
||||
? Intl.DateTimeFormat('it-IT', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}).format(new Date(endTime))
|
||||
: 'now'}
|
||||
</span>
|
||||
</p>
|
||||
</MediaQuery>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
15
app/root.tsx
15
app/root.tsx
|
|
@ -126,6 +126,17 @@ function Document({
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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}
|
||||
<StylesPlaceholder />
|
||||
<Meta />
|
||||
|
|
@ -355,7 +366,7 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
|
|||
</UnstyledButton>
|
||||
<UnstyledButton
|
||||
component={Link}
|
||||
to="/"
|
||||
to="/importexport"
|
||||
sx={(theme) => ({
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
|
|
@ -379,7 +390,7 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
|
|||
<Upload size={16} />
|
||||
</ThemeIcon>
|
||||
|
||||
<Text size="sm">Import</Text>
|
||||
<Text size="sm">Import/Export</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
<UnstyledButton
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ import {
|
|||
Progress,
|
||||
Badge,
|
||||
ThemeIcon,
|
||||
Alert
|
||||
Alert,
|
||||
Box
|
||||
} from '@mantine/core';
|
||||
import { json, LoaderArgs, MetaFunction, redirect } from '@remix-run/node';
|
||||
import {
|
||||
|
|
@ -138,7 +139,8 @@ export default function TimeEntriesPage() {
|
|||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-between'
|
||||
justifyContent: 'space-between',
|
||||
margin: '0.5rem 0'
|
||||
}}
|
||||
>
|
||||
<NativeSelect
|
||||
|
|
@ -248,123 +250,171 @@ export default function TimeEntriesPage() {
|
|||
radius="md"
|
||||
mb="sm"
|
||||
display="flex"
|
||||
style={{
|
||||
sx={() => ({
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
justifyContent: 'space-between',
|
||||
flexDirection: 'row'
|
||||
})}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={() => ({
|
||||
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'
|
||||
}
|
||||
})}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 'auto'
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'inline-block',
|
||||
marginRight: 'auto',
|
||||
|
||||
'@media (max-width: 600px)': {
|
||||
marginBottom: '0.33rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{timeEntry.description}
|
||||
</span>
|
||||
</Box>
|
||||
{timeEntry.projectId && timeEntry.project && (
|
||||
<Badge color={timeEntry.project.color}>
|
||||
{timeEntry.project.name}
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 1,
|
||||
flexGrow: 0,
|
||||
|
||||
'@media (min-width: 601px)': {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TimeElapsed
|
||||
startTime={timeEntry.startTime}
|
||||
endTime={timeEntry.endTime}
|
||||
/>
|
||||
<Menu shadow="md" width={200}>
|
||||
<Menu.Target>
|
||||
<ActionIcon title="Edit" mr="xs">
|
||||
<Settings size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexShrink: 0,
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Menu.Label>Edit time entry</Menu.Label>
|
||||
<Menu.Item
|
||||
component={Link}
|
||||
to={`/time-entries/${timeEntry.id}`}
|
||||
icon={
|
||||
<Edit3 size={14} color={theme.colors.yellow[8]} />
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Menu.Item>
|
||||
'@media (max-width: 600px)': {
|
||||
marginTop: '0.33rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Menu shadow="md" width={200}>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
title="Edit"
|
||||
mr="xs"
|
||||
sx={{
|
||||
marginLeft: 'auto'
|
||||
}}
|
||||
>
|
||||
<Settings size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Menu.Label>Edit time entry</Menu.Label>
|
||||
<Menu.Item
|
||||
component={Link}
|
||||
to={`/time-entries/${timeEntry.id}`}
|
||||
icon={
|
||||
<Edit3 size={14} color={theme.colors.yellow[8]} />
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Menu.Item>
|
||||
<Form
|
||||
method="delete"
|
||||
action={`/time-entries/${timeEntry.id}`}
|
||||
>
|
||||
<Menu.Item
|
||||
component="button"
|
||||
type="submit"
|
||||
icon={
|
||||
<Trash size={14} color={theme.colors.red[8]} />
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</Menu.Item>
|
||||
</Form>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
{timeEntry.endTime ? (
|
||||
<Form method="post" action="/time-entries/new">
|
||||
<input
|
||||
type="hidden"
|
||||
name="startTime"
|
||||
value={new Date(Date.now()).toISOString()}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="description"
|
||||
value={timeEntry.description}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="projectId"
|
||||
value={timeEntry.projectId}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="userId"
|
||||
value={timeEntry.userId}
|
||||
/>
|
||||
<ActionIcon
|
||||
type="submit"
|
||||
title="Start new entry with same description"
|
||||
>
|
||||
<ThemeIcon variant="light">
|
||||
<Play size={14} color={theme.colors.blue[7]} />
|
||||
</ThemeIcon>
|
||||
</ActionIcon>
|
||||
</Form>
|
||||
) : (
|
||||
<Form
|
||||
method="delete"
|
||||
method="patch"
|
||||
action={`/time-entries/${timeEntry.id}`}
|
||||
>
|
||||
<Menu.Item
|
||||
component="button"
|
||||
<input
|
||||
type="hidden"
|
||||
name="endTime"
|
||||
value={new Date().toISOString()}
|
||||
/>
|
||||
<ActionIcon
|
||||
type="submit"
|
||||
icon={<Trash size={14} color={theme.colors.red[8]} />}
|
||||
variant="filled"
|
||||
title="Stop"
|
||||
style={{
|
||||
backgroundColor: theme.colors.red[7],
|
||||
color: 'white',
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Menu.Item>
|
||||
<Square size={12} fill="currentColor" />
|
||||
</ActionIcon>
|
||||
</Form>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
{timeEntry.endTime ? (
|
||||
<Form method="post" action="/time-entries/new">
|
||||
<input
|
||||
type="hidden"
|
||||
name="startTime"
|
||||
value={new Date(Date.now()).toISOString()}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="description"
|
||||
value={timeEntry.description}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="projectId"
|
||||
value={timeEntry.projectId}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="userId"
|
||||
value={timeEntry.userId}
|
||||
/>
|
||||
<ActionIcon
|
||||
type="submit"
|
||||
title="Start new entry with same description"
|
||||
>
|
||||
<ThemeIcon variant="light">
|
||||
<Play size={14} color={theme.colors.blue[7]} />
|
||||
</ThemeIcon>
|
||||
</ActionIcon>
|
||||
</Form>
|
||||
) : (
|
||||
<Form
|
||||
method="patch"
|
||||
action={`/time-entries/${timeEntry.id}`}
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="endTime"
|
||||
value={new Date().toISOString()}
|
||||
/>
|
||||
<ActionIcon
|
||||
type="submit"
|
||||
variant="filled"
|
||||
title="Stop"
|
||||
style={{
|
||||
backgroundColor: theme.colors.red[7],
|
||||
color: 'white',
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
>
|
||||
<Square size={12} fill="currentColor" />
|
||||
</ActionIcon>
|
||||
</Form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
))}
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue