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';
export const IndexedNFASkeletonFragment: React.FC = () => (
<S.Grid>
<S.Grid css={{ justifyItems: 'normal' }}>
<S.Aside.Container>
<S.Skeleton css={{ aspectRatio: 1, width: '100%' }} />
</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',
},
'@media (max-width: 580px)': {
'@media (max-width: 640px)': {
gridTemplateAreas: '"aside" "main"',
gridTemplateColumns: '1fr',
justifyItems: 'center',
},
}),
@ -37,7 +38,7 @@ export const IndexedNFAStyles = {
maxWidth: '24rem',
mixBlendMode: 'screen',
'@media (max-width: 580px)': {
'@media (max-width: 640px)': {
position: 'static',
},
}),
@ -161,7 +162,7 @@ export const IndexedNFAStyles = {
gridTemplateAreas: '"thumbnail data"',
gap: '$4h',
alignItems: 'center',
gridTemplateColumns: '10rem 1fr',
gridTemplateColumns: '7rem 1fr',
}),
Thumbnail: styled('div', {
gridArea: 'thumbnail',