Skip to content

Commit e6f7ceb

Browse files
liamcmitchellliamcmitchell
authored
Page load improvements (#1995)
1 parent 69ba5d3 commit e6f7ceb

File tree

10 files changed

+145
-295
lines changed

10 files changed

+145
-295
lines changed

‎assets/css/layout.css‎

Lines changed: 24 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,17 @@ body {
2727
height: 100%;
2828
}
2929

30+
/* Sidebar is closed by default and opened with body.sidebar-opened. */
3031
.sidebar {
31-
display: flex;
32+
display: none;
3233
flex-direction: column;
3334
width: var(--sidebarWidth);
3435
min-width: var(--sidebarMinWidth);
36+
max-width: 50vw;
3537
height: 100%;
3638
position: fixed;
3739
top: 0;
38-
left: 0;
40+
left: calc(-1 * var(--sidebarWidth));
3941
z-index: 100;
4042
resize: horizontal;
4143
}
@@ -47,15 +49,12 @@ body {
4749
top: 0;
4850
left: 0;
4951
will-change: transform;
50-
}
51-
52-
.sidebar-toggle--animated.sidebar-button {
53-
transition: transform var(--sidebarTransitionDuration) ease-in-out;
52+
transform: translateX(0);
5453
}
5554

5655
.content {
57-
width: calc(100% - var(--sidebarWidth));
58-
left: var(--sidebarWidth);
56+
left: 0;
57+
width: 100%;
5958
height: 100%;
6059
position: absolute;
6160
}
@@ -71,63 +70,41 @@ body {
7170
outline: none;
7271
}
7372

74-
body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
75-
transform: translateX(calc(var(--sidebarWidth) - 100%));
73+
.sidebar-transition .sidebar,
74+
.sidebar-transition .sidebar-button,
75+
.sidebar-transition .content {
76+
transition: all var(--sidebarTransitionDuration) ease-in-out allow-discrete;
7677
}
7778

78-
body.sidebar-opening-start .sidebar {
79-
left: calc(-1 * var(--sidebarWidth));
79+
.sidebar-open .sidebar,
80+
.sidebar-transition .sidebar {
81+
display: flex;
8082
}
8183

82-
body.sidebar-opening-start .content {
83-
width: 100%;
84+
.sidebar-open .sidebar {
8485
left: 0;
8586
}
8687

87-
body.sidebar-opening .sidebar {
88-
left: 0;
89-
transition: left var(--sidebarTransitionDuration) ease-in-out;
88+
.sidebar-open .sidebar-button {
89+
transform: translateX(calc(var(--sidebarWidth) - 100%));
9090
}
9191

92-
body.sidebar-opening .content {
92+
.sidebar-open .content {
9393
width: calc(100% - var(--sidebarWidth));
9494
left: var(--sidebarWidth);
95-
transition: all var(--sidebarTransitionDuration) ease-in-out;
96-
}
97-
98-
body.sidebar-closing .sidebar-button {
99-
transform: translateX(0);
100-
}
101-
102-
body.sidebar-closing .sidebar {
103-
left: calc(-1 * var(--sidebarWidth));
104-
transition: left var(--sidebarTransitionDuration) ease-in-out;
105-
}
106-
107-
body.sidebar-closing .content {
108-
width: 100%;
109-
left: 0;
110-
transition: all var(--sidebarTransitionDuration) ease-in-out;
111-
}
112-
113-
body.sidebar-closed .sidebar {
114-
left: calc(-1 * var(--sidebarWidth));
115-
display: none;
116-
}
117-
118-
body.sidebar-closed .content {
119-
width: 100%;
120-
left: 0;
12195
}
12296

12397
@media screen and (max-width: 768px) {
124-
.content,
125-
body.sidebar-opening .content {
98+
.sidebar-open .content {
12699
left: 0;
127100
width: 100%;
128101
}
129102

130-
body.sidebar-closed .sidebar-button {
103+
.sidebar {
104+
max-width: 90vw;
105+
}
106+
107+
body:not(.sidebar-open) .sidebar-button {
131108
position: absolute;
132109
}
133110
}

‎assets/css/search-bar.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ body.search-focused .search-bar .search-close-button {
145145
position: sticky !important;
146146
}
147147

148-
body.search-focused.sidebar-closed .sidebar-button {
148+
body.search-focused .sidebar-button {
149149
position: fixed !important;
150150
}
151151
}
@@ -155,7 +155,7 @@ body.search-focused .search-bar .search-close-button {
155155
position: sticky !important;
156156
}
157157

158-
body.scroll-sticky.sidebar-closed .sidebar-button {
158+
body.scroll-sticky .sidebar-button {
159159
position: fixed !important;
160160
}
161161
}

‎assets/css/sidebar.css‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -400,17 +400,14 @@
400400
background-color: transparent;
401401
border: none;
402402
font-size: var(--sidebarFontSize);
403+
color: var(--sidebarAccentMain);
403404
}
404405

405406
.sidebar-button:hover {
406407
color: var(--sidebarHover);
407408
}
408409

409-
.sidebar-button {
410-
color: var(--sidebarAccentMain);
411-
}
412-
413-
.sidebar-closed .sidebar-button {
410+
body:not(.sidebar-open) .sidebar-button {
414411
color: var(--contrast);
415412
}
416413

‎assets/js/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
// Constants separated to allow importing into inline_html.js without
22
// bringing in other code.
33
export const SETTINGS_KEY = 'ex_doc:settings'
4+
export const DARK_MODE_CLASS = 'dark'
5+
export const THEME_SYSTEM = 'system'
6+
export const THEME_DARK = 'dark'
7+
export const THEME_LIGHT = 'light'

‎assets/js/entry/html.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import '../handlebars/helpers'
2-
31
import { onDocumentReady } from '../helpers'
42
import { initialize as initTabsets } from '../tabsets'
53
import { initialize as initContent } from '../content'
@@ -31,7 +29,7 @@ onDocumentReady(() => {
3129
const isPreview = params.has('preview')
3230
const isHint = params.has('hint')
3331

34-
initTheme(params.get('theme'))
32+
initTheme()
3533
initStyling()
3634

3735
initTabsets()

‎assets/js/entry/inline_html.js‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,28 @@
33
// Only code that must be executed ASAP belongs here.
44
// Imports should only bring in inlinable constants.
55
// Check compiled output to make sure no unnecessary code is imported.
6-
import { SETTINGS_KEY } from '../constants'
6+
import { DARK_MODE_CLASS, SETTINGS_KEY, THEME_DARK, THEME_LIGHT } from '../constants'
7+
import { SIDEBAR_CLASS_OPEN, SIDEBAR_PREF_CLOSED, SIDEBAR_STATE_KEY, SIDEBAR_WIDTH_KEY, SMALL_SCREEN_BREAKPOINT } from '../sidebar/constants'
78

8-
// Immediately apply night mode preference to avoid a flash effect
9-
try {
10-
const {theme} = JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}')
9+
const params = new URLSearchParams(window.location.search)
1110

12-
if (theme === 'dark' ||
13-
((theme === 'system' || theme == null) &&
11+
// Immediately apply night mode preference to avoid a flash effect.
12+
// Should match logic in theme.js.
13+
const theme = params.get('theme') || JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}').theme
14+
if (theme === THEME_DARK ||
15+
(theme !== THEME_LIGHT &&
1416
window.matchMedia('(prefers-color-scheme: dark)').matches)
15-
) {
16-
document.body.classList.add('dark')
17-
}
18-
} catch (error) { }
17+
) {
18+
document.body.classList.add(DARK_MODE_CLASS)
19+
}
20+
21+
// Set sidebar state and width.
22+
// Should match logic in sidebar-drawer.js.
23+
const sidebarPref = sessionStorage.getItem(SIDEBAR_STATE_KEY)
24+
const open = sidebarPref !== SIDEBAR_PREF_CLOSED && !window.matchMedia(`screen and (max-width: ${SMALL_SCREEN_BREAKPOINT}px)`).matches
25+
document.body.classList.toggle(SIDEBAR_CLASS_OPEN, open)
26+
27+
const sidebarWidth = sessionStorage.getItem(SIDEBAR_WIDTH_KEY)
28+
if (sidebarWidth) {
29+
document.body.style.setProperty('--sidebarWidth', `${sidebarWidth}px`)
30+
}

‎assets/js/sidebar/constants.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const SIDEBAR_STATE_KEY = 'sidebar_state'
2+
export const SIDEBAR_PREF_CLOSED = 'closed'
3+
export const SIDEBAR_PREF_OPEN = 'open'
4+
export const SIDEBAR_WIDTH_KEY = 'sidebar_width'
5+
export const SMALL_SCREEN_BREAKPOINT = 768
6+
export const SIDEBAR_CLASS_OPEN = 'sidebar-open'
7+
export const SIDEBAR_CLASS_TRANSITION = 'sidebar-transition'

0 commit comments

Comments
 (0)