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

Prototype: Mobile Channel Nav - page switcher #5019

Open
wants to merge 14 commits into
base: prototype/new-top-nav
Choose a base branch
from
Open

Prototype: Mobile Channel Nav - page switcher #5019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5c34e8c
feat(prototype): add ChannelCarousel
Kechicode Dec 31, 2024
e2d2fc9
Merge branch 'prototype/new-top-nav' into prototype/channel-page-swit…
Kechicode Jan 2, 2025
6aef1cd
fix(TopNavBar): revise border
Kechicode Jan 3, 2025
6bfe4f9
feat(Channel): revise page carousel
Kechicode Jan 3, 2025
417e024
fix(Channel): update hotst
Kechicode Jan 3, 2025
128f298
Merge branch 'prototype/new-top-nav' into prototype/channel-page-swit…
Kechicode Jan 3, 2025
98a2191
feat(Channel): revise Carousel
Kechicode Jan 3, 2025
2d9eb6e
fix(Channel): revise Carousel
Kechicode Jan 3, 2025
ce7335e
fix(Channel): revise page carousel
Kechicode Jan 3, 2025
f05b0c0
fix(Channel): remove auto play
Kechicode Jan 3, 2025
015c0cd
feat(Channel): Enhance Channel Carousel with Dynamic Column Count and…
Kechicode Jan 3, 2025
8c9868e
feat(Channel): Refactor ChannelCarousel to use useNativeEventListener…
Kechicode Jan 3, 2025
3f200fd
feat(Channel): update
Kechicode Jan 3, 2025
ba9458a
feat(Layout): hide sidenav and navbar
Kechicode Jan 5, 2025
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
6 changes: 3 additions & 3 deletions src/components/Layout/TopNavBar/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.container {
@mixin border-bottom-grey-light;

position: sticky;
top: 0;
z-index: calc(var(--z-index-global-header) + 1);
Expand All @@ -9,10 +7,12 @@
justify-content: space-between;
padding: var(--sp20) var(--sp16);
background-color: var(--color-white);
border-bottom-color: var(--color-grey-hover);

@media (--sm-up) {
@mixin border-bottom-grey-light;

padding: var(--sp20) var(--sp32);
border-bottom-color: var(--color-grey-hover);
}

& .left {
Expand Down
26 changes: 13 additions & 13 deletions src/components/Layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { Head, Media, useRoute } from '~/components'
import AuthHeader from './AuthHeader'
import FixedMain from './FixedMain'
import Header from './Header'
import NavBar from './NavBar'
// import NavBar from './NavBar'
import Notice from './Notice'
// import SideFooter from './SideFooter'
import SideNav from './SideNav'
// import SideNav from './SideNav'
import Spacing from './Spacing'
import styles from './styles.module.css'
import { TopNavBar } from './TopNavBar'
Expand All @@ -21,34 +21,34 @@ export const Layout: React.FC<{ children?: React.ReactNode }> & {
AuthHeader: typeof AuthHeader
Notice: typeof Notice
} = ({ children }) => {
const { isInPath } = useRoute()
const isInDraftDetail = isInPath('ME_DRAFT_DETAIL')
const isInArticleDetail = isInPath('ARTICLE_DETAIL')
const isInArticleDetailHistory = isInPath('ARTICLE_DETAIL_HISTORY')
const isInMomentDetail = isInPath('MOMENT_DETAIL')
const isInMomentDetailEdit = isInPath('MOMENT_DETAIL_EDIT')
// const { isInPath } = useRoute()
// const isInDraftDetail = isInPath('ME_DRAFT_DETAIL')
// const isInArticleDetail = isInPath('ARTICLE_DETAIL')
// const isInArticleDetailHistory = isInPath('ARTICLE_DETAIL_HISTORY')
// const isInMomentDetail = isInPath('MOMENT_DETAIL')
// const isInMomentDetailEdit = isInPath('MOMENT_DETAIL_EDIT')

return (
<>
<Head />
<TopNavBar />
<div className={styles.container}>
<main className={styles.main}>
{!isInArticleDetailHistory && (
{/* {!isInArticleDetailHistory && (
<nav role="navigation" className={styles.sidenav}>
<section className={styles.sideNavContent}>
<Media greaterThan="sm">
<Media greaterThan="md">
<SideNav />
</Media>
</section>
</nav>
)}
)} */}

{children}
</main>
</div>

{!isInDraftDetail &&
{/* {!isInDraftDetail &&
!isInArticleDetail &&
!isInArticleDetailHistory &&
!isInMomentDetail &&
Expand All @@ -58,7 +58,7 @@ export const Layout: React.FC<{ children?: React.ReactNode }> & {
<NavBar />
</footer>
</Media>
)}
)} */}
</>
)
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@

@media (--sm-up) {
display: grid;
grid-template-areas: 'left content';
grid-template-columns: 3rem minmax(0, 100%);
grid-template-areas: 'content';
grid-template-columns: minmax(0, 100%);
grid-column-gap: 1.25rem;
}

Expand All @@ -41,7 +41,7 @@
}

.sidenav {
@media (--sm-up) {
@media (--md-up) {
grid-column: left;
}

Expand Down
29 changes: 29 additions & 0 deletions src/views/Home/Channel/Page/Carousel/Dot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import classnames from 'classnames'

import styles from './styles.module.css'

interface Props {
index: number
scroll: (index: number) => void
selected: boolean
}

const Dot = ({ index, scroll, selected }: Props) => {
const dotClasses = classnames({
[styles.dot]: true,
[styles.selected]: selected,
})

return (
<>
<div
className={dotClasses}
role="button"
aria-label={`${index + 1}`}
onClick={() => scroll(index)}
/>
</>
)
}

export default Dot
Loading
Loading