users: display tasks as collapsable info boxes, not calls to action

WikipediaLibrary · Oct 6, 2022 · 65abd36 · 65abd36
1 parent ee8e307
commit 65abd36
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 32 deletions.
diff --git a/TWLight/resources/models.py b/TWLight/resources/models.py
@@ -490,12 +490,21 @@ class Meta:
     DANGER = 2
 
     TYPE_CHOICES = (
-        # Translators: link to a phabricator task with information about the current status of this partner
+        # Translators: Expandable element with information about the status of this partner
         (INFO, _("Service Information")),
-        # Translators: link to a phabricator task with information about a current issue with this partner
+        # Translators: Expandable element with information about the status of this partner
         (WARNING, _("Service Issue")),
-        # Translators: link to a phabricator task with information about a current outage for this partner
-        (DANGER, _("Service Outage")),
+        # Translators: Expandable element with information about the status of this partner
+        (DANGER, _("Temporarily Unavailable")),
+    )
+
+    TYPE_HELP = (
+        # Translators: information about the current status of this partner
+        (INFO, _("Ongoing work may impact your access")),
+        # Translators: information about a current issue with this partner
+        (WARNING, _("A known issue is impacting access for some users")),
+        # Translators: information about a current outage for this partner
+        (DANGER, _("Access is currently unavaiable")),
     )
 
     TYPE_SEVERITY = (
@@ -519,12 +528,12 @@ def url(self):
         return "https://phabricator.wikimedia.org/" + self.phabricator_task
 
     @property
-    def type_display(self):
-        return self.TYPE_CHOICES[self.task_type][1]
-
-    @property
-    def severity_display(self):
-        return self.TYPE_SEVERITY[self.task_type][1]
+    def task_display(self):
+        return (
+            self.TYPE_CHOICES[self.task_type][1],
+            self.TYPE_SEVERITY[self.task_type][1],
+            self.TYPE_HELP[self.task_type][1],
+        )
 
 
 class Contact(models.Model):

diff --git a/TWLight/static/css/new-local.css b/TWLight/static/css/new-local.css
@@ -47,6 +47,7 @@ COMMON CONTENT BLOCK CSS
 #main-content {
   padding: 0.5rem 1rem;
 }
+
 .twl-btn {
   white-space: nowrap;
   font-family: Roboto;
@@ -1001,14 +1002,33 @@ NEW MY LIBRARY COLLECTION TILES CSS
     text-align: right;
 }
 
+.phab-task-info{
+    border-color: #17a2b8;
+}
+
+.phab-task-warning{
+    border-color: #ffc107;
+}
+
+.phab-task-danger{
+    border-color: #dc3545;
+}
+
 .phab-task-button{
+    background-color: #FFFFFF;
+    color: #000000;
     -webkit-appearance: none;
     width: 98%;
     overflow: hidden;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     white-space: nowrap;
-    margin-bottom: 0.75rem;
+    color: #000000;
+    background-color: #FFFFFF;
+}
+
+.phab-task-button:hover{
+    text-decoration: underline;
 }
 
 .access-apply-button{

diff --git a/TWLight/users/templates/users/available_collection_tile.html b/TWLight/users/templates/users/available_collection_tile.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div id="tile-partner-{{available_collection.pk}}" class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
+<div id="tile-partner-{{available_collection.partner_pk}}" class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
   <div class="card collection-tile">
     {% if available_collection.searchable == searchable %}
       {% comment %}Translators: Hovertext for an icon which indicates whether a collection is searchable or not. {% endcomment %}
@@ -9,12 +9,12 @@
       <i class="fa fa-search partially-searchable-icon" title="{% trans 'Partially searchable' %}"></i>
     {% endif %}
     {% if available_collection.partner_logo %}
-      <a href="{% url 'partners:detail' available_collection.pk %}" class="tile-partner-link">
+      <a href="{% url 'partners:detail' available_collection.partner_pk %}" class="tile-partner-link">
         <img src="{{ available_collection.partner_logo }}" class="card-img-top library-tile-image"
             alt="{{ available_collection.partner_name }} logo">
       </a>
     {% else %}
-      <a href="{% url 'partners:detail' available_collection.pk %}" class="tile-partner-link">
+      <a href="{% url 'partners:detail' available_collection.partner_pk %}" class="tile-partner-link">
         <img src="..." class="card-img-top" alt="{{ available_collection.partner_name }} logo">
       </a>
     {% endif %}
@@ -58,13 +58,22 @@
       </p>
     </div>
     <div class="card-footer">
-      {% for task in available_collection.partner_phabricator_tasks %}
-      <a href="{{ task.url }}" class="btn btn-sm phab-task-button btn-{{ task.severity }}"
-          type="button" name="button" target="_blank" rel="noopener">
-        {{ task.display }}
-      </a>
-      {% endfor %}
-      <a href="{% url 'applications:apply_single' available_collection.pk %}"
+      <div class="col-12" style="padding: 0px;margin-bottom: 0.75rem;">
+          {% for task in available_collection.partner_phabricator_tasks %}
+          <a href="#P{{ available_collection.partner_pk }}{{ task.id }}" aria-controls="P{{ available_collection.partner_pk }}{{ task.id }}" data-toggle="collapse" role="button" aria-expanded="false" class="btn btn-sm phab-task-button phab-task-{{ task.severity }}">
+            {{ task.display }}
+          </a>
+          <div class="collapse" id="P{{ available_collection.partner_pk }}{{ task.id }}">
+            <div class="card card-body phab-task-{{ task.severity }}" style="width: 98%;">
+              {{ task.help }}
+              <a href="{{ task.url }}" target="_blank" rel="noopener">
+                {{ task.id }}
+              </a>
+            </div>
+          </div>
+          {% endfor %}
+      </div>
+      <a href="{% url 'applications:apply_single' available_collection.partner_pk %}"
           class="btn btn-sm twl-btn access-apply-button {% if available_collection.is_not_available %} disabled {% endif %}"
           type="button" name="button">
         {% comment %}Translators: On the My Library page (https://wikipedialibrary.wmflabs.org/users/my_library), this labels the text on a button which takes the user to the partner's application page, where they can apply for access. {% endcomment %}

diff --git a/TWLight/users/templates/users/user_collection_tile.html b/TWLight/users/templates/users/user_collection_tile.html
@@ -71,6 +71,21 @@
   </div>
   <div class="card-footer">
     <div class="container">
+        <div class="col-12" style="padding: 0px;margin-bottom: 0.75rem;">
+            {% for task in user_collection.partner_phabricator_tasks %}
+            <a href="#P{{ user_collection.partner_pk }}{{ task.id }}" aria-controls="P{{ user_collection.partner_pk }}{{ task.id }}" data-toggle="collapse" role="button" aria-expanded="false" class="btn btn-sm phab-task-button phab-task-{{ task.severity }}">
+              {{ task.display }}
+            </a>
+            <div class="collapse" id="P{{ user_collection.partner_pk }}{{ task.id }}">
+              <div class="card card-body phab-task-{{ task.severity }}" style="width: 98%;">
+                {{ task.help }}
+                <a href="{{ task.url }}" target="_blank" rel="noopener">
+                  {{ task.id }}
+                </a>
+              </div>
+            </div>
+            {% endfor %}
+        </div>
       {% if user_collection.partner_authorization_method != bundle_authorization %}
         {% if user_collection.auth_date_expires %}
           <p class="expiry-date-text">
@@ -128,14 +143,6 @@
           </div>
         {% endif %}
       {% else %}
-        <div class="col-12" style="padding: 0px;">
-            {% for task in user_collection.partner_phabricator_tasks %}
-            <a href="{{ task.url }}" class="btn btn-sm phab-task-button btn-{{ task.severity }}"
-                type="button" name="button" target="_blank" rel="noopener">
-              {{ task.display }}
-            </a>
-            {% endfor %}
-        </div>
         <div class="col-12" style="padding: 0px;">
           <a href="{{ user_collection.partner_access_url }}" class="btn btn-sm twl-btn access-apply-button"
                   type="button" name="button" target="_blank" rel="noopener">

diff --git a/TWLight/users/views.py b/TWLight/users/views.py
@@ -90,8 +90,10 @@ def _build_phab_task_list(phab_task_qs):
     for task in phab_task_qs:
         task_list.append(
             {
-                "severity": str(task.severity_display),
-                "display": str(task.type_display),
+                "id": str(task.phabricator_task),
+                "severity": str(task.task_display[1]),
+                "display": str(task.task_display[0]),
+                "help": str(task.task_display[2]),
                 "url": str(task.url),
             }
         )
@@ -1153,7 +1155,7 @@ def _build_available_collection_object(
             )
             available_collection_obj.append(
                 {
-                    "pk": available_collection.pk,
+                    "partner_pk": available_collection.pk,
                     "partner_name": available_collection.company_name,
                     "partner_logo": partner_logo,
                     "short_description": partner_descriptions["short_description"],