Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix article layout responsiveness #6821

Merged
merged 1 commit into from
Jun 9, 2024
Merged

Fix article layout responsiveness #6821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/Common/CodeTabs/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
border-t
border-neutral-900
bg-neutral-950
px-4
px-2
pt-3
xs:px-2;
md:px-4;

.trigger {
@apply border-b
Expand Down
4 changes: 2 additions & 2 deletions components/Common/LinkTabs/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
border-b-neutral-200
font-open-sans
dark:border-b-neutral-800
xs:hidden;
max-xs:hidden;

.tabsTrigger {
@apply border-b-2
Expand Down Expand Up @@ -36,6 +36,6 @@
@apply my-6
hidden
w-full
xs:flex;
max-xs:flex;
}
}
16 changes: 8 additions & 8 deletions components/Common/ProgressionSidebar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
.wrapper {
@apply flex
w-full
flex-col
gap-8
overflow-auto
border-r
border-r-0
border-neutral-200
bg-white
px-4
py-6
dark:border-neutral-900
dark:bg-neutral-950
sm:border-r
md:max-w-xs
lg:px-6
xs:w-full
xs:border-r-0;
lg:px-6;

> section {
@apply flex
xs:hidden;
@apply hidden
sm:flex;
}

> span {
@apply hidden
@apply flex
w-full
xs:flex;
sm:hidden;
}
}
19 changes: 6 additions & 13 deletions components/Containers/MetaBar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
.wrapper {
@apply flex
w-full
flex-col
items-start
gap-8
overflow-y-auto
border-l
border-l-neutral-200
border-neutral-200
px-4
py-6
[overflow-wrap:anywhere]
dark:border-l-neutral-900
md:max-w-xs
lg:px-6
xs:mt-8
xs:w-full
xs:border-l-0
xs:border-t
xs:border-t-neutral-200
xs:dark:border-t-neutral-900;
dark:border-neutral-900
lg:px-6;

dl {
@apply w-full;
Expand Down Expand Up @@ -45,8 +38,8 @@
text-neutral-900
underline
dark:text-white
xs:inline-block
xs:py-1;
max-xs:inline-block
max-xs:py-1;

&:hover {
@apply text-neutral-800
Expand Down
15 changes: 7 additions & 8 deletions components/Containers/Sidebar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
.wrapper {
@apply flex
w-full
flex-col
items-start
gap-8
overflow-auto
overflow-x-hidden
border-r
border-r-neutral-200
bg-white
px-4
py-6
dark:border-r-neutral-900
dark:bg-neutral-950
sm:border-r
md:max-w-xs
lg:px-6
xs:w-full
xs:border-r-0;
lg:px-6;

> section {
@apply flex
xs:hidden;
@apply hidden
sm:flex;
}

> span {
@apply hidden
@apply flex
w-full
xs:flex;
sm:hidden;
}
}
6 changes: 3 additions & 3 deletions components/Downloads/ChangelogModal/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@
border
border-neutral-200
bg-white
p-8
p-6
focus:outline-none
dark:border-neutral-900
dark:bg-neutral-950
sm:my-20
sm:p-8
lg:max-w-[900px]
xl:p-12
xs:p-6;
xl:p-12;
}

.close {
Expand Down
2 changes: 1 addition & 1 deletion components/withBlogCategories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
tabs={categories}
activeTab={blogData.category}
>
<div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] xs:grid-cols-[1fr]">
<div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] max-xs:grid-cols-[1fr]">
{blogData.posts.map(post => (
<BlogPostCard
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion components/withBlogCrossLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const WithBlogCrossLinks: FC = async () => {
];

return (
<div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
<div className="mt-4 grid w-full grid-cols-2 gap-4 max-xs:grid-cols-1">
{(previousCrossLink && (
<CrossLink
type="previous"
Expand Down
2 changes: 1 addition & 1 deletion components/withSidebarCrossLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const WithSidebarCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
];

return (
<div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
<div className="mt-4 grid w-full grid-cols-1 gap-4 md:grid-cols-2">
{(previousCrossLink && (
<CrossLink
type="previous"
Expand Down
6 changes: 4 additions & 2 deletions layouts/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
<ArticleLayout>
<WithSidebar navKeys={['about', 'getInvolved']} />

<main>{children}</main>
<div>
<main>{children}</main>

<WithMetaBar />
<WithMetaBar />
</div>

<WithBreadcrumbs navKeys={['about', 'getInvolved']} />
</ArticleLayout>
Expand Down
4 changes: 3 additions & 1 deletion layouts/Default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
<ArticleLayout>
<WithSidebar navKeys={[]} />

<main>{children}</main>
<div>
<main>{children}</main>
</div>
</ArticleLayout>

<WithFooter />
Expand Down
12 changes: 7 additions & 5 deletions layouts/Learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,15 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
<ArticleLayout>
<WithProgressionSidebar navKey="learn" />

<main>
{children}
<div>
<main>
{children}

<WithSidebarCrossLinks navKey="learn" />
</main>
<WithSidebarCrossLinks navKey="learn" />
</main>

<WithMetaBar />
<WithMetaBar />
</div>

<WithBreadcrumbs navKeys={['learn']} />
</ArticleLayout>
Expand Down
92 changes: 57 additions & 35 deletions layouts/layouts.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,54 @@

.articleLayout {
@apply mx-auto
grid
block
w-full
max-w-8xl
grid-rows-[1fr]
overflow-hidden
grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
xs:m-0
xs:block
xs:overflow-auto;
overflow-auto
sm:grid
sm:grid-cols-[theme(spacing.52)_1fr]
sm:grid-rows-[1fr]
sm:overflow-hidden
sm:grid-areas-[sidebar_main,sidebar_footer]
md:grid-cols-[theme(spacing.64)_1fr]
lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];

> *:nth-child(1) {
@apply grid-in-[sidebar];
}

> *:nth-child(2) {
@apply overflow-y-auto
overflow-x-hidden
bg-gradient-subtle
p-12
grid-in-[main]
motion-safe:scroll-smooth
dark:bg-gradient-subtle-dark
xl:px-18
xs:bg-none
xs:p-4
xs:dark:bg-none;
}
@apply contents
overflow-y-scroll
sm:max-lg:block;

> *:nth-child(3) {
@apply grid-in-[metabar];
> *:first-child {
@apply overflow-y-auto
overflow-x-hidden
p-4
grid-in-[main]
motion-safe:scroll-smooth
sm:bg-gradient-subtle
sm:bg-fixed
sm:p-12
sm:dark:bg-gradient-subtle-dark
xl:px-18;
}

> *:last-child {
@apply mt-8
border-t
grid-in-[metabar]
sm:mt-0
lg:max-w-xs
lg:border-l
lg:border-t-0;
}
}

> *:nth-child(4) {
> *:nth-child(3) {
@apply sticky
bottom-0
flex
Expand Down Expand Up @@ -107,7 +120,7 @@
text-sm
text-neutral-800
dark:text-neutral-400
xs:text-xs;
max-xs:text-xs;

sup {
@apply cursor-help;
Expand Down Expand Up @@ -150,8 +163,8 @@
justify-center
bg-gradient-subtle
dark:bg-gradient-subtle-dark
xs:bg-none
xs:dark:bg-none;
max-xs:bg-none
max-xs:dark:bg-none;

main {
@apply max-w-5xl
Expand Down Expand Up @@ -190,10 +203,10 @@
w-full
max-w-8xl
grid-rows-[1fr]
max-xs:m-0
max-xs:block
sm:grid-cols-[1fr_theme(spacing.52)]
xl:grid-cols-[1fr_theme(spacing.80)]
xs:m-0
xs:block;
xl:grid-cols-[1fr_theme(spacing.80)];

> *:nth-child(1) {
@apply flex
Expand All @@ -206,12 +219,12 @@
py-14
dark:border-l-neutral-900
dark:bg-gradient-subtle-dark
max-xs:border-l-0
max-xs:bg-none
max-xs:pb-4
max-xs:dark:bg-none
md:px-14
lg:px-28
xs:border-l-0
xs:bg-none
xs:pb-4
xs:dark:bg-none;
lg:px-28;

main {
@apply max-w-[660px]
Expand All @@ -220,6 +233,15 @@
lg:break-normal;
}
}

> *:nth-child(2) {
@apply mt-8
border-t
xs:mt-0
xs:max-w-xs
xs:border-l
xs:border-t-0;
}
}

.postLayout {
Expand Down
Loading
Loading