csp detail page

This commit is contained in:
Tobias Brunner 2025-01-27 15:54:37 +01:00
parent eb7485e345
commit 600eee2b4c
No known key found for this signature in database
15 changed files with 159 additions and 7 deletions

View file

@ -11,7 +11,18 @@
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{% url 'services:service_list' %}">Servala - The Cloud Native Services Hub</a>
<a class="navbar-brand" href="{% url 'services:service_list' %}">Services Marketplace</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'services:service_list' %}active{% endif %}"
href="{% url 'services:service_list' %}">Services</a>
</li>
</ul>
</div>
</div>
</nav>
@ -28,10 +39,12 @@
overflow-wrap: break-word;
word-wrap: break-word;
}
.rich-text-content img {
max-width: 100%;
height: auto;
}
.description-preview img {
max-width: 100%;
height: auto;

View file

@ -0,0 +1,62 @@
{% extends 'services/base.html' %}
{% block content %}
<div class="card">
<div class="card-body">
<div class="d-flex align-items-start mb-4">
{% if provider.logo %}
<img src="{{ provider.logo.url }}" alt="{{ provider.name }} logo" class="me-4"
style="max-height: 120px; max-width: 240px; object-fit: contain;">
{% endif %}
<div>
<h2 class="card-title mb-3">{{ provider.name }}</h2>
<div class="rich-text-content">
{{ provider.description|safe }}
</div>
</div>
</div>
<h3 class="mb-4">Available Services</h3>
<div class="row row-cols-1 row-cols-md-2 g-4">
{% for service in services %}
<div class="col">
<div class="card h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
{% if service.logo %}
<img src="{{ service.logo.url }}" alt="{{ service.name }} logo"
class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
{% endif %}
<div>
<h5 class="card-title mb-0">{{ service.name }}</h5>
</div>
</div>
<div class="card-text description-preview mb-3">
{{ service.description|safe|truncatewords_html:30 }}
</div>
<div class="mb-2">
{% for category in service.categories.all %}
<span class="badge bg-secondary me-1">{{ category.full_path }}</span>
{% endfor %}
</div>
<p class="card-text">
<small class="text-muted">
Service Level: {{ service.service_level.name }}<br>
Price: ${{ service.price }}
</small>
</p>
<a href="{% url 'services:service_detail' service.pk %}" class="btn btn-primary">View Details</a>
</div>
</div>
</div>
{% empty %}
<div class="col-12">
<div class="alert alert-info">
No services available from this provider yet.
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}

View file

@ -17,9 +17,16 @@
<h2 class="card-title">{{ service.name }}</h2>
<div class="d-flex align-items-center">
{% if service.cloud_provider.logo %}
<img src="{{ service.cloud_provider.logo.url }}" alt="{{ service.cloud_provider.name }} logo" class="me-2" style="max-height: 30px; max-width: 60px; object-fit: contain;">
<a href="{% url 'services:provider_detail' service.cloud_provider.slug %}">
<img src="{{ service.cloud_provider.logo.url }}" alt="{{ service.cloud_provider.name }} logo"
class="me-2" style="max-height: 25px; max-width: 200px; object-fit: contain;">
</a>
{% else %}
<h6 class="card-subtitle text-muted mb-0">
<a href="{% url 'services:provider_detail' service.cloud_provider.pk %}"
class="text-decoration-none text-muted">{{ service.cloud_provider.name }}</a>
</h6>
{% endif %}
<h6 class="card-subtitle text-muted mb-0">{{ service.cloud_provider.name }}</h6>
</div>
</div>
</div>

View file

@ -86,18 +86,26 @@
<h5 class="card-title mb-0">{{ service.name }}</h5>
<div class="d-flex align-items-center mt-2">
{% if service.cloud_provider.logo %}
<img src="{{ service.cloud_provider.logo.url }}" alt="{{ service.cloud_provider.name }} logo" class="me-2" style="max-height: 25px; max-width: 50px; object-fit: contain;">
<a href="{% url 'services:provider_detail' service.cloud_provider.slug %}">
<img src="{{ service.cloud_provider.logo.url }}" alt="{{ service.cloud_provider.name }} logo"
class="me-2" style="max-height: 25px; max-width: 200px; object-fit: contain;">
</a>
{% else %}
<h6 class="card-subtitle text-muted mb-0">
<a href="{% url 'services:provider_detail' service.cloud_provider.pk %}"
class="text-decoration-none text-muted">{{ service.cloud_provider.name }}</a>
</h6>
{% endif %}
<h6 class="card-subtitle text-muted mb-0">{{ service.cloud_provider.name }}</h6>
</div>
</div>
</div>
<p class="card-text">{{ service.description|safe|truncatewords:30 }}</p>
<div class="mb-2">
{% for category in service.categories.all %}
<span class="badge bg-secondary me-1">{{ category.full_path }}</span>
{% endfor %}
</div>
<p class="card-text">{{ service.description|safe|truncatewords:30 }}</p>
<p class="card-text">
<small class="text-muted">
Service Level: {{ service.service_level.name }}<br>