Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: reduce cumulative layout shifts #15926

Closed
wants to merge 8 commits into from
Closed

chore: reduce cumulative layout shifts #15926

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ce16362
chore: reduce cumulative layout shit
amareshsm May 26, 2022
b8d0a4d
docs: revert version switcher changes
amareshsm May 27, 2022
08e7697
fix: use noscript to reduce cls
amareshsm May 27, 2022
834b95e
chore: revamped cls
amareshsm May 27, 2022
5442a0c
fix: use no-js class & remove duplicate code
amareshsm May 28, 2022
de80021
fix: removed unused code
amareshsm May 28, 2022
6ca670a
fix: use enhanced instead of noscript
amareshsm May 28, 2022
93ecd0e
fix: amend styles
amareshsm May 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/_includes/components/docs-index.html
View file
Open in desktop
Expand Up @@ -10,8 +10,8 @@
</li>
{%- endmacro %}

<nav class="docs-index" id="docs-index">
<button class="docs-index-toggle" aria-label="Index" id="js-docs-index-toggle" hidden>
mdjermanovic marked this conversation as resolved.
Show resolved Hide resolved
<nav class="docs-index" id="docs-index" >
<button class="docs-index-toggle" aria-label="Index" id="js-docs-index-toggle">
Index
<svg width="20" height="20" viewBox="20 20 60 60">
<path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
Expand Down
3 changes: 2 additions & 1 deletion docs/src/_includes/components/nav-version-switcher.html
View file
Open in desktop
@@ -1,7 +1,8 @@
<div class="version-switcher">

<a href="/versions/" class="switcher-fallback">Versions</a>

<div hidden role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
<div role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
amareshsm marked this conversation as resolved.
Show resolved Hide resolved
<span id="nav-version-switcher-label" hidden>Language Switcher</span>
<div class="infobox visually-hidden" id="nav-version-infobox">
Selecting a language will take you to the ESLint Web site in that language.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/_includes/components/navigation.html
View file
Open in desktop
@@ -1,7 +1,7 @@
<nav class="docs-site-nav" aria-label="Main">
<div class="flexer">
<a href="https://eslint.org/donate" class="c-btn c-btn--primary donate-link">Donate</a>
<button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle" hidden>
<button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle">
<svg width="20" height="20" viewBox="20 20 60 60">
<path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
<path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
Expand Down
12 changes: 7 additions & 5 deletions docs/src/_includes/components/version-switcher.html
View file
Open in desktop
@@ -1,7 +1,9 @@
<div class="version-switcher">

<a href="/versions/" class="switcher-fallback">Versions</a>

<div hidden role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
<div role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label"
id="version-switcher">
<span id="version-switcher-label" hidden>Version Switcher</span>
<div class="infobox visually-hidden" id="version-infobox">
Selecting a version will take you to the ESLint Web site for that version.
Expand All @@ -10,16 +12,16 @@
<label class="switcher__label label--block" for="version-select">
Version
</label>
<select name="version selector" id="version-select" aria-describedby="version-infobox" class="c-custom-select switcher__select auto-switcher">
<select name="version selector" id="version-select" aria-describedby="version-infobox"
class="c-custom-select switcher__select auto-switcher">
<option value="{{ eslintVersion }}" selected>
v{{ eslintVersion }}
</option>
{% for version in versions.items %}
<option value="{{ version.number }}"
data-url="{{ version.url }}">
<option value="{{ version.number }}" data-url="{{ version.url }}">
v{{ version.number }}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
18 changes: 16 additions & 2 deletions docs/src/_includes/layouts/base.njk
View file
Open in desktop
Expand Up @@ -34,13 +34,27 @@
<meta name="twitter:image" content="{{ cover }}">
<meta name="twitter:creator" content="@geteslint">


<script type="module">
<script>
// This is a capable browser, let's improve the UI further!
document.documentElement.classList.add("enhanced");
document.documentElement.classList.remove('no-js');
</script>

<style>
.enhanced .switcher-fallback {
display: none !important
}
.no-js #js-docs-index-toggle, .no-js #nav-toggle, .no-js #version-switcher, .no-js #nav-version-switcher {
display: none;
}
.no-js #js-docs-index-list {
display: block !important
}
.no-js #nav-panel {
display:grid !important;
mdjermanovic marked this conversation as resolved.
Show resolved Hide resolved
}
</style>

<link rel="preload" href="{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
Expand Down
209 changes: 135 additions & 74 deletions docs/src/assets/css/components/docs-navigation.css
View file
Open in desktop
Expand Up @@ -2,101 +2,162 @@
display: flex;
flex-direction: column;
flex: 1;
grid-column: 1 / -1;
grid-row: 1; }
grid-column: 1/-1;
grid-row: 1;
}
.docs-site-nav ul {
list-style: none;
font-size: var(--step-1);
margin-top: 1rem;
margin-block-start: 1rem;
margin-bottom: 2rem;
margin-block-end: 2rem;
}
@media all and (min-width: 1023px) {
.docs-site-nav ul {
list-style: none;
font-size: var(--step-1);
margin-top: 1rem;
margin-block-start: 1rem;
margin-bottom: 2rem;
margin-block-end: 2rem; }
@media all and (min-width: 1023px) {
.docs-site-nav ul {
font-size: var(--step-0);
margin-top: 0;
margin-block-start: 0;
margin-bottom: 0;
margin-block-end: 0;
align-items: center;
display: flex; } }
.docs-site-nav .flexer {
font-size: var(--step-0);
margin-top: 0;
margin-block-start: 0;
margin-bottom: 0;
margin-block-end: 0;
align-items: center;
display: flex;
justify-self: flex-end;
align-self: flex-end; }
.docs-site-nav a:not(.c-btn) {
text-decoration: none;
color: inherit;
transition: color .2s linear; }
.docs-site-nav a:not(.c-btn):hover {
color: var(--link-color); }
.docs-site-nav a:not(.c-btn)[aria-current="page"],
.docs-site-nav a:not(.c-btn)[aria-current="true"] {
color: var(--link-color);
text-decoration: none;
font-weight: 500; }
}
}
.docs-site-nav .flexer {
display: flex;
justify-self: flex-end;
align-self: flex-end;
}
.docs-site-nav a:not(.c-btn) {
text-decoration: none;
color: inherit;
transition: color 0.2s linear;
}
.docs-site-nav a:not(.c-btn):hover {
color: var(--link-color);
}
.docs-site-nav a:not(.c-btn)[aria-current=page],
.docs-site-nav a:not(.c-btn)[aria-current=true] {
color: var(--link-color);
text-decoration: none;
font-weight: 500;
}
.docs-site-nav a.switcher-fallback {
color: var(--link-color);
transition: color 0.1s linear;
text-decoration: underline;
}

@media all and (min-width: 1023px) {
.docs-nav-panel {
display: flex;
flex-direction: row;
justify-content: center; } }

.docs-nav-panel[data-open="false"] {
display: none; }

justify-content: center;
}
}
.docs-nav-panel[data-open=false] {
display: none;
}
@media all and (min-width: 1023px) {
.docs-nav-panel[data-open="true"] {
.docs-nav-panel[data-open=true] {
display: flex;
flex-direction: row;
justify-content: center; } }
justify-content: center;
}
}

@media all and (max-width: 1023px) {
#nav-panel {
display: none;
}
}

@media all and (max-width: 1023px) {
#nav-panel[data-open=true] {
display: block;
}
}

@media all and (max-width: 1023px) {
#js-docs-index-list {
display: none;
}
}

@media all and (max-width: 1023px) {
#js-docs-index-list[data-open=true] {
display: block;
}
}

@media all and (min-width: 1024px) {
#nav-toggle {
display: none;
}
}

@media all and (min-width: 1023px) {
.docs-nav-panel .mobile-only {
display: none; } }
display: none;
}
}

.docs-site-nav-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
margin-left: .5rem;
margin-left: 0.5rem;
margin-right: -10px;
margin-inline-start: .5rem;
margin-inline-end: -10px; }
.docs-site-nav-toggle svg {
width: 40px;
height: 40px;
color: var(--headings-color);
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round; }
.docs-site-nav-toggle #ham-top,
.docs-site-nav-toggle #ham-middle,
.docs-site-nav-toggle #ham-bottom {
transition: all .2s linear; }
.docs-site-nav-toggle #ham-top {
transform-origin: 30px 37px; }
.docs-site-nav-toggle #ham-bottom {
transform-origin: 30px 63px; }
.docs-site-nav-toggle[aria-expanded="true"] #ham-middle {
opacity: 0; }
.docs-site-nav-toggle[aria-expanded="true"] #ham-top {
transform: rotate(41deg); }
.docs-site-nav-toggle[aria-expanded="true"] #ham-bottom {
transform: rotate(-41deg); }
margin-inline-start: 0.5rem;
margin-inline-end: -10px;
}
.docs-site-nav-toggle svg {
width: 40px;
height: 40px;
color: var(--headings-color);
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
.docs-site-nav-toggle #ham-top,
.docs-site-nav-toggle #ham-middle,
.docs-site-nav-toggle #ham-bottom {
transition: all 0.2s linear;
}
.docs-site-nav-toggle #ham-top {
transform-origin: 30px 37px;
}
.docs-site-nav-toggle #ham-bottom {
transform-origin: 30px 63px;
}
.docs-site-nav-toggle[aria-expanded=true] #ham-middle {
opacity: 0;
}
.docs-site-nav-toggle[aria-expanded=true] #ham-top {
transform: rotate(41deg);
}
.docs-site-nav-toggle[aria-expanded=true] #ham-bottom {
transform: rotate(-41deg);
}

@media all and (min-width: 1023px) {
.docs-site-nav {
flex-direction: row;
grid-column: auto;
gap: 2rem; }
.docs-site-nav ul {
display: flex;
gap: 2rem;
font-size: var(--step-0); }
.docs-site-nav ul li {
margin-bottom: 0;
margin-block-end: 0; }
.docs-site-nav .flexer {
order: 1; } }
gap: 2rem;
}
.docs-site-nav ul {
display: flex;
gap: 2rem;
font-size: var(--step-0);
}
.docs-site-nav ul li {
margin-bottom: 0;
margin-block-end: 0;
}
.docs-site-nav .flexer {
order: 1;
}
}