Improve other controls

web/index.html

@@ -21,10 +21,10 @@
         action="javascript:void(0)"
         autocomplete="off"
         class="metric-fields | flex center-items"
-        data-flexGap="smaller"
+        data-flexGap="small"
       >
         <output hidden name="metric"></output>
-        <div class="metric-kind-toggle | flex col center-content">
+        <div class="metric-kind-toggle | flex col center-content" data-flexGap="smaller">
           <label>
             <input type="radio" name="metricKind" value="compare" />
             <div class="toggle-label | center pill-shape highlight-border">Compare</div>
@@ -212,169 +212,151 @@
             <output class="smaller" form="targetColorForm" name="info"></output>
           </div>
         </div>
-        <!-- Filter/Limit -->
-        <div class="control-group | flex center-items">
-          <div id="filter-toggles" class="flex col">
-            <label class="center">
-              <input
-                form="filterControl"
-                type="checkbox"
-                name="allowRepeatDexNum"
-                hidden
-              />
-              <span class="toggle-label | pill-shape highlight-border">
-                Repeat Species
-              </span>
-            </label>
-            <label class="center">
-              <input
-                form="filterControl"
-                type="checkbox"
-                name="hideNoStart"
-                hidden
-                checked
-              />
-              <span class="toggle-label | pill-shape highlight-border">
-                Start Forms Only
-              </span>
-            </label>
-            <label class="center">
-              <input
-                form="filterControl"
-                type="checkbox"
-                name="allowNFE"
-                hidden
-                checked
-              />
-              <span class="toggle-label | pill-shape highlight-border">
-                Include NFE
-              </span>
-            </label>
-          </div>
-        </div>
-        <!-- Sort Function -->
-        <div
-          class="fn-control | control-group | flex center-items center-content"
-          data-flexGap="small"
-        >
-          <div id="sort-metric-mount"></div>
-          <div class="fn-minmax | flex col center-items" data-flexGap="small">
-            <label>
-              <input
-                form="colorSortForm"
-                type="radio"
-                name="sortOrder"
-                value="min"
-                checked
-              />
-              <span class="toggle-label | pill-shape highlight-border">Min</span>
-            </label>
-            <label>
-              <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
-              <span class="toggle-label | pill-shape highlight-border">Max</span>
-            </label>
-          </div>
-          <div class="fn-body | math-font flex center-content center-items">
-            <label>
-              <input
-                form="colorCalculateForm"
-                type="checkbox"
-                name="sortUseWholeImage"
-                checked
-              />
-              <span class="toggle-label | pill-shape highlight-border">
-                <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(I)
-              </span>
-            </label>
-            +
-            <label>
-              <input
-                form="colorCalculateForm"
-                type="checkbox"
-                name="sortUseBestCluster"
-                checked
-              />
-              <span class="toggle-label | pill-shape highlight-border">
-                <output form="colorCalculateForm" name="sortMetricSymbolB"></output>(B)
-              </span>
-            </label>
-            ⋅
-            <div class="fn-fraction | flex col no-gap">
+        <div class="flex wrap">
+          <!-- Sort Function -->
+          <div
+            class="fn-control | control-group | flex center-items center-content"
+            data-flexGap="small"
+          >
+            <div id="sort-metric-mount"></div>
+            <div class="fn-minmax | flex col center-items" data-flexGap="small">
+              <label>
+                <input
+                  form="colorSortForm"
+                  type="radio"
+                  name="sortOrder"
+                  value="min"
+                  checked
+                />
+                <span class="toggle-label | pill-shape highlight-border">Min</span>
+              </label>
+              <label>
+                <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
+                <span class="toggle-label | pill-shape highlight-border">Max</span>
+              </label>
+            </div>
+            <div class="fn-body | math-font flex center-content center-items">
               <label>
                 <input
                   form="colorCalculateForm"
                   type="checkbox"
-                  name="sortUseClusterProportion"
+                  name="sortUseWholeImage"
+                  checked
                 />
-                <span class="toggle-label | pill-shape highlight-border">%B</span>
+                <span class="toggle-label | pill-shape highlight-border">
+                  <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(I)
+                </span>
               </label>
+              +
               <label>
                 <input
                   form="colorCalculateForm"
                   type="checkbox"
-                  name="sortUseInvClusterProportion"
+                  name="sortUseBestCluster"
                   checked
                 />
-                <span class="toggle-label | pill-shape highlight-border">%B</span>
+                <span class="toggle-label | pill-shape highlight-border">
+                  <output form="colorCalculateForm" name="sortMetricSymbolB"></output>(B)
+                </span>
               </label>
+              ⋅
+              <div class="fn-fraction | flex col no-gap">
+                <label>
+                  <input
+                    form="colorCalculateForm"
+                    type="checkbox"
+                    name="sortUseClusterProportion"
+                  />
+                  <span class="toggle-label | pill-shape highlight-border">%B</span>
+                </label>
+                <label>
+                  <input
+                    form="colorCalculateForm"
+                    type="checkbox"
+                    name="sortUseInvClusterProportion"
+                    checked
+                  />
+                  <span class="toggle-label | pill-shape highlight-border">%B</span>
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <!-- Cluster Function -->
-        <div
-          id="cls-fn"
-          class="fn-control | control-group | flex center-items center-content"
-          data-flexGap="small"
-        >
-          <div id="cls-metric-mount"></div>
-          <div class="fn-minmax | flex col center-items" data-flexGap="small">
-            <label>
-              <input
-                form="colorCalculateForm"
-                type="radio"
-                name="clusterSortOrder"
-                value="min"
-              />
-              <span class="toggle-label | pill-shape highlight-border">Min</span>
-            </label>
-            <label>
-              <input
-                form="colorCalculateForm"
-                type="radio"
-                name="clusterSortOrder"
-                value="max"
-                checked
-              />
-              <span class="toggle-label | pill-shape highlight-border">Max</span>
-            </label>
-          </div>
-          <div class="fn-body | math-font flex center-content center-items">
-            <span class="toggle-label | pill-shape highlight-border">
-              <output form="colorCalculateForm" name="clusterMetricSymbol"></output>(K)
-            </span>
-            ⋅
-            <div class="fn-fraction | flex col no-gap">
+          <!-- Cluster Function -->
+          <div
+            id="cls-fn"
+            class="fn-control | control-group | flex center-items"
+            data-flexGap="small"
+            data-faded="false"
+          >
+            <div id="cls-metric-mount"></div>
+            <div class="fn-minmax | flex col center-items" data-flexGap="small">
               <label>
                 <input
                   form="colorCalculateForm"
-                  type="checkbox"
-                  name="clusterUseClusterSize"
-                  checked
+                  type="radio"
+                  name="clusterSortOrder"
+                  value="min"
                 />
-                <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                <span class="toggle-label | pill-shape highlight-border">Min</span>
               </label>
               <label>
                 <input
                   form="colorCalculateForm"
-                  type="checkbox"
-                  name="clusterUseInvClusterSize"
+                  type="radio"
+                  name="clusterSortOrder"
+                  value="max"
+                  checked
                 />
-                <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                <span class="toggle-label | pill-shape highlight-border">Max</span>
               </label>
             </div>
+            <div class="fn-body | math-font flex center-content center-items">
+              <span class="toggle-label | pill-shape highlight-border">
+                <output form="colorCalculateForm" name="clusterMetricSymbol"></output>(K)
+              </span>
+              ⋅
+              <div class="fn-fraction | flex col no-gap">
+                <label>
+                  <input
+                    form="colorCalculateForm"
+                    type="checkbox"
+                    name="clusterUseClusterSize"
+                    checked
+                  />
+                  <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                </label>
+                <label>
+                  <input
+                    form="colorCalculateForm"
+                    type="checkbox"
+                    name="clusterUseInvClusterSize"
+                  />
+                  <span class="toggle-label | pill-shape highlight-border">N(K)</span>
+                </label>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      <!-- Filter/Limit -->
+      <div class="flex" data-flowSpace="small">
+        <label>
+          <input form="filterControl" type="checkbox" name="allowRepeatDexNum" hidden />
+          <span class="toggle-label | pill-shape highlight-border">
+            Include multiple forms per species
+          </span>
+        </label>
+        <label>
+          <input form="filterControl" type="checkbox" name="hideNoStart" hidden checked />
+          <span class="toggle-label | pill-shape highlight-border">
+            Only include starting forms
+          </span>
+        </label>
+        <label>
+          <input form="filterControl" type="checkbox" name="allowNFE" hidden checked />
+          <span class="toggle-label | pill-shape highlight-border"> Include NFE </span>
+        </label>
+      </div>
       <div id="color-results" class="flex wrap"></div>
       <div class="flex center-items center-content">
         <button

web/main.js

@@ -652,7 +652,7 @@ Array.from(colorCalculateForm.elements).forEach(el =>
   el.addEventListener("change", () => {
     const { sortUseBestCluster, sortUseClusterProportion, sortUseInvClusterProportion } =
       Object.fromEntries(new FormData(colorCalculateForm).entries());
-    clusterMetricSection.dataset.faded = clusterFunctionSection.dataset.faded = !(
+    clusterFunctionSection.dataset.faded = !(
       sortUseBestCluster ||
       sortUseClusterProportion ||
       sortUseInvClusterProportion

web/styles.css

@@ -262,23 +262,21 @@ button.color-select:hover {
   margin-block-end: 0.5ch;
 }
 
-#cls-title,
-#cls-fn,
-#cls-metric-mount {
-  transition: opacity 200ms;
-}
-
 #cls-fn {
-  margin: 0;
+  overflow: hidden;
+  transition: max-width 400ms ease-in-out, opacity 500ms, visibility 500ms;
 }
 
 [data-faded="true"] {
-  opacity: 25%;
+  opacity: 0;
+  max-width: 0;
+  visibility: hidden;
 }
 
-#color-results,
-#name-results {
-  margin-inline-start: 1ch;
+[data-faded="false"] {
+  opacity: 1;
+  max-width: 50ch;
+  visibility: visible;
 }
 
 .toggle-label {
@@ -525,10 +523,7 @@ button[name="clear"] {
 
 /* Other Controls */
 
-input[name="resultsToDisplay"] {
-  max-width: 16ch;
-}
-
-#filter-toggles {
-  --gap: 0.25rem;
+:is(input[name="allowRepeatDexNum"], input[name="hideNoStart"], input[name="allowNFE"])
+  + span {
+  padding: 0.125rem 1ch;
 }