CONCD-1077 various fixes and tweaks, mostly UI (#2696)

rasarkar · web-flow · commit 42a5ef4905de · 2025-01-30T12:13:16.000-05:00
* CONCD-1049 Open footer links in new tabs

* CONCD-1064 Padding needed between save/submit/undo/redo buttons when stacked

* CONCD-1045 Padding needed between banner button and X

* CONCD-1080 update Twitter/X icon in the footer

* CONCD-1080 add the X logo to our bitmap, instead of as a separate file

* CONCD-975 site header: responsive layout

* CONCD-1061 Contrast and brightness filter numerical dropdowns are cut off

* CONCD-1069 Add count to Completed Campaigns page

* CONCD-1069 added unit test
diff --git a/concordia/static/img/social-icons-sprite.png b/concordia/static/img/social-icons-sprite.png
diff --git a/concordia/static/img/twitter-icon.png b/concordia/static/img/twitter-icon.png
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -1518,6 +1518,10 @@ button.btn-outline-primary:hover {
     }
 }
 
+.row > .filter-buttons {
+    width: 1.8rem;
+}
+
 #ocr-transcription-link {
     pointer-events: auto;
 }
diff --git a/concordia/templates/base.html b/concordia/templates/base.html
@@ -85,7 +85,7 @@ <h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
                             <li class="nav-item dropdown nav-dropdown">
                                 <a id="topnav-campaigns-dropdown-toggle" class="nav-link
                                                                                 {% if 'campaigns' in PATH_LEVEL_1 %}active{% endif %}" href="{% url 'campaign-topic-list' %}" data-bs-toggle="dropdown" aria-haspopup="true"
-                                   aria-expanded="false">Campaigns <span class="fa fa-chevron-down text-primary"></span></a>
+                                   aria-expanded="false">Campaigns&nbsp;<span class="fa fa-chevron-down text-primary"></span></a>
                                 <div class="dropdown-menu" aria-labelledby="topnav-campaigns-dropdown-toggle">
                                     <a class="dropdown-item" href="{% url 'campaign-topic-list' %}">All Campaigns</a>
                                     <a class="dropdown-item" href="{% url 'transcriptions:completed-campaign-list' %}">Completed Campaigns</a>
@@ -96,7 +96,7 @@ <h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
                                 <a id="topnav-help-dropdown-toggle" class="nav-link
                                                                            {% if PATH_LEVEL_1 == 'help-center' or 'get-started' in PATH_LEVEL_1 %}active{% endif %}"
                                    href="{% url 'help-center' %}" rel="nofollow" data-bs-toggle="dropdown" aria-haspopup="true"
-                                   aria-expanded="false">How-To <span class="fa fa-chevron-down text-primary"></span></a>
+                                   aria-expanded="false">How-To&nbsp;<span class="fa fa-chevron-down text-primary"></span></a>
                                 <div class="dropdown-menu"
                                      aria-labelledby="topnav-help-dropdown-toggle">
                                     <a class="dropdown-item" href="{% url 'welcome-guide' %}"
@@ -191,20 +191,20 @@ <h2 class="h3 fw-normal text-center text-lg-start">Follow
                                        text-lg-start">
                                 <li class="list-inline-item link-github">
                                     <a href="https://github.com/LibraryOfCongress/concordia"
-                                       title="GitHub">
+                                       title="GitHub" target="_blank">
                                         <span class="bitmap-icon github-icon"></span>
                                     </a>
                                 </li>
                                 <li class="list-inline-item link-twitter">
                                     <a href="https://www.twitter.com/Crowd_LOC"
-                                       title="Twitter">
+                                       title="Twitter" target="_blank">
                                         <span class="bitmap-icon twitter-icon"></span>
                                     </a>
                                 </li>
                                 <li class="list-inline-item link-email">
                                     <a
                                         href="https://updates.loc.gov/accounts/USLOC/subscriber/new?topic_id=USLOC_175"
-                                        title="Newsletter">
+                                        title="Newsletter" target="_blank">
                                         <span class="bitmap-icon email-icon"></span>
                                     </a>
                                 </li>
@@ -214,13 +214,13 @@ <h2 class="h3 fw-normal text-center text-lg-start">Follow
                             <ul class="list-unstyled list-inline small fw-bold mb-0
                                        text-center text-lg-start">
                                 <li class="list-inline-item mb-1"><a
-                                    href="/for-educators/">For Educators</a></li>
+                                    href="/for-educators/" target="_blank">For Educators</a></li>
                                 <li class="list-inline-item mb-1"><a
-                                    href="https://historyhub.history.gov/community/crowd-loc">Discuss</a></li>
+                                    href="https://historyhub.history.gov/community/crowd-loc" target="_blank">Discuss</a></li>
                                 <li class="list-inline-item mb-1"><a href="https://ask.loc.gov/crowd" target="_blank" rel=noopener>Contact
                                     Us</a></li>
                                 <li class="list-inline-item"><a
-                                    href="{% url 'welcome-guide' %}">Help</a></li>
+                                    href="{% url 'welcome-guide' %}" target="_blank">Help</a></li>
                             </ul>
                         </div>
                         <div class="col-lg-auto align-self-center">
diff --git a/concordia/templates/home.html b/concordia/templates/home.html
@@ -16,7 +16,7 @@
         <div id="homepage-contribute-container" class="container my-4">
             <div class="px-default ms-md-3 mb-5">
                 <div class="alert {{ banner.alert_class }} alert-dismissible w-100 d-flex" id="banner-{{ banner.slug }}" role="alert">
-                    <div class="d-flex flex-1 justify-content-center">
+                    <div class="d-flex flex-1 justify-content-center me-2">
                         <a class="btn {{ banner.btn_class }}" href="{{ banner.link }}"{% if banner.open_in_new_window_tab %} target="_blank"{% endif %}>
                             {{ banner.text }}
                         </a>
diff --git a/concordia/templates/transcriptions/asset_detail/editor.html b/concordia/templates/transcriptions/asset_detail/editor.html
@@ -76,7 +76,7 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
 
             <div class="print-transcription-text" aria-hidden="true" style="display: none;">{{ transcription.text }}</div>
 
-            <div class="my-3 d-print-none d-flex flex-wrap justify-content-center align-items-center">
+            <div class="mt-3 d-print-none d-flex flex-wrap justify-content-center align-items-center">
                 {% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}
                     <div class="form-check mt-0 mb-3 d-flex justify-content-center w-100">
                         <input id="nothing-to-transcribe" type="checkbox" class="form-check-input" />
@@ -90,16 +90,16 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
                     </div>
 
                     <div>
-                        <button id="save-transcription-button" disabled type="submit" class="btn btn-primary mx-1" title="Save the text you entered above">
+                        <button id="save-transcription-button" disabled type="submit" class="btn btn-primary mx-1  mb-3" title="Save the text you entered above">
                             Save
                         </button>
-                        <button id="rollback-transcription-button" {% if not undo_available %}disabled{% endif %} type="button" class="btn btn-outline-primary mx-1" title="Undo" data-url="{% url 'rollback-transcription' asset_pk=asset.pk %}">
+                        <button id="rollback-transcription-button" {% if not undo_available %}disabled{% endif %} type="button" class="btn btn-outline-primary mx-1 mb-3" title="Undo" data-url="{% url 'rollback-transcription' asset_pk=asset.pk %}">
                             <span class="fas fa-undo"></span> Undo
                         </button>
-                        <button id="rollforward-transcription-button" {% if not redo_available %}disabled{% endif %} type="button" class="btn btn-outline-primary mx-1" title="Redo" data-url="{% url 'rollforward-transcription' asset_pk=asset.pk %}">
+                        <button id="rollforward-transcription-button" {% if not redo_available %}disabled{% endif %} type="button" class="btn btn-outline-primary mx-1 mb-3" title="Redo" data-url="{% url 'rollforward-transcription' asset_pk=asset.pk %}">
                             Redo <span class="fas fa-redo"></span>
                         </button>
-                        <button id="submit-transcription-button" disabled type="button" class="btn btn-primary mx-1" title="Request another volunteer to review the text you entered above">
+                        <button id="submit-transcription-button" disabled type="button" class="btn btn-primary mx-1  mb-3" title="Request another volunteer to review the text you entered above">
                             Submit for Review
                         </button>
                     </div>
diff --git a/concordia/templates/transcriptions/asset_detail/viewer_filters.html b/concordia/templates/transcriptions/asset_detail/viewer_filters.html
@@ -38,7 +38,7 @@
                         />
                         <label class="visually-hidden" for="gamma">Gamma</label>
                     </div>
-                    <div class="col p-0">
+                    <div class="col p-0 filter-buttons">
                         <div class="row m-0">
                             <button id="gamma-up" type="button" class="arrow-button">
                                 <span class="fas fa-chevron-up" />
@@ -92,7 +92,7 @@
                         />
                         <label class="visually-hidden" for="threshold">Threshold</label>
                     </div>
-                    <div class="col p-0">
+                    <div class="col p-0 filter-buttons">
                         <div class="row m-0">
                             <button id="threshold-up" type="button" class="arrow-button">
                                 <span class="fas fa-chevron-up" />
diff --git a/concordia/templates/transcriptions/campaign_list_small_blocks.html b/concordia/templates/transcriptions/campaign_list_small_blocks.html
@@ -15,7 +15,8 @@
 {% block main_content %}
     <div class="container py-3">
         <h1>Completed Campaigns</h1>
-        <div id="campaign-options" class="d-flex flex-wrap justify-content-end my-2">
+        <div id="campaign-options" class="d-flex flex-wrap my-2">
+            <div class="d-flex align-items-center me-auto mt-2">Results: {{ result_count }} Campaigns</div>
             <div class="d-flex align-items-center ms-3 mt-2">
                 <label for="view-options" class="pe-1">View</label>
                 <select id="view-options">
diff --git a/concordia/tests/test_views.py b/concordia/tests/test_views.py
@@ -157,6 +157,17 @@ def test_queryset(self):
         queryset = view.get_queryset()
         self.assertEqual(queryset.count(), 1)
 
+    def test_context_data(self):
+        request = RequestFactory().get("/campaigns/completed/")
+        response = CompletedCampaignListView.as_view()(request)
+        self.assertIsInstance(response.context_data, dict)
+        self.assertEqual(response.context_data["result_count"], 2)
+
+        request = RequestFactory().get("/campaigns/completed/?type=completed")
+        response = CompletedCampaignListView.as_view()(request)
+        self.assertIsInstance(response.context_data, dict)
+        self.assertEqual(response.context_data["result_count"], 1)
+
     def test_research_centers(self):
         today = date.today()
 
diff --git a/concordia/views.py b/concordia/views.py
@@ -940,9 +940,11 @@ def get_queryset(self):
         return campaigns.order_by("-completed_date")
 
     def get_context_data(self, **kwargs):
+        campaigns = self._get_all_campaigns()
         data = super().get_context_data(**kwargs)
+        data["result_count"] = campaigns.count()
         data["research_centers"] = ResearchCenter.objects.filter(
-            campaign__in=self._get_all_campaigns()
+            campaign__in=campaigns
         ).distinct()
 
         return data

Original file line number	Diff line number	Diff line change
`@@ -1518,6 +1518,10 @@ button.btn-outline-primary:hover {`
`1518`	`1518`	`}`
`1519`	`1519`	`}`
`1520`	`1520`
	`1521`	`+.row > .filter-buttons {`
	`1522`	`+ width: 1.8rem;`
	`1523`	`+}`
	`1524`	`+`
`1521`	`1525`	`#ocr-transcription-link {`
`1522`	`1526`	`pointer-events: auto;`
`1523`	`1527`	`}`