js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix login media query and leaking variables with Turbo (#867)

Browse Source 
* fix media queries to use wa-desktop-only

* fix errors in remix.js when changing pages

* prettier
This commit is contained in:
Konnor Rogers
2025-04-14 11:11:08 -04:00
committed by GitHub
parent 9d1c47449e
commit b75d3b615c
4 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/_includes/base.njk
View File

@@ -20,7 +20,7 @@
</head>
<body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
<wa-page view="desktop" disable-navigation-toggle="">
<wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
<header slot="header" class="wa-split">
{# Logo #}
<div id="docs-branding">
@@ -33,13 +33,13 @@
<span class="wa-desktop-only">{% include "logo.njk" %}</span>
<span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
</a>
<small id="version-number" class="only-desktop">{{ package.version }}</small>
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
<small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
<wa-badge variant="warning" appearance="filled" class="wa-desktop-only">Alpha</wa-badge>
</div>
<div id="docs-toolbar" class="wa-cluster wa-gap-xs">
{# Desktop selectors #}
<div class="only-desktop wa-cluster wa-gap-xs">
<div class="wa-desktop-only wa-cluster wa-gap-xs">
{% include "preset-theme-selector.njk" %}
{% include "color-scheme-selector.njk" %}
</div>
@@ -48,7 +48,7 @@
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
Search
<kbd slot="suffix" class="only-desktop">/</kbd>
<kbd slot="suffix" class="wa-desktop-only">/</kbd>
</wa-button>
{# Login #}

4
docs/_layouts/theme.njk
View File

@@ -25,8 +25,8 @@ wa_data.palettes = {
{% endfor %}
};
</script>
<link href="{{ page.url }}../remix.css" rel="stylesheet">
<script src="{{ page.url }}../remix.js" type="module"></script>
<link href="/docs/themes/remix.css" rel="stylesheet">
<script src="/docs/themes/remix.js" type="module"></script>
{% endblock %}
{% block header %}

7
docs/assets/styles/docs.css
View File

@@ -608,13 +608,6 @@ table.colors {
margin-block-end: var(--wa-flow-spacing);
}
/** mobile */
@media screen and (max-width: 768px) {
wa-page .only-desktop {
display: none;
}
}
/** desktop */
@media screen and not (max-width: 768px) {
/* Navigation sidebar */

17
docs/docs/themes/remix.js vendored
View File

@@ -30,8 +30,8 @@ function init() {
codeSnippets = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code:first-of-type');
codeSnippets = {
html: codeSnippets.querySelector('code.language-html'),
css: codeSnippets.querySelector('code.language-css'),
html: codeSnippets?.querySelector('code.language-html'),
css: codeSnippets?.querySelector('code.language-css'),
};
data = {
@@ -73,11 +73,10 @@ function init() {
Promise.all(Object.values(selects).map(select => select.updateComplete)).then(() => render());
return { selects, codeSnippets, data, computed, render };
globalThis.remixApp = { selects, codeSnippets, data, computed, render };
}
globalThis.remixApp = init();
init();
// Async load CSS for other themes *before* current theme stylesheet
let themeStylesheet = document.querySelector('#theme-stylesheet');
@@ -151,12 +150,14 @@ function render(changedAspect) {
// Update code snippets
for (let language in codeSnippets) {
let codeSnippet = codeSnippets[language];
if (!codeSnippet) {
continue;
}
let code = getThemeCode(data.baseTheme, data.params, { language, cdnUrl });
codeSnippet.textContent = code;
Prism.highlightElement(codeSnippet);
}
}
addEventListener('turbo:render', event => {
remixApp = init();
});
addEventListener('turbo:render', init);