mirror of
https://github.com/OHTU-German-learning-website/OHTU-German-learning-website.git
synced 2026-10-12 19:13:51 +03:00
Glossary clickable words + back to top
This commit is contained in:
strasmus1
@@ -9,13 +9,51 @@
|
||||
margin: 0 0 var(--u-sm);
|
||||
}
|
||||
|
||||
.glossary-index-item {
|
||||
display: inline-block;
|
||||
padding: 0.35rem 0.75rem;
|
||||
.glossary-index-letter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--bg3);
|
||||
color: var(--fg1);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.glossary-index-letter:hover,
|
||||
.glossary-index-letter:focus {
|
||||
background-color: var(--bg4);
|
||||
border-color: var(--bg5);
|
||||
}
|
||||
|
||||
.glossary-index-group {
|
||||
padding: var(--u-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--bg3);
|
||||
display: grid;
|
||||
gap: var(--u-2xs);
|
||||
}
|
||||
|
||||
.glossary-index-group-title {
|
||||
margin: 0 0 var(--u-xs);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.glossary-index-entry {
|
||||
display: inline-block;
|
||||
color: var(--fg1);
|
||||
text-decoration: none;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.glossary-index-entry:hover,
|
||||
.glossary-index-entry:focus {
|
||||
background-color: var(--bg4);
|
||||
}
|
||||
|
||||
.glossary-card {
|
||||
@@ -25,18 +63,60 @@
|
||||
border: 1px solid var(--bg3);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.2s;
|
||||
scroll-margin-top: 100px;
|
||||
}
|
||||
|
||||
.glossary-card:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.glossary-letter-group {
|
||||
border-top: 1px solid var(--bg3);
|
||||
padding-top: var(--u-md);
|
||||
}
|
||||
|
||||
.glossary-letter-title {
|
||||
margin: 0 0 var(--u-sm);
|
||||
font-size: 1.35rem;
|
||||
scroll-margin-top: 100px;
|
||||
}
|
||||
|
||||
.glossary-back-to-top {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--fg2);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
margin-top: var(--u-sm);
|
||||
}
|
||||
|
||||
.glossary-back-to-top:hover,
|
||||
.glossary-back-to-top:focus {
|
||||
color: var(--fg1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.glossary-word {
|
||||
color: var(--fg1);
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.glossary-word-link {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color 0.2s, padding 0.2s;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: -0.25rem -0.5rem;
|
||||
}
|
||||
|
||||
.glossary-word-link:hover,
|
||||
.glossary-word-link:focus {
|
||||
background-color: var(--bg4);
|
||||
}
|
||||
|
||||
|
||||
.glossary-definition {
|
||||
color: var(--fg2);
|
||||
margin: 0.5rem 0;
|
||||
|
||||
@@ -57,27 +57,66 @@ export default function GlossaryList() {
|
||||
a.word.localeCompare(b.word)
|
||||
);
|
||||
|
||||
const entriesByLetter = sortedEntries.reduce((map, entry) => {
|
||||
const letter = (entry.word?.[0] || "").toUpperCase();
|
||||
if (!map[letter]) {
|
||||
map[letter] = [];
|
||||
}
|
||||
map[letter].push(entry);
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
const letters = Object.keys(entriesByLetter).sort();
|
||||
|
||||
return (
|
||||
<Column gap="md" width="100%">
|
||||
<Row justify="space-between" gap="xl" width="100%" align="center">
|
||||
<h2>Glossareinträge</h2>
|
||||
<h2 id="glossary-top">Glossareinträge</h2>
|
||||
</Row>
|
||||
<LinkButton href="/admin/glossary/create">
|
||||
Neuen Eintrag erstellen
|
||||
</LinkButton>
|
||||
|
||||
{sortedEntries.length > 0 && (
|
||||
{letters.length > 0 && (
|
||||
<Container className="glossary-index" mb="md">
|
||||
<h3>Register</h3>
|
||||
<Container display="flex" flexWrap="wrap" gap="xs" mb="sm">
|
||||
{letters.map((letter) => (
|
||||
<a
|
||||
key={letter}
|
||||
className="glossary-index-letter"
|
||||
href={`#letter-${letter}-section`}
|
||||
>
|
||||
{letter}
|
||||
</a>
|
||||
))}
|
||||
</Container>
|
||||
|
||||
<Container
|
||||
display="grid"
|
||||
templateColumns="repeat(auto-fit, minmax(160px, 1fr))"
|
||||
gap="sm"
|
||||
>
|
||||
{sortedEntries.map((entry) => (
|
||||
<span key={entry.id} className="glossary-index-item">
|
||||
{entry.word}
|
||||
</span>
|
||||
{letters.map((letter) => (
|
||||
<Container key={letter} className="glossary-index-group">
|
||||
<h4
|
||||
id={`letter-${letter}`}
|
||||
className="glossary-index-group-title"
|
||||
>
|
||||
{letter}
|
||||
</h4>
|
||||
<Column gap="xs">
|
||||
{entriesByLetter[letter].map((entry) => (
|
||||
<a
|
||||
key={entry.id}
|
||||
href={`#entry-${entry.id}`}
|
||||
className="glossary-index-entry"
|
||||
>
|
||||
{entry.word}
|
||||
</a>
|
||||
))}
|
||||
</Column>
|
||||
</Container>
|
||||
))}
|
||||
</Container>
|
||||
</Container>
|
||||
@@ -89,46 +128,69 @@ export default function GlossaryList() {
|
||||
beginnen.
|
||||
</p>
|
||||
) : (
|
||||
<Container
|
||||
display="grid"
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
gap="md"
|
||||
>
|
||||
{sortedEntries.map((entry) => (
|
||||
<Container key={entry.id} className="glossary-card">
|
||||
<Column gap="sm">
|
||||
<h4 className="glossary-word">{entry.word}</h4>
|
||||
<RenderHTML data={entry.word_definition} disableGlossary />
|
||||
<Row justify="space-between" className="glossary-meta">
|
||||
<span>
|
||||
Erstellt: {new Date(entry.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
<Row gap="sm">
|
||||
<LinkButton
|
||||
href={`/admin/glossary/create?id=${entry.id}`}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Bearbeiten
|
||||
</LinkButton>
|
||||
<Button
|
||||
variant={
|
||||
confirmDelete === entry.id ? "danger" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
width="fit"
|
||||
onClick={() => handleDelete(entry.id)}
|
||||
disabled={deleting === entry.id}
|
||||
>
|
||||
{deleting === entry.id
|
||||
? "Löschen..."
|
||||
: confirmDelete === entry.id
|
||||
? "Bestätigen"
|
||||
: "Löschen"}
|
||||
</Button>
|
||||
</Row>
|
||||
</Row>
|
||||
</Column>
|
||||
<Container display="grid" gap="md">
|
||||
{letters.map((letter) => (
|
||||
<Container key={letter} className="glossary-letter-group">
|
||||
<h3
|
||||
id={`letter-${letter}-section`}
|
||||
className="glossary-letter-title"
|
||||
>
|
||||
{letter}
|
||||
</h3>
|
||||
<Container
|
||||
display="grid"
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
gap="md"
|
||||
>
|
||||
{entriesByLetter[letter].map((entry) => (
|
||||
<Container
|
||||
key={entry.id}
|
||||
id={`entry-${entry.id}`}
|
||||
className="glossary-card"
|
||||
>
|
||||
<Column gap="sm">
|
||||
<h4 className="glossary-word">{entry.word}</h4>
|
||||
<RenderHTML
|
||||
data={entry.word_definition}
|
||||
disableGlossary
|
||||
/>
|
||||
<Row justify="space-between" className="glossary-meta">
|
||||
<span>
|
||||
Erstellt:{" "}
|
||||
{new Date(entry.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
<Row gap="sm">
|
||||
<LinkButton
|
||||
href={`/admin/glossary/create?id=${entry.id}`}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Bearbeiten
|
||||
</LinkButton>
|
||||
<Button
|
||||
variant={
|
||||
confirmDelete === entry.id ? "danger" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
width="fit"
|
||||
onClick={() => handleDelete(entry.id)}
|
||||
disabled={deleting === entry.id}
|
||||
>
|
||||
{deleting === entry.id
|
||||
? "Löschen..."
|
||||
: confirmDelete === entry.id
|
||||
? "Bestätigen"
|
||||
: "Löschen"}
|
||||
</Button>
|
||||
</Row>
|
||||
</Row>
|
||||
</Column>
|
||||
</Container>
|
||||
))}
|
||||
</Container>
|
||||
<a href="#glossary-top" className="glossary-back-to-top">
|
||||
Zurück nach oben
|
||||
</a>
|
||||
</Container>
|
||||
))}
|
||||
</Container>
|
||||
|
||||
@@ -78,6 +78,22 @@
|
||||
.glossary-letter-title {
|
||||
margin: 0 0 var(--u-sm);
|
||||
font-size: 1.35rem;
|
||||
scroll-margin-top: 100px;
|
||||
}
|
||||
|
||||
.glossary-back-to-top {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--fg2);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
margin-top: var(--u-sm);
|
||||
}
|
||||
|
||||
.glossary-back-to-top:hover,
|
||||
.glossary-back-to-top:focus {
|
||||
color: var(--fg1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.glossary-word {
|
||||
@@ -86,6 +102,21 @@
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.glossary-word-link {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background-color 0.2s, padding 0.2s;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: -0.25rem -0.5rem;
|
||||
}
|
||||
|
||||
.glossary-word-link:hover,
|
||||
.glossary-word-link:focus {
|
||||
background-color: var(--bg4);
|
||||
}
|
||||
|
||||
|
||||
.glossary-definition {
|
||||
color: var(--fg2);
|
||||
margin: 0.5rem 0;
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function GlossaryPage() {
|
||||
return (
|
||||
<Column gap="md" width="100%">
|
||||
<Row justify="space-between" gap="xl" width="100%" align="center">
|
||||
<h2>Glossar</h2>
|
||||
<h2 id="glossary-top">Glossar</h2>
|
||||
</Row>
|
||||
|
||||
{letters.length > 0 && (
|
||||
@@ -114,6 +114,9 @@ export default function GlossaryPage() {
|
||||
</Container>
|
||||
))}
|
||||
</Container>
|
||||
<a href="#glossary-top" className="glossary-back-to-top">
|
||||
Zurück nach oben
|
||||
</a>
|
||||
</Container>
|
||||
))}
|
||||
</Container>
|
||||
|
||||
@@ -92,7 +92,7 @@ const getValue = (cssProp, value) => {
|
||||
return value;
|
||||
};
|
||||
|
||||
export const Container = memo(({ children, className, ...props }) => {
|
||||
export const Container = memo(({ children, className, id, ...props }) => {
|
||||
const mediaQueries = {};
|
||||
|
||||
const validLayoutPropsEntries = useMemo(
|
||||
@@ -159,7 +159,7 @@ export const Container = memo(({ children, className, ...props }) => {
|
||||
};
|
||||
}, [validLayoutPropsEntries]);
|
||||
return (
|
||||
<div style={style} className={className}>
|
||||
<div id={id} style={style} className={className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user