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

fix: focus mode & dynamic panels on small screens (#1246)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-11 19:21:03 +05:30
committed by GitHub
parent b025e394c1
commit 9d230d4b81
3 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/components/src/Packages/Themes/org.standardnotes.theme-dynamic/src/main.scss
View File

@@ -1,23 +1,25 @@
#navigation { @media screen and (min-width: 768px) {
#navigation {
flex: none !important; flex: none !important;
width: 10px !important; width: 10px !important;
transition: width 0.25s; transition: width 0.25s;
} }
#navigation:hover { #navigation:hover {
flex: initial; flex: initial;
width: 200px !important; width: 200px !important;
transition: width 0.25s; transition: width 0.25s;
} }
#items-column { #items-column {
flex: none !important; flex: none !important;
width: 270px !important; width: 270px !important;
transition: width 0.25s; transition: width 0.25s;
} }
#items-column:hover { #items-column:hover {
flex: initial; flex: initial;
width: 380px !important; width: 380px !important;
transition: width 0.25s; transition: width 0.25s;
}
} }

2
packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
View File

@@ -33,7 +33,7 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
return ( return (
<> <>
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={toggle} onClick={toggle}
> >
<div className="flex items-center"> <div className="flex items-center">

4
packages/web/src/stylesheets/_focused.scss
View File

@@ -1,4 +1,5 @@
.focus-mode { @media screen and (min-width: 768px) {
.focus-mode {
.mac-desktop #editor-column { .mac-desktop #editor-column {
// To offset colored circles in Mac // To offset colored circles in Mac
padding-top: 35px; padding-top: 35px;
@@ -54,6 +55,7 @@
flex: initial; flex: initial;
width: 0px !important; width: 0px !important;
} }
}
} }
.disable-focus-mode { .disable-focus-mode {