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 {
flex: none !important;
width: 10px !important;
transition: width 0.25s;
}
@media screen and (min-width: 768px) {
#navigation {
flex: none !important;
width: 10px !important;
transition: width 0.25s;
}
#navigation:hover {
flex: initial;
width: 200px !important;
transition: width 0.25s;
}
#navigation:hover {
flex: initial;
width: 200px !important;
transition: width 0.25s;
}
#items-column {
flex: none !important;
width: 270px !important;
transition: width 0.25s;
}
#items-column {
flex: none !important;
width: 270px !important;
transition: width 0.25s;
}
#items-column:hover {
flex: initial;
width: 380px !important;
transition: width 0.25s;
#items-column:hover {
flex: initial;
width: 380px !important;
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 (
<>
<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}
>
<div className="flex items-center">

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

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