Add remaining files (with AI taint)
This commit is contained in:
parent
a611362ad8
commit
b8660d3200
GPG Key ID:
3EF2BA2851B3F53C
27
karaokatalog/ui/static/components/pieces/ClearSearchLink.js
Normal file
27
karaokatalog/ui/static/components/pieces/ClearSearchLink.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/* TODO: TAINT: AI-generated. This file was AI-generated (Gemini and/or Cursor), and I haven't manually reviewed it yet.
|
||||||
|
I should do this at some point in the future and change things I don't like. */
|
||||||
|
import search from "../../model/search.js"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
view: function (vnode) {
|
||||||
|
return ["Möchtest du ", m(
|
||||||
|
"a.clear-search-link",
|
||||||
|
{
|
||||||
|
onclick: e => {
|
||||||
|
e.preventDefault()
|
||||||
|
search.query = null
|
||||||
|
},
|
||||||
|
href: "#",
|
||||||
|
role: "button",
|
||||||
|
tabindex: 0,
|
||||||
|
onkeypress: e => {
|
||||||
|
if ((e.key === "Enter" || e.key === " ")) {
|
||||||
|
e.preventDefault()
|
||||||
|
search.query = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
`alle ${vnode.attrs.totalFavoriteCount} Favoriten anzeigen`,
|
||||||
|
), "?"]
|
||||||
|
},
|
||||||
|
}
|
||||||
122
karaokatalog/ui/static/components/pieces/PaginationControls.js
Normal file
122
karaokatalog/ui/static/components/pieces/PaginationControls.js
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
/* TODO: TAINT: AI-generated. This file was AI-generated (Gemini and/or Cursor), and I haven't manually reviewed it yet.
|
||||||
|
I should do this at some point in the future and change things I don't like. */
|
||||||
|
const PaginationControls = {
|
||||||
|
view: function (vnode) {
|
||||||
|
const { currentPage, totalPages, onPageChange } = vnode.attrs
|
||||||
|
|
||||||
|
if (totalPages <= 1) {
|
||||||
|
return null // Keine Steuerelemente anzeigen, wenn nicht benötigt
|
||||||
|
}
|
||||||
|
|
||||||
|
const pages = []
|
||||||
|
const delta = 2 // Anzahl der Seiten, die um die aktuelle Seite herum angezeigt werden
|
||||||
|
|
||||||
|
// Hilfsfunktion zum Hinzufügen einer Seitenzahl
|
||||||
|
const addPage = pageNumber => {
|
||||||
|
pages.push(
|
||||||
|
m(
|
||||||
|
"span.page-number",
|
||||||
|
{
|
||||||
|
class:
|
||||||
|
pageNumber === currentPage ? "active" : "clickable",
|
||||||
|
onclick: () =>
|
||||||
|
pageNumber !== currentPage
|
||||||
|
? onPageChange(pageNumber)
|
||||||
|
: null,
|
||||||
|
role: "button",
|
||||||
|
tabindex: 0, // Für Tastaturnavigation
|
||||||
|
onkeypress: e => {
|
||||||
|
// Für Tastaturnavigation (Enter/Space)
|
||||||
|
if (
|
||||||
|
(e.key === "Enter" || e.key === " ") &&
|
||||||
|
pageNumber !== currentPage
|
||||||
|
) {
|
||||||
|
e.preventDefault()
|
||||||
|
onPageChange(pageNumber)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"aria-label": `Gehe zu Seite ${pageNumber}`,
|
||||||
|
"aria-current":
|
||||||
|
pageNumber === currentPage ? "page" : undefined,
|
||||||
|
},
|
||||||
|
pageNumber,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// "Zurück"-Button
|
||||||
|
const prevButton = m(
|
||||||
|
"button.pagination-button",
|
||||||
|
{
|
||||||
|
onclick: () => onPageChange(currentPage - 1),
|
||||||
|
disabled: currentPage === 1,
|
||||||
|
"aria-label": "Vorherige Seite",
|
||||||
|
},
|
||||||
|
"Zurück",
|
||||||
|
)
|
||||||
|
|
||||||
|
// "Weiter"-Button
|
||||||
|
const nextButton = m(
|
||||||
|
"button.pagination-button",
|
||||||
|
{
|
||||||
|
onclick: () => onPageChange(currentPage + 1),
|
||||||
|
disabled: currentPage === totalPages,
|
||||||
|
"aria-label": "Nächste Seite",
|
||||||
|
},
|
||||||
|
"Weiter",
|
||||||
|
)
|
||||||
|
|
||||||
|
// Logik zur Seitenzahlanzeige
|
||||||
|
if (totalPages <= 7) {
|
||||||
|
// Alle Seiten anzeigen, wenn es 7 oder weniger sind
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
addPage(i)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
addPage(1) // Immer die erste Seite anzeigen
|
||||||
|
|
||||||
|
if (currentPage > delta + 2) {
|
||||||
|
// Auslassungspunkte anzeigen, wenn die aktuelle Seite weit vom Anfang entfernt ist
|
||||||
|
pages.push(m("span.dots", "..."))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bereich der Seiten um die aktuelle Seite bestimmen
|
||||||
|
let start = Math.max(2, currentPage - delta)
|
||||||
|
let end = Math.min(totalPages - 1, currentPage + delta)
|
||||||
|
|
||||||
|
if (currentPage <= delta + 1) {
|
||||||
|
// Aktuelle Seite ist nahe am Anfang
|
||||||
|
start = 2
|
||||||
|
end = Math.min(totalPages - 1, 2 * delta + 1)
|
||||||
|
} else if (currentPage >= totalPages - delta) {
|
||||||
|
// Aktuelle Seite ist nahe am Ende
|
||||||
|
start = Math.max(2, totalPages - 2 * delta)
|
||||||
|
end = totalPages - 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Korrektur für den Fall, dass start und end sich überschneiden oder ungültig werden
|
||||||
|
if (start > end && currentPage < totalPages / 2) {
|
||||||
|
// Wenn start > end und wir sind eher am Anfang
|
||||||
|
end = start // Zeige zumindest die Startseite
|
||||||
|
} else if (start > end && currentPage > totalPages / 2) {
|
||||||
|
// Wenn start > end und wir sind eher am Ende
|
||||||
|
start = end // Zeige zumindest die Endseite
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
if (i > 0) addPage(i) // Sicherstellen, dass i positiv ist
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPage < totalPages - delta - 1 && end < totalPages - 1) {
|
||||||
|
// Auslassungspunkte anzeigen, wenn die aktuelle Seite weit vom Ende entfernt ist
|
||||||
|
pages.push(m("span.dots", "..."))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (totalPages > 1) addPage(totalPages) // Immer die letzte Seite anzeigen (wenn nicht 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
return m("div.pagination-controls", [prevButton, ...pages, nextButton])
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PaginationControls
|
||||||
16
karaokatalog/ui/static/components/pieces/Tab.js
Normal file
16
karaokatalog/ui/static/components/pieces/Tab.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/* TODO: TAINT: AI-generated. This file was AI-generated (Gemini and/or Cursor), and I haven't manually reviewed it yet.
|
||||||
|
I should do this at some point in the future and change things I don't like. */
|
||||||
|
export const Tab = {
|
||||||
|
view(vnode) {
|
||||||
|
return m(
|
||||||
|
m.route.Link,
|
||||||
|
{
|
||||||
|
class: m.route.get() === vnode.attrs.href ? "active" : "",
|
||||||
|
href: vnode.attrs.href,
|
||||||
|
role: "button", // Für Barrierefreiheit
|
||||||
|
tabindex: 0, // Für Tastaturnavigation
|
||||||
|
},
|
||||||
|
vnode.attrs.label,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
275
karaokatalog/ui/static/style.css
Normal file
275
karaokatalog/ui/static/style.css
Normal file
@ -0,0 +1,275 @@
|
|||||||
|
/* TODO: TAINT: AI-generated. This file was AI-generated (Gemini and/or Cursor), and I haven't manually reviewed it yet.
|
||||||
|
I should do this at some point in the future and change things I don't like. */
|
||||||
|
|
||||||
|
/* Globale Resets und Basis-Styling (wie vorher) */
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
background-color: #f4f4f9;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > p {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: #757575;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Suchleiste (Höhe ca. 60px) */
|
||||||
|
search {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #3f51b5; /* Indigo - Material Primary */
|
||||||
|
padding: 12px 16px;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
box-sizing: border-box; /* Stellt sicher, dass Padding die Höhe nicht sprengt */
|
||||||
|
height: 60px; /* Feste Höhe für genaue Positionierung */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"]::placeholder {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tab Bar (Höhe ca. 48px) */
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
top: 60px; /* Direkt unter der Suchleiste */
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #3f51b5; /* Gleiche Farbe wie Suchleiste für einen einheitlichen Header-Block */
|
||||||
|
z-index: 999; /* Unter der Suchleiste, falls sie überlappen könnten */
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Dezenter Schatten */
|
||||||
|
height: 48px; /* Feste Höhe */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex; /* Für vertikales Zentrieren des Texts */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 8px; /* Horizontal Padding */
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(
|
||||||
|
255,
|
||||||
|
255,
|
||||||
|
255,
|
||||||
|
0.75
|
||||||
|
); /* Etwas helleres, aber gedämpftes Weiß für inaktive Tabs */
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9em; /* Leicht kleiner als Haupttext */
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 3px solid transparent; /* Platzhalter für den aktiven Indikator */
|
||||||
|
transition:
|
||||||
|
color 0.2s ease-in-out,
|
||||||
|
border-bottom-color 0.2s ease-in-out;
|
||||||
|
user-select: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1); /* Leichter Hover-Effekt */
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.active {
|
||||||
|
color: #ffffff; /* Reines Weiß für aktiven Tab */
|
||||||
|
border-bottom-color: #ff4081; /* Material Accent Pink für den Indikator */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* song .Liste Container */
|
||||||
|
main {
|
||||||
|
padding-top: calc(60px + 48px); /* Höhe Suchleiste + Höhe TabBar */
|
||||||
|
padding-bottom: 20px; /* Platz für Paginierung, falls am Ende */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Link zum Zurücksetzen der Suche in der main > p */
|
||||||
|
main > p a.clear-search-link,
|
||||||
|
main > p .clear-search-link {
|
||||||
|
/* Zweite Regel für den Fall, dass Mithril das 'a' nicht direkt rendert */
|
||||||
|
color: #3f51b5; /* Material Indigo, passend zum Header */
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500; /* Etwas hervorheben */
|
||||||
|
background: none; /* Sicherstellen, dass keine Button-Styles übernommen werden */
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
display: inline; /* Damit es sich wie ein normaler Link im Text verhält */
|
||||||
|
}
|
||||||
|
|
||||||
|
main > p a.clear-search-link:hover,
|
||||||
|
main > p a.clear-search-link:focus,
|
||||||
|
main > p .clear-search-link:hover,
|
||||||
|
main > p .clear-search-link:focus {
|
||||||
|
color: #303f9f; /* Dunkleres Indigo für Hover/Focus */
|
||||||
|
text-decoration: none; /* Optional: Unterstreichung bei Hover entfernen */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Restliche Styles für Artist-Group, song .Item etc. bleiben wie zuvor */
|
||||||
|
section.artist {
|
||||||
|
margin: 12px 8px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.artist > h2 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background-color: #e8eaf6;
|
||||||
|
color: #303f9f;
|
||||||
|
font-size: 1.1em;
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom: 1px solid #c5cae9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
transition: background-color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song .info {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-right: 8px; /* Abstand zum Icon */
|
||||||
|
overflow: hidden; /* Verhindert Textüberlauf */
|
||||||
|
}
|
||||||
|
|
||||||
|
.song .title {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #212121;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis; /* Text abschneiden bei Überlauf */
|
||||||
|
}
|
||||||
|
|
||||||
|
.song .artist {
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #757575;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song .actions {
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #bdbdbd;
|
||||||
|
font-size: 24px;
|
||||||
|
user-select: none;
|
||||||
|
transition:
|
||||||
|
color 0.2s ease-in-out,
|
||||||
|
transform 0.1s ease-out;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-icon:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart-icon.is-favorite {
|
||||||
|
color: #ff4081;
|
||||||
|
font-variation-settings: "FILL" 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings:
|
||||||
|
"FILL" 0,
|
||||||
|
"wght" 400,
|
||||||
|
"GRAD" 0,
|
||||||
|
"opsz" 24;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NEU: Pagination Controls Styles */
|
||||||
|
.pagination-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 0; /* Mehr Padding für bessere Sichtbarkeit */
|
||||||
|
margin-top: 10px;
|
||||||
|
user-select: none;
|
||||||
|
flex-wrap: wrap; /* Erlaubt Umbruch bei vielen Seitenzahlen auf kleinen Bildschirmen */
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls button.pagination-button, /* Klasse für Buttons hinzugefügt */
|
||||||
|
.pagination-controls span.page-number {
|
||||||
|
margin: 4px; /* Etwas mehr Margin für Umbruch */
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #3f51b5; /* Material Indigo */
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition:
|
||||||
|
background-color 0.2s,
|
||||||
|
color 0.2s,
|
||||||
|
border-color 0.2s;
|
||||||
|
font-size: 0.9em;
|
||||||
|
min-width: 36px; /* Mindestbreite für bessere Klickbarkeit */
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls button.pagination-button:hover:not(:disabled),
|
||||||
|
.pagination-controls span.page-number.clickable:hover {
|
||||||
|
background-color: #e8eaf6; /* Heller Indigo-Ton für Hover */
|
||||||
|
border-color: #c5cae9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls button.pagination-button:disabled {
|
||||||
|
color: #aaa;
|
||||||
|
cursor: not-allowed;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls span.page-number.active {
|
||||||
|
background-color: #3f51b5;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #3f51b5;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls span.dots {
|
||||||
|
padding: 8px 6px;
|
||||||
|
color: #777;
|
||||||
|
margin: 4px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user