Make interface mobile responsive (#2273)

This commit is contained in:
Rihan 2020-09-13 18:02:25 +01:00 committed by GitHub
parent 9a21584c42
commit 9a4c0d8ba7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 130 additions and 69 deletions

View file

@ -43,7 +43,7 @@ export default ({ backup, className }: Props) => {
<GreyRowBox css={tw`flex items-center`} className={className}>
<div css={tw`mr-4`}>
{backup.completedAt ?
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
<FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300 hidden md:block`}/>
:
<Spinner size={'small'}/>
}
@ -57,10 +57,10 @@ export default ({ backup, className }: Props) => {
}
{backup.name}
{(backup.completedAt && backup.isSuccessful) &&
<span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
}
</p>
<p css={tw`text-xs text-neutral-400 font-mono`}>
<p css={tw`text-xs text-neutral-400 font-mono hidden md:block`}>
{backup.uuid}
</p>
</div>

View file

@ -9,7 +9,7 @@ const ChecksumModal = ({ checksum, ...props }: RequiredModalProps & { checksum:
The checksum of this file is:
</p>
<pre css={tw`mt-2 text-sm p-2 bg-neutral-900 rounded`}>
<code css={tw`block font-mono`}>{checksum}</code>
<code css={tw`block font-mono overflow-auto`}>{checksum}</code>
</pre>
</Modal>
);