Fixes
This commit is contained in:
Dayowe
parent
26d2b6b1db
commit
7b66f395bb
208
iframe.html
208
iframe.html
@ -498,6 +498,29 @@
|
|||||||
color: #b8b0c2;
|
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 {
|
.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%);
|
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
|
||||||
border-color: rgba(241, 154, 95, 0.3);
|
border-color: rgba(241, 154, 95, 0.3);
|
||||||
@ -605,6 +628,29 @@
|
|||||||
color: #b8b0c2;
|
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 {
|
.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%);
|
background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
|
||||||
border-color: rgba(241, 154, 95, 0.3);
|
border-color: rgba(241, 154, 95, 0.3);
|
||||||
@ -1474,6 +1520,108 @@
|
|||||||
cursor: help;
|
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 {
|
.dog-calculator-total-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -1556,13 +1704,28 @@
|
|||||||
/* Responsive adjustments */
|
/* Responsive adjustments */
|
||||||
@media (max-width: 576px) {
|
@media (max-width: 576px) {
|
||||||
.dog-calculator-food-amount-item {
|
.dog-calculator-food-amount-item {
|
||||||
flex-direction: column;
|
flex-direction: row !important;
|
||||||
gap: 0.5rem;
|
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 {
|
.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 {
|
.dog-calculator-food-source-name-input {
|
||||||
@ -1652,19 +1815,7 @@
|
|||||||
<div class="dog-calculator-result-item">
|
<div class="dog-calculator-result-item">
|
||||||
<span class="dog-calculator-result-label">Total Daily Amount:</span>
|
<span class="dog-calculator-result-label">Total Daily Amount:</span>
|
||||||
<span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
|
<span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
|
||||||
</div>
|
<select id="unit" class="dog-calculator-unit-select dog-calculator-inline-unit" aria-describedby="unitHelp">
|
||||||
</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">
|
|
||||||
<option value="g">grams (g)</option>
|
<option value="g">grams (g)</option>
|
||||||
<option value="kg">kilograms (kg)</option>
|
<option value="kg">kilograms (kg)</option>
|
||||||
<option value="oz">ounces (oz)</option>
|
<option value="oz">ounces (oz)</option>
|
||||||
@ -1674,7 +1825,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
|
<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">
|
<div id="foodAmountsList" class="dog-calculator-food-amounts-list">
|
||||||
<!-- Individual food amounts will be populated here -->
|
<!-- Individual food amounts will be populated here -->
|
||||||
</div>
|
</div>
|
||||||
@ -2502,7 +2658,10 @@
|
|||||||
if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => this.updateCalorieCalculations());
|
if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => this.updateCalorieCalculations());
|
||||||
|
|
||||||
if (daysInput) {
|
if (daysInput) {
|
||||||
daysInput.addEventListener('input', () => this.updateFoodCalculations());
|
daysInput.addEventListener('input', () => {
|
||||||
|
this.updateDayLabel();
|
||||||
|
this.updateFoodCalculations();
|
||||||
|
});
|
||||||
daysInput.addEventListener('blur', () => this.validateDays());
|
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() {
|
updateCalorieCalculations() {
|
||||||
const dogTypeSelect = document.getElementById('dogType');
|
const dogTypeSelect = document.getElementById('dogType');
|
||||||
const calorieResults = document.getElementById('calorieResults');
|
const calorieResults = document.getElementById('calorieResults');
|
||||||
@ -2784,6 +2952,8 @@
|
|||||||
|
|
||||||
const days = daysInput.value;
|
const days = daysInput.value;
|
||||||
const unit = unitSelect.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
|
// Clear all food source errors first
|
||||||
this.foodSources.forEach(fs => {
|
this.foodSources.forEach(fs => {
|
||||||
@ -2913,8 +3083,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Generate individual food amount breakdown
|
// 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
|
// Update daily food value with correct units
|
||||||
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user