[Fix] UI Fixes (#266)

Rather than have a bunch of pull-requests that @jebus will have to merge shall we collect some of the fixes for the UI issues I found in here.

- [x] #259
- [x] #260
- [x] #261
- [x] #262
- [x] #263
- [x] #264
- [x] #265

Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Reviewed-on: enviPath/enviPy#266
Co-authored-by: Liam Brydon <lbry121@aucklanduni.ac.nz>
Co-committed-by: Liam Brydon <lbry121@aucklanduni.ac.nz>

templates/modals/collections/new_scenario_modal.html

@@ -16,12 +16,12 @@
 >
   <div class="modal-box max-w-3xl">
     <!-- Header -->
-    <h3 class="font-bold text-lg">New Scenario</h3>
+    <h3 class="text-lg font-bold">New Scenario</h3>
 
     <!-- Close button (X) -->
     <form method="dialog">
       <button
-        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
         :disabled="isSubmitting"
       >
         ✕
@@ -114,20 +114,37 @@
         </div>
 
         <div class="form-control mb-3">
-          <label class="label" for="scenario-type">
+          <label class="label">
             <span class="label-text">Scenario Type</span>
           </label>
-          <select
+          <div role="tablist" class="tabs tabs-border">
+            <button
+              type="button"
+              role="tab"
+              class="tab"
+              :class="{ 'tab-active': scenarioType === 'empty' }"
+              @click="scenarioType = 'empty'"
+            >
+              Empty Scenario
+            </button>
+            {% for k, v in scenario_types.items %}
+              <button
+                type="button"
+                role="tab"
+                class="tab"
+                :class="{ 'tab-active': scenarioType === '{{ v.name }}' }"
+                @click="scenarioType = '{{ v.name }}'"
+              >
+                {{ k }}
+              </button>
+            {% endfor %}
+          </div>
+          <input
+            type="hidden"
             id="scenario-type"
             name="scenario-type"
-            class="select select-bordered w-full"
             x-model="scenarioType"
-          >
-            <option value="empty" selected>Empty Scenario</option>
-            {% for k, v in scenario_types.items %}
-              <option value="{{ v.name }}">{{ k }}</option>
-            {% endfor %}
-          </select>
+          />
         </div>
 
         {% for type in scenario_types.values %}

templates/modals/objects/generic_set_scenario_modal.html

@@ -18,7 +18,11 @@
 
       this.isLoading = true;
       try {
-        const response = await fetch('{% url "package scenario list" meta.current_package.uuid %}');
+        const response = await fetch('{% url "package scenario list" meta.current_package.uuid %}', {
+          headers: {
+            'Accept': 'application/json'
+          }
+        });
         const data = await response.json();
         this.scenarios = data;
         this.loaded = true;
@@ -47,7 +51,13 @@
     }
   }"
   @close="reset()"
-  x-init="$watch('$el.open', value => { if (value) loadScenarios(); })"
+  x-init="
+        new MutationObserver(() => {
+            if ($el.hasAttribute('open')) {
+                loadScenarios();
+            }
+        }).observe($el, { attributes: true });
+    "
 >
   <div class="modal-box max-w-4xl">
     <!-- Header -->
@@ -102,7 +112,8 @@
           </select>
           <label class="label">
             <span class="label-text-alt"
-              >Hold Ctrl/Cmd to select multiple scenarios</span
+              >Hold Ctrl/Cmd to select multiple scenarios. Ctrl/Cmd + click one
+              item to deselect it</span
             >
           </label>
         </div>