Improve display of pool conditions

This commit is contained in:
Eli Ribble 2026-02-24 20:34:21 +00:00
parent 1366e89cf6
commit 9c6155367b
No known key found for this signature in database
5 changed files with 48 additions and 51 deletions

View file

@ -182,32 +182,14 @@ document.addEventListener('DOMContentLoaded', onLoad);
<td>{{ .Street }}</td>
<td>{{ .City }}</td>
<td>{{ .PostalCode }}</td>
{{ if eq .Status "new" }}
<td>
<span class="badge bg-success status-badge">New</span>
</td>
{{ else if eq .Status "existing" }}
<td>
<span class="badge bg-primary status-badge"
>Existing</span
>
</td>
{{ else if eq .Status "outside" }}
<td>
<span class="badge bg-warning status-badge"
>Outside</span
>
</td>
{{ else }}
<td>
<span class="badge bg-warning status-badge"
>{{ .Status }}</span
>
</td>
{{ end }}
<td>
<span class="badge bg-{{ .Condition }} status-badge"
>{{ .Condition }}</span
<span class="badge status {{ .Status }}"
>{{ .Status|title }}</span
>
</td>
<td>
<span class="badge condition {{ .Condition }}"
>{{ .Condition|title }}</span
>
</td>
<td>{{ len .Tags }}</td>

View file

@ -58,7 +58,7 @@
<td>Pool Condition</td>
<td>The condition of the pool when it was last inspected</td>
<td>Text</td>
<td>"blue", "dry", "green", or "murky"</td>
<td>"blue", "dry", "false pool", "green", or "murky"</td>
</tr>
<tr>
<td>Property Owner Name</td>

View file

@ -54,7 +54,7 @@ $theme-colors: map-merge(
@import "./sync/dashboard.scss";
@import "./sync/notification.scss";
@import "./sync/pool-csv-upload.scss";
@import "./sync/pool-by-id.scss";
@import "./sync/settings.scss";
@import "./sync/settings-user-list.scss";
@import "./sync/upload-by-id.scss";
@import "./sync/upload-list.scss";

View file

@ -1,24 +0,0 @@
.bg-empty {
background-color: #9C9BC0;
}
.bg-green {
background-color: #7AAB5F;
}
.bg-murky {
background-color: #D2E3CA;
}
.bg-unknown {
background-color: #F7CBA1;
}
.summary-card {
transition: transform 0.2s;
}
.summary-card:hover {
transform: translateY(-5px);
}
.status-badge {
font-size: 0.85rem;
}
tr.has-error {
background-color: rgba(255, 193, 7, 0.15) !important;
}

View file

@ -0,0 +1,39 @@
.badge.dry {
background-color: $info;
}
.badge.empty {
background-color: #9C9BC0;
}
.badge.green {
background-color: #7AAB5F;
}
.badge.murky {
background-color: #D2E3CA;
}
.badge.unknown {
background-color: gray;
}
.summary-card {
transition: transform 0.2s;
}
.summary-card:hover {
transform: translateY(-5px);
}
.badge.status{
font-size: 0.85rem;
}
.badge.status.existing {
background-color: $secondary;
}
.badge.status.new {
background-color: $success;
}
.badge.status.outside {
background-color: $warning;
}
.badge.status.unknown {
background-color: gray;
}
tr.has-error {
background-color: rgba(255, 193, 7, 0.15) !important;
}