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

restyle service information cards
All checks were successful
Tests / test (push) Successful in 26s
Details

Browse source
This commit is contained in:
Tobias Brunner 2025-10-27 11:13:48 +01:00
parent b8f3621b47
commit 6a677f2653
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
2 changed files with 101 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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