diff options
| author | Matthew Lemon <y@yulqen.org> | 2024-05-15 14:30:16 +0100 |
|---|---|---|
| committer | Matthew Lemon <y@yulqen.org> | 2024-05-15 14:30:16 +0100 |
| commit | 8d1f465ceb2f5e357b19b6e4c8468703725b4795 (patch) | |
| tree | 318751f3fc67c349064ec1906c205356d9c5f26e | |
| parent | bcf17ab2823d26a517101c344321eb7a472e6b29 (diff) | |
Fix the badges on the resource list.
| -rw-r--r-- | pyblackbird_cc/static/css/custom.css | 21 | ||||
| -rw-r--r-- | pyblackbird_cc/static/scss/custom.scss | 1 | ||||
| -rw-r--r-- | pyblackbird_cc/templates/resources/resource_list.html | 4 |
3 files changed, 24 insertions, 2 deletions
diff --git a/pyblackbird_cc/static/css/custom.css b/pyblackbird_cc/static/css/custom.css index 5df7099..3698692 100644 --- a/pyblackbird_cc/static/css/custom.css +++ b/pyblackbird_cc/static/css/custom.css @@ -6149,6 +6149,27 @@ progress { display: none !important; } } +.badge { + display: inline-block; + padding: 0.35em 0.65em; + font-size: 0.75em; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; +} +.badge:empty { + display: none; +} + +.btn .badge { + position: relative; + top: -1px; +} + h2, .h2 { color: #51635e; } diff --git a/pyblackbird_cc/static/scss/custom.scss b/pyblackbird_cc/static/scss/custom.scss index a87a968..c80e8f4 100644 --- a/pyblackbird_cc/static/scss/custom.scss +++ b/pyblackbird_cc/static/scss/custom.scss @@ -22,6 +22,7 @@ $ml-font-label-weight: 500; @import "../bootstrap/scss/grid"; @import "../bootstrap/scss/buttons"; @import "../bootstrap/scss/bootstrap-utilities"; +@import "../bootstrap/scss/_badge.scss"; // 5. Add additional custom code here h2 { diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html index 3c8780f..dc9c7ba 100644 --- a/pyblackbird_cc/templates/resources/resource_list.html +++ b/pyblackbird_cc/templates/resources/resource_list.html @@ -99,10 +99,10 @@ <h5 class="card-title">{{ resource.name }}</h5> <div class="d-flex flex-row justify-content-start align-content-center"> <div> - <span class="badge text-bg-secondary me-2">{{ resource.main_resource_category_name }}</span> + <span class="badge bg-danger me-2">{{ resource.main_resource_category_name }}</span> </div> <div> - <span class="badge text-bg-success me-2">{{ resource.age_range }}</span> + <span class="badge bg-secondary me-2">{{ resource.age_range }}</span> </div> </div> <p class="card-text my-3">{{ resource.description }}</p> |