Improve onboarding layout and add sidebar mascot
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
This commit is contained in:
parent
2f1526b86b
commit
48dcc8182c
12 changed files with 119 additions and 50 deletions
|
|
@ -85,6 +85,7 @@ export function validateSiteContent(site) {
|
|||
"home.onboarding.title",
|
||||
"home.onboarding.description",
|
||||
"home.onboarding.stepsTitle",
|
||||
"home.onboarding.sliderTitle",
|
||||
"home.onboarding.sliderLabel",
|
||||
"home.onboarding.slideButtonLabel",
|
||||
"home.origin.eyebrow",
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ test("vite entrypoint and app shell are wired", async () => {
|
|||
assert.match(shell, /export function Shell/);
|
||||
assert.doesNotMatch(shell, /content\.navigation\.library/);
|
||||
assert.match(shell, /sidebar-about-link/);
|
||||
assert.match(shell, /dragon-sidebar\.png/);
|
||||
assert.match(shell, /ImportButton/);
|
||||
assert.match(overlays, /export function AppOverlays/);
|
||||
assert.match(overlays, /\.\/ToolboxModals\.jsx/);
|
||||
|
|
@ -63,9 +64,10 @@ test("vite entrypoint and app shell are wired", async () => {
|
|||
assert.match(homePage, /export function HomePage/);
|
||||
assert.match(homePage, /HomeOnboardingSection/);
|
||||
assert.match(homePage, /import\.meta\.env\.DEV \|\| toolboxes\.length === 0/);
|
||||
assert.match(homePage, /dragon\.png/);
|
||||
assert.match(homePage, /dragon-home\.png/);
|
||||
assert.match(homeOnboarding, /export function HomeOnboardingSection/);
|
||||
assert.match(homeOnboarding, /prefers-reduced-motion: reduce/);
|
||||
assert.match(homeOnboarding, /content\.sliderTitle/);
|
||||
assert.match(homeOnboarding, /home-onboarding-dots/);
|
||||
assert.match(aboutPage, /export function AboutPage/);
|
||||
assert.match(aboutPage, /HomeOnboardingSection/);
|
||||
|
|
@ -132,7 +134,8 @@ test("legacy icons and primary images are available", async () => {
|
|||
await readFile("website/public/static/icons/trashcan.svg", "utf8");
|
||||
await readFile("website/public/static/icons/zoom.svg", "utf8");
|
||||
await readFile("website/public/favicon.ico");
|
||||
await readFile("website/public/static/img/dragon.png");
|
||||
await readFile("website/public/static/img/dragon-home.png");
|
||||
await readFile("website/public/static/img/dragon-sidebar.png");
|
||||
await readFile("website/public/static/img/dragon-gameguide.png");
|
||||
await readFile("website/public/static/img/dragon-toolbox.png");
|
||||
await readFile("website/public/static/img/onboarding/toolbox-overview.png");
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ test("style entrypoint and theme layers are wired", async () => {
|
|||
assert.match(styleHome, /\.about-tool-item \.module-icon/);
|
||||
assert.match(styleMixins, /@mixin gold-panel-frame/);
|
||||
assert.match(styleShell, /\.sidebar-about-link/);
|
||||
assert.match(styleShell, /\.sidebar-mascot/);
|
||||
assert.match(styleToolboxes, /\.module-icon-abacus/);
|
||||
assert.match(styleToolboxes, /\.module-icon-calculator/);
|
||||
assert.match(styleToolboxes, /\.module-icon-columns/);
|
||||
|
|
|
|||
|
|
@ -1184,9 +1184,10 @@
|
|||
},
|
||||
"onboarding": {
|
||||
"eyebrow": "Prise en main",
|
||||
"title": "Prise en main",
|
||||
"title": "Votre première toolbox",
|
||||
"description": "Une toolbox est votre espace personnel pour garder vos notes, listes, images, liens et outils utiles dans ce navigateur.",
|
||||
"stepsTitle": "Créer votre première toolbox",
|
||||
"stepsTitle": "Les étapes",
|
||||
"sliderTitle": "Aperçu",
|
||||
"sliderLabel": "Aperçu de la prise en main",
|
||||
"slideButtonLabel": "Afficher l'aperçu",
|
||||
"steps": [
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 636 KiB After Width: | Height: | Size: 636 KiB |
BIN
website/public/static/img/dragon-sidebar.png
Normal file
BIN
website/public/static/img/dragon-sidebar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
|
|
@ -22,6 +22,9 @@ export function Shell({ route, content, games, toolboxes, links, actions, childr
|
|||
<a className={`nav-item ${route.startsWith("/games") ? "active" : ""}`} href="#/games"><span className="nav-icon nav-icon-controller" aria-hidden="true" /><strong>{content.navigation.games}</strong></a>
|
||||
<a className={`nav-item ${route.startsWith("/toolboxes") || route.startsWith("/toolbox") ? "active" : ""}`} href="#/toolboxes"><span className="nav-icon nav-icon-toolbox" aria-hidden="true" /><strong>{content.navigation.toolboxes}</strong></a>
|
||||
</nav>
|
||||
<div className="sidebar-mascot" aria-hidden="true">
|
||||
<img src="/static/img/dragon-sidebar.png" alt="" />
|
||||
</div>
|
||||
<div className="sidebar-secondary-links">
|
||||
<a className={`sidebar-about-link ${route === "/about" ? "active" : ""}`} href="#/about"><span className="sidebar-about-icon" aria-hidden="true">?</span><strong>{content.navigation.about}</strong></a>
|
||||
<a className={`sidebar-about-link ${route === "/library" ? "active" : ""}`} href="#/library"><span className="sidebar-about-icon" aria-hidden="true"><Icon name="book" /></span><strong>{content.library.eyebrow}</strong></a>
|
||||
|
|
|
|||
|
|
@ -46,36 +46,39 @@ export function HomeOnboardingSection({ content, className = "" }) {
|
|||
))}
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
className="home-onboarding-slider"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
onFocus={() => setIsPaused(true)}
|
||||
onBlur={() => setIsPaused(false)}
|
||||
>
|
||||
{currentSlide && (
|
||||
<figure>
|
||||
<img src={currentSlide.src} alt={currentSlide.alt} />
|
||||
<figcaption>
|
||||
<strong>{currentSlide.title}</strong>
|
||||
<span>{currentSlide.text}</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
)}
|
||||
{slides.length > 1 && (
|
||||
<div className="home-onboarding-dots" aria-label={content.sliderLabel}>
|
||||
{slides.map((slide, index) => (
|
||||
<button
|
||||
className={index === activeSlide ? "active" : ""}
|
||||
key={slide.src}
|
||||
type="button"
|
||||
onClick={() => setActiveSlide(index)}
|
||||
aria-label={`${content.slideButtonLabel} ${index + 1}`}
|
||||
aria-pressed={index === activeSlide}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="home-onboarding-preview">
|
||||
<h3>{content.sliderTitle}</h3>
|
||||
<div
|
||||
className="home-onboarding-slider"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
onFocus={() => setIsPaused(true)}
|
||||
onBlur={() => setIsPaused(false)}
|
||||
>
|
||||
{currentSlide && (
|
||||
<figure>
|
||||
<img src={currentSlide.src} alt={currentSlide.alt} />
|
||||
<figcaption>
|
||||
<strong>{currentSlide.title}</strong>
|
||||
<span>{currentSlide.text}</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
)}
|
||||
{slides.length > 1 && (
|
||||
<div className="home-onboarding-dots" aria-label={content.sliderLabel}>
|
||||
{slides.map((slide, index) => (
|
||||
<button
|
||||
className={index === activeSlide ? "active" : ""}
|
||||
key={slide.src}
|
||||
type="button"
|
||||
onClick={() => setActiveSlide(index)}
|
||||
aria-label={`${content.slideButtonLabel} ${index + 1}`}
|
||||
aria-pressed={index === activeSlide}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="home-onboarding-cards">
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export function HomePage({ siteContent, toolboxes }) {
|
|||
</div>
|
||||
</div>
|
||||
<div className="home-visual" aria-label="Illustration Sokko G">
|
||||
<img src="/static/img/dragon.png" alt={content.origin.visualAlt} />
|
||||
<img src="/static/img/dragon-home.png" alt={content.origin.visualAlt} />
|
||||
</div>
|
||||
</section>
|
||||
<footer className="home-legal">
|
||||
|
|
|
|||
|
|
@ -212,9 +212,10 @@ span {
|
|||
|
||||
.home-onboarding-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: var(--space-5);
|
||||
column-gap: clamp(var(--space-12), 5vw, 5rem);
|
||||
row-gap: var(--space-6);
|
||||
}
|
||||
|
||||
.home-onboarding-steps {
|
||||
|
|
@ -230,9 +231,22 @@ span {
|
|||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.home-onboarding-preview {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-preview h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.home-onboarding-steps ol {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
gap: var(--space-6);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
|
@ -240,22 +254,37 @@ span {
|
|||
|
||||
.home-onboarding-steps li {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) 0;
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
bottom: calc(-1 * var(--space-6) + 4px);
|
||||
left: 13px;
|
||||
width: 1px;
|
||||
background: rgba(246, 196, 83, 0.18);
|
||||
}
|
||||
|
||||
.home-onboarding-steps li:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li > span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
|
|
@ -302,7 +331,7 @@ span {
|
|||
.home-onboarding-slider figure {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 340px;
|
||||
min-height: 320px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -310,7 +339,7 @@ span {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 340px;
|
||||
min-height: 320px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
|
@ -320,12 +349,12 @@ span {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
min-height: 4.8em;
|
||||
min-height: 4.1em;
|
||||
align-content: center;
|
||||
gap: 2px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: rgba(0, 0, 0, 0.56);
|
||||
backdrop-filter: blur(8px);
|
||||
gap: 1px;
|
||||
padding: 10px var(--space-4);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.home-onboarding-slider figcaption strong,
|
||||
|
|
@ -346,7 +375,7 @@ span {
|
|||
.home-onboarding-dots {
|
||||
position: absolute;
|
||||
right: var(--space-3);
|
||||
bottom: calc(4.8em + var(--space-3));
|
||||
bottom: calc(4.1em + var(--space-3));
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
.brand span:last-child,
|
||||
.nav-item strong,
|
||||
.sidebar-about-link strong,
|
||||
.sidebar-mascot,
|
||||
.sidebar-note {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -42,6 +43,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-height: 760px) and (min-width: 1025px) {
|
||||
.sidebar-mascot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-shell {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-right: 2px solid var(--color-border);
|
||||
background: rgba(11, 14, 27, 0.82);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
|
@ -145,6 +145,27 @@
|
|||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sidebar-mascot {
|
||||
position: absolute;
|
||||
top: 47%;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.sidebar-mascot img {
|
||||
display: block;
|
||||
width: 134px;
|
||||
object-fit: contain;
|
||||
opacity: 0.86;
|
||||
filter:
|
||||
saturate(1.04)
|
||||
brightness(1.02)
|
||||
drop-shadow(0 24px 34px rgba(0, 0, 0, 0.32));
|
||||
}
|
||||
|
||||
.sidebar-secondary-links {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue