Merge pull request #2358 from opensafely-core/restyle-templates

Restyle templates

DEVELOPERS.md

@@ -19,6 +19,7 @@
 - [Deployment](#deployment)
 - [Testing](#testing)
   - [Slack Testing](#slack-testing)
+- [Components](#components)
 - [Backends](#backends)
 
 ## Local development
@@ -274,6 +275,13 @@ just test-dev
 ```
 
 
+## Components
+
+Job Server uses the Slippers library to build reusable components.
+
+To view the existing components, and see what attributes they receive, [visit the UI gallery](https://jobs.opensafely.org/ui-components/).
+
+
 ## Backends
 
 Backends in this project represent a [job runner](https://github.com/opensafely-core/job-runner) instance somewhere.

assets/src/scripts/tw.js

@@ -51,6 +51,23 @@ document.addEventListener("alpine:init", () => {
       return null;
     },
   }));
+
+  Alpine.data("dropdown", () => ({
+    open: false,
+
+    init() {
+      this.$refs.dialogue.classList.add("hidden");
+    },
+
+    trigger: {
+      // eslint-disable-next-line func-names
+      "@click": function () {
+        this.open = !this.open;
+        this.$refs.dialogue.classList.toggle("hidden");
+        this.$refs.dialogue.setAttribute("aria-expanded", this.open);
+      },
+    },
+  }));
 });
 
 window.Alpine = Alpine;

assets/src/styles/tw.css

@@ -10,3 +10,7 @@ summary::-webkit-details-marker {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
+
+[x-cloak] {
+  @apply !hidden;
+}

jobserver/templatetags/duration_tools.py

@@ -30,12 +30,12 @@ def duration(td):
     minutes, seconds = divmod(remaining_seconds, 60)
 
     if hours:
-        output += f"{int(hours)}hours "
+        output += f"{int(hours)} hours "
 
     if minutes:
-        output += f"{int(minutes)}minutes "
+        output += f"{int(minutes)} minutes "
 
     if seconds:
-        output += f"{int(seconds)}seconds"
+        output += f"{int(seconds)} seconds"
 
     return output.strip()

jobserver/views/releases.py

@@ -51,26 +51,15 @@ def get(self, request, *args, **kwargs):
             request.user, "release_file_view", project=project
         )
 
-        def build_title(release):
-            created_at = naturaltime(release.created_at)
-            created_at = (
-                f'<span title="{release.created_at.isoformat()}">{created_at}</span>'
-            )
-
-            name = release.created_by.name
-            url = f'<a href="{release.workspace.get_absolute_url()}">{release.workspace.name}</a>'
-
-            return mark_safe(
-                f"Files released by {name} from {release.backend.name} in the {url} workspace {created_at}"
-            )
-
         releases = [
             {
+                "backend": r.backend,
                 "can_view_files": can_view_files and r.files.exists(),
+                "created_at": r.created_at,
+                "created_by": r.created_by,
                 "download_url": r.get_download_url(),
                 "files": r.files.all(),
                 "id": r.pk,
-                "title": build_title(r),
                 "view_url": r.get_absolute_url(),
                 "workspace": r.workspace,
             }

templates/_components/button.html

@@ -8,32 +8,52 @@
 {% else %}
   <button
     {% attrs disabled type=type|default:"button" id name %}
+    {% if x_bind %}x-bind="{{ x_bind }}"{% endif %}
 {% endif %}
 
     class="
-      inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white transition-buttons duration-200
+      inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-buttons duration-200
+
+      {% if small %}
+        px-2 py-1 text-xs font-normal
+      {% else %}
+        px-4 py-2 text-sm font-medium
+      {% endif %}
+
       {% if disabled %}
         cursor-not-allowed bg-slate-300 text-slate-800
       {% elif variant == "primary" %}
-        bg-oxford-600
+        bg-oxford-600 text-white
         hover:bg-oxford-700
         focus:bg-oxford-700 focus:ring-oxford-500 focus:ring-offset-white
+      {% elif variant == "primary-outline" %}
+        bg-transparent border border-oxford-700 text-oxford-700
+        hover:bg-oxford-100
+        focus:bg-oxford-100 focus:ring-oxford-500 focus:ring-offset-white
       {% elif variant == "secondary" %}
-        bg-slate-500
+        bg-slate-500 text-white
         hover:bg-slate-600
         focus:bg-slate-600 focus:ring-slate-500 focus:ring-offset-white
+      {% elif variant == "secondary-outline" %}
+        bg-transparent border border-slate-700 text-slate-700
+        hover:bg-slate-200
+        focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
       {% elif variant == "danger" %}
-        bg-bn-ribbon-600
+        bg-bn-ribbon-600 text-white
         hover:bg-bn-ribbon-700
         focus:ring-bn-ribbon-500 focus:ring-offset-white
       {% elif variant == "warning" %}
-        bg-bn-flamenco-600
+        bg-bn-flamenco-600 text-white
         hover:bg-bn-flamenco-700
         focus:ring-bn-flamenco-500 focus:ring-offset-white
       {% elif variant == "success" %}
-        bg-green-600
+        bg-green-600 text-white
         hover:bg-green-700
         focus:ring-green-500 focus:ring-offset-white
+      {% elif variant == "success-outline" %}
+        bg-transparent border border-green-700 text-green-700
+        hover:bg-green-100
+        focus:bg-green-100 focus:ring-green-500 focus:ring-offset-white
       {% endif %}
 
       {% if not disabled %}

templates/_components/list-group/list-group-item.html

@@ -5,6 +5,10 @@
       hover:bg-oxford-50
       focus:bg-oxford-50 focus:outline-none focus:ring-2 focus:ring-inset
       sm:px-6
+      {% if disabled %}
+      pointer-events-none cursor-not-allowed text-slate-700
+      {% endif %}
+      {{ class }}
     "
     href="{{ href }}"
   >

templates/job_request_pick_ref.html

@@ -1,77 +1,67 @@
-{% extends "base.html" %}
+{% extends "base-tw.html" %}
 
 {% load humanize %}
 
-{% block content %}
-
-<nav aria-label="breadcrumb">
-  <ol class="breadcrumb">
-
-    <li class="breadcrumb-item"><a href="/">Home</a></li>
-
-    <li class="breadcrumb-item">
-      <a href="{{ workspace.project.org.get_absolute_url }}">
-        {{ workspace.project.org.name }}
-      </a>
-    </li>
-
-    <li class="breadcrumb-item">
-      <a href="{{ workspace.project.get_absolute_url }}">
-        {{ workspace.project.title }}
-      </a>
-    </li>
+{% block metatitle %}{{ workspace.name }}: Pick commit | OpenSAFELY Jobs{% endblock metatitle %}
 
-    <li class="breadcrumb-item">
-      <a href="{{ workspace.get_absolute_url }}">
-        {{ workspace.name }}
-      </a>
-    </li>
+{% block breadcrumbs %}
+  {% #breadcrumbs %}
+    {% url 'home' as home_url %}
+    {% breadcrumb title="Home" url=home_url %}
+    {% breadcrumb location="Organisation" title=workspace.project.org.name url=workspace.project.org.get_absolute_url %}
+    {% breadcrumb location="Project" title=workspace.project.name url=workspace.project.get_absolute_url %}
+    {% breadcrumb location="Workspace" title=workspace.name url=workspace.get_absolute_url %}
+    {% breadcrumb title="Pick commit" active=True %}
+  {% /breadcrumbs %}
+{% endblock breadcrumbs %}
 
-    <li class="breadcrumb-item active" aria-current="page">Pick Commit</li>
-
-  </ol>
-</nav>
-
-<div class="row">
-  <div class="col-lg-8 offset-lg-2">
-    <h3 class="mb-3">{{ workspace.name }}</h3>
-
-    <p>
+{% block content %}
+<div
+  class="
+    mb-6 mt-3 flex flex-col gap-6 items-center text-center
+    md:mt-0 md:flex-row md:text-left
+  "
+>
+  {% if workspace.project.org.logo_file %}
+  <img
+    alt="{{ workspace.project.org.name }} logo"
+    class="w-36 h-36 bg-white aspect-square rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex-shrink-0"
+    height="144"
+    src="{{ workspace.project.org.logo_file.url }}"
+    width="144"
+  />
+  {% endif %}
+  <div class="flex-grow flex flex-col gap-y-4 md:gap-y-2">
+    <h1 class="text-3xl tracking-tight break-words md:text-4xl font-bold text-slate-900">
+      {{ workspace.name }}
+    </h1>
+    <p class="font-lg text-slate-600">
       Click on a commit below to run jobs with the <code>project.yaml</code>
       from that commit.
     </p>
-
   </div>
 </div>
 
 {% if error %}
-<div class="row">
-  <div class="col-lg-8 offset-lg-2 my-5">
-
-    <p>An error occurred while trying to get commits for this workspace:</p>
-
-    <pre class="text-left">{{ error }}</pre>
-
-  </div>
-</div>
+{% #alert title="An error occurred" class="max-w-3xl mb-6" variant="warning" %}
+  <p class="mb-4">An error occurred while trying to get commits for this workspace:</p>
+  {% #code %}{{ error }}{% /code %}
+{% /alert %}
 {% endif %}
 
 {% if commits %}
-<div class="row job-create mt-3">
-  <div class="col-lg-8 offset-lg-2">
-
-    <ul class="list-group">
-      {% for commit in commits %}
-      <li class="list-group-item list-group-item-action">
-        <a href="{% url 'job-request-create' org_slug=workspace.project.org.slug project_slug=workspace.project.slug workspace_slug=workspace.name ref=commit.sha %}">
-          {{ commit.message }}
-        </a>
-      </li>
-      {% endfor %}
-    </ul>
-
-  </div>
-</div>
+{% #card title="Commits" class="max-w-3xl" %}
+  {% #list_group %}
+    {% for commit in commits %}
+      {% url 'job-request-create' org_slug=workspace.project.org.slug project_slug=workspace.project.slug workspace_slug=workspace.name ref=commit.sha as commit_url %}
+      {% #list_group_item href=commit_url %}
+        {{ commit.message }}
+        <span class="block text-sm text-slate-600">
+          SHA: {{ commit.sha }}
+        </span>
+      {% /list_group_item %}
+    {% endfor %}
+  {% /list_group %}
+{% /card %}
 {% endif %}
-
 {% endblock content %}