LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix layout issues

This commit is contained in:
Karol Wypchlo 2021-09-29 14:10:38 +02:00
parent 9fd52abdbe
commit 1e743061b5
No known key found for this signature in database
GPG Key ID: C92C016317A964D0
3 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard/src/components/Table.js
View File

@ -74,7 +74,7 @@ export default function Table({ items, count, headers, mutate, actions, offset,
{items && items.length ? ( {items && items.length ? (
items.map((row, index) => ( items.map((row, index) => (
<tr className={index % 2 ? "bg-gray-100" : "bg-white"} key={index}> <tr className={index % 2 ? "bg-gray-100" : "bg-white"} key={index}>
{headers.map(({ key, formatter, href, nowrap = true }) => ( {headers.map(({ key, formatter, href, nowrap }) => (
<td <td
key={key} key={key}
className={`${nowrap ? "whitespace-nowrap" : ""} px-6 py-4 text-sm font-medium text-gray-900`} className={`${nowrap ? "whitespace-nowrap" : ""} px-6 py-4 text-sm font-medium text-gray-900`}

21
packages/dashboard/src/pages/downloads.js
View File

@ -12,8 +12,25 @@ const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink); const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
const getRelativeDate = ({ downloadedOn }) => dayjs(downloadedOn).format("YYYY-MM-DD HH:mm:ss"); const getRelativeDate = ({ downloadedOn }) => dayjs(downloadedOn).format("YYYY-MM-DD HH:mm:ss");
const headers = [ const headers = [
{ key: "name", name: "Name", nowrap: false, href: getSkylinkLink }, {
{ key: "skylink", name: "Skylink" }, key: "name",
name: "File",
formatter: ({ name, skylink }) => (
<>
<p>
<a
href={getSkylinkLink({ skylink })}
className="text-green-600 hover:text-green-900 break-all"
target="_blank"
rel="noopener noreferrer"
>
{name}
</a>
</p>
<p className="text-gray-500 text-xs">{skylink}</p>
</>
),
},
{ key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) }, { key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
{ key: "downloadedOn", name: "Accessed on", formatter: getRelativeDate }, { key: "downloadedOn", name: "Accessed on", formatter: getRelativeDate },
]; ];

21
packages/dashboard/src/pages/uploads.js
View File

@ -14,8 +14,25 @@ const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink); const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
const getRelativeDate = ({ uploadedOn }) => dayjs(uploadedOn).format("YYYY-MM-DD HH:mm:ss"); const getRelativeDate = ({ uploadedOn }) => dayjs(uploadedOn).format("YYYY-MM-DD HH:mm:ss");
const headers = [ const headers = [
{ key: "name", name: "Name", nowrap: false, href: getSkylinkLink }, {
{ key: "skylink", name: "Skylink" }, key: "name",
name: "File",
formatter: ({ name, skylink }) => (
<>
<p>
<a
href={getSkylinkLink({ skylink })}
className="text-green-600 hover:text-green-900 break-all"
target="_blank"
rel="noopener noreferrer"
>
{name}
</a>
</p>
<p className="text-gray-500 text-xs">{skylink}</p>
</>
),
},
{ key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) }, { key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
{ key: "uploadedOn", name: "Uploaded on", formatter: getRelativeDate }, { key: "uploadedOn", name: "Uploaded on", formatter: getRelativeDate },
]; ];