mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-04-03 20:47:35 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make Share list responsive

Browse source
This commit is contained in:
Deluan 2023-01-23 20:11:46 -05:00
parent 230f2fdc02
commit 63e67bd502
2 changed files with 45 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

7
ui/src/i18n/en.json
View file

@ -1,3 +1,4 @@
{
"languageName": "English",
"resources": {
@ -189,9 +190,11 @@
"url": "URL",
"description": "Description",
"contents": "Contents",
"expiresAt": "Expires at",
"lastVisitedAt": "Last Visited at",
"expiresAt": "Expires",
"lastVisitedAt": "Last Visited",
"visitCount": "Visits",
"format": "Format",
"maxBitRate": "Max. Bit Rate",
"updatedAt": "Updated at",
"createdAt": "Created at"
},

64
ui/src/share/ShareList.js
View file

@ -3,12 +3,14 @@ import {
FunctionField,
List,
NumberField,
SimpleList,
TextField,
useTranslate,
} from 'react-admin'
import React from 'react'
import { DateField, QualityInfo } from '../common'
import { shareUrl } from '../utils'
import { Link } from '@material-ui/core'
import { Link, useMediaQuery } from '@material-ui/core'
import config from '../config'
export const FormatInfo = ({ record, size }) => {
@ -19,37 +21,51 @@ export const FormatInfo = ({ record, size }) => {
}
const ShareList = (props) => {
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
const translate = useTranslate()
return (
<List
{...props}
sort={{ field: 'createdAt', order: 'DESC' }}
exporter={false}
>
<Datagrid rowClick="edit">
<FunctionField
source={'id'}
render={(r) => (
<Link
href={shareUrl(r.id)}
label="URL"
target="_blank"
rel="noopener noreferrer"
onClick={(e) => {
e.stopPropagation()
}}
>
{r.id}
</Link>
{isXsmall ? (
<SimpleList
primaryText={(r) => r.description || r.contents || r.id}
secondaryText={(r) => (
<>
{translate('resources.share.fields.expiresAt')}:{' '}
<DateField record={r} source={'expiresAt'} showTime />
</>
)}
/>
<TextField source="username" />
<TextField source="description" />
<TextField source="contents" />
<FormatInfo source="format" />
<NumberField source="visitCount" />
<DateField source="expiresAt" showTime />
<DateField source="lastVisitedAt" showTime sortByOrder={'DESC'} />
</Datagrid>
) : (
<Datagrid rowClick="edit">
<FunctionField
source={'id'}
render={(r) => (
<Link
href={shareUrl(r.id)}
label="URL"
target="_blank"
rel="noopener noreferrer"
onClick={(e) => {
e.stopPropagation()
}}
>
{r.id}
</Link>
)}
/>
<TextField source="username" />
<TextField source="description" />
<TextField source="contents" />
<FormatInfo source="format" />
<NumberField source="visitCount" />
<DateField source="lastVisitedAt" showTime sortByOrder={'DESC'} />
<DateField source="expiresAt" showTime />
</Datagrid>
)}
</List>
)
}