From 10c30c8bf5adaeab5990021b51a0471989e16a78 Mon Sep 17 00:00:00 2001
From: Matthieu Schaller <schaller@strw.leidenuniv.nl>
Date: Tue, 11 Apr 2023 22:45:54 +0200
Subject: [PATCH] Set of fixes to the gallery to handle small screens
---
stylesheets/cards.css | 27 +++++++++++++++++++++++++--
templates/gallery.html | 16 +++++++++-------
2 files changed, 34 insertions(+), 9 deletions(-)
diff --git a/stylesheets/cards.css b/stylesheets/cards.css
index 2f7a7ac..0454be2 100644
--- a/stylesheets/cards.css
+++ b/stylesheets/cards.css
@@ -79,9 +79,33 @@
margin-bottom: 0;
}
+.gallery-card-img {
+ max-width: 90%;
+ display: flex;
+ flex: 1 1 auto;
+ /*border: 1px solid black; */
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+.gallery-title {
+ text-align: center;
+ /* font-size: 2.0vw; */
+}
+
+.gallery-text {
+ margin-left: 5px;
+
+ width: 100%;
+ margin-bottom: 0.5em;
+ flex-grow: 0;
+ align-self: flex-end;
+}
+
.gallery-card {
width: 30%;
-
+
border: 1px solid #555;
border-radius: 4px;
@@ -97,7 +121,6 @@
flex: 1 1 auto;
}
-
.caret {
width: 100%;
color: #298BDF;
diff --git a/templates/gallery.html b/templates/gallery.html
index ef0e585..8a35085 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -10,7 +10,7 @@
{{ helper.navbar(navbar, link) }}
<div class="text">
- <h1>Image and Movie Gallery</h1>
+ <h2>Image and Movie Gallery</h2>
</div>
<div class="padder"></div>
@@ -18,10 +18,12 @@
<div class="cards">
{% for card in cards|sort_cards %}
<div class="gallery-card">
- <div class="card-content">
+ <!-- <div class="gallery-card"> -->
<div>
- <h2> {{ card.title }}</h2>
+ <div class="gallery-title">
+ <h3> {{ card.title }}</h3>
+ </div>
{% if card.img %}
<div class="gallery-card-img">
<a href="{{ card.img }}">
@@ -32,21 +34,21 @@
{% endif %}
</a>
</div>
- <div>
+ <div class="gallery-text">
Author(s): <b>{{ card.author }}</b>
</div>
{% endif %}
{% if card.description %}
- <div>
+ <div class="gallery-text">
<p class="hideshow">Description <i class="fa fa-chevron-right" aria-hidden="true"></i></p>
<p class="abstract card">{{ card.description }}</p>
</div>
{% endif %}
{% if card.link %}
- <a href="{{ card.link }}">Related publication</a>
+ <a href="{{ card.link }}" class="gallery-text">Related publication</a>
{% endif %}
</div>
- </div>
+ <!-- </div> -->
</div>
{% endfor %}
{% for i in range(3 - (cards|length % 3)) %} {# Add extra padding #}
--
GitLab