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

feat(match-report): update MatchReportApiDialog with enhanced keyboard input and styling

Browse Source 
- Improved the floating keyboard layout by adding individual buttons for numbers 1-9, enhancing user interaction.
- Adjusted styles for the keyboard and input fields, including font size, padding, and grid layout, to improve usability.
- Ensured consistent styling for keyboard keys, enhancing the overall user experience during score entry.
This commit is contained in:
Torsten Schulz (local)
2026-02-26 16:36:13 +01:00
parent 83f4e1c45e
commit e5a0dfdddc
4 changed files with 198 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/MatchReportApiDialog.vue
View File

@@ -449,10 +449,23 @@
{{ editingSetValue || 'Satz z.B. 11:9' }}
</div>
<div class="set-keyboard-keys">
<button type="button" v-for="n in 9" :key="n" class="set-key" @click="setKeyboardKey(String(n))">{{ n }}</button>
<!-- 1 2 3 -->
<button type="button" class="set-key" @click="setKeyboardKey('1')">1</button>
<button type="button" class="set-key" @click="setKeyboardKey('2')">2</button>
<button type="button" class="set-key" @click="setKeyboardKey('3')">3</button>
<!-- 4 5 6 -->
<button type="button" class="set-key" @click="setKeyboardKey('4')">4</button>
<button type="button" class="set-key" @click="setKeyboardKey('5')">5</button>
<button type="button" class="set-key" @click="setKeyboardKey('6')">6</button>
<!-- 7 8 9 -->
<button type="button" class="set-key" @click="setKeyboardKey('7')">7</button>
<button type="button" class="set-key" @click="setKeyboardKey('8')">8</button>
<button type="button" class="set-key" @click="setKeyboardKey('9')">9</button>
<!-- : 0 - -->
<button type="button" class="set-key" @click="setKeyboardKey(':')">:</button>
<button type="button" class="set-key" @click="setKeyboardKey('0')">0</button>
<button type="button" class="set-key" @click="setKeyboardKey('-')">−</button>
<!-- <- OK -->
<button type="button" class="set-key set-key-backspace" @click="setKeyboardBackspace">⌫</button>
<button type="button" class="set-key set-key-ok" @click="setKeyboardOk">OK</button>
</div>
@@ -3914,22 +3927,22 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
}
.set-keyboard-value {
text-align: center;
font-size: 1.25rem;
font-size: 1.1rem;
font-family: monospace;
padding: 10px 12px;
margin-bottom: 10px;
padding: 4px 10px;
margin-bottom: 6px;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
min-height: 44px;
line-height: 1.4;
min-height: 24px;
line-height: 1.3;
}
.set-keyboard-value.placeholder {
color: #999;
}
.set-keyboard-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.set-key {
@@ -3938,6 +3951,7 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
border: 1px solid #bbb;
border-radius: 8px;
background: #fff;
color: #333;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;