Fixes
This commit is contained in:
Dayowe
parent
26d2b6b1db
commit
7b66f395bb
208
iframe.html
208
iframe.html
@ -497,6 +497,29 @@
|
||||
background-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-inline-unit {
|
||||
background-color: #312b3b;
|
||||
border-color: rgba(241, 154, 95, 0.5);
|
||||
color: #f5f3f7;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-inline-unit:hover {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 2px 6px rgba(241, 154, 95, 0.3);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-inline-unit:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-inline-unit option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-results {
|
||||
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
|
||||
@ -604,6 +627,29 @@
|
||||
background-color: #433c4f;
|
||||
color: #b8b0c2;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-inline-unit {
|
||||
background-color: #312b3b;
|
||||
border-color: rgba(241, 154, 95, 0.5);
|
||||
color: #f5f3f7;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-inline-unit:hover {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 2px 6px rgba(241, 154, 95, 0.3);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-inline-unit:focus {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.15);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-inline-unit option {
|
||||
background-color: #312b3b;
|
||||
color: #f5f3f7;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-results {
|
||||
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
|
||||
@ -1474,6 +1520,108 @@
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Inline unit selector in results */
|
||||
.dog-calculator-inline-unit {
|
||||
margin-left: 12px;
|
||||
min-width: 110px;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid rgba(241, 154, 95, 0.4);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f3f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.dog-calculator-inline-unit:hover {
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 2px 6px rgba(241, 154, 95, 0.2);
|
||||
}
|
||||
|
||||
.dog-calculator-inline-unit:focus {
|
||||
outline: none;
|
||||
border-color: #f19a5f;
|
||||
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
|
||||
}
|
||||
|
||||
/* Inline days input in breakdown header */
|
||||
.dog-calculator-inline-days {
|
||||
width: 60px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments for inline unit selector */
|
||||
@media (max-width: 576px) {
|
||||
.dog-calculator-result-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dog-calculator-result-label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dog-calculator-result-value {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dog-calculator-inline-unit {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
min-width: 90px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Center the breakdown header on mobile */
|
||||
.dog-calculator-section-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Ensure food breakdown items stay on one line */
|
||||
.dog-calculator-food-amount-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-value {
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.dog-calculator-total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -1556,13 +1704,28 @@
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 576px) {
|
||||
.dog-calculator-food-amount-item {
|
||||
flex-direction: column;
|
||||
flex-direction: row !important;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
text-align: left !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-label {
|
||||
justify-content: center;
|
||||
justify-content: flex-start !important;
|
||||
text-align: left !important;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dog-calculator-food-amount-value {
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.dog-calculator-food-source-name-input {
|
||||
@ -1652,19 +1815,7 @@
|
||||
<div class="dog-calculator-result-item">
|
||||
<span class="dog-calculator-result-label">Total Daily Amount:</span>
|
||||
<span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Days and Total Food Calculation -->
|
||||
<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">
|
||||
<select id="unit" class="dog-calculator-unit-select dog-calculator-inline-unit" aria-describedby="unitHelp">
|
||||
<option value="g">grams (g)</option>
|
||||
<option value="kg">kilograms (kg)</option>
|
||||
<option value="oz">ounces (oz)</option>
|
||||
@ -1674,7 +1825,12 @@
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
||||
<h4 class="dog-calculator-section-title">Food Amount Breakdown:</h4>
|
||||
<h4 class="dog-calculator-section-title">
|
||||
Calculate amounts for
|
||||
<input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days">
|
||||
<span id="dayLabel">day</span>:
|
||||
</h4>
|
||||
<div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
|
||||
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||
<!-- Individual food amounts will be populated here -->
|
||||
</div>
|
||||
@ -2502,7 +2658,10 @@
|
||||
if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => this.updateCalorieCalculations());
|
||||
|
||||
if (daysInput) {
|
||||
daysInput.addEventListener('input', () => this.updateFoodCalculations());
|
||||
daysInput.addEventListener('input', () => {
|
||||
this.updateDayLabel();
|
||||
this.updateFoodCalculations();
|
||||
});
|
||||
daysInput.addEventListener('blur', () => this.validateDays());
|
||||
}
|
||||
|
||||
@ -2723,6 +2882,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
updateDayLabel() {
|
||||
const days = document.getElementById('days')?.value;
|
||||
const dayLabel = document.getElementById('dayLabel');
|
||||
if (dayLabel && days) {
|
||||
const numDays = parseInt(days);
|
||||
dayLabel.textContent = numDays === 1 ? 'day' : 'days';
|
||||
}
|
||||
}
|
||||
|
||||
updateCalorieCalculations() {
|
||||
const dogTypeSelect = document.getElementById('dogType');
|
||||
const calorieResults = document.getElementById('calorieResults');
|
||||
@ -2784,6 +2952,8 @@
|
||||
|
||||
const days = daysInput.value;
|
||||
const unit = unitSelect.value;
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
||||
|
||||
// Clear all food source errors first
|
||||
this.foodSources.forEach(fs => {
|
||||
@ -2913,8 +3083,6 @@
|
||||
}
|
||||
|
||||
// Generate individual food amount breakdown
|
||||
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
||||
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
||||
|
||||
// Update daily food value with correct units
|
||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user