servala/servala-portal
3
0
Fork 0
Code Issues 34 Pull requests 4 Projects 2 Releases 3 Packages 2 Activity Actions

Inline user info in service offering page #250

Merged
tobru merged 4 commits from 243-service-provider-improvements into main 2025-10-27 10:15:09 +00:00
Conversation 0 Commits 4 Files changed 6 +101 -68
2 changed files with 101 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6a677f2653 - Show all commits

100
src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
View file

@ -9,9 +9,8 @@
{% endblock html_title %}
{% partialdef control-plane-info inline=True %}
{% if selected_plane and selected_plane.user_info %}
<div class="row mt-3">
<div class="col-12">
<h6 class="mb-3">{% translate "Service Provider Zone Information" %}</h6>
<div class="mt-3">
<div class="border-top pt-3">
{% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
</div>
</div>
@ -35,64 +34,97 @@
{% endpartialdef %}
{% block content %}
<section class="section">
{% if not has_control_planes %}
<!-- No Service Available Message -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header d-flex align-items-center">
{% if service.logo %}
<img src="{{ service.logo.url }}"
alt="{{ service.name }}"
class="me-3"
style="max-width: 48px;
max-height: 48px">
{% endif %}
<div class="d-flex flex-column">
<h4 class="mb-0">{{ offering }}</h4>
<small class="text-muted">{{ offering.service.category }}</small>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
<div>
<strong>{% translate "Service Unavailable" %}</strong>
<p class="mb-0">{% translate "We currently cannot offer this service. Please check back later or contact support for more information." %}</p>
</div>
</div>
</div>
</div>
{% else %}
<!-- Two Column Layout -->
<div class="row g-3">
<!-- Left Column: Service Provider Zone -->
<div class="col-12 col-lg-6">
<div class="card h-100">
<div class="card-header">
<h5 class="mb-0">{% translate "Service Provider Zone" %}</h5>
</div>
<div class="card-body">
{% if offering.description %}
<div class="row mb-3">
<div class="col-12">
<p>{{ offering.description|urlize }}</p>
</div>
</div>
{% endif %}
{% if not has_control_planes %}
<p>{% translate "We currently cannot offer this service, sorry!" %}</p>
{% else %}
<form hx-trigger="change"
hx-get="{{ request.path }}?fragment=service-form"
hx-target="#service-form"
hx-swap="outerHTML">
hx-swap="outerHTML"
class="control-plane-select-form">
{{ select_form }}
</form>
{% endif %}
{% if has_control_planes %}
<style>
.control-plane-select-form .form-label {
display: none;
}
</style>
<div id="control-plane-info"
hx-trigger="load, change from:form"
hx-get="{{ request.path }}?fragment=control-plane-info">
{% partial control-plane-info %}
</div>
</div>
</div>
</div>
<!-- Right Column: Service Information -->
<div class="col-12 col-lg-6">
<div class="card h-100">
<div class="card-header">
<h5 class="mb-0">{% translate "Service Information" %}</h5>
</div>
<div class="card-body">
{% if offering.service.logo or offering.description %}
<div class="d-flex gap-3 mb-3">
{% if offering.service.logo %}
<div class="flex-shrink-0">
<img src="{{ offering.service.logo.url }}"
alt="{{ offering.service.name }}"
style="max-width: 64px;
max-height: 64px">
</div>
{% endif %}
{% if service.external_links or offering.external_links %}
<div class="row mt-3">
<div class="col-12">
{% if offering.description %}
<div class="flex-grow-1">
<p class="mb-0">{{ offering.description|urlize }}</p>
</div>
{% endif %}
</div>
{% endif %}
{% if offering.service.external_links or offering.external_links %}
{% if offering.service.logo or offering.description %}<hr class="my-3">{% endif %}
<h6 class="mb-3">{% translate "External Links" %}</h6>
<div class="d-flex flex-wrap gap-2">
{% for link in service.external_links %}
{% for link in offering.service.external_links %}
{% include "includes/external_link.html" %}
{% endfor %}
{% for link in offering.external_links %}
{% include "includes/external_link.html" %}
{% endfor %}
</div>
</div>
</div>
{% else %}
{% if not offering.service.logo and not offering.description %}
<p class="text-muted mb-0">{% translate "No additional information available." %}</p>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<!-- Service Form (unchanged) -->
<div class="row mt-3">
<div class="col-12">
<div id="service-form">{% partial service-form %}</div>
</div>
</div>

25
src/servala/frontend/templates/includes/control_plane_user_info.html
View file

@ -1,25 +1,26 @@
{% load i18n %}
{% if control_plane.user_info %}
<div class="table-responsive">
<table class="table mb-0 table-lg">
<tbody>
<div class="control-plane-info-list">
{% for info in control_plane.user_info %}
<tr>
<th>
<div class="info-item mb-3">
<div class="d-flex align-items-center mb-1">
<small class="text-muted fw-semibold">
{{ info.title }}
</small>
{% if info.help_text %}
<i class="bi bi-info-circle ms-1"
<i class="bi bi-info-circle ms-1 text-muted"
data-bs-toggle="popover"
data-bs-trigger="hover focus"
data-bs-placement="top"
data-bs-content="{{ info.help_text }}"
style="cursor: help"></i>
style="cursor: help;
font-size: 0.875rem;"></i>
{% endif %}
</th>
<td>{{ info.content }}</td>
</tr>
</div>
<div class="bg-light-subtle p-2 rounded">
<code class="text-dark">{{ info.content }}</code>
</div>
</div>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}