feat(settings): nice pills in tables

This commit is contained in:
Tine 2024-02-23 14:56:00 +01:00
parent fe0ab578a2
commit cb690409f4
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
7 changed files with 52 additions and 10 deletions

View file

@ -90,7 +90,7 @@ func (h *BaseHandler) SettingsHealthchecksCreatePOST(c echo.Context) error {
Name: c.FormValue("name"),
Slug: slug.Make(c.FormValue("name")),
Schedule: c.FormValue("schedule"),
WorkerGroups: strings.Split(c.FormValue("workergroups"), ","),
WorkerGroups: strings.Split(c.FormValue("workergroups"), " "),
Script: c.FormValue("script"),
}

View file

@ -12,6 +12,11 @@
@tailwind components;
@tailwind utilities;
.link,
p > a {
@apply font-medium text-blue-700 hover:underline;
}
.navbar {
@apply justify-center flex flex-wrap space-x-2 gap-2 mt-10;
}

View file

@ -852,6 +852,11 @@ video {
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.bg-blue-700 {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@ -1059,9 +1064,9 @@ video {
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-700 {
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-gray-400 {
@ -1140,6 +1145,18 @@ video {
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);
}
.link,
p > a {
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.link:hover,
p > a:hover {
text-decoration-line: underline;
}
.navbar {
margin-top: 2.5rem;
display: flex;

View file

@ -59,17 +59,27 @@
</th>
<td class="px-6 py-4">
{{range .WorkerGroups}}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
{{ . }}
</span>
{{end}}
</td>
<td class="px-6 py-4">
OK
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
SUCCESS
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
FAILURE
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
UNKNOWN
</span>
</td>
<td class="px-6 py-4">
{{.Schedule}}
</td>
<td class="px-6 py-4">
<a href="/settings/healthchecks/{{.Slug}}" class="font-medium text-blue-600 hover:underline">Details</a>
<a href="/settings/healthchecks/{{.Slug}}" class="link">Details</a>
</td>
</tr>
</tbody>

View file

@ -15,7 +15,7 @@
<div id="editor" class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"></div>
<p>
Script is what determines the status of a service.
You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/" class="text-blue-700">k6 documentation</a>.
You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/">k6 documentation</a>.
</p>
<button type="submit" onclick="save()">Create</button>
</form>

View file

@ -15,7 +15,7 @@
<div id="editor" class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"></div>
<p>
Script is what determines the status of a service.
You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/" class="text-blue-700">k6 documentation</a>.
You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/">k6 documentation</a>.
</p>
<button type="submit" onclick="save()">Save</button>
</form>

View file

@ -55,13 +55,23 @@
{{.Name}}
</th>
<td class="px-6 py-4">
{{.Group}}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
{{.Group}}
</span>
</td>
<td class="px-6 py-4">
OK
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
SUCCESS
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
FAILURE
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
UNKNOWN
</span>
</td>
<td class="px-6 py-4">
<a href="/settings/workers/{{.Slug}}" class="font-medium text-blue-600 hover:underline">Details</a>
<a href="/settings/workers/{{.Slug}}" class="link">Details</a>
</td>
</tr>
</tbody>