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

make whole card clickable
All checks were successful
Build and Deploy / build (push) Successful in 36s
Details
Build and Deploy / deploy (push) Successful in 4s
Details

Browse source
This commit is contained in:
Tobias Brunner 2025-05-07 08:36:02 +02:00
parent b1680a11af
commit 1911a1211b
No known key found for this signature in database
7 changed files with 126 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

11
hub/services/templates/services/partner_list.html
View file

@ -108,12 +108,13 @@
<div class="row">
{% for partner in partners %}
<div class="col-12 col-md-6 col-lg-4 mb-30">
<div class="card h-100 d-flex flex-column">
<div class="card h-100 d-flex flex-column clickable-card"
onclick="cardClicked(event, '{{ partner.get_absolute_url }}')">
<div class="card__content d-flex flex-column flex-grow-1">
<div class="card__header">
<div class="d-flex align-items-start" style="height: 100px; margin-bottom: 1rem;">
<div class="me-3">
<a href="{{ partner.get_absolute_url }}">
<a href="{{ partner.get_absolute_url }}" class="clickable-link">
<img src="{{ partner.logo.url }}"
alt="{{ partner.name }}"
style="max-height: 100px; max-width: 250px; object-fit: contain;">
@ -121,7 +122,7 @@
</div>
</div>
<h3 class="card__title">
<a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a>
<a href="{{ partner.get_absolute_url }}" class="text-decoration-none clickable-link">{{ partner.name }}</a>
</h3>
</div>
@ -132,9 +133,9 @@
<div class="card__footer mt-3">
<div class="d-flex gap-2">
{% if partner.website %}
<a href="{{ partner.website }}" class="btn btn-primary btn-sm" target="_blank">Visit Website</a>
<a href="{{ partner.website }}" class="btn btn-primary btn-sm clickable-button" target="_blank">Visit Website</a>
{% endif %}
<a href="{{ partner.get_absolute_url }}#services" class="btn btn-primary btn-sm">Available Services</a>
<a href="{{ partner.get_absolute_url }}#services" class="btn btn-primary btn-sm clickable-button">Available Services</a>
</div>
</div>
</div>

11
hub/services/templates/services/provider_list.html
View file

@ -91,12 +91,13 @@
<div class="row">
{% for provider in providers %}
<div class="col-12 col-md-6 col-lg-4 mb-30">
<div class="card h-100 d-flex flex-column">
<div class="card h-100 d-flex flex-column clickable-card"
onclick="cardClicked(event, '{{ provider.get_absolute_url }}')">
<div class="card__content d-flex flex-column flex-grow-1">
<div class="card__header">
<div class="d-flex align-items-start" style="height: 100px; margin-bottom: 1rem;">
<div class="me-3 d-flex align-items-center" style="height: 100%;">
<a href="{{ provider.get_absolute_url }}">
<a href="{{ provider.get_absolute_url }}" class="clickable-link">
<img src="{{ provider.logo.url }}"
alt="{{ provider.name }}"
style="max-height: 100px; max-width: 250px; object-fit: contain;">
@ -104,7 +105,7 @@
</div>
</div>
<h3 class="card__title">
<a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a>
<a href="{{ provider.get_absolute_url }}" class="text-decoration-none clickable-link">{{ provider.name }}</a>
</h3>
</div>
@ -115,9 +116,9 @@
<div class="card__footer mt-3">
<div class="d-flex gap-2">
{% if provider.website %}
<a href="{{ provider.website }}" class="btn btn-primary btn-sm" target="_blank">Visit Website</a>
<a href="{{ provider.website }}" class="btn btn-primary btn-sm clickable-button" target="_blank">Visit Website</a>
{% endif %}
<a href="{{ provider.get_absolute_url }}#services" class="btn btn-primary btn-sm">Available Services</a>
<a href="{{ provider.get_absolute_url }}#services" class="btn btn-primary btn-sm clickable-button">Available Services</a>
</div>
</div>
</div>

42
hub/services/templates/services/service_list.html
View file

@ -150,49 +150,30 @@
<div class="row">
{% for service in services %}
<div class="col-12 col-md-6 col-lg-4 mb-30">
<div class="card {% if service.is_featured %}card-featured{% endif %} h-100 d-flex flex-column">
<div class="card {% if service.is_featured %}card-featured{% endif %} h-100 d-flex flex-column clickable-card"
onclick="cardClicked(event, '{% if request.GET.cloud_provider %}{% for offering in service.offerings.all %}{% if offering.cloud_provider.id|stringformat:"i" == request.GET.cloud_provider %}{% url "services:offering_detail" offering.cloud_provider.slug service.slug %}{% endif %}{% endfor %}{% else %}{{ service.get_absolute_url }}{% endif %}')">
{% if service.logo or service.is_featured or service.is_coming_soon %}
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-between mb-3">
{% if service.logo %}
<div class="card__image flex-shrink-0">
{% if request.GET.cloud_provider %}
{% for offering in service.offerings.all %}
{% if offering.cloud_provider.id|stringformat:'i' == request.GET.cloud_provider %}
<a href="{% url 'services:offering_detail' offering.cloud_provider.slug service.slug %}">
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
</a>
{% endif %}
{% endfor %}
{% else %}
<a href="{{ service.get_absolute_url }}">
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
</a>
{% endif %}
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
</div>
{% endif %}
{% if service.is_featured %}
<div>
<a class="btn btn-primary btn-sm" href="">Featured</a>
<span class="btn btn-primary btn-sm">Featured</span>
</div>
{% elif service.is_coming_soon %}
<div>
<a class="btn btn-secondary btn-sm" href="">Coming Soon</a>
<span class="btn btn-secondary btn-sm">Coming Soon</span>
</div>
{% endif %}
</div>
{% endif %}
<div class="card__content d-flex flex-column flex-grow-1">
<div class="card__header">
<h3 class="card__title">
{% if request.GET.cloud_provider %}
{% for offering in service.offerings.all %}
{% if offering.cloud_provider.id|stringformat:'i' == request.GET.cloud_provider %}
<a href="{% url 'services:offering_detail' offering.cloud_provider.slug service.slug %}" class="text-decoration-none {% if service.is_coming_soon %}text-black-50{% endif %}">{{ service.name }}</a>
{% endif %}
{% endfor %}
{% else %}
<a href="{{ service.get_absolute_url }}" class="text-decoration-none {% if service.is_coming_soon %}text-black-50{% endif %}">{{ service.name }}</a>
{% endif %}
<h3 class="card__title {% if service.is_coming_soon %}text-black-50{% endif %}">
{{ service.name }}
</h3>
<p class="card__subtitle">
{% for category in service.categories.all %}
@ -211,8 +192,13 @@
</div>
</div>
</div>
{% empty %}
<div class="col-12">
<div class="alert alert-info">
No services found matching your criteria.
</div>
</div>
{% endfor %}
</div>
</div>
</div>