servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

fixes to mandatory addon display

Browse source
This commit is contained in:
Tobias Brunner 2025-07-16 11:38:49 +02:00
parent 27c41a6187
commit d3e0fdd941
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
3 changed files with 15 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

9
hub/services/static/css/price-calculator.css
View file

@ -66,4 +66,13 @@
.btn-success.shadow:hover { .btn-success.shadow:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.2) !important; box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.2) !important;
}
/* Ensure collapse starts properly hidden */
#managedServiceIncludes {
transition: all 0.35s ease;
}
#managedServiceIncludes:not(.show) {
display: none;
} }

10
hub/services/static/js/price-calculator/ui-manager.js
View file

@ -87,20 +87,16 @@ class UIManager {
updateAddonPricingDisplay(domManager, mandatoryAddons, selectedOptionalAddons) { updateAddonPricingDisplay(domManager, mandatoryAddons, selectedOptionalAddons) {
// Get references to the managed service includes elements // Get references to the managed service includes elements
const managedServiceIncludesContainer = domManager.get('managedServiceIncludesContainer'); const managedServiceIncludesContainer = domManager.get('managedServiceIncludesContainer');
const managedServiceIncludes = domManager.get('managedServiceIncludes');
const managedServiceToggleButton = domManager.get('managedServiceToggleButton'); const managedServiceToggleButton = domManager.get('managedServiceToggleButton');
if (managedServiceIncludesContainer) { if (managedServiceIncludesContainer) {
// Clear existing content // Clear existing content
managedServiceIncludesContainer.innerHTML = ''; managedServiceIncludesContainer.innerHTML = '';
// Show/hide the entire managed service includes section based on mandatory addons // Show/hide the toggle button based on mandatory addons
const hasMandatoryAddons = mandatoryAddons && mandatoryAddons.length > 0; const hasMandatoryAddons = mandatoryAddons && mandatoryAddons.length > 0;
if (managedServiceIncludes) { // Only control button visibility - let Bootstrap handle collapse behavior completely
managedServiceIncludes.style.display = hasMandatoryAddons ? 'block' : 'none';
}
if (managedServiceToggleButton) { if (managedServiceToggleButton) {
managedServiceToggleButton.style.display = hasMandatoryAddons ? 'inline-block' : 'none'; managedServiceToggleButton.style.display = hasMandatoryAddons ? 'inline-block' : 'none';
} }
@ -111,7 +107,7 @@ class UIManager {
const addonRow = document.createElement('div'); const addonRow = document.createElement('div');
addonRow.className = 'd-flex justify-content-between small text-muted mb-1'; addonRow.className = 'd-flex justify-content-between small text-muted mb-1';
addonRow.innerHTML = ` addonRow.innerHTML = `
<span><i class="bi bi-check-circle text-success me-1"></i>${addon.name}</span> <span>Add-on: ${addon.name}</span>
<span>CHF ${addon.price}</span> <span>CHF ${addon.price}</span>
`; `;
managedServiceIncludesContainer.appendChild(addonRow); managedServiceIncludesContainer.appendChild(addonRow);

12
hub/services/templates/services/offering_detail.html
View file

@ -9,7 +9,6 @@
{% block extra_js %} {% block extra_js %}
{% if debug %} {% if debug %}
<!-- Development: Load individual modules for easier debugging --> <!-- Development: Load individual modules for easier debugging -->
{% compress js inline %}
<script src="{% static 'js/price-calculator/dom-manager.js' %}"></script> <script src="{% static 'js/price-calculator/dom-manager.js' %}"></script>
<script src="{% static 'js/price-calculator/pricing-data-manager.js' %}"></script> <script src="{% static 'js/price-calculator/pricing-data-manager.js' %}"></script>
<script src="{% static 'js/price-calculator/plan-manager.js' %}"></script> <script src="{% static 'js/price-calculator/plan-manager.js' %}"></script>
@ -51,7 +50,6 @@ function selectPlan(element) {
} }
} }
</script> </script>
{% endcompress %}
{% else %} {% else %}
<!-- Production: Load compressed bundle --> <!-- Production: Load compressed bundle -->
{% compress js %} {% compress js %}
@ -444,7 +442,7 @@ function selectPlan(element) {
<div class="d-flex justify-content-between align-items-center mb-2"> <div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<span>Managed Service (incl. Compute)</span> <span>Managed Service (incl. Compute)</span>
<button class="btn btn-link btn-sm p-0 ms-2 text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#managedServiceIncludes" aria-expanded="false" aria-controls="managedServiceIncludes" title="Show what's included" style="display: none;"> <button class="btn btn-link btn-sm p-0 ms-2 text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#managedServiceIncludes" aria-expanded="false" aria-controls="managedServiceIncludes" title="Show included mandatory add-ons" style="display: none;">
<i class="bi bi-info-circle" id="managedServiceToggleIcon"></i> <i class="bi bi-info-circle" id="managedServiceToggleIcon"></i>
</button> </button>
</div> </div>
@ -452,12 +450,8 @@ function selectPlan(element) {
</div> </div>
<!-- What's included in managed service (collapsible) --> <!-- What's included in managed service (collapsible) -->
<div class="collapse" id="managedServiceIncludes" style="display: none;"> <div class="collapse" id="managedServiceIncludes">
<div class="ps-3 border-start border-2 border-success-subtle"> <div class="ps-3 border-start border-2 border-subtle">
<div class="small text-muted mb-2">
<i class="bi bi-check-circle-fill text-success me-1"></i>
<em>Included in managed service price:</em>
</div>
<div id="managedServiceIncludesContainer"> <div id="managedServiceIncludesContainer">
<!-- Required add-ons will be dynamically added here --> <!-- Required add-ons will be dynamically added here -->
</div> </div>