mirror of
https://github.com/jlengrand/bugsink.git
synced 2026-03-10 08:01:17 +00:00
Rotating chevrons!
This commit is contained in:
Klaas van Schelven
@@ -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"
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
}
|
||||
|
||||
238
theme/static/css/dist/styles.css
vendored
238
theme/static/css/dist/styles.css
vendored
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user