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

feat(web): mobile-friendly (responsive) preferences UI (#1234)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-09 00:38:44 +05:30
committed by GitHub
parent 961d1fb8d4
commit 66f97f0612
17 changed files with 89 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
View File

@@ -2,8 +2,7 @@ import { FunctionComponent } from 'react'
export const Title: FunctionComponent = ({ children }) => (
<>
<h2 className="m-0 mb-1 text-base font-bold text-info">{children}</h2>
<div className="min-h-2" />
<h2 className="m-0 mb-1 text-lg font-bold text-info md:text-base">{children}</h2>
</>
)
@@ -16,7 +15,7 @@ export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ child
)
export const Text: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
<p className={`${className} text-xs`}>{children}</p>
<p className={`${className} text-sm md:text-xs`}>{children}</p>
)
const buttonClasses =

6
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
View File

@@ -1,9 +1,9 @@
import { FunctionComponent } from 'react'
const PreferencesPane: FunctionComponent = ({ children }) => (
<div className="flex min-h-0 flex-grow flex-row overflow-y-auto text-foreground">
<div className="flex flex-grow flex-col items-center py-6">
<div className="flex w-125 max-w-125 flex-col">
<div className="flex min-h-0 flex-grow flex-col overflow-y-auto text-foreground md:flex-row">
<div className="flex flex-grow flex-col items-center px-3 py-6 md:px-0">
<div className="flex flex-col md:w-125 md:max-w-125">
{children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
</div>
</div>