rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

40
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) {
flex: none !important; #navigation {
width: 10px !important; flex: none !important;
transition: width 0.25s; width: 10px !important;
} 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">

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

@@ -1,58 +1,60 @@
.focus-mode { @media screen and (min-width: 768px) {
.mac-desktop #editor-column { .focus-mode {
// To offset colored circles in Mac .mac-desktop #editor-column {
padding-top: 35px; // To offset colored circles in Mac
} padding-top: 35px;
}
.mac-desktop #editor-column:before { .mac-desktop #editor-column:before {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
height: 38px; height: 38px;
-webkit-app-region: drag; -webkit-app-region: drag;
} }
#editor-title-bar { #editor-title-bar {
display: none; display: none;
} }
#editor-menu-bar { #editor-menu-bar {
display: none; display: none;
} }
#editor-pane-component-stack { #editor-pane-component-stack {
display: none; display: none;
} }
#footer-bar { #footer-bar {
opacity: 0.08; opacity: 0.08;
transition: opacity 0.25s; transition: opacity 0.25s;
} }
#footer-bar:hover { #footer-bar:hover {
opacity: 1; opacity: 1;
} }
#navigation, #navigation,
#items-column { #items-column {
will-change: opacity; will-change: opacity;
animation: fade-out 1.25s forwards; animation: fade-out 1.25s forwards;
transition: width 1.25s; transition: width 1.25s;
transition-delay: 0s; transition-delay: 0s;
width: 0px !important; width: 0px !important;
flex: none !important; flex: none !important;
} }
#navigation:hover { #navigation:hover {
flex: initial; flex: initial;
width: 0px !important; width: 0px !important;
} }
#items-column:hover { #items-column:hover {
flex: initial; flex: initial;
width: 0px !important; width: 0px !important;
}
} }
} }