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

Improve service detail template

Browse source
This commit is contained in:
Tobias Kunze 2025-03-24 10:50:48 +01:00 • committed by Tobias Brunner
parent 58790c3b16
commit fb11aa4407
No known key found for this signature in database
4 changed files with 62 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

125
src/servala/frontend/templates/frontend/organizations/service_detail.html
View file

@ -18,7 +18,7 @@
max-height: 48px"> max-height: 48px">
{% endif %} {% endif %}
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<h4 class="card-title mb-0">{{ service.name }}</h4> <h4 class="mb-0">{{ service.name }}</h4>
<small class="text-muted">{{ service.category }}</small> <small class="text-muted">{{ service.category }}</small>
</div> </div>
</div> </div>
@ -28,99 +28,38 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card"> {% for offering in service.offerings.all %}
<div class="card-header"> <div class="card col-6 col-lg-3 col-md-4">
<h4 class="card-title">{% trans "Available Offerings" %}</h4> <div class="card-header d-flex align-items-center">
</div> {% if offering.provider.logo %}
<div class="card-body"> <img src="{{ offering.provider.logo.url }}"
{% for offering in service.offerings.all %} alt="{{ offering.provider.name }}"
<div class="card mb-4"> class="me-3"
<div class="card-header bg-light"> style="max-width: 48px;
<div class="d-flex align-items-center"> max-height: 48px">
{% if offering.provider.logo %} {% endif %}
<img src="{{ offering.provider.logo.url }}" <div class="d-flex flex-column">
alt="{{ offering.provider.name }}" <h4 class="mb-0">{{ offering.provider.name }}</h4>
class="me-3"
style="max-height: 40px">
{% endif %}
<h5 class="mb-0">{{ service.name }} on {{ offering.provider.name }}</h5>
</div>
</div>
<div class="card-body">
<div class="row mb-3">
<div class="col-md-8">
<p>{{ offering.description|default:"No description available." }}</p>
</div>
<div class="col-md-4">
<h6>{% trans "Control Planes" %}</h6>
<ul>
{% for control_plane in offering.control_planes.all %}
<li>{{ control_plane.name }}</li>
{% empty %}
<li>{% trans "No control planes available" %}</li>
{% endfor %}
</ul>
</div>
</div>
<h6>{% trans "Available Plans" %}</h6>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>{% trans "Plan" %}</th>
<th>{% trans "Term" %}</th>
<th>{% trans "Features" %}</th>
<th>{% trans "Pricing" %}</th>
<th>{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for plan in plans %}
<tr>
<td>
<strong>{{ plan.name }}</strong>
{% if plan.description %}
<br>
<small>{{ plan.description }}</small>
{% endif %}
</td>
<td>{{ plan.term }} {% trans "months" %}</td>
<td>
{% if plan.features %}
<ul class="mb-0">
{% for feature, value in plan.features.items %}<li>{{ feature }}: {{ value }}</li>{% endfor %}
</ul>
{% else %}
<span class="text-muted">{% trans "No features specified" %}</span>
{% endif %}
</td>
<td>
{% if plan.pricing %}
<ul class="mb-0">
{% for price_type, price in plan.pricing.items %}<li>{{ price_type }}: {{ price }}</li>{% endfor %}
</ul>
{% else %}
<span class="text-muted">{% trans "No pricing specified" %}</span>
{% endif %}
</td>
<td>
<button class="btn btn-primary btn-sm">{% trans "Order" %}</button>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5" class="text-center">{% trans "No plans available for this offering" %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div> </div>
{% empty %} </div>
<div class="alert alert-info">{% trans "No offerings available for this service yet." %}</div> <div class="card-body">
{% endfor %} {% if offering.description %}
<p class="card-text">{{ offering.description }}</p>
{% elif offering.provider.description %}
<p class="card-text">{{ offering.provider.description }}</p>
{% endif %}
</div>
<div class="card-footer d-flex justify-content-between">
<span></span>
<a href="{{ offering.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
</div>
</div> </div>
</div> {% empty %}
<div class="card">
<div class="card-body">
<p>{% translate "No offerings found." %}</p>
</div>
</div>
{% endfor %}
</section> </section>
{% endblock content %} {% endblock content %}

43
src/servala/frontend/templates/frontend/organizations/services.html
View file

@ -18,30 +18,33 @@
</div> </div>
{% for service in services %} {% for service in services %}
<div class="card col-6 col-lg-3 col-md-4"> <div class="card col-6 col-lg-3 col-md-4">
<div class="card-content"> <div class="card-header d-flex align-items-center">
<div class="card-header d-flex align-items-center"> {% if service.logo %}
{% if service.logo %} <img src="{{ service.logo.url }}"
<img src="{{ service.logo.url }}" alt="{{ service.name }}"
alt="{{ service.name }}" class="me-3"
class="me-3" style="max-width: 48px;
style="max-width: 48px; max-height: 48px">
max-height: 48px"> {% endif %}
{% endif %} <div class="d-flex flex-column">
<div class="d-flex flex-column"> <h4 class="mb-0">{{ service.name }}</h4>
<h4 class="card-title mb-0">{{ service.name }}</h4> <small class="text-muted">{{ service.category }}</small>
<small class="text-muted">{{ service.category }}</small>
</div>
</div>
<div class="card-body">
{% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
</div>
<div class="card-footer d-flex justify-content-end">
<a href="{{ service.pk }}/" class="btn btn-primary">{% translate "View Details" %}</a>
</div> </div>
</div> </div>
<div class="card-body">
{% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
</div>
<div class="card-footer d-flex justify-content-between">
<span></span>
<a href="{{ service.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
</div>
</div> </div>
{% empty %} {% empty %}
<p>{% translate "No services found." %}</p> <div class="card">
<div class="card-body">
<p>{% translate "No services found." %}</p>
</div>
</div>
{% endfor %} {% endfor %}
</section> </section>
<script src="{% static "js/autosubmit.js" %}" defer></script> <script src="{% static "js/autosubmit.js" %}" defer></script>

4
src/servala/frontend/templates/frontend/profile.html
View file

@ -73,7 +73,7 @@
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h4 class="card-title">{% translate "Profile" %}</h4> <h4 class="">{% translate "Profile" %}</h4>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
@ -106,7 +106,7 @@
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h4 class="card-title">{% translate "Account" %}</h4> <h4 class="">{% translate "Account" %}</h4>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">

8
src/servala/frontend/views/service.py
View file

@ -1,7 +1,7 @@
from django.utils.functional import cached_property from django.utils.functional import cached_property
from django.views.generic import DetailView, ListView from django.views.generic import DetailView, ListView
from servala.core.models import Plan, Service, ServiceOffering from servala.core.models import Service
from servala.frontend.forms.service import ServiceFilterForm from servala.frontend.forms.service import ServiceFilterForm
from servala.frontend.views.mixins import OrganizationViewMixin from servala.frontend.views.mixins import OrganizationViewMixin
@ -43,6 +43,8 @@ class ServiceDetailView(OrganizationViewMixin, DetailView):
return Service.objects.select_related("category").prefetch_related( return Service.objects.select_related("category").prefetch_related(
"offerings", "offerings",
"offerings__provider", "offerings__provider",
"offerings__control_planes",
"offerings__plans",
) )
class ServiceOfferingDetailView:
pass