StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
Download patch file Download diff file Expand all files Collapse all files

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`,