aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2025-12-17 06:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: add new breakpoint util

Browse Source
This commit is contained in:
MTG2000
2022-09-12 10:58:48 +03:00
parent c30c45ac44
commit c25e101647
7 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
View File

@@ -28,7 +28,7 @@ export default function StoryPageContent({ story }: Props) {
return ( return (
<> <>
<div id="content" className="bg-white md:p-32 md:border-2 border-gray-200 rounded-16 relative"> </div> <div id="content" className="bg-white md:p-32 md:border-2 border-gray-200 rounded-16 relative"> </div>
<Card id="content" onlyMd className="relative"> <Card id="content" onlyMd className="relative max">
{story.cover_image && {story.cover_image &&
<img src={story.cover_image} <img src={story.cover_image}
className='w-full object-cover rounded-12 md:rounded-16 mb-16' className='w-full object-cover rounded-12 md:rounded-16 mb-16'

50
src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
View File

@@ -26,32 +26,34 @@ export default function PostDetailsPageSkeleton() {
return ( return (
<div <div className="page-container max-md:bg-white">
className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`} <div
> className={`grid pt-16 w-full gap-32 ${styles.grid}`}
<aside id='actions' className='no-scrollbar'> >
<div className="sticky" <aside id='actions' className='no-scrollbar'>
style={{ <div className="sticky"
top: `${navHeight + 16}px`, style={{
maxHeight: `calc(100vh - ${navHeight}px - 16px)`, top: `${navHeight + 16}px`,
}}> maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
<PostActionsSkeleton /> }}>
</div> <PostActionsSkeleton />
</aside> </div>
</aside>
<PageContentSkeleton /> <PageContentSkeleton />
<aside id='author' className='no-scrollbar min-w-0'> <aside id='author' className='no-scrollbar min-w-0'>
<div className="flex flex-col gap-24" <div className="flex flex-col gap-24"
style={{ style={{
top: `${navHeight + 16}px`, top: `${navHeight + 16}px`,
maxHeight: `calc(100vh - ${navHeight}px - 16px)`, maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
overflowY: "scroll", overflowY: "scroll",
}}> }}>
<AuthorCardSkeleton /> <AuthorCardSkeleton />
<TrendingCard /> <TrendingCard />
</div> </div>
</aside> </aside>
</div>
</div> </div>
) )
} }

4
src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
View File

@@ -45,10 +45,10 @@ export default function PostDetailsPage() {
</Helmet> </Helmet>
<ScrollToTop /> <ScrollToTop />
<div <div
className={`page-container`} className={`page-container max-md:bg-white`}
> >
<div className={`grid w-full gap-32 ${styles.grid}`}> <div className={`grid w-full gap-32 ${styles.grid}`}>
<aside id='actions' className='no-scrollbar'> <aside id='actions' className='no-scrollbar fill-container'>
<div className="sticky-side-element"> <div className="sticky-side-element">
<PostActions post={post} /> <PostActions post={post} />
</div> </div>

2
src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
View File

@@ -15,7 +15,7 @@ export default function OverviewPage() {
const { tournamentDetails, makers, myParticipationInfo } = useTournament() const { tournamentDetails, makers, myParticipationInfo } = useTournament()
return ( return (
<Card onlyMd className='flex flex-col gap-42 bg-white -mx-16 -my-24 md:m-0 px-16'> <Card onlyMd className='flex flex-col gap-42 bg-white max-md:-mx-16 max-md:-mt-24 px-16'>
<div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start"> <div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start">
<div className='md:col-span-2'> <div className='md:col-span-2'>
<div <div

9
src/styles/index.scss
View File

@@ -28,17 +28,16 @@ body {
} }
display: grid; display: grid;
grid-template-columns: minmax(var(--padding), 1fr) minmax( grid-template-columns:
auto, minmax(var(--padding), 1fr) minmax(auto, var(--maxPageWidth, 1440px))
var(--maxPageWidth, 1440px) minmax(var(--padding), 1fr);
) minmax(var(--padding), 1fr);
> * { > * {
grid-column: 2/3; grid-column: 2/3;
min-width: 0; min-width: 0;
} }
> .full-width { > .fill-container {
grid-column: 1/-1; grid-column: 1/-1;
} }
} }

6
src/styles/tw.scss
View File

@@ -47,3 +47,9 @@
@apply rounded-[40px] bg-white overflow-hidden w-full shadow-2xl z-10; @apply rounded-[40px] bg-white overflow-hidden w-full shadow-2xl z-10;
} }
} }
@layer utilities {
.fill-grid-row {
grid-column: 1/-1;
}
}

3
tailwind.config.js
View File

@@ -92,6 +92,9 @@ module.exports = {
outline: { outline: {
primary: ["2px solid #7B61FF", "1px"], primary: ["2px solid #7B61FF", "1px"],
}, },
screens: {
'max-md': { 'max': THEME.screens.md + 'px' },
}
}, },
}, },
variants: { variants: {