Merge pull request #632 from LibraryOfCongress/more-progress-indicators

Continued progress indicator work
LibraryOfCongress · Nov 15, 2018 · c0c3291 · c0c3291
2 parents aed89a3 + 165eb16
commit c0c3291
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 23 deletions.
diff --git a/concordia/static/css/base.css b/concordia/static/css/base.css
@@ -10,6 +10,7 @@
     --text-color-primary: rgba(38, 50, 56, 1); /* #263238 */
     --text-color-offwhite: rgba(250, 250, 250, 1); /* #FAFAFA */
     --text-nav-current: rgba(252, 76, 2, 1); /* #FC4C02 */
+
     --bg-offwhite: rgba(250, 250, 250, 1); /* #FAFAFA */
     --bg-lightest-gray: rgba(245, 245, 245, 1); /* #F5F5F5 */
     --bg-darkest-gray: rgba(51, 51, 51, 1); /* #333333 */
@@ -20,6 +21,10 @@
     --bg-divider: rgba(189, 189, 189, 1); /* #BDBDBD */
     --bg-card-title: rgba(51, 51, 51, 0.7); /* #333333 */
     --bg-loading: rgba(51, 51, 51, 0.5); /* #333333 */
+    --bg-completed: #00618e;
+    --bg-submitted: #2e91bf;
+    --bg-edit: #80cef3;
+
     --shadow-color: rgba(51, 51, 51, 0.8); /* #333333 */
     --light-shadow-color: rgba(51, 51, 51, 0.4); /* #333333 */
     --footer-links-color: #00618e;
@@ -267,6 +272,18 @@ p.hero-secondary.offwhite-text {
     background-color: var(--primary-color);
 }
 
+.bg-completed {
+    background-color: var(--bg-completed);
+}
+
+.bg-submitted {
+    background-color: var(--bg-submitted);
+}
+
+.bg-edit {
+    background-color: var(--bg-edit);
+}
+
 input {
     color: var(--text-color-primary);
     background-color: var(--bg-offwhite);
@@ -560,6 +577,13 @@ ul.nav-secondary {
     width: 100%;
 }
 
+.card.concordia-object-card .progress {
+    height: 1em;
+
+    border: solid black 1px;
+    border-radius: 0;
+}
+
 /*
  * Progress displays
  */
@@ -577,6 +601,13 @@ ul.nav-secondary {
     font-weight: inherit;
 }
 
+#progress-stats .transcription-status-key {
+    display: inline-block;
+    height: 0.6em;
+    width: 0.6em;
+    vertical-align: baseline;
+}
+
 /*
  * Homepage customizations
  */

diff --git a/concordia/templates/fragments/transcription-progress-bar.html b/concordia/templates/fragments/transcription-progress-bar.html
@@ -1,28 +1,32 @@
 {% load humanize %}
 
+<div id="contributor-stats">
+    {{ contributor_count|intcomma }}
+    contributor{{ contributor_count|pluralize}}
+</div>
+
 <div id="progress-bar" class="progress">
-    <div title="Completed" class="progress-bar bg-success" role="progressbar" style="width: {{ completed_percent }}%" aria-valuenow="{{ completed_percent }}" aria-valuemin="0" aria-valuemax="100">
+    <div title="Completed" class="progress-bar bg-completed" role="progressbar" style="width: {{ completed_percent }}%" aria-valuenow="{{ completed_percent }}" aria-valuemin="0" aria-valuemax="100">
     </div>
-    <div title="Submitted for Review" class="progress-bar bg-info" role="progressbar" style="width: {{ submitted_percent }}%" aria-valuenow="{{ submitted_percent }}" aria-valuemin="0" aria-valuemax="100">
+    <div title="Submitted for Review" class="progress-bar bg-submitted" role="progressbar" style="width: {{ submitted_percent }}%" aria-valuenow="{{ submitted_percent }}" aria-valuemin="0" aria-valuemax="100">
     </div>
-    <div title="In Progress" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: {{ edit_percent }}%" aria-valuenow="{{ edit_percent }}" aria-valuemin="0" aria-valuemax="100">
+    <div title="In Progress" class="progress-bar bg-edit" role="progressbar" style="width: {{ edit_percent }}%" aria-valuenow="{{ edit_percent }}" aria-valuemin="0" aria-valuemax="100">
     </div>
 </div>
 <div class="table-responsive-md">
     <table id="progress-stats" class="table table-sm font-weight-light">
         <tbody>
-            {% for key, label, value in transcription_status_counts %}
+            {% for key, label, value in transcription_status_counts reversed %}
                 <tr>
-                    <th class="text-nowrap"><a href="?transcription_status={{ key|urlencode }}">{{ label }}</a></th>
+                    <th class="text-nowrap">
+                        <a href="?transcription_status={{ key|urlencode }}">
+                            <span class="transcription-status-key bg-{{ key }}"></span>
+                            {{ label }}
+                        </a>
+                    </th>
                     <td class="text-right"><a href="?transcription_status={{ key|urlencode }}">{{ value|intcomma }}</a></td>
                 </tr>
             {% endfor %}
         </tbody>
-        <tbody>
-            <tr>
-                <th class="text-nowrap">Contributors:</th>
-                <td class="text-right">{{ contributor_count|intcomma }}</td>
-            <tr>
-        </tbody>
     </table>
 </div>
diff --git a/concordia/templates/transcriptions/campaign_detail.html b/concordia/templates/transcriptions/campaign_detail.html
@@ -31,14 +31,24 @@ <h4>Related Links</h4>
         </div>
     </div>
     <div class="row">
-        <div class="d-flex flex-wrap col-12 my-3 justify-content-around align-items-center text-center">
-            {% for project in campaign.project_set.published %}
-                <div class="col-12 col-md-4 col-lg-3 mb-3 px-3">
+        <div class="card-deck w-100 flex-column flex-sm-row justify-content-center align-items-center align-items-sm-stretch">
+            {% for project in projects %}
+                <div class="col-12 col-md-4 col-lg-3 m-2 p-1 concordia-object-card card bg-lightest-gray shadow-regular align-items-center" data-transcription-status="{{ project.lowest_transcription_status }}">
                     {% url 'transcriptions:project-detail' campaign.slug project.slug as project_url %}
+
                     <a href="{{ project_url }}" aria-hidden="true">
-                        <img src="{{ MEDIA_URL }}{{ project.thumbnail_image }}" class="img-fluid" alt="{{ project.title }}">
+                        <img class="card-img card-img-campaign" src="{{ MEDIA_URL }}{{ project.thumbnail_image }}" alt="{{ project.title }}">
                     </a>
-                    <h5 class="card-title pl-3 w-100 bg-lightest-gray"><a href="{{ project_url }}">{{ project.title }}</a></h5>
+
+                    <div class="progress w-100 my-2">
+                        <div title="Completed" class="progress-bar bg-completed" role="progressbar" style="width: {{ project.completed_percent }}%" aria-valuenow="{{ project.completed_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div title="Submitted for Review" class="progress-bar bg-submitted" role="progressbar" style="width: {{ project.submitted_percent }}%" aria-valuenow="{{ project.submitted_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div title="In Progress" class="progress-bar bg-edit" role="progressbar" style="width: {{ project.edit_percent }}%" aria-valuenow="{{ project.edit_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+
+                    <h6 class="text-center primary-text">
+                        <a href="{{ project_url }}">{{ project.title }}</a>
+                    </h6>
                 </div>
             {% endfor %}
         </div>

diff --git a/concordia/templates/transcriptions/project_detail.html b/concordia/templates/transcriptions/project_detail.html
@@ -29,12 +29,18 @@ <h1 class="m-3">{{ project.title }}</h1>
     <div class="row">
         <div class="card-deck w-100 flex-column flex-sm-row justify-content-center align-items-center align-items-sm-stretch">
             {% for item in items %}
-                <div class="col-12 col-md-4 col-lg-3 m-2 p-1 concordia-object-card card bg-lightest-gray shadow-regular justify-content-between align-items-center" data-transcription-status="{{ item.lowest_transcription_status }}">
+                <div class="col-12 col-md-4 col-lg-3 m-2 p-1 concordia-object-card card bg-lightest-gray shadow-regular align-items-center" data-transcription-status="{{ item.lowest_transcription_status }}">
                     <a href="{% url 'transcriptions:item-detail' campaign.slug project.slug item.item_id %}">
                         <img class="card-img card-img-campaign" alt="{{ item.title }}" src="{{ item.thumbnail_url }}">
                     </a>
 
-                    <h6 class="text-center primary-text my-3">
+                    <div class="progress w-100 my-2">
+                        <div title="Completed" class="progress-bar bg-completed" role="progressbar" style="width: {{ item.completed_percent }}%" aria-valuenow="{{ item.completed_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div title="Submitted for Review" class="progress-bar bg-submitted" role="progressbar" style="width: {{ item.submitted_percent }}%" aria-valuenow="{{ item.submitted_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div title="In Progress" class="progress-bar bg-edit" role="progressbar" style="width: {{ item.edit_percent }}%" aria-valuenow="{{ item.edit_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+
+                    <h6 class="text-center primary-text">
                         <a href="{% url 'transcriptions:item-detail' campaign.slug project.slug item.item_id %}" class="campaign-image-link">
                             {{ item.title }}
                         </a>

diff --git a/concordia/views.py b/concordia/views.py
@@ -323,6 +323,24 @@ def calculate_asset_stats(asset_qs, ctx):
         labeled_status_counts.append((status_key, status_label, value))
 
 
+def annotate_children_with_progress_stats(children):
+    for obj in children:
+        counts = {}
+
+        for k, v in TranscriptionStatus.CHOICES:
+            counts[k] = getattr(obj, f"{k}_count", 0)
+
+        obj.total_count = total = sum(counts.values())
+
+        for k, v in TranscriptionStatus.CHOICES:
+            if total > 0:
+                pct = round(100 * (counts[k] / total))
+            else:
+                pct = 0
+
+            setattr(obj, f"{k}_percent", pct)
+
+
 @method_decorator(default_cache_control, name="dispatch")
 class CampaignDetailView(DetailView):
     template_name = "transcriptions/campaign_detail.html"
@@ -333,6 +351,20 @@ class CampaignDetailView(DetailView):
     def get_context_data(self, **kwargs):
         ctx = super().get_context_data(**kwargs)
 
+        ctx["projects"] = projects = (
+            ctx["campaign"]
+            .project_set.published()
+            .annotate(
+                **{
+                    f"{key}_count": Count(
+                        "item__asset", filter=Q(item__asset__transcription_status=key)
+                    )
+                    for key in TranscriptionStatus.CHOICE_MAP.keys()
+                }
+            )
+        )
+        annotate_children_with_progress_stats(projects)
+
         campaign_assets = Asset.objects.filter(
             item__project__campaign=self.object,
             item__project__published=True,
@@ -381,11 +413,7 @@ def get_context_data(self, **kws):
 
         calculate_asset_stats(project_assets, ctx)
 
-        for item in ctx["items"]:
-            for k, v in TranscriptionStatus.CHOICES:
-                if getattr(item, f"{k}_count", 0) > 0:
-                    item.lowest_transcription_status = k
-                    break
+        annotate_children_with_progress_stats(ctx["items"])
 
         return ctx