elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix: Tankstände im Logbuch einheitlich ausrichten und formatieren.

Browse Source 
Kürzere Labels, gemeinsames Input-Styling ohne cell-input und CSS-Grid-Fix für Frischwasser- und Kraftstoff-Felder.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-05-29 16:05:53 +02:00
co-authored by Cursor
parent 56af7a3c60
commit cb96343d8c
2 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+35
View File
@@ -1891,6 +1891,41 @@ body:has(.theme-cupertino) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: end;
}
.consumption-grid .input-group {
display: flex;
flex-direction: column;
height: 100%;
}
.consumption-grid .input-group label {
flex: 1 1 auto;
min-height: 2.75em;
display: flex;
align-items: flex-end;
margin-bottom: 8px;
line-height: 1.35;
}
.consumption-grid .input-group .input-text {
flex-shrink: 0;
-moz-appearance: textfield;
}
.consumption-grid .input-text::-webkit-outer-spin-button,
.consumption-grid .input-text::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.consumption-grid .consumption-value {
color: #4ade80;
font-weight: 700;
text-align: center;
pointer-events: none;
cursor: default;
}
@media (max-width: 480px) {
client/src/components/LogEntryEditor.tsx
+16 -14
View File
@@ -764,7 +764,7 @@ export default function LogEntryEditor({
</div>
<div className="consumption-grid">
<div className="input-group">
<label>{t('logs.freshwater')} ({t('logs.morning')})</label>
<label>{t('logs.morning')}</label>
<input
type="number"
className="input-text"
@@ -775,7 +775,7 @@ export default function LogEntryEditor({
</div>
<div className="input-group">
<label>{t('logs.freshwater')} ({t('logs.refilled')})</label>
<label>{t('logs.refilled')}</label>
<input
type="number"
className="input-text"
@@ -786,7 +786,7 @@ export default function LogEntryEditor({
</div>
<div className="input-group">
<label>{t('logs.freshwater')} ({t('logs.evening')})</label>
<label>{t('logs.evening')}</label>
<input
type="number"
className="input-text"
@@ -799,11 +799,12 @@ export default function LogEntryEditor({
<div className="input-group">
<label>{t('logs.consumption')} (L)</label>
<input
type="text"
className="input-text cell-input text-green"
style={{ color: '#4ade80', fontWeight: 'bold' }}
type="number"
className="input-text consumption-value"
value={fwConsumption}
disabled
readOnly
tabIndex={-1}
aria-readonly="true"
/>
</div>
</div>
@@ -817,7 +818,7 @@ export default function LogEntryEditor({
</div>
<div className="consumption-grid">
<div className="input-group">
<label>{t('logs.fuel')} ({t('logs.morning')})</label>
<label>{t('logs.morning')}</label>
<input
type="number"
className="input-text"
@@ -828,7 +829,7 @@ export default function LogEntryEditor({
</div>
<div className="input-group">
<label>{t('logs.fuel')} ({t('logs.refilled')})</label>
<label>{t('logs.refilled')}</label>
<input
type="number"
className="input-text"
@@ -839,7 +840,7 @@ export default function LogEntryEditor({
</div>
<div className="input-group">
<label>{t('logs.fuel')} ({t('logs.evening')})</label>
<label>{t('logs.evening')}</label>
<input
type="number"
className="input-text"
@@ -852,11 +853,12 @@ export default function LogEntryEditor({
<div className="input-group">
<label>{t('logs.consumption')} (L)</label>
<input
type="text"
className="input-text cell-input text-green"
style={{ color: '#4ade80', fontWeight: 'bold' }}
type="number"
className="input-text consumption-value"
value={fuelConsumption}
disabled
readOnly
tabIndex={-1}
aria-readonly="true"
/>
</div>
</div>