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

style get it on buttons with csp logo as card

Browse source
This commit is contained in:
Tobias Brunner 2025-05-07 09:48:17 +02:00
parent cbb5a4a1cb
commit c22d75fe2b
No known key found for this signature in database
1 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -150,17 +150,36 @@
<div class="pt-24" id="getit">
<div class="page-action">
{% if service.offerings.exists %}
<h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
<p>Choose one of our trusted service providers</p>
<div class="d-flex flex-wrap gap-3">
{% for offering in service.offerings.all %}
{% if not offering.cloud_provider.disable_listing %}
<a class="btn btn-primary btn-lg w-auto"
href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}"
role="button">{{ offering.cloud_provider.name }}</a>
{% endif %}
{% endfor %}
</div>
<h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
<p>Choose one of our trusted service providers</p>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
{% for offering in service.offerings.all %}
{% if not offering.cloud_provider.disable_listing %}
<div class="col">
<a href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}"
class="text-decoration-none" style="display: block;">
<div class="card h-100 clickable-card">
<div class="card-body text-center">
{% if offering.cloud_provider.logo %}
<div class="mb-3 d-flex align-items-center justify-content-center" style="height: 80px;">
<img src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }} logo"
class="img-fluid" style="max-height: 60px; object-fit: contain;">
</div>
{% else %}
<div class="mb-3 d-flex align-items-center justify-content-center" style="height: 80px;">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-cloud-fill text-primary" viewBox="0 0 16 16">
<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
</svg>
</div>
{% endif %}
<h5 class="card-title mb-0 fw-semibold">{{ offering.cloud_provider.name }}</h5>
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="pt-40">
<h3 class="fs-24 fw-semibold lh-1 mb-12">Contact Us About This Service</h3>