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 (
<>
<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 &&
<img src={story.cover_image}
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 (
<div
className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
>
<aside id='actions' className='no-scrollbar'>
<div className="sticky"
style={{
top: `${navHeight + 16}px`,
maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
}}>
<PostActionsSkeleton />
</div>
</aside>
<div className="page-container max-md:bg-white">
<div
className={`grid pt-16 w-full gap-32 ${styles.grid}`}
>
<aside id='actions' className='no-scrollbar'>
<div className="sticky"
style={{
top: `${navHeight + 16}px`,
maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
}}>
<PostActionsSkeleton />
</div>
</aside>
<PageContentSkeleton />
<aside id='author' className='no-scrollbar min-w-0'>
<div className="flex flex-col gap-24"
style={{
top: `${navHeight + 16}px`,
maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
overflowY: "scroll",
}}>
<AuthorCardSkeleton />
<TrendingCard />
</div>
</aside>
<PageContentSkeleton />
<aside id='author' className='no-scrollbar min-w-0'>
<div className="flex flex-col gap-24"
style={{
top: `${navHeight + 16}px`,
maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
overflowY: "scroll",
}}>
<AuthorCardSkeleton />
<TrendingCard />
</div>
</aside>
</div>
</div>
)
}

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

@@ -45,10 +45,10 @@ export default function PostDetailsPage() {
</Helmet>
<ScrollToTop />
<div
className={`page-container`}
className={`page-container max-md:bg-white`}
>
<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">
<PostActions post={post} />
</div>

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

@@ -15,7 +15,7 @@ export default function OverviewPage() {
const { tournamentDetails, makers, myParticipationInfo } = useTournament()
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='md:col-span-2'>
<div

9
src/styles/index.scss
View File

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

3
tailwind.config.js
View File

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