jeffemmett
/
non-fungible-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styles: responsivness on NFA detail page

This commit is contained in:
Camila Sosa Morales 2023-05-11 12:15:42 -03:00
parent afba5e4d61
commit d004890e88
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/views/indexed-nfa/fragments/skeleton.fragment.tsx
View File

@ -2,7 +2,7 @@ import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
import { SkeletonAccessPointsListFragment } from './main/skeleton.ap-list'; import { SkeletonAccessPointsListFragment } from './main/skeleton.ap-list';
export const IndexedNFASkeletonFragment: React.FC = () => ( export const IndexedNFASkeletonFragment: React.FC = () => (
<S.Grid> <S.Grid css={{ justifyItems: 'normal' }}>
<S.Aside.Container> <S.Aside.Container>
<S.Skeleton css={{ aspectRatio: 1, width: '100%' }} /> <S.Skeleton css={{ aspectRatio: 1, width: '100%' }} />
</S.Aside.Container> </S.Aside.Container>

7
ui/src/views/indexed-nfa/indexed-nfa.styles.ts
View File

@ -16,9 +16,10 @@ export const IndexedNFAStyles = {
gridTemplateColumns: '20rem 1fr', gridTemplateColumns: '20rem 1fr',
}, },
'@media (max-width: 580px)': { '@media (max-width: 640px)': {
gridTemplateAreas: '"aside" "main"', gridTemplateAreas: '"aside" "main"',
gridTemplateColumns: '1fr', gridTemplateColumns: '1fr',
justifyItems: 'center',
}, },
}), }),
@ -37,7 +38,7 @@ export const IndexedNFAStyles = {
maxWidth: '24rem', maxWidth: '24rem',
mixBlendMode: 'screen', mixBlendMode: 'screen',
'@media (max-width: 580px)': { '@media (max-width: 640px)': {
position: 'static', position: 'static',
}, },
}), }),
@ -161,7 +162,7 @@ export const IndexedNFAStyles = {
gridTemplateAreas: '"thumbnail data"', gridTemplateAreas: '"thumbnail data"',
gap: '$4h', gap: '$4h',
alignItems: 'center', alignItems: 'center',
gridTemplateColumns: '10rem 1fr', gridTemplateColumns: '7rem 1fr',
}), }),
Thumbnail: styled('div', { Thumbnail: styled('div', {
gridArea: 'thumbnail', gridArea: 'thumbnail',