make whole card clickable
This commit is contained in:
parent
b1680a11af
commit
1911a1211b
7 changed files with 126 additions and 84 deletions
|
|
@ -41,20 +41,31 @@
|
|||
<div class="row">
|
||||
{% for service in featured_services %}
|
||||
<div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
|
||||
<div class="card h-100 d-flex flex-column">
|
||||
<div class="card__image">
|
||||
<a href="{{ service.get_absolute_url }}"><img class="img-fluid card-logo" src="{{ service.logo.url }}" alt="{{ service.name }} logo"></a>
|
||||
<div class="card h-100 d-flex flex-column clickable-card"
|
||||
onclick="cardClicked(event, '{{ service.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="{{ service.get_absolute_url }}" class="clickable-link">
|
||||
<img src="{{ service.logo.url }}"
|
||||
alt="{{ service.name }}"
|
||||
style="max-height: 100px; max-width: 250px; object-fit: contain;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="card__title">
|
||||
<a href="{{ service.get_absolute_url }}" class="text-decoration-none clickable-link">{{ service.name }}</a>
|
||||
</h3>
|
||||
{% for category in service.categories.all|slice:":1" %}
|
||||
<p class="card__subtitle">{{ category.name }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card__desc flex-grow-1">
|
||||
<p>{{ service.description|safe|truncatewords:15 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__header">
|
||||
<h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
|
||||
{% for category in service.categories.all|slice:":1" %}
|
||||
<p class="card__subtitle">{{ category.name }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card__desc flex-grow-1">
|
||||
<p>{{ service.description|safe|truncatewords:15 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-12">
|
||||
|
|
@ -85,29 +96,36 @@
|
|||
</header>
|
||||
<div class="section__grid">
|
||||
<div class="row">
|
||||
<div class="section__grid">
|
||||
<div class="row">
|
||||
{% for provider in featured_providers %}
|
||||
<div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
|
||||
<div class="card h-100 d-flex flex-column">
|
||||
<div class="card__image__wide mb-4">
|
||||
<a href="{{ provider.get_absolute_url }}"><img class="img-fluid card-logo" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo"></a>
|
||||
</div>
|
||||
{% for provider in featured_providers %}
|
||||
<div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
|
||||
<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">
|
||||
<h3 class="card__title"><a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a></h3>
|
||||
<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 }}" class="clickable-link">
|
||||
<img src="{{ provider.logo.url }}"
|
||||
alt="{{ provider.name }}"
|
||||
style="max-height: 100px; max-width: 250px; object-fit: contain;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="card__title">
|
||||
<a href="{{ provider.get_absolute_url }}" class="text-decoration-none clickable-link">{{ provider.name }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card__desc flex-grow-1">
|
||||
<p>{{ provider.description|safe|truncatewords:15 }}</p>
|
||||
<p>{{ provider.description|safe|truncatewords:15 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-12">
|
||||
<p class="text-center">No featured provider available at the moment.</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-12">
|
||||
<p class="text-center">No featured provider available at the moment.</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-action d-lg-none">
|
||||
|
|
@ -132,25 +150,36 @@
|
|||
</header>
|
||||
<div class="section__grid">
|
||||
<div class="row">
|
||||
{% for partner in featured_partners %}
|
||||
{% for partner in featured_partners %}
|
||||
<div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
|
||||
<div class="card h-100 d-flex flex-column">
|
||||
<div class="card__image__wide mb-4">
|
||||
<a href="{{ partner.get_absolute_url }}"><img class="img-fluid card-logo" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo"></a>
|
||||
</div>
|
||||
<div class="card__header">
|
||||
<h3 class="card__title"><a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a></h3>
|
||||
</div>
|
||||
<div class="card__desc flex-grow-1">
|
||||
<p>{{ partner.description|safe|truncatewords:15 }}</p>
|
||||
<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 d-flex align-items-center" style="height: 100%;">
|
||||
<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;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="card__title">
|
||||
<a href="{{ partner.get_absolute_url }}" class="text-decoration-none clickable-link">{{ partner.name }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card__desc flex-grow-1">
|
||||
<p>{{ partner.description|safe|truncatewords:15 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
{% empty %}
|
||||
<div class="col-12">
|
||||
<p class="text-center">No featured partner available at the moment.</p>
|
||||
<p class="text-center">No featured partner available at the moment.</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-action d-lg-none">
|
||||
|
|
@ -189,7 +218,7 @@
|
|||
<header class="section__header text-center mb-30">
|
||||
<h2 class="section-heading-h2 fs-40 fs-lg-64">Frequenty Asked Questions</h2>
|
||||
<div class="section__desc fw-medium fs-20 w-lg-40 mx-auto">
|
||||
<p>Still need more information? Read our FAQ or contact us to learn more about the Servala.</p>
|
||||
<p>Still need more information? Read our FAQ or contact us to learn more about the Servala.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div x-data="{ open: null }" class="section__faq">
|
||||
|
|
@ -215,7 +244,6 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue