Minor fixes and changes
This commit is contained in:
Dayowe
parent
d3872aef40
commit
9a9c0b9ad0
73
iframe.html
73
iframe.html
@ -385,14 +385,38 @@
|
||||
}
|
||||
|
||||
.dog-calculator-input-group {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@ -1474,7 +1498,7 @@
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
@ -1485,12 +1509,14 @@
|
||||
.dog-calculator-food-source-name-input:hover {
|
||||
border-color: var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.dog-calculator-food-source-name-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--bg-primary);
|
||||
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.dog-calculator-food-source-name-input::placeholder {
|
||||
@ -1533,6 +1559,7 @@
|
||||
.dog-calculator-food-source-name-input {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -1601,7 +1628,7 @@
|
||||
<!-- Add Food Source Button -->
|
||||
<button class="dog-calculator-add-food-btn" id="addFoodBtn" type="button">
|
||||
<span>+</span>
|
||||
<span>Add another food source <span id="foodSourceCount">(up to 5 total)</span></span>
|
||||
<span>Add another food source</span>
|
||||
</button>
|
||||
|
||||
<!-- Per-Food Results -->
|
||||
@ -1620,14 +1647,13 @@
|
||||
</div>
|
||||
|
||||
<!-- Days and Total Food Calculation -->
|
||||
<div class="dog-calculator-form-group" style="margin-top: 20px;">
|
||||
<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">
|
||||
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-input-group">
|
||||
<div class="dog-calculator-form-group dog-calculator-full-width">
|
||||
<div class="dog-calculator-input-group" style="margin-top: 20px;">
|
||||
<div class="dog-calculator-form-group">
|
||||
<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">
|
||||
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||
</div>
|
||||
<div class="dog-calculator-form-group">
|
||||
<label for="unit">Display Unit:</label>
|
||||
<select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp">
|
||||
<option value="g">grams (g)</option>
|
||||
@ -2199,17 +2225,22 @@
|
||||
|
||||
updateAddButton() {
|
||||
const addBtn = document.getElementById('addFoodBtn');
|
||||
const countSpan = document.getElementById('foodSourceCount');
|
||||
|
||||
if (addBtn) {
|
||||
const remaining = this.maxFoodSources - this.foodSources.length;
|
||||
addBtn.disabled = remaining <= 0;
|
||||
const buttonText = addBtn.querySelector('span:last-child');
|
||||
|
||||
if (countSpan) {
|
||||
if (remaining > 0) {
|
||||
countSpan.textContent = `(${remaining} of ${this.maxFoodSources} remaining)`;
|
||||
} else {
|
||||
countSpan.textContent = `(maximum ${this.maxFoodSources} reached)`;
|
||||
if (remaining <= 0) {
|
||||
// Disable button and show max reached message
|
||||
addBtn.disabled = true;
|
||||
if (buttonText) {
|
||||
buttonText.textContent = `Maximum ${this.maxFoodSources} sources reached`;
|
||||
}
|
||||
} else {
|
||||
// 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-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}">
|
||||
<div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user