Fix some visual issues

block-editors · Jun 12, 2024 · 483bd83 · 483bd83
1 parent 382c40d
commit 483bd83
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/app.css b/src/app.css
@@ -34,6 +34,7 @@ body,
   width: 300px;
   bottom: 0;
   overflow-y: auto;
+  overscroll-behavior: none;
   word-break: break-all;
 }
 
@@ -42,13 +43,19 @@ body,
   border-bottom: 1px solid #e0e0e0;
   position: sticky;
   top: 0;
+  z-index: 1;
+}
+
+.dataviews-filters__container {
+  row-gap: 0 !important;
 }
 
 #sidebar-bottom {
   position: sticky;
   bottom: 0;
   padding: 7px;
   border-top: 1px solid #e0e0e0;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 7px);
 }
 
 .dataviews-wrapper {
@@ -99,6 +106,8 @@ ul.dataviews-view-list li {
 #content {
   height: 100%;
   background: white;
+  position: relative;
+  z-index: 1;
 }
 
 #select {
@@ -125,6 +134,15 @@ ul.dataviews-view-list li {
   display: block !important;
 }
 
+#editor.has-overlay::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 .block-editor-iframe__container,
 .block-editor-iframe__scale-container {
   height: 100%

diff --git a/src/list.jsx b/src/list.jsx
@@ -68,10 +68,11 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 		return null;
 	}
 
+	const isWide = width > 900;
 	const currentItem = items.find(({ id }) => id === currentId);
 	const animation = {
 		x: isSidebarOpen ? 300 : -1,
-		width: isSidebarOpen && width > 900 ? 'calc(100% - 300px)' : '100%',
+		width: isSidebarOpen && isWide ? 'calc(100% - 300px)' : '100%',
 	};
 
 	return (
@@ -83,6 +84,8 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 					setItem={setItem}
 					currentId={currentId}
 					setCurrentId={setCurrentId}
+					setIsSidebarOpen={setIsSidebarOpen}
+					isWide={isWide}
 				/>
 				<div id="sidebar-bottom">
 					<Button
@@ -133,6 +136,7 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 						/>
 					</ToolbarGroup>
 				</div>
+				{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
 				<div
 					id="editor"
 					style={{
@@ -143,6 +147,12 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 						display: 'flex',
 						flexDirection: 'column',
 					}}
+					onClick={() => {
+						if (!isWide) {
+							setIsSidebarOpen(false);
+						}
+					}}
+					className={isSidebarOpen && !isWide ? 'has-overlay' : ''}
 				>
 					{currentItem.blocks && (
 						<Editor

diff --git a/src/sidebar.jsx b/src/sidebar.jsx
@@ -12,7 +12,14 @@ function Title({ item: { path, blocks } }) {
 	return title ? decodeURIComponent(title) : <em>{__('Untitled')}</em>;
 }
 
-export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
+export default function SiderBar({
+	items,
+	setItem,
+	currentId,
+	setCurrentId,
+	setIsSidebarOpen,
+	isWide,
+}) {
 	const [view, setView] = useState({
 		type: 'list',
 		search: '',
@@ -104,6 +111,9 @@ export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
 				if (item) {
 					setCurrentId(item.id);
 					setItem(currentId, { blocks: null });
+					if (!isWide) {
+						setIsSidebarOpen(false);
+					}
 				}
 			}}
 			supportedLayouts={['list']}