mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-02-23 15:34:21 +01:00
Merge branch 'dev' into feature/tournament-pages
This commit is contained in:
MTG2000
@@ -41,7 +41,6 @@ export default function NavDesktop() {
|
||||
<nav className="bg-white py-16 flex items-center w-full min-w-full">
|
||||
<div className="content-container">
|
||||
<div className="flex items-center">
|
||||
|
||||
<Link to="/">
|
||||
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
|
||||
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
|
||||
@@ -73,68 +73,70 @@ export default function NavMobile() {
|
||||
return (
|
||||
<div className={`${styles.navMobile}`}>
|
||||
<nav className={`bg-white h-[67px] w-full py-16`}>
|
||||
<div className="content-container flex justify-between items-center">
|
||||
<div className="content-container">
|
||||
<div className="flex justify-between items-center">
|
||||
|
||||
<div className="flex-1 flex content-start">
|
||||
<IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
|
||||
{!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
|
||||
: (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
|
||||
</IconButton>
|
||||
<div className="flex-1 flex content-start">
|
||||
<IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
|
||||
{!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
|
||||
: (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
|
||||
</IconButton>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex-[2] flex justify-center">
|
||||
<Link to="/">
|
||||
<img className='max-h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex justify-end">
|
||||
{curUser ?
|
||||
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
menuClassName='!p-8 !rounded-12'
|
||||
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
|
||||
<MenuItem
|
||||
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👾 Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/logout"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/logout");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👋 Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
:
|
||||
<Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
|
||||
}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex-[2] flex justify-center">
|
||||
<Link to="/">
|
||||
<img className='max-h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex justify-end">
|
||||
{curUser ?
|
||||
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
menuClassName='!p-8 !rounded-12'
|
||||
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
|
||||
<MenuItem
|
||||
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👾 Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/logout"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/logout");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
👋 Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
:
|
||||
<Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
|
||||
}</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -31,57 +31,59 @@ export default function HackathonsPage() {
|
||||
<meta property="og:title" content={'Hackathons'} />
|
||||
</Helmet>
|
||||
<div
|
||||
className={`page-container pt-16 w-full`}
|
||||
className={`page-container`}
|
||||
>
|
||||
<Link to={createRoute({ type: "tournament", id: 1, tab: 'overview' })}>
|
||||
<div className="rounded-16 min-h-[200px] md:min-h-[240px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end">
|
||||
<img
|
||||
className="w-full h-full object-cover object-top absolute top-0 left-0 z-[-2]"
|
||||
src='https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/1d5d2c86-fe46-4478-6909-bb3c425c0d00/public'
|
||||
alt=""
|
||||
/>
|
||||
<div className="w-full h-full object-cover bg-black bg-opacity-60 absolute top-0 left-0 z-[-1]"></div>
|
||||
<div className="max-w-[90%]">
|
||||
<p className="text-body1 font-bolder text-white">Legends of Lightning ⚡️ Tournament</p>
|
||||
<p className="text-body3 font-medium text-white mt-8">1st Oct - 31st Nov, 2022</p>
|
||||
<div className={`pt-16 w-full ${styles.grid}`}>
|
||||
<Link to={createRoute({ type: "tournament", id: 1, tab: 'overview' })}>
|
||||
<div className="rounded-16 min-h-[200px] md:min-h-[240px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end">
|
||||
<img
|
||||
className="w-full h-full object-cover object-top absolute top-0 left-0 z-[-2]"
|
||||
src='https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/1d5d2c86-fe46-4478-6909-bb3c425c0d00/public'
|
||||
alt=""
|
||||
/>
|
||||
<div className="w-full h-full object-cover bg-black bg-opacity-60 absolute top-0 left-0 z-[-1]"></div>
|
||||
<div className="max-w-[90%]">
|
||||
<p className="text-body1 font-bolder text-white">Legends of Lightning ⚡️ Tournament</p>
|
||||
<p className="text-body3 font-medium text-white mt-8">1st Oct - 31st Nov, 2022</p>
|
||||
</div>
|
||||
<p className="text-body4 font-medium text-white mt-8">
|
||||
<IoLocationOutline className="mr-8" /> Online
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-body4 font-medium text-white mt-8">
|
||||
<IoLocationOutline className="mr-8" /> Online
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex gap-16 flex-wrap my-24 justify-between">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<div className="self-center">
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/></div>
|
||||
</div>
|
||||
{/* <aside className='no-scrollbar'>
|
||||
<div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
|
||||
</Link>
|
||||
<div className="flex gap-16 flex-wrap my-24 justify-between">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
<Button
|
||||
href='https://airtable.com/shrgXKynON8YWeyyE'
|
||||
newTab
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
List Your Hackathon
|
||||
</Button>
|
||||
<div className="hidden md:block">
|
||||
<Fulgur />
|
||||
</div>
|
||||
<div className="self-center">
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/></div>
|
||||
</div>
|
||||
</aside> */}
|
||||
<main className="self-start">
|
||||
<HackathonsList
|
||||
currentFilter={sortByFilter}
|
||||
isLoading={hackathonsQuery.loading}
|
||||
items={hackathonsQuery.data?.getAllHackathons} />
|
||||
</main>
|
||||
{/* <aside className='no-scrollbar'>
|
||||
<div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
<Button
|
||||
href='https://airtable.com/shrgXKynON8YWeyyE'
|
||||
newTab
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
List Your Hackathon
|
||||
</Button>
|
||||
<div className="hidden md:block">
|
||||
<Fulgur />
|
||||
</div>
|
||||
</div>
|
||||
</aside> */}
|
||||
<main className="self-start">
|
||||
<HackathonsList
|
||||
currentFilter={sortByFilter}
|
||||
isLoading={hackathonsQuery.loading}
|
||||
items={hackathonsQuery.data?.getAllHackathons} />
|
||||
</main>
|
||||
</div>
|
||||
</div></>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -43,78 +43,80 @@ export default function FeedPage() {
|
||||
<meta property="og:title" content={`Bolt.Fun Stories`} />
|
||||
</Helmet>
|
||||
<div
|
||||
className={`page-container pt-16 w-full ${styles.grid}`}
|
||||
className={`page-container`}
|
||||
>
|
||||
<div id="title">
|
||||
{tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
|
||||
<span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
|
||||
<FiArrowRight />
|
||||
<span> {tagFilter.title}</span>
|
||||
</p>}
|
||||
<h1 className="text-h2 font-bolder">{
|
||||
tagFilter ?
|
||||
<>{tagFilter.icon} {capitalize(tagFilter.title)}</>
|
||||
:
|
||||
"Stories ✍🏼"
|
||||
}</h1>
|
||||
</div>
|
||||
<div id="sort-by">
|
||||
<SortBy
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
</div>
|
||||
<div id="content">
|
||||
<PostsList
|
||||
isLoading={feedQuery.loading}
|
||||
items={feedQuery.data?.getFeed}
|
||||
isFetching={isFetchingMore}
|
||||
onReachedBottom={fetchMore}
|
||||
/>
|
||||
</div>
|
||||
<aside id='categories' className='no-scrollbar'>
|
||||
<div className="pb-16 md:overflow-y-scroll sticky-side-element">
|
||||
<Button
|
||||
href='/blog/create-post'
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
Write a story
|
||||
</Button>
|
||||
<div className="my-24"></div>
|
||||
<div className="my-24"></div>
|
||||
<PopularTagsFilter
|
||||
value={tagFilter}
|
||||
onChange={setTagFilter as any}
|
||||
/>
|
||||
|
||||
<div className={`w-full ${styles.grid}`}>
|
||||
<div id="title">
|
||||
{tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
|
||||
<span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
|
||||
<FiArrowRight />
|
||||
<span> {tagFilter.title}</span>
|
||||
</p>}
|
||||
<h1 className="text-h2 font-bolder">{
|
||||
tagFilter ?
|
||||
<>{tagFilter.icon} {capitalize(tagFilter.title)}</>
|
||||
:
|
||||
"Stories ✍🏼"
|
||||
}</h1>
|
||||
</div>
|
||||
</aside>
|
||||
<aside id='side' className='no-scrollbar'>
|
||||
<div className="pb-16 flex flex-col gap-24 overflow-y-auto sticky-side-element" >
|
||||
<TrendingCard />
|
||||
<div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/stw2.jfif)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute bg-black inset-0 opacity-10"></div>
|
||||
<div className="relative flex flex-col gap-24">
|
||||
<div className="flex flex-col gap-8">
|
||||
<p className="text-body1 font-bolder">Shock the Web 2 ⚡️</p>
|
||||
<p className="text-body3 font-medium">16th - 18th June, 2022</p>
|
||||
<div id="sort-by">
|
||||
<SortBy
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
</div>
|
||||
<div id="content">
|
||||
<PostsList
|
||||
isLoading={feedQuery.loading}
|
||||
items={feedQuery.data?.getFeed}
|
||||
isFetching={isFetchingMore}
|
||||
onReachedBottom={fetchMore}
|
||||
/>
|
||||
</div>
|
||||
<aside id='categories' className='no-scrollbar'>
|
||||
<div className="pb-16 md:overflow-y-scroll sticky-side-element">
|
||||
<Button
|
||||
href='/blog/create-post'
|
||||
color='primary'
|
||||
fullWidth
|
||||
>
|
||||
Write a story
|
||||
</Button>
|
||||
<div className="my-24"></div>
|
||||
<div className="my-24"></div>
|
||||
<PopularTagsFilter
|
||||
value={tagFilter}
|
||||
onChange={setTagFilter as any}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<aside id='side' className='no-scrollbar'>
|
||||
<div className="pb-16 flex flex-col gap-24 overflow-y-auto sticky-side-element" >
|
||||
<TrendingCard />
|
||||
<div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/stw2.jfif)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute bg-black inset-0 opacity-10"></div>
|
||||
<div className="relative flex flex-col gap-24">
|
||||
<div className="flex flex-col gap-8">
|
||||
<p className="text-body1 font-bolder">Shock the Web 2 ⚡️</p>
|
||||
<p className="text-body3 font-medium">16th - 18th June, 2022</p>
|
||||
</div>
|
||||
<Button
|
||||
color='white'
|
||||
fullWidth
|
||||
href='https://discord.gg/HFqtxavb7x'
|
||||
newTab
|
||||
>
|
||||
<FaDiscord className='scale-125 mr-8' /> <span className="align-middle">Join in Discord</span>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
color='white'
|
||||
fullWidth
|
||||
href='https://discord.gg/HFqtxavb7x'
|
||||
newTab
|
||||
>
|
||||
<FaDiscord className='scale-125 mr-8' /> <span className="align-middle">Join in Discord</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -45,29 +45,31 @@ export default function PostDetailsPage() {
|
||||
</Helmet>
|
||||
<ScrollToTop />
|
||||
<div
|
||||
className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
|
||||
className={`page-container`}
|
||||
>
|
||||
<aside id='actions' className='no-scrollbar'>
|
||||
<div className="sticky-side-element">
|
||||
<PostActions post={post} />
|
||||
</div>
|
||||
</aside>
|
||||
<div className={`grid w-full gap-32 ${styles.grid}`}>
|
||||
<aside id='actions' className='no-scrollbar'>
|
||||
<div className="sticky-side-element">
|
||||
<PostActions post={post} />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<PageContent post={post} />
|
||||
<aside id='author' className='no-scrollbar min-w-0'>
|
||||
<div className="flex flex-col gap-24 overflow-y-auto sticky-side-element">
|
||||
<AuthorCard author={post.author} />
|
||||
<div className="hidden md:block"><TrendingCard /></div>
|
||||
<PageContent post={post} />
|
||||
<aside id='author' className='no-scrollbar min-w-0'>
|
||||
<div className="flex flex-col gap-24 overflow-y-auto sticky-side-element">
|
||||
<AuthorCard author={post.author} />
|
||||
<div className="hidden md:block"><TrendingCard /></div>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="comments">
|
||||
<Suspense fallback={
|
||||
<div className="flex justify-center py-32"><RotatingLines strokeColor='#ddd' width="64" /></div>
|
||||
}>
|
||||
<CommentsSection id={post.id} type={type as Post_Type} />
|
||||
</Suspense>
|
||||
<div className="md:hidden mt-24"><TrendingCard /></div>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="comments">
|
||||
<Suspense fallback={
|
||||
<div className="flex justify-center py-32"><RotatingLines strokeColor='#ddd' width="64" /></div>
|
||||
}>
|
||||
<CommentsSection id={post.id} type={type as Post_Type} />
|
||||
</Suspense>
|
||||
<div className="md:hidden mt-24"><TrendingCard /></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -45,55 +45,57 @@ export default function EditProfilePage() {
|
||||
<title>Settings</title>
|
||||
<meta property="og:title" content='Settings' />
|
||||
</Helmet>
|
||||
<div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
|
||||
<aside>
|
||||
{isMediumScreen ?
|
||||
<Card className="sticky-side-element">
|
||||
<p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
|
||||
<ul className=' flex flex-col gap-8'>
|
||||
{links.map((link, idx) =>
|
||||
<li key={idx}>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
|
||||
<div className="page-container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-24">
|
||||
<aside>
|
||||
{isMediumScreen ?
|
||||
<Card className="sticky-side-element">
|
||||
<p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
|
||||
<ul className=' flex flex-col gap-8'>
|
||||
{links.map((link, idx) =>
|
||||
<li key={idx}>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
|
||||
active:scale-95 transition-transform
|
||||
${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
|
||||
`}
|
||||
>
|
||||
{link.text}
|
||||
</NavLink>
|
||||
</li>)}
|
||||
</ul>
|
||||
</Card>
|
||||
:
|
||||
<div className="border-b-2 border-gray-200">
|
||||
<Slider>
|
||||
{links.map((link, idx) =>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
key={idx}
|
||||
className={`flex items-start cursor-pointer font-bold py-12
|
||||
active:scale-95 transition-transform`}
|
||||
style={({ isActive }) => ({
|
||||
boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
|
||||
})}
|
||||
>
|
||||
{link.text}
|
||||
</NavLink>
|
||||
</li>)}
|
||||
</ul>
|
||||
</Card>
|
||||
:
|
||||
<div className="border-b-2 border-gray-200">
|
||||
<Slider>
|
||||
{links.map((link, idx) =>
|
||||
<NavLink
|
||||
to={link.path}
|
||||
key={idx}
|
||||
className={`flex items-start cursor-pointer font-bold py-12
|
||||
active:scale-95 transition-transform`}
|
||||
style={({ isActive }) => ({
|
||||
boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
|
||||
})}
|
||||
>
|
||||
{link.text}
|
||||
</NavLink>
|
||||
)}
|
||||
</Slider>
|
||||
</div>
|
||||
}
|
||||
</aside>
|
||||
<main className="md:col-span-3">
|
||||
<Routes>
|
||||
<Route index element={<Navigate to='basic-info' replace />} />
|
||||
<Route path='basic-info' element={<BasicProfileInfoTab />} />
|
||||
<Route path='roles-skills' element={<RolesSkillsTab />} />
|
||||
<Route path='preferences' element={<PreferencesTab />
|
||||
} />
|
||||
</Routes>
|
||||
</main>
|
||||
)}
|
||||
</Slider>
|
||||
</div>
|
||||
}
|
||||
</aside>
|
||||
<main className="md:col-span-3">
|
||||
<Routes>
|
||||
<Route index element={<Navigate to='basic-info' replace />} />
|
||||
<Route path='basic-info' element={<BasicProfileInfoTab />} />
|
||||
<Route path='roles-skills' element={<RolesSkillsTab />} />
|
||||
<Route path='preferences' element={<PreferencesTab />
|
||||
} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -48,9 +48,10 @@ export default function ProfilePage() {
|
||||
}
|
||||
<meta property="og:image" content={profileQuery.data.profile.avatar} />
|
||||
</Helmet>
|
||||
<div className={`page-container ${styles.grid}`}
|
||||
<div className={`page-container`}
|
||||
>
|
||||
{isMediumScreen ?
|
||||
<div className={`${styles.grid}`}
|
||||
>{isMediumScreen ?
|
||||
<>
|
||||
<aside>
|
||||
|
||||
@@ -76,7 +77,7 @@ export default function ProfilePage() {
|
||||
<StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
}</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -11,10 +11,8 @@ export default function ExplorePage() {
|
||||
<title>{`Explore Lightning Products`}</title>
|
||||
<meta property="og:title" content={`Explore Lightning Products`} />
|
||||
</Helmet>
|
||||
<div className="page-container pt-16">
|
||||
|
||||
<div className="page-container">
|
||||
<Header />
|
||||
|
||||
<div className="my-32">
|
||||
<Categories />
|
||||
</div>
|
||||
|
||||
@@ -26,21 +26,27 @@ body {
|
||||
@include gt-md {
|
||||
--padding: 32px;
|
||||
}
|
||||
width: calc(min(100% - 2 * var(--padding), var(--maxPageWidth, 1440px)));
|
||||
margin: 0 auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: minmax(var(--padding), 1fr) minmax(auto, 1440px) minmax(
|
||||
var(--padding),
|
||||
1fr
|
||||
);
|
||||
|
||||
> * {
|
||||
grid-column: 2/3;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .full-width {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
// @media screen and (min-width: 780px) {
|
||||
// .page-container {
|
||||
// width: calc(min(100% - 64px, 1440px));
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user