178 lines
No EOL
9.5 KiB
HTML
178 lines
No EOL
9.5 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
{% load contact_tags %}
|
|
|
|
{% block title %}{{ article.title }}{% endblock %}
|
|
{% block meta_description %}{{ article.excerpt }}{% endblock %}
|
|
{% block meta_keywords %}{{ article.meta_keywords }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="section bg-primary-subtle">
|
|
<div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
|
|
<header class="section-primary__header text-center">
|
|
<h1 class="section-h1 fs-40 fs-lg-64 mb-24">{{ article.title }}</h1>
|
|
<div class="text-gray-300 w-lg-50 mx-auto">
|
|
<p class="mb-3">{{ article.excerpt }}</p>
|
|
<div class="d-flex justify-content-center align-items-center gap-3 text-sm">
|
|
<span>By {{ article.author.get_full_name|default:article.author.username }}</span>
|
|
<span>•</span>
|
|
<span>{{ article.created_at|date:"M d, Y" }}</span>
|
|
{% if article.updated_at != article.created_at %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</section>
|
|
|
|
{% if article.image %}
|
|
<section class="section py-0">
|
|
<div class="container-xl mx-auto">
|
|
<div class="article-hero-image">
|
|
<img src="{{ article.image.url }}" alt="{{ article.title }}" class="img-fluid w-100" style="max-height: 400px; object-fit: cover;">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<section class="section">
|
|
<div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-8 mx-auto">
|
|
<article class="article-content">
|
|
<div class="prose">
|
|
{{ article.content|safe }}
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Related Links -->
|
|
{% if article.related_service or article.related_consulting_partner or article.related_cloud_provider %}
|
|
<div class="mt-5 pt-4 border-top">
|
|
<h3>Related Links</h3>
|
|
<div class="row">
|
|
{% if article.related_service %}
|
|
<div class="col-12 col-md-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Service</h5>
|
|
{% if article.related_service.logo %}
|
|
<div class="mb-3 d-flex" style="height: 60px;">
|
|
<img src="{{ article.related_service.logo.url }}" alt="{{ article.related_service.name }} logo"
|
|
class="img-fluid" style="max-height: 50px; object-fit: contain;">
|
|
</div>
|
|
{% endif %}
|
|
<p class="card-text">{{ article.related_service.name }}</p>
|
|
<a href="{{ article.related_service.get_absolute_url }}" class="btn btn-primary btn-sm">View Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if article.related_consulting_partner %}
|
|
<div class="col-12 col-md-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Partner</h5>
|
|
{% if article.related_consulting_partner.logo %}
|
|
<div class="mb-3 d-flex" style="height: 60px;">
|
|
<img src="{{ article.related_consulting_partner.logo.url }}" alt="{{ article.related_consulting_partner.name }} logo"
|
|
class="img-fluid" style="max-height: 50px; object-fit: contain;">
|
|
</div>
|
|
{% endif %}
|
|
<p class="card-text">{{ article.related_consulting_partner.name }}</p>
|
|
<a href="{{ article.related_consulting_partner.get_absolute_url }}" class="btn btn-primary btn-sm">View Partner</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if article.related_cloud_provider %}
|
|
<div class="col-12 col-md-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Provider</h5>
|
|
{% if article.related_cloud_provider.logo %}
|
|
<div class="mb-3 d-flex" style="height: 60px;">
|
|
<img src="{{ article.related_cloud_provider.logo.url }}" alt="{{ article.related_cloud_provider.name }} logo"
|
|
class="img-fluid" style="max-height: 50px; object-fit: contain;">
|
|
</div>
|
|
{% endif %}
|
|
<p class="card-text">{{ article.related_cloud_provider.name }}</p>
|
|
<a href="{{ article.related_cloud_provider.get_absolute_url }}" class="btn btn-primary btn-sm">View Provider</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Related Articles -->
|
|
{% if related_articles %}
|
|
<div class="mt-5 pt-4 border-top">
|
|
<h3>Related Articles</h3>
|
|
<div class="row">
|
|
{% for related_article in related_articles %}
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="card h-100 clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
|
|
{% if related_article.image %}
|
|
<img src="{{ related_article.image.url }}" class="card-img-top mb-2" alt="{{ related_article.title }}" style="height: 200px; object-fit: cover;">
|
|
{% endif %}
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">{{ related_article.title }}</h5>
|
|
<p class="card-text flex-grow-1">{{ related_article.excerpt|truncatewords:15 }}</p>
|
|
<small class="text-muted">{{ related_article.created_at|date:"M d, Y" }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Navigation -->
|
|
<div class="mt-5 pt-4 border-top">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<a href="{% url 'services:article_list' %}" class="btn btn-outline-primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Back to Articles
|
|
</a>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-secondary btn-sm" onclick="window.print()">
|
|
<i class="bi bi-printer"></i> Print
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm" onclick="navigator.share ? navigator.share({title: '{{ article.title }}', url: window.location.href}) : navigator.clipboard.writeText(window.location.href)">
|
|
<i class="bi bi-share"></i> Share
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section bg-primary-subtle">
|
|
<div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-4 mb-30 mb-lg-0">
|
|
<div class="section-logo mx-auto">
|
|
<img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-8">
|
|
<header class="section-primary__header">
|
|
<h2 class="section-h1 fs-40 fs-lg-60">Questions about this article?</h2>
|
|
<div class="section-primary__desc">
|
|
<p>Have questions or need more information about the topics covered in this article? Get in touch with us!</p>
|
|
</div>
|
|
<div>
|
|
{% embedded_contact_form source="Article Inquiry" %}
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %} |