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

WIP: initial styling for service detail page

Browse source
This commit is contained in:
Tobias Brunner 2025-02-24 17:35:26 +01:00
parent 4e2935da1a
commit 56dc88bab4
No known key found for this signature in database
1 changed files with 114 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

254
hub/services/templates/services/service_detail.html
View file

@ -1,165 +1,139 @@
{% extends 'services/base.html' %} {% extends 'services/base.html' %}
{% block content %} {% block content %}
<div class="card mb-4"> <section class="section">
<div class="card-body"> <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
<div class="d-flex align-items-start mb-4"> <div class="row">
{% if service.logo %} <!-- Left Sidebar -->
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="me-4" <div class="col-12 col-lg-3">
style="max-height: 120px; max-width: 240px; object-fit: contain;"> <div class="pr-lg-6">
{% endif %} <!-- Logo -->
<div> <div class="mb-40">
<h2 class="card-title mb-3">{{ service.name }}</h2> {% if service.logo %}
<div class="mb-3"> <img class="img-fluid w-100 w-lg-auto" src="{{ service.logo.url }}" alt="{{ service.name }} logo">
{% for category in service.categories.all %} {% endif %}
<span class="badge bg-secondary me-1">{{ category.full_path }}</span> </div>
{% endfor %}
<!-- Highlights -->
{% if service.highlights.exists %}
<div class="mb-40">
<h3 class="fw-semibold mb-12">Highlights</h3>
<ul class="list-unstyled space-y-12 fs-19 ps-0">
{% for highlight in service.highlights.all %}
<li>
<a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="">
<span class="pr-10">
<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0489 0.709522C12.3483 -0.211788 13.6517 -0.211789 13.9511 0.709521L16.1432 7.45623C16.2771 7.86825 16.661 8.14722 17.0943 8.14722H24.1882C25.1569 8.14722 25.5597 9.38683 24.7759 9.95623L19.0369 14.1259C18.6864 14.3806 18.5397 14.8319 18.6736 15.244L20.8657 21.9907C21.1651 22.912 20.1106 23.6781 19.3269 23.1087L13.5878 18.939C13.2373 18.6844 12.7627 18.6844 12.4122 18.939L6.67312 23.1087C5.88941 23.6781 4.83493 22.912 5.13428 21.9907L7.32642 15.244C7.46029 14.8319 7.31363 14.3806 6.96315 14.1259L1.22405 9.95623C0.440337 9.38683 0.843112 8.14722 1.81184 8.14722H8.90575C9.33897 8.14722 9.72293 7.86826 9.8568 7.45623L12.0489 0.709522Z" fill="#9A63EC"/>
</svg>
</span>
<span>{{ highlight.name }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- Categories -->
<div>
<h3 class="fw-semibold mb-12">Categories</h3>
<div>
{% for category in service.categories.all %}
<a class="btn btn-tertiary btn-sm mr-12" href="">{{ category.full_path }}</a>
{% endfor %}
</div>
</div>
</div> </div>
</div> </div>
</div>
<div class="rich-text-content mb-4"> <!-- Main Content -->
{{ service.description|safe }} <div class="col-12 col-lg-9">
</div> <div class="pr-lg-32">
<!-- Header -->
<div class="pt-60 pb-lg-60 w-lg-70">
<header>
<h2 class="fs-50 fw-semibold lh-1 mb-12">{{ service.name }}</h2>
<h4 class="text-primary fs-24 fw-normal">by {{ service.provider.name }}</h4>
</header>
<div class="fs-19 text-gray-500">
{{ service.short_description|safe }}
</div>
</div>
{% if service.features %} <!-- Description -->
<h3>Features</h3> <div class="pt-40 pt-lg-34">
<div class="rich-text-content mb-4"> <h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
{{ service.features|safe }} <div class="fs-19 text-gray-500">
</div> {{ service.description|safe }}
{% endif %} </div>
</div> </div>
</div>
<!-- Cloud Provider Offerings --> <!-- Features -->
<div class="card mb-4"> {% if service.features %}
<div class="card-body"> <div class="pt-24">
<h3 class="mb-4">Available Offerings</h3> <h3 class="fs-24 fw-semibold lh-1 mb-12">Features</h3>
<div class="row row-cols-1 row-cols-md-2 g-4"> <div class="page-content fs-19 text-gray-500">
{% for offering in service.offerings.all %} {{ service.features|safe }}
<div class="col"> </div>
<div class="card h-100"> </div>
<div class="card-body"> {% endif %}
<div class="d-flex align-items-center mb-3">
{% if offering.cloud_provider.logo %}
<img src="{{ offering.cloud_provider.logo.url }}"
alt="{{ offering.cloud_provider.name }} logo"
class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
{% endif %}
<div>
<h5 class="card-title mb-0">
<a href="{{ offering.cloud_provider.get_absolute_url }}" class="text-decoration-none">
{{ offering.cloud_provider.name }}
</a>
</h5>
{% if offering.cloud_provider.website %}
<a href="{{ offering.cloud_provider.website }}" class="text-muted small" target="_blank">
Visit Provider Website
</a>
{% endif %}
</div>
</div>
<div class="rich-text-content mb-3"> <!-- Offerings -->
{{ offering.description|safe|truncatewords_html:50 }} <div class="pt-24">
</div> <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Offerings</h3>
<div class="row">
{% for offering in service.offerings.all %}
<div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
<div class="bg-purple-50 rounded-16 border-all p-24">
<div class="mb-6">
{% if offering.cloud_provider.logo %}
<img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }}">
{% endif %}
</div>
<div class="text-black mb-20">
<p class="mb-0">{{ offering.description|safe|truncatewords_html:50 }}</p>
</div>
{% if offering.plans.exists %}
<div class="mb-3">
<h6>Plans:</h6>
{% for plan in offering.plans.all %} {% for plan in offering.plans.all %}
<div class="card mb-2"> <div class="bg-white border-all rounded-7 p-20 {% if not forloop.last %}mb-12{% else %}mb-20{% endif %}">
<div class="card-body"> <h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
<h6 class="card-title">{{ plan.name }}</h6> <div>
<ul class="list-unstyled text-gray-500 fs-19 lh-1-7 ps-0 mb-0">
{% for price in plan.prices.all %} {% for price in plan.prices.all %}
<div class="small text-muted"> <li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}
</div>
{% endfor %} {% endfor %}
</div> </ul>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div>
{% endif %}
<a href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}" <div>
class="btn btn-success"> <a class="btn btn-primary btn-lg w-100" href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}">
{% if offering.status == 'available' %} {% if offering.status == 'available' %}
Order Order Now
{% elif offering.status == 'planned' %} {% elif offering.status == 'planned' %}
Show Interest Show Interest
{% else %} {% else %}
Request Information Request Information
{% endif %} {% endif %}
</a>
</div>
</div>
</div>
{% empty %}
<div class="col-12">
<div class="alert alert-info d-flex justify-content-between align-items-center">
<span>No offerings available yet.</span>
<a href="{% url 'services:create_lead' service.slug %}" class="btn btn-success">Show Interest</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Consulting Partners -->
{% if service.consulting_partners.exists %}
<div class="card mb-4">
<div class="card-body">
<h3 class="mb-4">Consulting Partners</h3>
<div class="row row-cols-1 row-cols-md-3 g-4">
{% for partner in service.consulting_partners.all %}
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
{% if partner.logo %}
<img src="{{ partner.logo.url }}"
alt="{{ partner.name }} logo"
class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
{% endif %}
<div>
<h5 class="card-title mb-0">
<a href="{{ partner.get_absolute_url }}" class="text-decoration-none">
{{ partner.name }}
</a> </a>
</h5> </div>
{% if partner.website %}
<a href="{{ partner.website }}" class="text-muted small" target="_blank">
Visit Website
</a>
{% endif %}
</div> </div>
</div> </div>
{% empty %}
<div class="col-12">
<div class="alert alert-info d-flex justify-content-between align-items-center">
<span>No offerings available yet.</span>
<a href="{% url 'services:create_lead' service.slug %}" class="btn btn-primary">Show Interest</a>
</div>
</div>
{% endfor %}
</div> </div>
</div> </div>
</div> </div>
{% endfor %} </div>
</div> </div>
</div> </div>
</div> </section>
{% endif %}
<!-- External Links -->
{% if service.external_links.exists %}
<div class="card mb-4">
<div class="card-body">
<h3>Additional Information</h3>
<div class="list-group">
{% for link in service.external_links.all %}
<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer"
class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
{{ link.description }}
<i class="bi bi-box-arrow-up-right"></i>
</a>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endblock %} {% endblock %}