rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update mobile design (#1526)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-12 21:48:47 +05:30
committed by GitHub
parent 9fa093280d
commit 39d0ee9181
20 changed files with 314 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
View File

@@ -68,7 +68,7 @@ const ContentList: FunctionComponent<Props> = ({
return (
<div
className={classNames(
'infinite-scroll max-h-[75vh] overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
'md:max-h-full md:overflow-y-hidden md:hover:overflow-y-auto',
'md:hover:[overflow-y:_overlay]',
)}

4
packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
View File

@@ -185,13 +185,13 @@ const ContentListView: FunctionComponent<Props> = ({
<div
id="items-column"
className={classNames(
'sn-component section app-column flex flex-col border-b border-solid border-border ',
'sn-component section app-column flex h-screen flex-col md:h-full',
'xl:w-87.5 xsm-only:!w-full sm-only:!w-full pointer-coarse:md-only:!w-52 pointer-coarse:lg-only:!w-52',
)}
aria-label={'Notes & Files'}
ref={itemsViewPanelRef}
>
<ResponsivePaneContent paneId={AppPaneId.Items} contentClassName="min-h-[85vh]">
<ResponsivePaneContent paneId={AppPaneId.Items} className="min-h-[85vh]">
<div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
<div id="items-title-bar-container">
<input

4
packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
View File

@@ -4,6 +4,7 @@ import Icon from '../../Icon/Icon'
import { classNames } from '@/Utils/ConcatenateClassNames'
import Popover from '@/Components/Popover/Popover'
import DisplayOptionsMenu from './DisplayOptionsMenu'
import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'
type Props = {
application: {
@@ -35,7 +36,8 @@ const ContentListHeader = ({
}, [])
return (
<div className="section-title-bar-header gap-1">
<div className="section-title-bar-header items-start gap-1">
<NavigationMenuButton />
<div className="flex flex-grow flex-col">
<div className="text-lg font-semibold text-text">{panelTitle}</div>
{optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}