首页 发现 帮助
登录
kirkleon
/
pokemon-color-search
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Implement remaining layout logic

Kirk Trombley 3 年之前
父节点
bd4512b02d
当前提交
8e49c500f9
共有 2 个文件被更改，包括 137 次插入 和 82 次删除
合并视图 显示文件统计
  1. 25 3
      nearest.css
  2. 112 79
      nearest.html

+ 25 - 3
nearest.css
查看文件 

@@ -21,6 +21,29 @@ math {
 
   display: none !important;
 
   display: none !important;
 
 }
 
 }
 
 
 
+.divider {
 
+  background-color: var(--highlight); 
+  width: 2px; 
+  min-height: 100%; 
+  margin-left: 8px; 
+  margin-right: 8px;
 
+}
 
+
 
+.list-container {
 
+  min-width: calc(16px + var(--tile-width));
 
+  display: flex; 
+  flex-flow: column nowrap; 
+  justify-content: flex-start; 
+  align-items: stretch;
 
+}
 
+
 
+.search-container {
 
+  display: flex; 
+  flex-flow: row nowrap; 
+  justify-content: space-between; 
+  align-items: center;
 
+}
 
+
 
 /* Toggles */
 
 /* Toggles */
 
 
 
 .toggle-box {
 
 .toggle-box {
 
@@ -55,11 +78,11 @@ math {
 
   display: block;
 
   display: block;
 
 }
 
 }
 
 
 
-.toggle-box > .toggle-button:checked ~ :not(.toggle-box) .toggle-off {
 
+.toggle-box > .toggle-button:checked ~ :not(.toggle-box) > .toggle-off {
 
   display: none;
 
   display: none;
 
 }
 
 }
 
 
 
-.toggle-box > .toggle-button:checked ~ :not(.toggle-box) .toggle-on {
 
+.toggle-box > .toggle-button:checked ~ :not(.toggle-box) > .toggle-on {
 
   display: block;
 
   display: block;
 
 }
 
 }
 
 
 
@@ -70,7 +93,6 @@ math {
 
   display: grid;
 
   display: grid;
 
   gap: 4px 8px;
 
   gap: 4px 8px;
 
   grid:
 
   grid:
 
-    "bulb inpt rand"
 
     "bulb qvec qvec" 2em
 
     "bulb qvec qvec" 2em
 
     "bulb cspc cspc"
 
     "bulb cspc cspc"
 
     "sort metr metr"
 
     "sort metr metr"

+ 112 - 79
nearest.html
查看文件 

@@ -45,93 +45,126 @@
 
 
 
 <body>
 
 <body>
 
   <noscript>Requires javascript</noscript>
 
   <noscript>Requires javascript</noscript>
 
-  <div style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start;">
 
-    <div style="display: inline-block;">
 
-      <!-- TODO control for results returned -->
 
-      <div class="control-grid">
 
-        <img style="grid-area: bulb; justify-self: center;" src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
 
-        <button style="grid-area: rand;" type="button" onclick="onRandomColor(state)">Random Color</button>
 
-        <input style="grid-area: inpt;" autocomplete="off" maxlength="7" id="color-input" value="#222222" oninput="onColorChanged(state, event.target.value)" />
 
-        <div style="grid-area: qvec" id="qvec"></div>
 
-        <div class="toggle-box" style="grid-area: cspc;">
 
-          <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state); rerenderSearch(state)">
 
-          <label for="space-toggle" style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding-bottom: 0.5em;">
 
-            Color space:&nbsp;
 
-            <span class="toggle-off">CIECAM02-UCS (Jab)</span>
 
-            <span class="toggle-on">sRGB</span>
 
-          </label>
 
+  <div style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch;">
 
+    <div style="display: inline-block;" class="toggle-box">
 
+      <input autocomplete="off" type="checkbox" checked id="all-control-toggle" class="toggle-button" role="button">
 
+      <label for="all-control-toggle" style="min-width: 1.1em; display: inline-block;">
 
+        <div class="toggle-off" style="writing-mode: vertical-rl">► Controls</div>
 
+        <div class="toggle-on">▼ Controls</div>
 
+      </label>
 
+      <div class="toggle-on">
 
+        <!-- TODO control for results returned -->
 
+        <div class="control-grid">
 
+          <img style="grid-area: bulb; justify-self: center;"
 
+            src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
 
+          <div style="grid-area: qvec" id="qvec"></div>
 
+          <div class="toggle-box" style="grid-area: cspc;">
 
+            <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button"
 
+              onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state); rerenderSearch(state)">
 
+            <label for="space-toggle"
 
+              style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding-bottom: 0.5em;">
 
+              Color space:&nbsp;
 
+              <span class="toggle-off">CIECAM02-UCS (Jab)</span>
 
+              <span class="toggle-on">sRGB</span>
 
+            </label>
 
+          </div>
 
+          <div class="toggle-box" style="grid-area: sort">
 
+            <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button"
 
+              onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
 
+            <label for="sort-order">
 
+              <span class="toggle-off">Minimize</span>
 
+              <span class="toggle-on">Maximize</span>
 
+            </label>
 
+          </div>
 
+          <select style="grid-area: metr" autocomplete="off" id="sort-metric"
 
+            onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
 
+            <option value="sigma">RMS Deviation (σ)</option>
 
+            <option value="bigTheta">Mean of Angular Difference (Θ)</option>
 
+            <option value="theta">Angular Difference of Mean (θ)</option>
 
+            <option value="phi">Hue Difference of Mean (ϕ)</option>
 
+            <option value="delta">Euclidean Distance to Mean (δ)</option>
 
+            <option value="ch">Chebyshev Distance to Mean (Ч)</option>
 
+            <option value="inertia" selected>Inertia (I)</option>
 
+            <option value="size">Size (N)</option>
 
+          </select>
 
+          <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
 
+          <div
 
+            style="grid-area: munu; padding-top: 0.5em; justify-self: center; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 90%;">
 
+            <div id="mu-def"></div>
 
+            <div id="nu-def"></div>
 
+          </div>
 
         </div>
 
         </div>
 
-        <div class="toggle-box" style="grid-area: sort">
 
-          <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button" onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
 
-          <label for="sort-order">
 
-            <span class="toggle-off">Minimize</span>
 
-            <span class="toggle-on">Maximize</span>
 
+        <div class="toggle-box cluster-grid">
 
+          <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button"
 
+            onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
 
+          <label for="cluster-toggle"
 
+            style="grid-area: albl; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
 
+            Across&nbsp;
 
+            <span class="toggle-off">whole image</span>
 
+            <span class="toggle-on">best cluster by...</span>
 
           </label>
 
           </label>
 
+          <div style="grid-area: sort; justify-self: end;" class="toggle-on toggle-box">
 
+            <input autocomplete="off" checked type="checkbox" class="toggle-button" id="cluster-sort-order"
 
+              role="button"
 
+              onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
 
+            <label for="cluster-sort-order">
 
+              <span class="toggle-off">Minimizing</span>
 
+              <span class="toggle-on">Maximizing</span>
 
+            </label>
 
+          </div>
 
+          <select style="grid-area: metr" autocomplete="off" id="cluster-sort-metric" class="toggle-on"
 
+            onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
 
+            <option value="sigma">RMS Deviation (σ)</option>
 
+            <option value="bigTheta">Mean of Angular Difference (Θ)</option>
 
+            <option value="theta">Angular Difference of Mean (θ)</option>
 
+            <option value="phi">Hue Difference of Mean (ϕ)</option>
 
+            <option value="delta">Euclidean Distance to Mean (δ)</option>
 
+            <option value="ch">Chebyshev Distance to Mean (Ч)</option>
 
+            <option value="inertia">Inertia (I)</option>
 
+            <option value="size" selected>Size (N)</option>
 
+          </select>
 
+          <span style="grid-area: blbl; justify-self: end;" class="toggle-on">Rescaled by</span>
 
+          <select style="grid-area: clus" autocomplete="off" id="cluster-scale-option" class="toggle-on"
 
+            onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
 
+            <option value="none" selected>None</option>
 
+            <option value="direct">Cluster size</option>
 
+            <option value="inverse">Inverse cluster size</option>
 
+          </select>
 
+          <span style="grid-area: slbl" class="toggle-on">And scale result by</span>
 
+          <select style="grid-area: scal" autocomplete="off" id="scale-option" class="toggle-on"
 
+            onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
 
+            <option value="none">None</option>
 
+            <option value="direct">Cluster size</option>
 
+            <option value="inverse" selected>Inverse cluster size</option>
 
+          </select>
 
+          <div
 
+            style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;"
 
+            id="cluster-metric-display" class="toggle-on"></div>
 
         </div>
 
         </div>
 
-        <select style="grid-area: metr" autocomplete="off" id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
 
-          <option value="sigma">RMS Deviation (σ)</option>
 
-          <option value="bigTheta">Mean of Angular Difference (Θ)</option>
 
-          <option value="theta">Angular Difference of Mean (θ)</option>
 
-          <option value="phi">Hue Difference of Mean (ϕ)</option>
 
-          <option value="delta">Euclidean Distance to Mean (δ)</option>
 
-          <option value="ch">Chebyshev Distance to Mean (Ч)</option>
 
-          <option value="inertia" selected>Inertia (I)</option>
 
-          <option value="size">Size (N)</option>
 
-        </select>
 
-        <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
 
-        <div style="grid-area: munu; padding-top: 0.5em; justify-self: center; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 90%;">
 
-          <div id="mu-def"></div>
 
-          <div id="nu-def"></div>
 
+        <div
 
+          style="width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;">
 
+          <span style="align-self: flex-start;">Final metric:</span>
 
+          <div id="final-metric-display" style="padding-top: 0.5em; padding-bottom: 0.5em;"></div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
-      <div class="toggle-box cluster-grid">
 
-        <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button" onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
 
-        <label for="cluster-toggle" style="grid-area: albl; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
 
-          Across&nbsp;
 
-          <span class="toggle-off">whole image</span>
 
-          <span class="toggle-on">best cluster by...</span>
 
-        </label>
 
-        <div style="grid-area: sort; justify-self: end;" class="toggle-on toggle-box">
 
-          <input autocomplete="off" checked type="checkbox" class="toggle-button" id="cluster-sort-order" role="button" onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
 
-          <label for="cluster-sort-order">
 
-            <span class="toggle-off">Minimizing</span>
 
-            <span class="toggle-on">Maximizing</span>
 
-          </label>
 
-        </div>
 
-        <select style="grid-area: metr" autocomplete="off" id="cluster-sort-metric" class="toggle-on" onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
 
-          <option value="sigma">RMS Deviation (σ)</option>
 
-          <option value="bigTheta">Mean of Angular Difference (Θ)</option>
 
-          <option value="theta">Angular Difference of Mean (θ)</option>
 
-          <option value="phi">Hue Difference of Mean (ϕ)</option>
 
-          <option value="delta">Euclidean Distance to Mean (δ)</option>
 
-          <option value="ch">Chebyshev Distance to Mean (Ч)</option>
 
-          <option value="inertia">Inertia (I)</option>
 
-          <option value="size" selected>Size (N)</option>
 
-        </select>
 
-        <span style="grid-area: blbl; justify-self: end;" class="toggle-on">Rescaled by</span>
 
-        <select style="grid-area: clus" autocomplete="off" id="cluster-scale-option" class="toggle-on" onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
 
-          <option value="none" selected>None</option>
 
-          <option value="direct">Cluster size</option>
 
-          <option value="inverse">Inverse cluster size</option>
 
-        </select>
 
-        <span style="grid-area: slbl" class="toggle-on">And scale result by</span>
 
-        <select style="grid-area: scal" autocomplete="off" id="scale-option" class="toggle-on" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
 
-          <option value="none">None</option>
 
-          <option value="direct">Cluster size</option>
 
-          <option value="inverse" selected>Inverse cluster size</option>
 
-        </select>
 
-        <div style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;" id="cluster-metric-display" class="toggle-on"></div>
 
+    </div>
 
+    <div class="divider"></div>
 
+    <div class="list-container">
 
+      <div class="search-container">
 
+        <button type="button" onclick="onRandomColor(state)">Random Color</button>
 
+        <input autocomplete="off" maxlength="7" id="color-input" value="#222222"
 
+          oninput="onColorChanged(state, event.target.value)" />
 
       </div>
 
       </div>
 
-      <div style="width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;">
 
-        <span style="align-self: flex-start;">Final metric:</span>
 
-        <div id="final-metric-display" style="padding-top: 0.5em; padding-bottom: 0.5em;"></div>
 
+      <ul id="result-list" class="pkmn-list"></ul>
 
+    </div>
 
+    <div class="divider"></div>
 
+    <div class="list-container">
 
+      <div class="search-container">
 
+        <button type="button" onclick="onRandomName(state)">Random Pokemon</button>
 
+        <input autocomplete="off" size="15" oninput="onSearch(state, event.target.value)">
 
       </div>
 
       </div>
 
+      <ul id="search-list" class="pkmn-list"></ul>
 
     </div>
 
     </div>
 
-    <ul id="result-list" class="pkmn-list"></ul>
 
-    <!-- TODO layout -->
 
-    <button type="button" onclick="onRandomName(state)">Random Pokemon</button>
 
-    <input autocomplete="off" size="15" oninput="onSearch(state, event.target.value)">
 
-    <ul id="search-list" class="pkmn-list"></ul>
 
   </div>
 
   </div>
 
 </body>
 
 </body>