diff --git a/.envrc b/.envrc new file mode 100644 index 0000000..84fc8e5 --- /dev/null +++ b/.envrc @@ -0,0 +1,7 @@ +# Automatically sets up your devbox environment whenever you cd into this +# directory via our direnv integration: + +eval "$(devbox generate direnv --print-envrc)" + +# check out https://www.jetpack.io/devbox/docs/ide_configuration/direnv/ +# for more details diff --git a/README.md b/README.md index 4adc39f..ae64232 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Mostly just a project to test [temporal.io](https://temporal.io/). - Otherwise using a cronjob would do the job, no need for temporal. - [ ] Some nice UI to try out [htmx](https://htmx.org/). +![Screenshot](docs/screenshot.png) + # Development ### Dependencies diff --git a/devbox.json b/devbox.json index af4b410..0ec3fa5 100644 --- a/devbox.json +++ b/devbox.json @@ -4,15 +4,5 @@ "temporal-cli@latest", "watchexec@latest", "tailwindcss@latest" - ], - "shell": { - "init_hook": [ - "echo 'Welcome to devbox!' > /dev/null" - ], - "scripts": { - "test": [ - "echo \"Error: no test specified\" && exit 1" - ] - } - } + ] } diff --git a/docs/screenshot.png b/docs/screenshot.png new file mode 100644 index 0000000..1ec5304 Binary files /dev/null and b/docs/screenshot.png differ diff --git a/internal/static/css/tailwind.css b/internal/static/css/tailwind.css index aa17b38..4079de5 100644 --- a/internal/static/css/tailwind.css +++ b/internal/static/css/tailwind.css @@ -594,6 +594,11 @@ video { grid-column: span 2 / span 2; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .mt-20 { margin-top: 5rem; } @@ -602,6 +607,10 @@ video { margin-top: 1.5rem; } +.mt-8 { + margin-top: 2rem; +} + .flex { display: flex; } @@ -614,6 +623,10 @@ video { height: 5rem; } +.h-8 { + height: 2rem; +} + .w-20 { width: 5rem; } @@ -622,6 +635,14 @@ video { max-width: 768px; } +.flex-auto { + flex: 1 1 auto; +} + +.grid-flow-col { + grid-auto-flow: column; +} + .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -650,6 +671,10 @@ video { gap: 0.5rem; } +.gap-px { + gap: 1px; +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -664,6 +689,10 @@ video { justify-self: end; } +.overflow-hidden { + overflow: hidden; +} + .overflow-visible { overflow: visible; } @@ -676,6 +705,10 @@ video { border-radius: 9999px; } +.rounded-lg { + border-radius: 0.5rem; +} + .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -691,11 +724,21 @@ video { background-color: rgb(134 239 172 / var(--tw-bg-opacity)); } +.bg-green-500 { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); +} + .bg-red-300 { --tw-bg-opacity: 1; background-color: rgb(252 165 165 / 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; } @@ -704,6 +747,25 @@ video { padding: 1.25rem; } +.text-center { + text-align: center; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + .text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity)); @@ -747,3 +809,13 @@ video { --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + +.hover\:bg-green-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); +} diff --git a/internal/ui/components/base.tmpl b/internal/ui/components/base.tmpl index 2686af1..5459464 100644 --- a/internal/ui/components/base.tmpl +++ b/internal/ui/components/base.tmpl @@ -10,6 +10,10 @@
{{template "main" .}} +