From 5c3bab45c397bf481640fa02c0ae4bcbf50e9dab Mon Sep 17 00:00:00 2001
From: George Katsikas <giorgakis.katsikas@gmail.com>
Date: Tue, 2 Apr 2024 16:56:37 +0200
Subject: [PATCH] improve sponsors view with css grid
fixes #229
---
.../templates/sponsors/_sponsor_card.html | 34 +++++++++++++------
.../sponsors/templates/sponsors/sponsors.html | 16 +++------
2 files changed, 28 insertions(+), 22 deletions(-)
diff --git a/scipost_django/sponsors/templates/sponsors/_sponsor_card.html b/scipost_django/sponsors/templates/sponsors/_sponsor_card.html
index cf5faa4c6..8adebf58e 100644
--- a/scipost_django/sponsors/templates/sponsors/_sponsor_card.html
+++ b/scipost_django/sponsors/templates/sponsors/_sponsor_card.html
@@ -1,14 +1,28 @@
-<div class="card text-center mb-2">
+<div class="card bg-light text-center mb-2 d-flex flex-column justify-content-end">
+
{% if sponsor.logo %}
- <img class="card-img-top {{ sponsor.css_class }} p-2" style="max-height: 16rem; max-width: 16rem;" src="{% if sponsor.logo %}{{ sponsor.logo.url }}{% endif %}" alt="{{ sponsor.name }} logo">
+ <img class="card-img-top bg-white p-2 my-auto {{ sponsor.css_class }}"
+ style="max-height: 16rem;
+ max-width: 100%;
+ object-fit: contain"
+ src="{{ sponsor.logo.url }}"
+ alt="{{ sponsor.name }} logo" />
{% endif %}
- <div class="card-body bg-light text-start">
- <h4 class="card-title">
- {% if sponsor.name_original %}{{ sponsor.name_original }}{% else %}{{ sponsor.name }}{% endif %}</h4>
- {% if sponsor.name_original %}
- <p class="card-text">({{ sponsor.name }})</p>
- {% endif %}
- <img src="{{ sponsor.country.flag }}" alt="{{ sponsor.country }} flag"/> <span class="text-muted"><small>[{{ sponsor.country }}]</small></span> {{ sponsor.get_country_display }}
- <a href="{% url 'finances:subsidies' %}?org={{ sponsor.id }}">See subsidies</a>
+
+ <div class="p-2 text-start d-flex flex-column">
+
+ <h4>{% firstof sponsor.name_original sponsor.name %}</h4>
+
+ {% if sponsor.name_original %}<p class="card-text">({{ sponsor.name }})</p>{% endif %}
+
+ <div class="d-flex w-100 align-items-center">
+ <img width="16"
+ height="11"
+ src="{{ sponsor.country.flag }}"
+ alt="{{ sponsor.country }} flag" />
+ <span class="text-muted"><small>[{{ sponsor.country }}]</small></span> {{ sponsor.get_country_display }}
+ <a class="ms-auto"
+ href="{% url 'finances:subsidies' %}?org={{ sponsor.id }}">See subsidies</a>
+ </div>
</div>
</div>
diff --git a/scipost_django/sponsors/templates/sponsors/sponsors.html b/scipost_django/sponsors/templates/sponsors/sponsors.html
index d4da8daf7..9f7213e16 100644
--- a/scipost_django/sponsors/templates/sponsors/sponsors.html
+++ b/scipost_django/sponsors/templates/sponsors/sponsors.html
@@ -87,38 +87,30 @@
<h1 class="highlight">Our current Sponsors</h1>
<h3 class="highlight">€20k and above:</h3>
- <div class="row">
+ <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
{% for sponsor in sponsors_20kplus %}
- <div class="col-md-6 col-lg-4 mb-2">
{% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
- </div>
{% endfor %}
</div>
<h3 class="highlight">€10k and above:</h3>
- <div class="row">
+ <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
{% for sponsor in sponsors_10kplus %}
- <div class="col-md-6 col-lg-4 mb-2">
{% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
- </div>
{% endfor %}
</div>
<h3 class="highlight">€5k and above:</h3>
- <div class="row">
+ <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
{% for sponsor in sponsors_5kplus %}
- <div class="col-md-6 col-lg-4 mb-2">
{% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
- </div>
{% endfor %}
</div>
<h3 class="highlight">Our other current Sponsors:</h3>
- <div class="row">
+ <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
{% for sponsor in current_sponsors %}
- <div class="col-md-6 col-lg-4 mb-2">
{% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
- </div>
{% endfor %}
</div>
--
GitLab