From 93414c1e5133d7d4d813f8ea3f7f91506b53b2f9 Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Fri, 17 Nov 2023 22:23:22 +0100
Subject: [PATCH] Rotating chevrons!

---
 events/templates/events/event_detail.html |  11 +-
 static/js/issue.js                        |  13 ++
 theme/static/css/dist/styles.css          | 238 ++++++----------------
 3 files changed, 82 insertions(+), 180 deletions(-)

diff --git a/events/templates/events/event_detail.html b/events/templates/events/event_detail.html
index 7feb6db..4e9b253 100644
--- a/events/templates/events/event_detail.html
+++ b/events/templates/events/event_detail.html
@@ -38,8 +38,15 @@
         
         <div class="bg-white w-full font-mono">
 
-            <div class="pl-4 pt-2 pb-2 border-b-2 {% if forloop.first %}border-t-2{% endif %} {% if frame.in_app %}bg-slate-300 border-slate-500{% else %}bg-white border-slate-300{% endif %} cursor-pointer" onclick="toggleFrameVisibility(this)">
-                <span class="font-bold">{{ frame.filename }}</span> in <span class="font-bold">{{ frame.function }}</span> line <span class="font-bold">{{ frame.lineno }}</span>.
+            <div class="flex pl-4 pt-2 pb-2 border-b-2 {% if forloop.first %}border-t-2{% endif %} {% if frame.in_app %}bg-slate-300 border-slate-500{% else %}bg-white border-slate-300{% endif %} cursor-pointer" onclick="toggleFrameVisibility(this)">
+                <div>
+                    <span class="font-bold">{{ frame.filename }}</span> in <span class="font-bold">{{ frame.function }}</span> line <span class="font-bold">{{ frame.lineno }}</span>.
+                </div>
+                <div class="ml-auto pr-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 js-chevron transition-all {% if forloop.last %}rotate-180{% endif %}">
+                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                    </svg>
+                </div>
             </div>
 
             <div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %} {% if forloop.last %}xl:flex{% endif %} overflow-hidden transition-all"
diff --git a/static/js/issue.js b/static/js/issue.js
index 0e0c53a..63703d2 100644
--- a/static/js/issue.js
+++ b/static/js/issue.js
@@ -1,5 +1,9 @@
 "use strict";
 
+function toggleFoo(element) {
+    element.classList.toggle("rotate-180");
+}
+    
 function distanceToWindowBottom() {
     // https://stackoverflow.com/a/2800676/339144
     let scrollPosition = window.pageYOffset;
@@ -94,6 +98,7 @@ function toggleFrameVisibility(frameHeader) {
     } else {
         collapseSection(frameDetails);
     }
+    frameHeader.querySelector(".js-chevron").classList.toggle("rotate-180");
 }
 
 
@@ -101,14 +106,19 @@ function showAllFrames(frameHeader) {
     document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
         expandSection(frameDetails);
     });
+    document.querySelectorAll(".js-chevron").forEach((chevron) => {
+        chevron.classList.add("rotate-180");
+    });
 }
 
 function showInAppFrames(frameHeader) {
     document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
         if (frameDetails.classList.contains("js-in-app")) {
             expandSection(frameDetails);
+            frameDetails.parentNode.querySelector(".js-chevron").classList.add("rotate-180");
         } else {
             collapseSection(frameDetails);
+            frameDetails.parentNode.querySelector(".js-chevron").classList.remove("rotate-180");
         }
     });
 }
@@ -117,4 +127,7 @@ function hideAllFrames(frameHeader) {
     document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
         collapseSection(frameDetails);
     });
+    document.querySelectorAll(".js-chevron").forEach((chevron) => {
+        chevron.classList.remove("rotate-180");
+    });
 }
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index d3ebc4c..4c627f2 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -755,10 +755,6 @@ select {
   visibility: visible;
 }
 
-.invisible {
-  visibility: hidden;
-}
-
 .collapse {
   visibility: collapse;
 }
@@ -783,10 +779,6 @@ select {
   position: sticky;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -800,10 +792,18 @@ select {
   margin-bottom: 3rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
 
+.ml-0 {
+  margin-left: 0px;
+}
+
 .ml-16 {
   margin-left: 4rem;
 }
@@ -812,6 +812,18 @@ select {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -820,28 +832,8 @@ select {
   margin-top: 1.5rem;
 }
 
-.ml-0 {
-  margin-left: 0px;
-}
-
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.mr-4 {
-  margin-right: 1rem;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
+.ml-auto {
+  margin-left: auto;
 }
 
 .block {
@@ -876,12 +868,12 @@ select {
   height: 100vh;
 }
 
-.h-0 {
-  height: 0px;
+.h-6 {
+  height: 1.5rem;
 }
 
-.max-h-0 {
-  max-height: 0px;
+.h-5 {
+  height: 1.25rem;
 }
 
 .w-1\/4 {
@@ -896,14 +888,23 @@ select {
   width: 100%;
 }
 
-.w-auto {
-  width: auto;
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-5 {
+  width: 1.25rem;
 }
 
 .border-collapse {
   border-collapse: collapse;
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -924,10 +925,6 @@ select {
   align-content: flex-start;
 }
 
-.items-end {
-  align-items: flex-end;
-}
-
 .items-center {
   align-items: center;
 }
@@ -936,10 +933,6 @@ select {
   justify-content: center;
 }
 
-.justify-items-end {
-  justify-items: end;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -948,14 +941,6 @@ select {
   white-space: pre;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -976,10 +961,6 @@ select {
   border-bottom-width: 4px;
 }
 
-.border-l-2 {
-  border-left-width: 2px;
-}
-
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -988,34 +969,24 @@ select {
   border-top-width: 2px;
 }
 
-.border-slate-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(203 213 225 / var(--tw-border-opacity));
-}
-
-.border-slate-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(100 116 139 / var(--tw-border-opacity));
-}
-
-.border-cyan-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(103 232 249 / var(--tw-border-opacity));
-}
-
 .border-cyan-500 {
   --tw-border-opacity: 1;
   border-color: rgb(6 182 212 / var(--tw-border-opacity));
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
-.border-slate-200 {
+.border-slate-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(226 232 240 / var(--tw-border-opacity));
+  border-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
 .bg-gray-50 {
@@ -1023,11 +994,6 @@ select {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-slate-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
 .bg-slate-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
@@ -1043,29 +1009,15 @@ select {
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
 
-.bg-slate-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .p-4 {
   padding: 1rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1078,12 +1030,12 @@ select {
   padding-left: 1rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
+.pr-2 {
+  padding-right: 0.5rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
+.pt-2 {
+  padding-top: 0.5rem;
 }
 
 .pt-4 {
@@ -1094,30 +1046,6 @@ select {
   padding-right: 1rem;
 }
 
-.pr-6 {
-  padding-right: 1.5rem;
-}
-
-.pt-1 {
-  padding-top: 0.25rem;
-}
-
-.pb-6 {
-  padding-bottom: 1.5rem;
-}
-
-.pb-5 {
-  padding-bottom: 1.25rem;
-}
-
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1140,11 +1068,21 @@ select {
   line-height: 2.25rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1155,16 +1093,6 @@ select {
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1196,11 +1124,6 @@ select {
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
-.text-slate-700 {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / 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);
 }
@@ -1211,18 +1134,6 @@ select {
   transition-duration: 150ms;
 }
 
-.delay-150 {
-  transition-delay: 150ms;
-}
-
-.delay-1000 {
-  transition-delay: 1000ms;
-}
-
-.duration-1000 {
-  transition-duration: 1000ms;
-}
-
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1231,39 +1142,14 @@ select {
   border-bottom-width: 4px;
 }
 
-.hover\:bg-slate-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-slate-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-cyan-50:hover {
+.hover\:bg-slate-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
-}
-
-.focus\:border-4:focus {
-  border-width: 4px;
-}
-
-.focus\:ring:focus {
-  --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);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
 .active\:ring:active {
@@ -1273,10 +1159,6 @@ select {
 }
 
 @media (min-width: 1280px) {
-  .xl\:ml-4 {
-    margin-left: 1rem;
-  }
-
   .xl\:flex {
     display: flex;
   }