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

Responsive support for Top #27

Merged
merged 11 commits into from
Oct 9, 2024
Merged

Responsive support for Top #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fbc3f5a
Setup the staticDirs to storybook
kumanoayumi Oct 8, 2024
afc4937
Add default story for TopCards
kumanoayumi Oct 8, 2024
40a3036
Update grid layout order for TopCards
kumanoayumi Oct 8, 2024
30ba848
Add postId on TopCards.stories.tsx to make it easier to see posts order
kumanoayumi Oct 8, 2024
436f13a
Adjust grid layout for and tablet views
kumanoayumi Oct 8, 2024
4b9a6b3
Do not use @extend
kumanoayumi Oct 8, 2024
2c36173
Adjust grid layout for and mobile views
kumanoayumi Oct 8, 2024
1b08938
Fix type error of TopCards.stories.tsx
kumanoayumi Oct 9, 2024
42c9e9b
Add missing properties.
kumanoayumi Oct 9, 2024
e40fd3c
Remove DocumentContentType
kumanoayumi Oct 9, 2024
01870bf
Use contentlayer2
kumanoayumi Oct 9, 2024
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
1 change: 1 addition & 0 deletions frontend/apps/service-site/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const config: StorybookConfig = {
}
return config
},
staticDirs: ["../public"],
}

export default config
7 changes: 6 additions & 1 deletion frontend/apps/service-site/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Metadata } from 'next'
import type { Metadata, Viewport } from 'next'
import '@/styles/globals.css'
import { Footer, Header } from '@/components'
import type { Lang } from '@/features/i18n'
Expand All @@ -9,6 +9,11 @@ export const metadata: Metadata = {
description: 'Liam blog',
}

export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻


export default function RootLayout({
children,
params: { lang },
Expand Down
19 changes: 19 additions & 0 deletions frontend/apps/service-site/src/components/Footer/Footer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,32 @@
align-items: flex-end;
}

@media screen and (max-width: 1024px) {
.footer {
padding: var(--spacing-10, 40px);
}
}

@media screen and (max-width: 768px) {
.footer {
padding: var(--spacing-10, 40px) var(--spacing-4, 16px) var(--spacing-8, 32px);
}
}

.logoContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-4, 16px);
}

@media screen and (max-width: 768px) {
.logoContainer {
padding-bottom: var(--spacing-2, 8px);
}
}


.text {
color: var(--foreground);
font-family: var(--main-font);
Expand Down
19 changes: 18 additions & 1 deletion frontend/apps/service-site/src/components/Header/Header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,26 @@
height: var(--default-header-height);
padding: 0 var(--default-page-margin);
margin: 0 auto;
background-color: var(--background);
background-color: var(--global-background);
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}

@media screen and (max-width: 1024px) {
.header {
padding: 0 var(--spacing-10, 40px);
}
}

@media screen and (max-width: 768px) {
.header {
padding: 0 var(--spacing-4, 16px);
}
}

.h1 {
Expand Down
Loading