Enhance CaseCollectionForm: replace collection_type field with radio buttons and add custom styling

atlas/templates/atlas/casecollection_form.html

@@ -3,6 +3,40 @@
 {% load crispy_forms_tags %}
 
 {% block css %}
+<style>
+    /* Turn the existing form-check radio markup into horizontal button-like radios */
+    #div_id_collection_type .form-check { display: inline-block; margin-right: .5rem; }
+    #div_id_collection_type .form-check-input {
+        /* visually hide the native radio but keep it focusable */
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0,0,0,0);
+        white-space: nowrap;
+        border: 0;
+    }
+    #div_id_collection_type .form-check-label {
+        display: inline-block;
+        padding: .375rem .75rem;
+        border: 1px solid #0d6efd;
+        border-radius: .375rem;
+        color: #0d6efd;
+        cursor: pointer;
+        user-select: none;
+    }
+    #div_id_collection_type .form-check-input:focus + .form-check-label {
+        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
+    }
+    #div_id_collection_type .form-check-input:checked + .form-check-label {
+        background-color: #0d6efd;
+        color: #fff;
+    }
+    /* small spacing tweak when legend present */
+    #div_id_collection_type fieldset { border: 0; padding: 0; margin: 0 0 1rem 0; }
+</style>
 {% endblock %}
 {% block js %}
     <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->

atlas/templates/widgets/radioselect_buttons.html

@@ -0,0 +1,24 @@
+{% load i18n %}
+<div class="btn-group" role="group" aria-label="{{ widget.name }}">
+  {% for val, label in widget.choices %}
+    {% with forloop.counter0 as idx %}
+      {% with id=widget.name|add:"_"|add:idx %}
+      <input
+        type="radio"
+        class="btn-check"
+        name="{{ widget.name }}"
+        id="{{ widget.name }}_{{ idx }}"
+        value="{{ val }}"
+        {% if val|stringformat:"s" == widget.value|stringformat:"s" %}checked{% endif %}
+        autocomplete="off"
+      >
+      <label
+        class="btn btn-outline-primary {% if val|stringformat:"s" == widget.value|stringformat:"s" %}active{% endif %}"
+        for="{{ widget.name }}_{{ idx }}"
+      >
+        {{ label }}
+      </label>
+      {% endwith %}
+    {% endwith %}
+  {% endfor %}
+</div>