mirrors
/
navidrome
mirror of https://github.com/navidrome/navidrome.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make Share list responsive

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
Show Stats 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", "languageName": "English",
"resources": { "resources": {
@ -189,9 +190,11 @@
"url": "URL", "url": "URL",
"description": "Description", "description": "Description",
"contents": "Contents", "contents": "Contents",
"expiresAt": "Expires at", "expiresAt": "Expires",
"lastVisitedAt": "Last Visited at", "lastVisitedAt": "Last Visited",
"visitCount": "Visits", "visitCount": "Visits",
"format": "Format",
"maxBitRate": "Max. Bit Rate",
"updatedAt": "Updated at", "updatedAt": "Updated at",
"createdAt": "Created at" "createdAt": "Created at"
}, },

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

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