Skip to content

Commit ccfa4e3

Browse files
timolinstimolins
committed
Simplify styles & div nesting
1 parent ff67c78 commit ccfa4e3

File tree

3 files changed

+76
-138
lines changed

3 files changed

+76
-138
lines changed

‎src/block.tsx‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -133,56 +133,49 @@ export const Block: React.FC<Block> = props => {
133133
const coverPosition = (1 - (page_cover_position || 0.5)) * 100;
134134

135135
return (
136-
<div className="notion notion-app">
137-
<div className="notion-cursor-listener">
138-
<div className="notion-frame">
139-
{!hideHeader && (
140-
<PageHeader
141-
blockMap={blockMap}
142-
mapPageUrl={mapPageUrl}
143-
mapImageUrl={mapImageUrl}
144-
/>
145-
)}
146-
147-
<div className="notion-scroller">
148-
{page_cover && (
149-
<img
150-
src={mapImageUrl(page_cover)}
151-
alt={getTextContent(blockValue.properties.title)}
152-
className="notion-page-cover"
153-
style={{
154-
objectPosition: `center ${coverPosition}%`
155-
}}
156-
/>
157-
)}
158-
<main
159-
className={classNames(
160-
"notion-page",
161-
!page_cover && "notion-page-offset",
162-
page_full_width && "notion-full-width",
163-
page_small_text && "notion-small-text"
164-
)}
165-
>
166-
{page_icon && (
167-
<PageIcon
168-
className={
169-
page_cover ? "notion-page-icon-offset" : undefined
170-
}
171-
block={block}
172-
big
173-
mapImageUrl={mapImageUrl}
174-
/>
175-
)}
176-
177-
<div className="notion-title">
178-
{renderChildText(blockValue.properties.title)}
179-
</div>
180-
181-
{children}
182-
</main>
183-
</div>
136+
<div className="notion">
137+
{!hideHeader && (
138+
<PageHeader
139+
blockMap={blockMap}
140+
mapPageUrl={mapPageUrl}
141+
mapImageUrl={mapImageUrl}
142+
/>
143+
)}
144+
{page_cover && (
145+
<img
146+
src={mapImageUrl(page_cover)}
147+
alt={getTextContent(blockValue.properties.title)}
148+
className="notion-page-cover"
149+
style={{
150+
objectPosition: `center ${coverPosition}%`
151+
}}
152+
/>
153+
)}
154+
<main
155+
className={classNames(
156+
"notion-page",
157+
!page_cover && "notion-page-offset",
158+
page_full_width && "notion-full-width",
159+
page_small_text && "notion-small-text"
160+
)}
161+
>
162+
{page_icon && (
163+
<PageIcon
164+
className={
165+
page_cover ? "notion-page-icon-offset" : undefined
166+
}
167+
block={block}
168+
big
169+
mapImageUrl={mapImageUrl}
170+
/>
171+
)}
172+
173+
<div className="notion-title">
174+
{renderChildText(blockValue.properties.title)}
184175
</div>
185-
</div>
176+
177+
{children}
178+
</main>
186179
</div>
187180
);
188181
} else {

‎src/components/page-header.tsx‎

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -58,37 +58,35 @@ const PageHeader: React.FC<PageHeaderProps> = ({
5858

5959
return (
6060
<header className="notion-page-header">
61-
<div className="notion-nav-header">
62-
<div className="notion-nav-breadcrumbs">
63-
{breadcrumbs.map((breadcrumb, index) => (
64-
<React.Fragment key={breadcrumb.pageId}>
65-
<a
66-
className={`notion-nav-breadcrumb ${
67-
breadcrumb.active ? "notion-nav-breadcrumb-active" : ""
68-
}`}
69-
href={
70-
breadcrumb.active ? undefined : mapPageUrl(breadcrumb.pageId)
71-
}
72-
>
73-
{breadcrumb.icon && (
74-
<PageIcon
75-
className="notion-nav-icon"
76-
block={breadcrumb.block}
77-
mapImageUrl={mapImageUrl}
78-
/>
79-
)}
80-
81-
{breadcrumb.title && (
82-
<span className="notion-nav-title">{breadcrumb.title}</span>
83-
)}
84-
</a>
85-
86-
{index < breadcrumbs.length - 1 && (
87-
<span className="notion-nav-spacer">/</span>
61+
<div className="notion-nav-breadcrumbs">
62+
{breadcrumbs.map((breadcrumb, index) => (
63+
<React.Fragment key={breadcrumb.pageId}>
64+
<a
65+
className={`notion-nav-breadcrumb ${
66+
breadcrumb.active ? "notion-nav-breadcrumb-active" : ""
67+
}`}
68+
href={
69+
breadcrumb.active ? undefined : mapPageUrl(breadcrumb.pageId)
70+
}
71+
>
72+
{breadcrumb.icon && (
73+
<PageIcon
74+
className="notion-nav-icon"
75+
block={breadcrumb.block}
76+
mapImageUrl={mapImageUrl}
77+
/>
8878
)}
89-
</React.Fragment>
90-
))}
91-
</div>
79+
80+
{breadcrumb.title && (
81+
<span className="notion-nav-title">{breadcrumb.title}</span>
82+
)}
83+
</a>
84+
85+
{index < breadcrumbs.length - 1 && (
86+
<span className="notion-nav-spacer">/</span>
87+
)}
88+
</React.Fragment>
89+
))}
9290
</div>
9391
</header>
9492
);

‎src/styles.css‎

Lines changed: 6 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
88
}
99

10-
.notion > * {
10+
.notion > *,
11+
.notion-page > * {
1112
padding: 3px 0px;
1213
}
1314

@@ -16,54 +17,6 @@
1617
margin-block-end: 0px;
1718
}
1819

19-
.notion-app {
20-
height: 100vh;
21-
overflow: hidden;
22-
position: relative;
23-
background: #fff;
24-
}
25-
26-
.notion-cursor-listener {
27-
width: 100%;
28-
height: 100%;
29-
position: relative;
30-
display: flex;
31-
flex: 1 1 0%;
32-
background: #fff;
33-
}
34-
35-
.medium-zoom-overlay {
36-
z-index: 100;
37-
}
38-
39-
.medium-zoom-image {
40-
border-radius: 0;
41-
z-index: 101;
42-
}
43-
44-
.notion-frame {
45-
flex-grow: 1;
46-
flex-shrink: 1;
47-
display: flex;
48-
flex-direction: column;
49-
z-index: 1;
50-
width: 100%;
51-
height: 100%;
52-
max-height: 100%;
53-
}
54-
55-
.notion-scroller {
56-
display: flex;
57-
flex-direction: column;
58-
z-index: 1;
59-
flex-grow: 1;
60-
position: relative;
61-
align-items: center;
62-
overflow: auto;
63-
margin-right: 0;
64-
margin-bottom: 0;
65-
}
66-
6720
.notion-red {
6821
color: rgb(224, 62, 62);
6922
}
@@ -254,6 +207,7 @@ img.notion-page-icon-offset {
254207
margin: 6px 0px;
255208
padding: 0;
256209
border-top-width: 1px;
210+
border-bottom-width: 0;
257211
border-color: rgba(55, 53, 47, 0.09);
258212
}
259213
.notion-link {
@@ -637,23 +591,16 @@ img.notion-page-icon {
637591
}
638592

639593
.notion-page-header {
640-
position: relative;
594+
position: sticky;
595+
top: 0;
641596
width: 100%;
642597
max-width: 100vw;
643598
height: 45px;
644599
min-height: 45px;
645-
z-index: 9;
646-
}
647-
648-
.notion-nav-header {
649-
position: absolute;
650-
top: 0;
651-
left: 0;
652-
right: 0;
653-
height: 100%;
654600
display: flex;
655601
background: #fff;
656602
flex-direction: row;
603+
box-sizing: border-box;
657604
justify-content: space-between;
658605
align-items: center;
659606
padding: 0 12px;

0 commit comments

Comments
 (0)