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

fix: footer and prefs dropdown cutoff by screen on some phones (#1491)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-07 17:36:49 +05:30
committed by GitHub
parent f21269fc69
commit 4617afe14e
5 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
View File

@@ -30,11 +30,11 @@ const AccountMenuButton = ({
onClick={toggleMenu} onClick={toggleMenu}
className={classNames( className={classNames(
isOpen ? 'bg-border' : '', isOpen ? 'bg-border' : '',
'flex h-full w-8 cursor-pointer items-center justify-center rounded-full', 'flex h-full w-12 cursor-pointer items-center justify-center rounded-full md:w-8',
)} )}
> >
<div className={hasError ? 'text-danger' : (user ? 'text-info' : 'text-neutral') + ' h-5 w-5'}> <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
<Icon type="account-circle" className="max-h-5 hover:text-info" /> <Icon type="account-circle" className="h-6 w-6 hover:text-info md:h-5 md:w-5" />
</div> </div>
</button> </button>
<Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2"> <Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">

2
packages/web/src/javascripts/Components/Footer/Footer.tsx
View File

@@ -341,7 +341,7 @@ class Footer extends PureComponent<Props, State> {
<div className="sn-component"> <div className="sn-component">
<footer <footer
id="footer-bar" id="footer-bar"
className="z-footer-bar flex h-6 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text" className="z-footer-bar flex h-12 w-full select-none items-center justify-between border-t border-border bg-contrast pl-3.5 pr-6 text-text md:h-8 md:px-3"
> >
<div className="left flex h-full"> <div className="left flex h-full">
<div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none"> <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">

5
packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
View File

@@ -1,6 +1,7 @@
import { WebApplication } from '@/Application/Application' import { WebApplication } from '@/Application/Application'
import { PreferencesController } from '@/Controllers/PreferencesController' import { PreferencesController } from '@/Controllers/PreferencesController'
import { QuickSettingsController } from '@/Controllers/QuickSettingsController' import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
import { classNames } from '@/Utils/ConcatenateClassNames'
import { useRef } from 'react' import { useRef } from 'react'
import Icon from '../Icon/Icon' import Icon from '../Icon/Icon'
import Popover from '../Popover/Popover' import Popover from '../Popover/Popover'
@@ -27,11 +28,11 @@ const QuickSettingsButton = ({
<> <>
<button <button
onClick={toggleMenu} onClick={toggleMenu}
className="flex h-full w-8 cursor-pointer items-center justify-center" className="flex h-full w-12 cursor-pointer items-center justify-center md:w-8"
ref={buttonRef} ref={buttonRef}
> >
<div className="h-5"> <div className="h-5">
<Icon type="tune" className={(isOpen ? 'text-info' : '') + ' rounded hover:text-info'} /> <Icon type="tune" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
</div> </div>
</button> </button>
<Popover <Popover

2
packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
View File

@@ -23,7 +23,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
) )
return ( return (
<div className="px-3 py-2 md:px-0"> <div className="px-5 pt-2 pb-4 md:px-0 md:py-0">
<div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex"> <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
{menuItems.map((pref) => ( {menuItems.map((pref) => (
<PreferencesMenuItem <PreferencesMenuItem

3
packages/web/src/stylesheets/_footer.scss
View File

@@ -1,8 +1,5 @@
#footer-bar { #footer-bar {
position: relative; position: relative;
width: 100%;
height: $footer-height;
max-height: $footer-height;
} }
#account-panel, #account-panel,