torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles and enhance clipboard functionality in ScheduleView

Browse Source 
Modified main.scss to adjust table header styles, changing font weight to 600 and text transformation to uppercase for improved readability. In ScheduleView.vue, updated clipboard copy functionality to provide user feedback with a visual confirmation when copying codes and PINs, enhancing user experience. The feedback mechanism now includes style changes for better visibility and a reset after a brief display period.
This commit is contained in:
Torsten Schulz (local)
2025-10-24 15:56:59 +02:00
parent 67f4f728fe
commit c18b70c6f6
2 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/assets/css/main.scss
View File

@@ -369,8 +369,8 @@ th, td {
th {
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
color: white;
font-weight: 700;
text-transform: none;
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.4px;
}

54
frontend/src/views/ScheduleView.vue
View File

@@ -82,25 +82,25 @@
{{ match.leagueDetails?.name || 'N/A' }}</td>
<td class="code-cell">
<span v-if="match.code && selectedLeague && selectedLeague !== ''">
<button @click="openMatchReport(match)" class="nuscore-link"
<button @click.stop="openMatchReport(match)" class="nuscore-link"
title="Spielberichtsbogen öffnen">📊</button>
<span class="code-value clickable" @click="copyToClipboard(match.code, 'Code')"
<span class="code-value clickable" @click.stop="copyToClipboard(match.code, 'Code', $event)"
:title="'Code kopieren: ' + match.code">{{ match.code }}</span>
</span>
<span v-else-if="match.code" class="code-value clickable"
@click="copyToClipboard(match.code, 'Code')"
@click.stop="copyToClipboard(match.code, 'Code', $event)"
:title="'Code kopieren: ' + match.code">{{ match.code }}</span>
<span v-else class="no-data">-</span>
</td>
<td class="pin-cell">
<span v-if="match.homePin" class="pin-value clickable"
@click="copyToClipboard(match.homePin, 'Heim-PIN')"
@click.stop="copyToClipboard(match.homePin, 'Heim-PIN', $event)"
:title="'Heim-PIN kopieren: ' + match.homePin">{{ match.homePin }}</span>
<span v-else class="no-data">-</span>
</td>
<td class="pin-cell">
<span v-if="match.guestPin" class="pin-value clickable"
@click="copyToClipboard(match.guestPin, 'Gast-PIN')"
@click.stop="copyToClipboard(match.guestPin, 'Gast-PIN', $event)"
:title="'Gast-PIN kopieren: ' + match.guestPin">{{ match.guestPin }}</span>
<span v-else class="no-data">-</span>
</td>
@@ -698,19 +698,11 @@ export default {
return ''; // Keine besondere Farbe
},
async copyToClipboard(text, type) {
async copyToClipboard(text, type, event) {
try {
await navigator.clipboard.writeText(text);
// Zeige eine kurze Bestätigung
const originalText = event.target.textContent;
event.target.textContent = '✓';
event.target.style.color = '#4CAF50';
setTimeout(() => {
event.target.textContent = originalText;
event.target.style.color = '';
}, 1000);
this.showCopyFeedback(event.target, text);
} catch (err) {
console.error('Fehler beim Kopieren:', err);
// Fallback für ältere Browser
@@ -720,8 +712,40 @@ export default {
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// Auch für Fallback eine Bestätigung zeigen
this.showCopyFeedback(event.target, text);
}
},
showCopyFeedback(element, originalText) {
// Speichere die ursprünglichen Styles
const originalStyles = {
textContent: element.textContent,
color: element.style.color,
backgroundColor: element.style.backgroundColor,
borderColor: element.style.borderColor,
fontWeight: element.style.fontWeight
};
// Ändere das Element zu einem grünen Häkchen
element.textContent = '✓';
element.style.color = '#4CAF50';
element.style.backgroundColor = '#e8f5e8';
element.style.borderColor = '#4CAF50';
element.style.fontWeight = 'bold';
element.style.fontSize = '1.2em';
// Nach 1.5 Sekunden zurücksetzen
setTimeout(() => {
element.textContent = originalStyles.textContent;
element.style.color = originalStyles.color;
element.style.backgroundColor = originalStyles.backgroundColor;
element.style.borderColor = originalStyles.borderColor;
element.style.fontWeight = originalStyles.fontWeight;
element.style.fontSize = '';
}, 1500);
},
openMatchReport(match) {
const title = `${match.homeTeam?.name || 'N/A'} vs ${match.guestTeam?.name || 'N/A'} - ${this.selectedLeague}`;