Make Share list responsive

ui/src/i18n/en.json

@@ -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"
             },

ui/src/share/ShareList.js

@@ -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>
   )
 }