Compare commits
2 Commits
feat/mater
...
1b7c0c48e7
| Author | SHA1 | Date | |
|---|---|---|---|
| 1b7c0c48e7 | |||
|
cb86137730 |
@@ -1,397 +0,0 @@
|
||||
<main class="materials-page">
|
||||
<section class="hero">
|
||||
<div class="container hero-inner">
|
||||
<p class="ui-eyebrow">Guida materiali</p>
|
||||
<h1>Qualita e Materiali</h1>
|
||||
<p class="hero-lead">
|
||||
Confronta materiali in modo interattivo con radar chart, metriche tecniche,
|
||||
vantaggi, limiti e fonti verificabili.
|
||||
</p>
|
||||
<p class="hero-note">
|
||||
Seleziona fino a {{ maxCompareCount }} materiali: il grafico aggiorna i
|
||||
punteggi in tempo reale.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="selector-section">
|
||||
<div class="container">
|
||||
<h2>Selezione confronto</h2>
|
||||
<div class="selector-grid" role="group" aria-label="Selezione materiali">
|
||||
@for (material of materials; track trackMaterial($index, material)) {
|
||||
<button
|
||||
type="button"
|
||||
class="selector-chip"
|
||||
[class.is-selected]="isSelected(material.id)"
|
||||
[disabled]="!canSelect(material.id)"
|
||||
(click)="toggleMaterial(material.id)"
|
||||
>
|
||||
<span
|
||||
class="selector-dot"
|
||||
[style.background-color]="legendDotColor(material.id)"
|
||||
></span>
|
||||
<span>{{ material.name }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<p class="selector-help">
|
||||
Nota: per l asse Economicita, un valore alto significa costo al kg piu
|
||||
conveniente.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="chart-section">
|
||||
<div class="container chart-layout">
|
||||
<article class="chart-card">
|
||||
<header class="chart-header">
|
||||
<h2>Radar chart comparativo</h2>
|
||||
<p>
|
||||
Punteggi normalizzati 0-100 su tutto il set materiali (min-max scaling).
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<svg
|
||||
class="radar-chart"
|
||||
[attr.viewBox]="'0 0 ' + chartSize + ' ' + chartSize"
|
||||
role="img"
|
||||
aria-label="Radar chart materiali"
|
||||
>
|
||||
<g class="chart-rings">
|
||||
@for (ring of ringPolygons(); track $index) {
|
||||
<polygon [attr.points]="ring"></polygon>
|
||||
}
|
||||
</g>
|
||||
|
||||
<g class="chart-axes">
|
||||
@for (axis of axisGuides(); track axis.id) {
|
||||
<line
|
||||
[attr.x1]="axis.fromX"
|
||||
[attr.y1]="axis.fromY"
|
||||
[attr.x2]="axis.x"
|
||||
[attr.y2]="axis.y"
|
||||
></line>
|
||||
<text
|
||||
[attr.x]="axis.labelX"
|
||||
[attr.y]="axis.labelY"
|
||||
[attr.text-anchor]="axis.labelAnchor"
|
||||
>
|
||||
{{ radarAxes[$index].label }}
|
||||
</text>
|
||||
}
|
||||
</g>
|
||||
|
||||
<g class="chart-series">
|
||||
@for (series of radarSeries(); track series.material.id) {
|
||||
<polygon
|
||||
class="series-shape"
|
||||
[attr.points]="series.points"
|
||||
[style.stroke]="series.color"
|
||||
[style.fill]="series.fill"
|
||||
[class.is-hovered]="hoveredMaterialId() === series.material.id"
|
||||
(mouseenter)="setHoveredMaterial(series.material.id)"
|
||||
(mouseleave)="setHoveredMaterial(null)"
|
||||
></polygon>
|
||||
|
||||
@for (point of series.values; track point.axis.id) {
|
||||
<circle
|
||||
class="series-node"
|
||||
[attr.cx]="point.x"
|
||||
[attr.cy]="point.y"
|
||||
r="4"
|
||||
[style.fill]="series.color"
|
||||
></circle>
|
||||
}
|
||||
}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="chart-legend">
|
||||
@for (series of radarSeries(); track series.material.id) {
|
||||
<button
|
||||
type="button"
|
||||
class="legend-item"
|
||||
(mouseenter)="setHoveredMaterial(series.material.id)"
|
||||
(mouseleave)="setHoveredMaterial(null)"
|
||||
>
|
||||
<span
|
||||
class="legend-dot"
|
||||
[style.background-color]="series.color"
|
||||
></span>
|
||||
<span>{{ series.material.name }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="explain-card">
|
||||
<h3>Spiegazione completa del radar</h3>
|
||||
<p>
|
||||
Ogni asse mostra una proprieta tecnica. Il valore 100 rappresenta la
|
||||
miglior performance relativa nel dataset attuale; 0 la meno favorevole.
|
||||
</p>
|
||||
<ul>
|
||||
@for (axis of radarAxes; track axis.id) {
|
||||
<li>
|
||||
<strong>{{ axis.label }}:</strong>
|
||||
{{ axis.description }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<p>
|
||||
La normalizzazione e calcolata su tutti i materiali mostrati in pagina.
|
||||
Per leggibilita il radar usa un raggio minimo visivo: i valori minimi
|
||||
restano i meno favorevoli, ma non collassano tutti nello stesso punto.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="table-section">
|
||||
<div class="container">
|
||||
<h2>Tabella tecnica di confronto</h2>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Parametro</th>
|
||||
@for (material of selectedMaterials(); track trackMaterial($index, material)) {
|
||||
<th>{{ material.name }}</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of comparisonRows(); track row.label) {
|
||||
<tr>
|
||||
<th>{{ row.label }}</th>
|
||||
@for (value of row.values; track $index) {
|
||||
<td>{{ value }}</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="quality-section">
|
||||
<div class="container">
|
||||
<h2>Layer, ugello e infill: esempi pratici</h2>
|
||||
<p class="quality-intro">
|
||||
Questa sezione non e un calcolatore interattivo: spiega visivamente cosa
|
||||
cambia su oggetti reali e come leggere i risultati del vostro calcolatore.
|
||||
</p>
|
||||
|
||||
<div class="visual-guide-grid">
|
||||
@for (guide of qualityVisualCards(); track trackVisualGuide($index, guide)) {
|
||||
<article class="visual-guide-card">
|
||||
<p class="visual-guide-category">{{ guide.category }}</p>
|
||||
<h3>{{ guide.title }}</h3>
|
||||
|
||||
<div class="visual-guide-media">
|
||||
@if (guide.image; as image) {
|
||||
<picture>
|
||||
@if (image.source.avifUrl) {
|
||||
<source [srcset]="image.source.avifUrl" type="image/avif" />
|
||||
}
|
||||
@if (image.source.webpUrl) {
|
||||
<source [srcset]="image.source.webpUrl" type="image/webp" />
|
||||
}
|
||||
<img
|
||||
[src]="image.source.fallbackUrl"
|
||||
[attr.alt]="image.altText || guide.title"
|
||||
width="640"
|
||||
height="420"
|
||||
/>
|
||||
</picture>
|
||||
} @else {
|
||||
<div class="media-fallback">
|
||||
<span>
|
||||
Nessuna immagine assegnata.
|
||||
Carica asset backend con usageType
|
||||
<code>MATERIALS_PAGE</code> e usageKey
|
||||
<code>{{ guide.usageKey }}</code>.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<p><strong>Oggetto esempio:</strong> {{ guide.objectExample }}</p>
|
||||
<p><strong>Meglio per:</strong> {{ guide.bestFor }}</p>
|
||||
<p><strong>Limite:</strong> {{ guide.tradeoff }}</p>
|
||||
<p class="visual-guide-calc">
|
||||
<strong>Lettura nel calcolatore:</strong> {{ guide.calculatorRead }}
|
||||
</p>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
|
||||
<article class="calculator-logic-card">
|
||||
<h3>Come leggere il nostro calcolatore</h3>
|
||||
<p>
|
||||
Il calcolatore non sostituisce i profili slicer: serve a spiegare il
|
||||
compromesso tra estetica, robustezza e tempi in modo coerente.
|
||||
</p>
|
||||
<div class="logic-table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Metrica</th>
|
||||
<th>Cosa significa</th>
|
||||
<th>Valore alto</th>
|
||||
<th>Valore basso</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (rule of calculatorRules; track rule.metric) {
|
||||
<tr>
|
||||
<th>{{ rule.metric }}</th>
|
||||
<td>{{ rule.whatItMeans }}</td>
|
||||
<td>{{ rule.whenHigh }}</td>
|
||||
<td>{{ rule.whenLow }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="quality-layout">
|
||||
<article class="quality-card">
|
||||
<h3>Regole rapide per l utente</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Layer basso e ugello piccolo migliorano i dettagli, ma aumentano i
|
||||
tempi.
|
||||
</li>
|
||||
<li>
|
||||
Infill e perimetri alti migliorano resistenza, ma aumentano tempo e
|
||||
materiale.
|
||||
</li>
|
||||
<li>
|
||||
Per pezzi estetici usa profili fini; per pezzi funzionali scegli setup
|
||||
bilanciati o robusti.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="guides-grid">
|
||||
@for (guide of qualityGuides; track trackGuide($index, guide)) {
|
||||
<article class="guide-card">
|
||||
<h3>{{ guide.title }}</h3>
|
||||
<p><strong>Range consigliato:</strong> {{ guide.recommendation }}</p>
|
||||
<p>{{ guide.explanation }}</p>
|
||||
<p class="guide-effect">{{ guide.practicalEffect }}</p>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="materials-section">
|
||||
<div class="container">
|
||||
<h2>Schede materiali: spiegazioni, pro/contro, fonti</h2>
|
||||
<div class="materials-grid">
|
||||
@for (card of selectedCards(); track card.material.id) {
|
||||
<article class="material-card">
|
||||
<header>
|
||||
<h3>{{ card.material.name }}</h3>
|
||||
<p>{{ card.material.summary }}</p>
|
||||
</header>
|
||||
|
||||
<div class="material-media">
|
||||
@if (card.image; as image) {
|
||||
<picture>
|
||||
@if (image.source.avifUrl) {
|
||||
<source [srcset]="image.source.avifUrl" type="image/avif" />
|
||||
}
|
||||
@if (image.source.webpUrl) {
|
||||
<source [srcset]="image.source.webpUrl" type="image/webp" />
|
||||
}
|
||||
<img
|
||||
[src]="image.source.fallbackUrl"
|
||||
[attr.alt]="image.altText || card.material.name"
|
||||
width="640"
|
||||
height="400"
|
||||
/>
|
||||
</picture>
|
||||
} @else {
|
||||
<div class="media-fallback">
|
||||
<span>
|
||||
Nessuna immagine assegnata.
|
||||
Carica asset backend con usageType
|
||||
<code>MATERIALS_PAGE</code> e usageKey
|
||||
<code>material-{{ card.material.id }}</code>.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="material-columns">
|
||||
<div>
|
||||
<h4>Vantaggi</h4>
|
||||
<ul>
|
||||
@for (item of card.material.pros; track $index) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Limiti</h4>
|
||||
<ul>
|
||||
@for (item of card.material.cons; track $index) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Ideale per</h4>
|
||||
<ul>
|
||||
@for (item of card.material.idealFor; track $index) {
|
||||
<li>{{ item }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="source-list">
|
||||
<h4>Fonti citate</h4>
|
||||
<ul>
|
||||
@for (source of card.material.sources; track trackSource($index, source)) {
|
||||
<li>
|
||||
<a [href]="source.url" target="_blank" rel="noopener noreferrer">
|
||||
{{ source.label }}
|
||||
</a>
|
||||
<span class="source-kind">{{ source.kind }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="global-sources">
|
||||
<div class="container">
|
||||
<h2>Indice completo fonti</h2>
|
||||
<p>
|
||||
Tutti i link usati per metriche e descrizioni sono riportati qui in forma
|
||||
centralizzata.
|
||||
</p>
|
||||
<ul class="global-source-list">
|
||||
@for (source of allSources(); track trackSource($index, source)) {
|
||||
<li>
|
||||
<a [href]="source.url" target="_blank" rel="noopener noreferrer">
|
||||
{{ source.label }}
|
||||
</a>
|
||||
<span>{{ source.kind }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -1,546 +0,0 @@
|
||||
.materials-page {
|
||||
--materials-bg: #ffffff;
|
||||
--materials-accent: #c23b22;
|
||||
--materials-muted: #5f6771;
|
||||
--materials-card: #ffffff;
|
||||
background: var(--materials-bg);
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 5rem 0 2.25rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -40% -15% auto auto;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
background: radial-gradient(circle, rgba(194, 59, 34, 0.08), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0.4rem 0 1rem;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
margin: 0;
|
||||
max-width: 68ch;
|
||||
font-size: 1.05rem;
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
|
||||
.hero-note {
|
||||
margin: 0.9rem 0 0;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.selector-section,
|
||||
.chart-section,
|
||||
.table-section,
|
||||
.quality-section,
|
||||
.materials-section,
|
||||
.global-sources {
|
||||
padding: 1.8rem 0;
|
||||
}
|
||||
|
||||
.selector-grid {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.selector-chip {
|
||||
border: 1px solid var(--color-border);
|
||||
background: #fff;
|
||||
color: var(--color-text-main);
|
||||
border-radius: 999px;
|
||||
padding: 0.5rem 0.9rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.selector-chip:hover:enabled {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--materials-accent);
|
||||
box-shadow: 0 4px 12px rgb(16 24 32 / 0.12);
|
||||
}
|
||||
|
||||
.selector-chip:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.selector-chip.is-selected {
|
||||
border-color: var(--materials-accent);
|
||||
background: #fff3ee;
|
||||
}
|
||||
|
||||
.selector-dot {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(0 0 0 / 0.15);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.selector-help {
|
||||
margin-top: 0.8rem;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.chart-layout {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.chart-card,
|
||||
.explain-card,
|
||||
.material-card,
|
||||
.table-wrap,
|
||||
.quality-card,
|
||||
.guide-card {
|
||||
background: var(--materials-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 28px rgb(16 24 32 / 0.05);
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-header p {
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.radar-chart {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chart-rings polygon {
|
||||
fill: none;
|
||||
stroke: #d7d9de;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.chart-axes line {
|
||||
stroke: #c3c8cf;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.chart-axes text {
|
||||
font-size: 0.75rem;
|
||||
fill: #4f5a66;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.series-shape {
|
||||
stroke-width: 2.2;
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.series-shape.is-hovered {
|
||||
filter: drop-shadow(0 3px 8px rgb(16 24 32 / 0.26));
|
||||
}
|
||||
|
||||
.series-node {
|
||||
stroke: #ffffff;
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.7rem;
|
||||
background: #fff;
|
||||
display: inline-flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.explain-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.explain-card h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.explain-card p {
|
||||
margin: 0.75rem 0;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.explain-card ul {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.table-wrap th,
|
||||
.table-wrap td {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-wrap thead th {
|
||||
background: #f8fafd;
|
||||
font-size: 0.84rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.table-wrap tbody tr:hover {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.quality-intro {
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--materials-muted);
|
||||
max-width: 72ch;
|
||||
}
|
||||
|
||||
.visual-guide-grid {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.visual-guide-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 28px rgb(16 24 32 / 0.05);
|
||||
padding: 0.85rem;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.visual-guide-category {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #2563b8;
|
||||
}
|
||||
|
||||
.visual-guide-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.visual-guide-media {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
background: #f7f8fb;
|
||||
min-height: 170px;
|
||||
}
|
||||
|
||||
.visual-guide-media img {
|
||||
width: 100%;
|
||||
height: 185px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.visual-guide-card p {
|
||||
margin: 0;
|
||||
color: var(--materials-muted);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.visual-guide-calc {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
|
||||
.calculator-logic-card {
|
||||
margin-top: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 28px rgb(16 24 32 / 0.05);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.calculator-logic-card h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calculator-logic-card p {
|
||||
margin: 0.6rem 0 0;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.logic-table-wrap {
|
||||
margin-top: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.logic-table-wrap table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 720px;
|
||||
}
|
||||
|
||||
.logic-table-wrap th,
|
||||
.logic-table-wrap td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
padding: 0.62rem 0.7rem;
|
||||
}
|
||||
|
||||
.logic-table-wrap thead th {
|
||||
background: #f8fafd;
|
||||
font-size: 0.84rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.quality-layout {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.quality-card h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quality-card ul {
|
||||
margin: 0.7rem 0 0;
|
||||
padding-left: 1rem;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.guides-grid {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
.guide-card {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.guide-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.guide-card p {
|
||||
margin: 0.55rem 0 0;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.guide-effect {
|
||||
color: var(--color-text-main);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.materials-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.material-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.material-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.material-card header p {
|
||||
margin: 0.55rem 0 0;
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.material-media {
|
||||
margin-top: 0.85rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
background: #f7f8fb;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.material-media img {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-fallback {
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
color: var(--materials-muted);
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.material-columns {
|
||||
margin-top: 0.9rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.material-columns h4,
|
||||
.source-list h4 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.material-columns ul,
|
||||
.source-list ul,
|
||||
.global-source-list {
|
||||
margin: 0.45rem 0 0;
|
||||
padding-left: 1rem;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.source-list {
|
||||
margin-top: 0.9rem;
|
||||
padding-top: 0.9rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.source-list li,
|
||||
.global-source-list li {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.source-list a,
|
||||
.global-source-list a {
|
||||
color: #14409b;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.source-kind {
|
||||
color: var(--materials-muted);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.global-sources p {
|
||||
color: var(--materials-muted);
|
||||
}
|
||||
|
||||
.global-source-list {
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.9rem;
|
||||
padding: 1rem 1rem 1rem 1.35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero {
|
||||
padding-top: 4.2rem;
|
||||
}
|
||||
|
||||
.chart-card,
|
||||
.explain-card,
|
||||
.material-card {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
min-width: 640px;
|
||||
}
|
||||
|
||||
.source-list li,
|
||||
.global-source-list li {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -97,7 +97,9 @@ describe('ProductDetailComponent', () => {
|
||||
const languageService = {
|
||||
currentLang,
|
||||
selectedLang: () => currentLang(),
|
||||
setLocalizedRouteOverrides: jasmine.createSpy('setLocalizedRouteOverrides'),
|
||||
setLocalizedRouteOverrides: jasmine.createSpy(
|
||||
'setLocalizedRouteOverrides',
|
||||
),
|
||||
clearLocalizedRouteOverrides: jasmine.createSpy(
|
||||
'clearLocalizedRouteOverrides',
|
||||
),
|
||||
@@ -113,7 +115,9 @@ describe('ProductDetailComponent', () => {
|
||||
.createSpy('quantityForVariant')
|
||||
.and.returnValue(0),
|
||||
loadCart: jasmine.createSpy('loadCart').and.returnValue(of(null)),
|
||||
resolveMediaUrl: jasmine.createSpy('resolveMediaUrl').and.returnValue(null),
|
||||
resolveMediaUrl: jasmine
|
||||
.createSpy('resolveMediaUrl')
|
||||
.and.returnValue(null),
|
||||
};
|
||||
|
||||
const router = {
|
||||
@@ -126,9 +130,13 @@ describe('ProductDetailComponent', () => {
|
||||
} as unknown as Router;
|
||||
|
||||
const activatedRoute = {
|
||||
paramMap: of(convertToParamMap({ productSlug: '91823f84-bike-wall-hanger' })),
|
||||
paramMap: of(
|
||||
convertToParamMap({ productSlug: '91823f84-bike-wall-hanger' }),
|
||||
),
|
||||
snapshot: {
|
||||
paramMap: convertToParamMap({ productSlug: '91823f84-bike-wall-hanger' }),
|
||||
paramMap: convertToParamMap({
|
||||
productSlug: '91823f84-bike-wall-hanger',
|
||||
}),
|
||||
},
|
||||
} as unknown as ActivatedRoute;
|
||||
|
||||
@@ -200,7 +208,9 @@ describe('ProductDetailComponent', () => {
|
||||
it('builds a soft SSR fallback with 200 + index follow', () => {
|
||||
const { component, seoService, responseInit } = createComponent();
|
||||
|
||||
expect((component as any).shouldUseSoftSeoFallback({ status: 500 })).toBeTrue();
|
||||
expect(
|
||||
(component as any).shouldUseSoftSeoFallback({ status: 500 }),
|
||||
).toBeTrue();
|
||||
(component as any).setResponseStatus(200);
|
||||
(component as any).applySoftFallbackSeo('91823f84-bike-wall-hanger');
|
||||
|
||||
@@ -221,7 +231,9 @@ describe('ProductDetailComponent', () => {
|
||||
it('keeps hard fallback noindex for missing products', () => {
|
||||
const { component, seoService, responseInit } = createComponent();
|
||||
|
||||
expect((component as any).shouldUseSoftSeoFallback({ status: 404 })).toBeFalse();
|
||||
expect(
|
||||
(component as any).shouldUseSoftSeoFallback({ status: 404 }),
|
||||
).toBeFalse();
|
||||
(component as any).setResponseStatus(404);
|
||||
(component as any).applyHardFallbackSeo();
|
||||
|
||||
|
||||
@@ -254,37 +254,35 @@ export class ProductDetailComponent {
|
||||
}
|
||||
|
||||
const productSlug = routeParams.productSlug as string;
|
||||
return this.shopService
|
||||
.getProductByPublicPath(productSlug)
|
||||
.pipe(
|
||||
catchError((error) => {
|
||||
this.languageService.clearLocalizedRouteOverrides();
|
||||
this.product.set(null);
|
||||
this.selectedVariantId.set(null);
|
||||
this.setSelectedImageAssetId(null);
|
||||
this.modelFile.set(null);
|
||||
const isNotFound = error?.status === 404;
|
||||
if (isNotFound) {
|
||||
this.error.set('SHOP.NOT_FOUND');
|
||||
this.setResponseStatus(404);
|
||||
this.applyHardFallbackSeo();
|
||||
return of(null);
|
||||
}
|
||||
|
||||
if (this.shouldUseSoftSeoFallback(error)) {
|
||||
this.error.set(null);
|
||||
this.softFallbackActive.set(true);
|
||||
this.setResponseStatus(200);
|
||||
this.applySoftFallbackSeo(productSlug);
|
||||
return of(null);
|
||||
}
|
||||
|
||||
this.error.set('SHOP.LOAD_ERROR');
|
||||
this.setResponseStatus(503);
|
||||
return this.shopService.getProductByPublicPath(productSlug).pipe(
|
||||
catchError((error) => {
|
||||
this.languageService.clearLocalizedRouteOverrides();
|
||||
this.product.set(null);
|
||||
this.selectedVariantId.set(null);
|
||||
this.setSelectedImageAssetId(null);
|
||||
this.modelFile.set(null);
|
||||
const isNotFound = error?.status === 404;
|
||||
if (isNotFound) {
|
||||
this.error.set('SHOP.NOT_FOUND');
|
||||
this.setResponseStatus(404);
|
||||
this.applyHardFallbackSeo();
|
||||
return of(null);
|
||||
}),
|
||||
finalize(() => this.loading.set(false)),
|
||||
);
|
||||
}
|
||||
|
||||
if (this.shouldUseSoftSeoFallback(error)) {
|
||||
this.error.set(null);
|
||||
this.softFallbackActive.set(true);
|
||||
this.setResponseStatus(200);
|
||||
this.applySoftFallbackSeo(productSlug);
|
||||
return of(null);
|
||||
}
|
||||
|
||||
this.error.set('SHOP.LOAD_ERROR');
|
||||
this.setResponseStatus(503);
|
||||
return of(null);
|
||||
}),
|
||||
finalize(() => this.loading.set(false)),
|
||||
);
|
||||
}),
|
||||
takeUntilDestroyed(this.destroyRef),
|
||||
)
|
||||
@@ -904,9 +902,7 @@ export class ProductDetailComponent {
|
||||
return this.normalizeRouteParam(this.route.snapshot.paramMap.get(name));
|
||||
}
|
||||
|
||||
private normalizeRouteParam(
|
||||
value: string | null | undefined,
|
||||
): string | null {
|
||||
private normalizeRouteParam(value: string | null | undefined): string | null {
|
||||
const normalized = String(value ?? '').trim();
|
||||
return normalized || null;
|
||||
}
|
||||
|
||||
@@ -60,24 +60,26 @@ describe('ShopPageComponent', () => {
|
||||
'TranslateService',
|
||||
['instant'],
|
||||
);
|
||||
translate.instant.and.callFake((key: string, params?: { count?: number }) => {
|
||||
const translations: Record<string, string> = {
|
||||
'SHOP.TITLE': 'Technische Lösungen',
|
||||
'SHOP.SUBTITLE': 'Fertige Produkte, die praktische Probleme lösen',
|
||||
'SHOP.CATALOG_TITLE': 'Alle Produkte',
|
||||
'SHOP.CATALOG_LABEL': 'Katalog',
|
||||
'SHOP.SELECTED_CATEGORY': 'Ausgewählte Kategorie',
|
||||
'SHOP.CATALOG_META_DESCRIPTION':
|
||||
'Entdecken Sie 3D-gedruckte Produkte und technisches Zubehör.',
|
||||
'SEO.ROUTES.SHOP.CATEGORY_TITLE': 'Shop-Kategorie | 3D fab',
|
||||
'SEO.ROUTES.SHOP.CATEGORY_DESCRIPTION':
|
||||
'Entdecken Sie Produkte dieser Kategorie und technische Lösungen.',
|
||||
};
|
||||
if (key === 'SHOP.CATEGORY_META') {
|
||||
return `${params?.count ?? 0} Produkte in dieser Kategorie verfügbar`;
|
||||
}
|
||||
return translations[key] ?? key;
|
||||
});
|
||||
translate.instant.and.callFake(
|
||||
(key: string, params?: { count?: number }) => {
|
||||
const translations: Record<string, string> = {
|
||||
'SHOP.TITLE': 'Technische Lösungen',
|
||||
'SHOP.SUBTITLE': 'Fertige Produkte, die praktische Probleme lösen',
|
||||
'SHOP.CATALOG_TITLE': 'Alle Produkte',
|
||||
'SHOP.CATALOG_LABEL': 'Katalog',
|
||||
'SHOP.SELECTED_CATEGORY': 'Ausgewählte Kategorie',
|
||||
'SHOP.CATALOG_META_DESCRIPTION':
|
||||
'Entdecken Sie 3D-gedruckte Produkte und technisches Zubehör.',
|
||||
'SEO.ROUTES.SHOP.CATEGORY_TITLE': 'Shop-Kategorie | 3D fab',
|
||||
'SEO.ROUTES.SHOP.CATEGORY_DESCRIPTION':
|
||||
'Entdecken Sie Produkte dieser Kategorie und technische Lösungen.',
|
||||
};
|
||||
if (key === 'SHOP.CATEGORY_META') {
|
||||
return `${params?.count ?? 0} Produkte in dieser Kategorie verfügbar`;
|
||||
}
|
||||
return translations[key] ?? key;
|
||||
},
|
||||
);
|
||||
|
||||
const currentLang = signal<'it' | 'en' | 'de' | 'fr'>('de');
|
||||
const languageService = {
|
||||
@@ -100,11 +102,17 @@ describe('ShopPageComponent', () => {
|
||||
flattenCategoryTree: jasmine
|
||||
.createSpy('flattenCategoryTree')
|
||||
.and.returnValue([]),
|
||||
quantityForProduct: jasmine.createSpy('quantityForProduct').and.returnValue(0),
|
||||
quantityForProduct: jasmine
|
||||
.createSpy('quantityForProduct')
|
||||
.and.returnValue(0),
|
||||
loadCart: jasmine.createSpy('loadCart').and.returnValue(of(null)),
|
||||
clearCart: jasmine.createSpy('clearCart').and.returnValue(of(null)),
|
||||
removeCartItem: jasmine.createSpy('removeCartItem').and.returnValue(of(null)),
|
||||
updateCartItem: jasmine.createSpy('updateCartItem').and.returnValue(of(null)),
|
||||
removeCartItem: jasmine
|
||||
.createSpy('removeCartItem')
|
||||
.and.returnValue(of(null)),
|
||||
updateCartItem: jasmine
|
||||
.createSpy('updateCartItem')
|
||||
.and.returnValue(of(null)),
|
||||
};
|
||||
|
||||
const router = {
|
||||
@@ -164,7 +172,9 @@ describe('ShopPageComponent', () => {
|
||||
});
|
||||
|
||||
it('keeps noindex for categories explicitly marked as non-indexable', () => {
|
||||
const { component, seoService } = createComponent('/de/shop/compatible-with-garmin');
|
||||
const { component, seoService } = createComponent(
|
||||
'/de/shop/compatible-with-garmin',
|
||||
);
|
||||
|
||||
(component as any).applySeo(buildCategory({ indexable: false }));
|
||||
|
||||
@@ -180,7 +190,9 @@ describe('ShopPageComponent', () => {
|
||||
'/de/shop/compatible-with-garmin',
|
||||
);
|
||||
|
||||
expect((component as any).shouldUseSoftSeoFallback({ status: 500 })).toBeTrue();
|
||||
expect(
|
||||
(component as any).shouldUseSoftSeoFallback({ status: 500 }),
|
||||
).toBeTrue();
|
||||
(component as any).setResponseStatus(200);
|
||||
(component as any).applySoftFallbackSeo('compatible-with-garmin');
|
||||
|
||||
@@ -203,7 +215,9 @@ describe('ShopPageComponent', () => {
|
||||
'/de/shop/compatible-with-garmin',
|
||||
);
|
||||
|
||||
expect((component as any).shouldUseSoftSeoFallback({ status: 404 })).toBeFalse();
|
||||
expect(
|
||||
(component as any).shouldUseSoftSeoFallback({ status: 404 }),
|
||||
).toBeFalse();
|
||||
(component as any).setResponseStatus(404);
|
||||
(component as any).applyHardErrorSeo();
|
||||
|
||||
|
||||
@@ -528,9 +528,7 @@ export class ShopPageComponent {
|
||||
return this.normalizeRouteParam(this.route.snapshot.paramMap.get(name));
|
||||
}
|
||||
|
||||
private normalizeRouteParam(
|
||||
value: string | null | undefined,
|
||||
): string | null {
|
||||
private normalizeRouteParam(value: string | null | undefined): string | null {
|
||||
const normalized = String(value ?? '').trim();
|
||||
return normalized || null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user