CONCD-674 display heading data has not yet been added (#2251)

* CONCD-674 display heading data has not yet been added * CONCD-674 set the dialog box to one standard height (WiP) * CONCD-674 fixed an issue where controls weren't always clickable * CONCD-674 alt text
LibraryOfCongress · Jan 31, 2024 · b25ddf4 · b25ddf4
1 parent 316fcf8
commit b25ddf4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/concordia/migrations/0093_card_image_alt_text.py b/concordia/migrations/0093_card_image_alt_text.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.23 on 2024-01-30 20:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("concordia", "0092_simplepage_navigation"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="card",
+            name="image_alt_text",
+            field=models.TextField(blank=True),
+        ),
+    ]
diff --git a/concordia/models.py b/concordia/models.py
@@ -203,6 +203,7 @@ def get_next_review_campaign(self):
 
 
 class Card(models.Model):
+    image_alt_text = models.TextField(blank=True)
     image = models.ImageField(upload_to="card_images", blank=True, null=True)
     title = models.CharField(max_length=80)
     body_text = models.TextField(blank=True)

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -1046,6 +1046,14 @@ $card-progress-height: 12px;
 /*
  * Tutorial popup and cards navigation
  */
+#card-carousel {
+    height: 30.35rem;
+}
+
+#card-carousel .carousel-item {
+    height: 30.25rem;
+}
+
 #card-carousel .carousel-item img {
     background-color: #fff;
     border-top: 1px solid #efefef;
@@ -1056,6 +1064,13 @@ $card-progress-height: 12px;
     padding-left: 1.5rem;
 }
 
+#card-carousel .carousel-indicators {
+    left: 50%;
+    width: 60%;
+    margin-left: -30%;
+    text-align: center;
+}
+
 #card-carousel .carousel-indicators > li.active {
     background-color: #007bff;
     border-color: #007bff;

diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
@@ -815,9 +815,11 @@ <h4>Quick Tips</h4>
                                         {% endif %}
                                         <div class="position-static d-flex flex-column justify-content-around">
                                             {% if card.image %}
-                                                <img src="{{ card.image.url }}">
+                                                <img src="{{ card.image.url }}"{% if card.image_alt_text %} alt="{{ card.image_alt_text }}"{% endif %}>
+                                            {% endif %}
+                                            {% if card.display_heading %}
+                                                <h3>{{ card.display_heading }}</h3>
                                             {% endif %}
-                                            <h3>{{ card.display_heading }}</h3>
                                             <p>{{ card.body_text|safe }}</p>
                                         </div>
                                         {% if not forloop.last %}