dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor fixes and changes

Browse Source
This commit is contained in:
Dayowe 2025-06-26 13:02:28 +02:00
parent d3872aef40
commit 9a9c0b9ad0
1 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
iframe.html
View File

@ -385,14 +385,38 @@
} }
.dog-calculator-input-group { .dog-calculator-input-group {
flex-direction: column; flex-direction: row;
gap: 20px; gap: 12px;
align-items: flex-end;
} }
.dog-calculator-input-group .dog-calculator-form-group { .dog-calculator-input-group .dog-calculator-form-group {
margin-bottom: 20px; margin-bottom: 0;
} }
/* First form group takes 55%, second takes 40% with some flex */
.dog-calculator-input-group .dog-calculator-form-group:first-child {
flex: 0 0 55%;
}
.dog-calculator-input-group .dog-calculator-form-group:last-child {
flex: 1 1 40%;
min-width: 100px;
}
/* Make sure number inputs don't get too wide */
.dog-calculator-input-group input[type="number"] {
max-width: 100%;
}
/* Ensure dropdowns don't overflow their containers */
.dog-calculator-input-group select {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.dog-calculator-result-item { .dog-calculator-result-item {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -1474,7 +1498,7 @@
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
font-family: inherit; font-family: inherit;
padding: 0.5rem; padding: 0.5rem 0;
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
outline: none; outline: none;
@ -1485,12 +1509,14 @@
.dog-calculator-food-source-name-input:hover { .dog-calculator-food-source-name-input:hover {
border-color: var(--border-color); border-color: var(--border-color);
background: var(--bg-secondary); background: var(--bg-secondary);
padding: 0.5rem;
} }
.dog-calculator-food-source-name-input:focus { .dog-calculator-food-source-name-input:focus {
border-color: var(--primary-color); border-color: var(--primary-color);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1); box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
padding: 0.5rem;
} }
.dog-calculator-food-source-name-input::placeholder { .dog-calculator-food-source-name-input::placeholder {
@ -1533,6 +1559,7 @@
.dog-calculator-food-source-name-input { .dog-calculator-food-source-name-input {
font-size: 1rem; font-size: 1rem;
} }
} }
</style> </style>
</head> </head>
@ -1601,7 +1628,7 @@
<!-- Add Food Source Button --> <!-- Add Food Source Button -->
<button class="dog-calculator-add-food-btn" id="addFoodBtn" type="button"> <button class="dog-calculator-add-food-btn" id="addFoodBtn" type="button">
<span>+</span> <span>+</span>
<span>Add another food source <span id="foodSourceCount">(up to 5 total)</span></span> <span>Add another food source</span>
</button> </button>
<!-- Per-Food Results --> <!-- Per-Food Results -->
@ -1620,14 +1647,13 @@
</div> </div>
<!-- Days and Total Food Calculation --> <!-- Days and Total Food Calculation -->
<div class="dog-calculator-form-group" style="margin-top: 20px;"> <div class="dog-calculator-input-group" style="margin-top: 20px;">
<div class="dog-calculator-form-group">
<label for="days">Number of Days:</label> <label for="days">Number of Days:</label>
<input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp"> <input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp">
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div> <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
</div> </div>
<div class="dog-calculator-form-group">
<div class="dog-calculator-input-group">
<div class="dog-calculator-form-group dog-calculator-full-width">
<label for="unit">Display Unit:</label> <label for="unit">Display Unit:</label>
<select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp"> <select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp">
<option value="g">grams (g)</option> <option value="g">grams (g)</option>
@ -2199,17 +2225,22 @@
updateAddButton() { updateAddButton() {
const addBtn = document.getElementById('addFoodBtn'); const addBtn = document.getElementById('addFoodBtn');
const countSpan = document.getElementById('foodSourceCount');
if (addBtn) { if (addBtn) {
const remaining = this.maxFoodSources - this.foodSources.length; const remaining = this.maxFoodSources - this.foodSources.length;
addBtn.disabled = remaining <= 0; const buttonText = addBtn.querySelector('span:last-child');
if (countSpan) { if (remaining <= 0) {
if (remaining > 0) { // Disable button and show max reached message
countSpan.textContent = `(${remaining} of ${this.maxFoodSources} remaining)`; addBtn.disabled = true;
if (buttonText) {
buttonText.textContent = `Maximum ${this.maxFoodSources} sources reached`;
}
} else { } else {
countSpan.textContent = `(maximum ${this.maxFoodSources} reached)`; // Enable button with normal text
addBtn.disabled = false;
if (buttonText) {
buttonText.textContent = 'Add another food source';
} }
} }
} }
@ -2228,7 +2259,7 @@
<div class="dog-calculator-input-group"> <div class="dog-calculator-input-group">
<div class="dog-calculator-form-group"> <div class="dog-calculator-form-group">
<label for="energy-${foodSource.id}">Food Energy Content:</label> <label for="energy-${foodSource.id}">Energy Content:</label>
<input type="number" id="energy-${foodSource.id}" min="1" step="1" placeholder="Enter energy content" value="${foodSource.energy}"> <input type="number" id="energy-${foodSource.id}" min="1" step="1" placeholder="Enter energy content" value="${foodSource.energy}">
<div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div> <div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
</div> </div>