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

Jump to bottom

mobile categories + routes #456

Merged
merged 3 commits into from
Feb 29, 2024
Merged

mobile categories + routes #456

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
88a3e8e
mobile categories + routes
buddy-web3 Feb 28, 2024
b26d0bb
lint
buddy-web3 Feb 28, 2024
fdd4f84
requested changes
buddy-web3 Feb 29, 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
3 changes: 3 additions & 0 deletions app/components/Article/article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,7 @@ h1.teal {
article .footer-comtainer > div:nth-child(-n + 2) {
flex: 1 1;
}
article {
margin: 0;
}
}
8 changes: 3 additions & 5 deletions app/components/CategoriesNav/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
import {SearchInput} from '../SearchInput/Input'
import {Tag as TagType} from '~/server-utils/stampy'
import {tagUrl} from '~/routesMapper'
import styles from './menu.module.css'
import './menu.css'

interface CategoriesNavProps {
/**
Expand All @@ -19,7 +19,7 @@ interface CategoriesNavProps {
export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => {
const [search, onSearch] = useState('')
return (
<div className={styles.categoriesGroup + ' bordered col-4-5'}>
<div className={'categoriesGroup bordered col-4-5'}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

is there a specific reason for this?

Copy link
Member Author

@buddy-web3 buddy-web3 Feb 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

yeah, cannot use @media .Class1.Class2 with modules. only @media .Class1

<h4>Categories</h4>
<div>
<SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
Expand All @@ -30,9 +30,7 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
<Link
key={tagId}
to={tagUrl({tagId, name})}
className={[styles.categoryTitle, activeCategoryId == tagId ? 'selected' : ''].join(
' '
)}
className={['categoryTitle', activeCategoryId == tagId ? 'selected' : ''].join(' ')}
>
{name} ({questions.length})
</Link>
Expand Down
25 changes: 25 additions & 0 deletions app/components/CategoriesNav/menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.categoriesGroup {
padding: var(--spacing-12);
}
.categoriesGroup > * {
padding: var(--spacing-16);
}
.categoryTitle {
padding: var(--spacing-24);
cursor: pointer;
display: inline-block;
width: 100%;
}
@media (max-width: 640px) {
.categoriesGroup {
width: 100%;
height: 100%;
}
.categoriesGroup.bordered {
Copy link
Collaborator

Choose a reason for hiding this comment

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

is there ever a categoriesGroup without the bordered class?

border: 0;
box-shadow: none;
}
.categoryTitle.selected {
background: inherit;
}
}
12 changes: 0 additions & 12 deletions app/components/CategoriesNav/menu.module.css
View file
Open in desktop

This file was deleted.

25 changes: 25 additions & 0 deletions app/hooks/isMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {useState, useEffect} from 'react'

export default function useIsMobile() {
const mobileWidth = 640
const [windowWidth, setWindowWidth] = useState<number>(0)

const isWindow = typeof window !== 'undefined'

const getWidth = () => (isWindow ? window.innerWidth : windowWidth)

const resize = () => setWindowWidth(getWidth())

useEffect(() => {
if (isWindow) {
setWindowWidth(getWidth())

window.addEventListener('resize', resize)

return () => window.removeEventListener('resize', resize)
}
//eslint-disable-next-line
}, [isWindow])

return windowWidth <= mobileWidth
}
17 changes: 10 additions & 7 deletions app/routes/tags.$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ListTable from '~/components/Table'
import {loader} from '~/routes/tags.all'
import {CategoriesNav} from '~/components/CategoriesNav/Menu'
import type {Tag as TagType} from '~/server-utils/stampy'

import useIsMobile from '~/hooks/isMobile'
export {loader}

export const sortFuncs = {
Expand All @@ -15,6 +15,7 @@ export const sortFuncs = {
}

export default function Tags() {
const mobile = useIsMobile()
const {data} = useLoaderData<ReturnType<typeof loader>>()
const {currentTag, tags} = data
const [selectedTag, setSelectedTag] = useState<TagType | null>(null)
Expand All @@ -29,16 +30,18 @@ export default function Tags() {
if (selectedTag === null) {
return null
}
const isTagsPage = window.location.pathname.split('/').slice(-2)[0] === 'tags'
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't like this. It would be much better to have a button of some kind that shows a modal with all the tags, rather than having to mess about with urls. It sort of makes sense but would be annoying to have to go through an extra menu each time you wanted to choose a different category.
@melissasamworth are you sure you want it to work this way?

Copy link
Collaborator

Choose a reason for hiding this comment

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

you'll have to change the loader, which is in tags.all.tsx. Currently it chooses the first tag if none is specified - change it to:

  • if not tag chosen, return currentTag as undefined
  • if tag chosen and found, return it as currentTag
  • if tag chosen and not found, raise a 404

Then you can only show the article if selectedTag !== undefined and won't have to check the url. There will be some extra css changes for the desktop version, but that will require a design so is out of scope here

return (
<Page>
<main>
<div className="article-container">
<CategoriesNav
categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
activeCategoryId={selectedTag.tagId}
/>

{selectedTag === null ? null : (
{mobile && !isTagsPage ? null : (
Copy link
Collaborator

Choose a reason for hiding this comment

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

you can also do a className={isTagsPage ? '' : 'desktop-only'} which will hide this component on mobile if it's not the navigation view

<CategoriesNav
categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
activeCategoryId={selectedTag.tagId}
/>
)}
{(mobile && isTagsPage) || selectedTag === null ? null : (
<article>
<h1 className="padding-bottom-40">{selectedTag.name}</h1>
<div className="padding-bottom-24">
Expand Down
Loading