Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

refactor(web): datatables

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-04 16:18:15 -08:00 committed by Blake Blackshear
parent 96f87caff0
commit e50cc59f0d
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/Events.jsx
View File

@ -141,7 +141,7 @@ export default function Events({ path: pathname } = {}) {
const end = new Date(parseInt(endTime * 1000, 10)); const end = new Date(parseInt(endTime * 1000, 10));
const ref = i === events.length - 1 ? lastCellRef : undefined; const ref = i === events.length - 1 ? lastCellRef : undefined;
return ( return (
<Tr key={id} index={i}> <Tr key={id}>
<Td className="w-40"> <Td className="w-40">
<a href={`/events/${id}`} ref={ref} data-start-time={startTime} data-reached-end={reachedEnd}> <a href={`/events/${id}`} ref={ref} data-start-time={startTime} data-reached-end={reachedEnd}>
<img <img

4
web/src/components/Card.jsx
View File

@ -17,7 +17,9 @@ export default function Box({
}) { }) {
const Element = href ? 'a' : 'div'; const Element = href ? 'a' : 'div';
const typeClasses = elevated ? 'shadow-md hover:shadow-lg transition-shadow' : 'border border-gray-200'; const typeClasses = elevated
? 'shadow-md hover:shadow-lg transition-shadow'
: 'border border-gray-200 dark:border-gray-700';
return ( return (
<div className={`bg-white dark:bg-gray-800 rounded-lg overflow-hidden ${typeClasses} ${className}`}> <div className={`bg-white dark:bg-gray-800 rounded-lg overflow-hidden ${typeClasses} ${className}`}>

14
web/src/components/Table.jsx
View File

@ -18,13 +18,19 @@ export function Tfoot({ children, className = '' }) {
return <tfoot className={`${className}`}>{children}</tfoot>; return <tfoot className={`${className}`}>{children}</tfoot>;
} }
export function Tr({ children, className = '', index }) { export function Tr({ children, className = '' }) {
return <tr className={`${index % 2 ? 'bg-gray-200 dark:bg-gray-600' : ''} ${className}`}>{children}</tr>; return (
<tr
className={`border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 ${className}`}
>
{children}
</tr>
);
} }
export function Th({ children, className = '', colspan }) { export function Th({ children, className = '', colspan }) {
return ( return (
<th className={`border-b-2 border-gray-400 p-1 md:p-2 text-left ${className}`} colspan={colspan}> <th className={`border-b border-gray-400 p-2 px-1 lg:p-4 text-left ${className}`} colspan={colspan}>
{children} {children}
</th> </th>
); );
@ -32,7 +38,7 @@ export function Th({ children, className = '', colspan }) {
export function Td({ children, className = '', colspan }) { export function Td({ children, className = '', colspan }) {
return ( return (
<td className={`p-1 md:p-2 ${className}`} colspan={colspan}> <td className={`p-2 px-1 lg:p-4 ${className}`} colspan={colspan}>
{children} {children}
</td> </td>
); );