Merge pull request #2114 from LibraryOfCongress/CONCD-482-rsar-tutori…

…al-popup CONCD-482 Build Tutorial popup and cards navigation
LibraryOfCongress · Oct 13, 2023 · 84e2a5e · 84e2a5e
2 parents 9c33fd5 + 37ddd9b
commit 84e2a5e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -1029,6 +1029,36 @@ $card-progress-height: 12px;
     }
 }
 
+/*
+ * Tutorial popup and cards navigation
+ */
+#card-carousel .carousel-item img {
+    background-color: #fff;
+    border-top: 1px solid #efefef;
+    padding-bottom: 1rem;
+}
+
+#card-carousel ul {
+    padding-left: 1.5rem;
+}
+
+#card-carousel .carousel-indicators > li.active {
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+#previous-card {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+}
+
+#next-card {
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+}
+
 /*
  * Campaign Resources Panel
  */

diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
@@ -699,6 +699,52 @@ <h5 class="modal-title">Are you sure?</h5>
         </div>
     </div>
     <div class="print-transcription-image d-none d-print-block"><img class="img-fluid" alt="Scanned image of the current content page" src="{% asset_media_url asset %}"></div>
+    {% if cards %}
+        <div id="tutorial-popup" class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header border-bottom-0">
+                        <h4>Quick Tips</h4>
+                        <button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">x</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="card-carousel" class="carousel slide" data-interval="false">
+                            <div class="carousel-inner">
+                                {% for card in cards %}
+                                    <div class="carousel-item pb-4 {% if forloop.first %} active {% endif %}">
+                                        {% if not forloop.first %}
+                                            <a id="previous-card" href="#card-carousel" role="button" data-slide="prev">
+                                                <strong><u><&nbsp;Back</u></strong>
+                                            </a>
+                                        {% endif %}
+                                        <div class="position-static d-flex flex-column justify-content-around">
+                                            {% if card.image %}
+                                                <img src="{{ card.image.url }}">
+                                            {% endif %}
+                                            <h3>{{ card.title }}</h3>
+                                            <p>{{ card.body_text|safe }}</p>
+                                        </div>
+                                        {% if not forloop.last %}
+                                            <a id="next-card" href="#card-carousel" data-slide="next">
+                                                <strong><u>Next&nbsp;></u></strong>
+                                            </a>
+                                        {% endif %}
+                                    </div>
+                                {% endfor %}
+                            </div>
+                            <ol class="carousel-indicators d-none d-lg-flex">
+                                {% for card in cards %}
+                                    <li data-target="#card-carousel" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" {% endif %}></li>
+                                {% endfor %}
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endif %}
 {% endblock main_content %}
 
 {% block body_scripts %}

diff --git a/concordia/views.py b/concordia/views.py
@@ -77,6 +77,7 @@
     AssetTranscriptionReservation,
     Banner,
     Campaign,
+    CardFamily,
     CarouselSlide,
     ConcordiaUser,
     Item,
@@ -87,6 +88,7 @@
     Topic,
     Transcription,
     TranscriptionStatus,
+    TutorialCard,
     UserAssetTagCollection,
     UserProfileActivity,
 )
@@ -1270,6 +1272,15 @@ def get_context_data(self, **kwargs):
 
         ctx["registered_contributors"] = asset.get_contributor_count()
 
+        if project.campaign.card_family:
+            card_family = project.campaign.card_family
+        else:
+            card_family = CardFamily.objects.filter(default=True).first()
+        if card_family is not None:
+            unordered_cards = TutorialCard.objects.filter(tutorial=card_family)
+            ordered_cards = unordered_cards.order_by("order")
+            ctx["cards"] = [tutorial_card.card for tutorial_card in ordered_cards]
+
         return ctx