mobile categories + routes #456
Conversation
app/routes/tags.$.tsx
Outdated
| @@ -29,16 +30,18 @@ export default function Tags() { | |||
| if (selectedTag === null) { | |||
| return null | |||
| } | |||
| const isTagsPage = window.location.pathname.split('/').slice(-2)[0] === 'tags' | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
app/routes/tags.$.tsx
Outdated
| /> | ||
|
|
||
| {selectedTag === null ? null : ( | ||
| {mobile && !isTagsPage ? null : ( |
There was a problem hiding this comment.
you can also do a className={isTagsPage ? '' : 'desktop-only'} which will hide this component on mobile if it's not the navigation view
| @@ -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'}> | |||
There was a problem hiding this comment.
is there a specific reason for this?
There was a problem hiding this comment.
yeah, cannot use @media .Class1.Class2 with modules. only @media .Class1
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| .categoriesGroup.bordered { |
There was a problem hiding this comment.
is there ever a categoriesGroup without the bordered class?
No description provided.