Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve mobile display of activity log

Browse source
This commit is contained in:
DaneEveritt 2022-06-12 09:09:01 -04:00
parent 4d30cc9e7e
commit 9c957952fb
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -9,6 +9,7 @@
"@heroicons/react": "^1.0.6",
"@hot-loader/react-dom": "^16.14.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/line-clamp": "^0.4.0",
"axios": "^0.21.1",
"chart.js": "^2.8.0",
"classnames": "^2.3.1",

12
resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
View file

@ -51,7 +51,7 @@ export default () => {
<div className={'flex justify-end mb-2'}>
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text)}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'}/>
@ -67,7 +67,7 @@ export default () => {
key={`${activity.event}|${activity.timestamp.toString()}`}
className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0'}
>
<div className={'col-span-1 flex items-center justify-center select-none'}>
<div className={'col-span-2 sm:col-span-1 flex items-center justify-center select-none'}>
<div className={'flex items-center w-8 h-8 rounded-full bg-gray-600 overflow-hidden'}>
{activity.relationships.actor ?
<img src={activity.relationships.actor.image} alt={'User avatar'}/>
@ -76,13 +76,13 @@ export default () => {
}
</div>
</div>
<div className={'col-span-9'}>
<div className={'col-span-8 sm:col-span-9'}>
<div className={'flex items-center text-gray-50'}>
{activity.relationships.actor?.username || 'system'}
<span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
<Link
to={`?${queryTo({ event: activity.event })}`}
className={'transition-colors duration-75 hover:text-cyan-400'}
className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
>
{activity.event}
</Link>
@ -92,7 +92,7 @@ export default () => {
</Tooltip>
}
</div>
<p className={'mt-1 text-sm'}>
<p className={'mt-1 text-sm break-words line-clamp-2 pr-4'}>
<Translate ns={'activity'} values={activity.properties}>
{activity.event.replace(':', '.')}
</Translate>
@ -100,7 +100,7 @@ export default () => {
<div className={'mt-1 flex items-center text-sm'}>
<Link
to={`?${queryTo({ ip: activity.ip })}`}
className={'transition-colors duration-75 hover:text-cyan-400'}
className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
>
{activity.ip}
</Link>

2
resources/scripts/components/elements/tooltip/Tooltip.tsx
View file

@ -73,7 +73,7 @@ export default ({ content, children, disabled = false, ...props }: Props) => {
transition={{ type: 'easeIn', damping: 20, stiffness: 300, duration: 0.1 }}
{...getFloatingProps({
ref: floating,
className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none',
className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[90vw]',
style: {
position: strategy,
top: `${y || 0}px`,

1
tailwind.config.js
View file

@ -43,6 +43,7 @@ module.exports = {
},
},
plugins: [
require('@tailwindcss/line-clamp'),
require('@tailwindcss/forms')({
strategy: 'class',
}),

5
yarn.lock
View file

@ -1412,6 +1412,11 @@
dependencies:
mini-svg-data-uri "^1.2.3"
"@tailwindcss/line-clamp@^0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz#03353e31e77636b785f2336e8c978502cec1de81"
integrity sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==
"@types/chart.js@^2.8.5":
version "2.8.5"
resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.8.5.tgz#7d47cfd36f0a1c2c4ad6a585749bc68e8659492a"