Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
neSpecc
left a comment
neSpecc
left a comment
There was a problem hiding this comment.
Nice job! My main comments are related to CodeX UI design system. It should stay well-organized. Lets find a way how to unhardcode some values. And maybe we should think about how generally the Design System should be responisble.
| color: var(--base--text); | ||
| } | ||
|
|
||
| @media (max-width: 768px) { |
There was a problem hiding this comment.
seems hardcoded. We need to find a centralized way for specifying breakpoit values. For example thought the @custom-media (required postcss-custom-media plugin)
| min-width: 0; | ||
| } | ||
|
|
||
| > :nth-child(n + 3) { |
There was a problem hiding this comment.
resolve element by class name instead
| width: 96px; | ||
| height: 64px; |
There was a problem hiding this comment.
hardcoded valued. All sizes should be stored in "dimensions.pcss" and have a universal names.
| @media (max-width: 768px) { | ||
| .cdx-search-field__input, | ||
| .ce-inline-tool-input { | ||
| font-size: 16px; |
There was a problem hiding this comment.
hardcoded values. Consider using typography styles from typography.pcss
| border-radius: var(--radius-field); | ||
|
|
||
| @media (max-width: 768px) { | ||
| font-size: 16px; |
| } | ||
|
|
||
| &__center { | ||
| flex-basis: 8rem; |
| /** | ||
| * On mobile the note hierarchy goes below the note instead of the sidebar, and only when the note has relatives | ||
| */ | ||
| const isMobile = useMediaQuery('(max-width: 768px)'); |
There was a problem hiding this comment.
we need to create a universal shared composable with this property. It can be used in other places
Thanks! Fixed all of them. I think the kit should own responsive behavior of its layout components, and apps only reuse its breakpoints. |
| --size-avatar: 30px; | ||
| --size-cover: 150px; | ||
| --size-cover-small: 96px; | ||
| --size-text-min: 120px; |
| .card-skeleton__cover { | ||
| width: 96px; | ||
| height: 64px; | ||
| width: var(--size-cover-small); |
There was a problem hiding this comment.
I think, we should override --size-cover for mobile viewport in dimensions.css instead
This branch was successfully deployed
2 participants
Adapted the web client for phones and tablets. Sidebars now stack below 768px and are hidden when empty below 1300px, the note grid is fluid, and inputs use 16px so iOS does not zoom on focus. Desktop is unchanged.
See all screenshots here: Screenshots.zip