Slightly prettier issue-list; I might have overflow under control

events/templates/events/base.html

@@ -1,2 +1,2 @@
 {% extends "base.html" %}
-{% block title %}{{ issue.title }}{# note: dubious: should really be event.title... #} | {{ block.super }}{% endblock %}
+{% block title %}{{ issue.title }}{# note: dubious: should really be event.title... #} · {{ block.super }}{% endblock %}

issues/templates/issues/issue_list.html

@@ -1,19 +1,36 @@
 {% extends "base.html" %}
+
+{% block title %}Issues · {{ project.name }} · Bugsink{% endblock %}
+
 {% block content %}
 
 <div class="m-4">
-<h1 class="text-3xl mt-4">Issues for project {{ project_id }}</h1>
+<h1 class="text-4xl mt-4">{{ project.name }} - Issues</h1>
 
-    <div>
-    {% for issue in issue_list %}
+    <div class="mt-4">
+      {% comment %}
+      <thead>
+          <tr>
+              <th colspan="2">The table header</th>
+          </tr>
+      </thead>
+      {% endcomment %}
+            {% for issue in issue_list %}
+            <div class="bg-slate-50 border-b-2 border-l-2 border-r-2 flex flex-nowrap w-full">
+                <div class="flex-initial self-center">
+                    <input type="checkbox" class="bg-white border-cyan-800 text-cyan-500 focus:ring-cyan-200 m-4"/>
+                </div>
+                <div class="ml-0 pb-4 pt-4 pr-4 flex-auto truncate">
+                    <div class="flex flex-nowrap">
+                        <div class="w-4/5 pr-2 truncate"><a href="/issues/issue/{{ issue.id }}/event/last/" class="text-cyan-500 font-bold">{{ issue.title }}</a></div>
+                        <div class="w-1/5 ml-2 italic">{{ issue.parsed_data.transaction }} </div>
+                    </div>
+                    <div class="text-sm">from <b>8 Nov 12:33</b> | last <b>8 Nov 12:39</b> | with <b>3</b> events</div>
+                </div>
+            </div>
+            {% endfor %}
 
-        <div class="m-4 ml-0 p-4 border-2 bg-slate-50">
-            <div><a href="/issues/issue/{{ issue.id }}/event/last/" class="text-cyan-500 font-bold">{{ issue.title }}</a> <span class="ml-2 italic">{{ issue.parsed_data.transaction }}</span> </div>
-            <div class="text-sm">from <b>8 Nov 12:33</b> | last <b>8 Nov 12:39</b> | with <b>3</b> events</div>
-        </div>
-
-    {% endfor %}
-    <div>
+    </div>
 
 
 </div>

issues/views.py

@@ -3,15 +3,18 @@ from django.shortcuts import render, get_object_or_404, redirect
 
 from events.models import Event
 
+from projects.models import Project
+
 from .utils import get_issue_grouper_for_data
 from .models import Issue
 
 
 def issue_list(request, project_id):
     issue_list = Issue.objects.filter(project_id=project_id)
+    project = get_object_or_404(Project, pk=project_id)
 
     return render(request, "issues/issue_list.html", {
-        "project_id": project_id,
+        "project": project,
         "issue_list": issue_list,
     })
 

tailwind.config.js

@@ -4,6 +4,6 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/forms")],
 }
 

theme/static/css/dist/styles.css

@@ -892,6 +892,26 @@ select {
   width: 100%;
 }
 
+.w-1\/5 {
+  width: 20%;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -913,6 +933,10 @@ select {
   list-style-type: decimal;
 }
 
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .place-content-end {
   place-content: end;
 }
@@ -929,10 +953,24 @@ select {
   justify-content: center;
 }
 
+.self-center {
+  align-self: center;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .whitespace-pre {
   white-space: pre;
 }
@@ -965,6 +1003,14 @@ select {
   border-top-width: 2px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-r-2 {
+  border-right-width: 2px;
+}
+
 .border-cyan-500 {
   --tw-border-opacity: 1;
   border-color: rgb(6 182 212 / var(--tw-border-opacity));
@@ -1010,6 +1056,11 @@ select {
   border-color: rgb(30 41 59 / var(--tw-border-opacity));
 }
 
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1045,6 +1096,26 @@ select {
   background-color: rgb(165 243 252 / var(--tw-bg-opacity));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.bg-cyan-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
+}
+
+.bg-cyan-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
+}
+
+.bg-slate-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1077,6 +1148,10 @@ select {
   padding-top: 1rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1175,6 +1250,11 @@ select {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1213,6 +1293,16 @@ select {
   background-color: rgb(34 211 238 / var(--tw-bg-opacity));
 }
 
+.focus\:ring-red-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-cyan-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(165 243 252 / var(--tw-ring-opacity));
+}
+
 .active\:ring:active {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);