Simplify styles & div nesting

splitbee · Sep 29, 2020 · ccfa4e3 · ccfa4e3
1 parent ff67c78
commit ccfa4e3
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 138 deletions.
diff --git a/src/block.tsx b/src/block.tsx
@@ -133,56 +133,49 @@ export const Block: React.FC<Block> = props => {
             const coverPosition = (1 - (page_cover_position || 0.5)) * 100;
 
             return (
-              <div className="notion notion-app">
-                <div className="notion-cursor-listener">
-                  <div className="notion-frame">
-                    {!hideHeader && (
-                      <PageHeader
-                        blockMap={blockMap}
-                        mapPageUrl={mapPageUrl}
-                        mapImageUrl={mapImageUrl}
-                      />
-                    )}
-
-                    <div className="notion-scroller">
-                      {page_cover && (
-                        <img
-                          src={mapImageUrl(page_cover)}
-                          alt={getTextContent(blockValue.properties.title)}
-                          className="notion-page-cover"
-                          style={{
-                            objectPosition: `center ${coverPosition}%`
-                          }}
-                        />
-                      )}
-                      <main
-                        className={classNames(
-                          "notion-page",
-                          !page_cover && "notion-page-offset",
-                          page_full_width && "notion-full-width",
-                          page_small_text && "notion-small-text"
-                        )}
-                      >
-                        {page_icon && (
-                          <PageIcon
-                            className={
-                              page_cover ? "notion-page-icon-offset" : undefined
-                            }
-                            block={block}
-                            big
-                            mapImageUrl={mapImageUrl}
-                          />
-                        )}
-
-                        <div className="notion-title">
-                          {renderChildText(blockValue.properties.title)}
-                        </div>
-
-                        {children}
-                      </main>
-                    </div>
+              <div className="notion">
+                {!hideHeader && (
+                  <PageHeader
+                    blockMap={blockMap}
+                    mapPageUrl={mapPageUrl}
+                    mapImageUrl={mapImageUrl}
+                  />
+                )}
+                {page_cover && (
+                  <img
+                    src={mapImageUrl(page_cover)}
+                    alt={getTextContent(blockValue.properties.title)}
+                    className="notion-page-cover"
+                    style={{
+                      objectPosition: `center ${coverPosition}%`
+                    }}
+                  />
+                )}
+                <main
+                  className={classNames(
+                    "notion-page",
+                    !page_cover && "notion-page-offset",
+                    page_full_width && "notion-full-width",
+                    page_small_text && "notion-small-text"
+                  )}
+                >
+                  {page_icon && (
+                    <PageIcon
+                      className={
+                        page_cover ? "notion-page-icon-offset" : undefined
+                      }
+                      block={block}
+                      big
+                      mapImageUrl={mapImageUrl}
+                    />
+                  )}
+
+                  <div className="notion-title">
+                    {renderChildText(blockValue.properties.title)}
                   </div>
-                </div>
+
+                  {children}
+                </main>
               </div>
             );
           } else {

diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
@@ -58,37 +58,35 @@ const PageHeader: React.FC<PageHeaderProps> = ({
 
   return (
     <header className="notion-page-header">
-      <div className="notion-nav-header">
-        <div className="notion-nav-breadcrumbs">
-          {breadcrumbs.map((breadcrumb, index) => (
-            <React.Fragment key={breadcrumb.pageId}>
-              <a
-                className={`notion-nav-breadcrumb ${
-                  breadcrumb.active ? "notion-nav-breadcrumb-active" : ""
-                }`}
-                href={
-                  breadcrumb.active ? undefined : mapPageUrl(breadcrumb.pageId)
-                }
-              >
-                {breadcrumb.icon && (
-                  <PageIcon
-                    className="notion-nav-icon"
-                    block={breadcrumb.block}
-                    mapImageUrl={mapImageUrl}
-                  />
-                )}
-
-                {breadcrumb.title && (
-                  <span className="notion-nav-title">{breadcrumb.title}</span>
-                )}
-              </a>
-
-              {index < breadcrumbs.length - 1 && (
-                <span className="notion-nav-spacer">/</span>
+      <div className="notion-nav-breadcrumbs">
+        {breadcrumbs.map((breadcrumb, index) => (
+          <React.Fragment key={breadcrumb.pageId}>
+            <a
+              className={`notion-nav-breadcrumb ${
+                breadcrumb.active ? "notion-nav-breadcrumb-active" : ""
+              }`}
+              href={
+                breadcrumb.active ? undefined : mapPageUrl(breadcrumb.pageId)
+              }
+            >
+              {breadcrumb.icon && (
+                <PageIcon
+                  className="notion-nav-icon"
+                  block={breadcrumb.block}
+                  mapImageUrl={mapImageUrl}
+                />
               )}
-            </React.Fragment>
-          ))}
-        </div>
+
+              {breadcrumb.title && (
+                <span className="notion-nav-title">{breadcrumb.title}</span>
+              )}
+            </a>
+
+            {index < breadcrumbs.length - 1 && (
+              <span className="notion-nav-spacer">/</span>
+            )}
+          </React.Fragment>
+        ))}
       </div>
     </header>
   );

diff --git a/src/styles.css b/src/styles.css
@@ -7,7 +7,8 @@
     "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-.notion > * {
+.notion > *,
+.notion-page > * {
   padding: 3px 0px;
 }
 
@@ -16,54 +17,6 @@
   margin-block-end: 0px;
 }
 
-.notion-app {
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-}
-
-.notion-cursor-listener {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex: 1 1 0%;
-  background: #fff;
-}
-
-.medium-zoom-overlay {
-  z-index: 100;
-}
-
-.medium-zoom-image {
-  border-radius: 0;
-  z-index: 101;
-}
-
-.notion-frame {
-  flex-grow: 1;
-  flex-shrink: 1;
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-}
-
-.notion-scroller {
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-  flex-grow: 1;
-  position: relative;
-  align-items: center;
-  overflow: auto;
-  margin-right: 0;
-  margin-bottom: 0;
-}
-
 .notion-red {
   color: rgb(224, 62, 62);
 }
@@ -254,6 +207,7 @@ img.notion-page-icon-offset {
   margin: 6px 0px;
   padding: 0;
   border-top-width: 1px;
+  border-bottom-width: 0;
   border-color: rgba(55, 53, 47, 0.09);
 }
 .notion-link {
@@ -637,23 +591,16 @@ img.notion-page-icon {
 }
 
 .notion-page-header {
-  position: relative;
+  position: sticky;
+  top: 0;
   width: 100%;
   max-width: 100vw;
   height: 45px;
   min-height: 45px;
-  z-index: 9;
-}
-
-.notion-nav-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
   display: flex;
   background: #fff;
   flex-direction: row;
+  box-sizing: border-box;
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;