Pokemon tile layout improvements

nearest.css

@@ -24,7 +24,8 @@ body {
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: stretch;
+    width: 100%;
 }
 
 .config {
@@ -93,6 +94,7 @@ body {
     padding: 0;
     margin: 0;
     margin-top: 16px;
+    width: 100%;
 }
 
 .bypkmn {
@@ -106,11 +108,18 @@ body {
 .pokemon_tile {
     padding-top: 0.5em;
     padding-bottom: 0.5em;
+
+    width: 100%;
+    max-width: 500px;
+
     display: flex;
     flex-flow: row nowrap;
-    justify-content: flex-start;
+    justify-content: stretch;
     align-items: flex-start;
-    width: 100%;
+}
+
+.pokemon_tile--smaller {
+    max-width: 450px;
 }
 
 .pokemon_tile-image-wrapper {
@@ -123,10 +132,11 @@ body {
 
 .pokemon_tile-info_panel {
     flex: 1;
+
     display: flex;
     flex-flow: column nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
+    justify-content: center;
+    align-items: stretch;
 }
 
 .pokemon_tile-pokemon_name {
@@ -134,31 +144,34 @@ body {
 }
 
 .pokemon_tile-results {
-    width: 100%;
     display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
 }
 
 .pokemon_tile-labels {
-    text-align: right;
-    margin-left: 16px;
-    margin-right: 4px;
+    margin-left: 8px;
+
     display: flex;
     flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: flex-end;
 }
 
 .pokemon_tile-score_column {
-    margin-left: 4px;
-    min-width: 12em;
+    margin-left: 8px;
+    flex: 1;
+
     display: flex;
     flex-flow: column nowrap;
-}
-
-.pokemon_tile-no_flex {
-    flex: 0 0 auto;
+    justify-content: flex-start;
+    align-items: flex-start;
 }
 
 .pokemon_tile-hex_column {
-    flex: 1;
+    min-width: 140px;
+    
     margin-left: 8px;
     display: flex;
     flex-flow: column nowrap;
@@ -166,11 +179,13 @@ body {
 
 .pokemon_tile-hex_color {
     flex: 1;
+
     padding: 0 0.5em 0 0.5em;
+    font-size: 10px;
+
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 10px;
 }
 
 .pokemon_tile-vector {

nearest.js

@@ -224,7 +224,7 @@ const getSprite = pokemon => {
 
 const renderPokemon = (data, classes = {}) => {
   const { name, yJAB, yJABHex, yRGB, yRGBHex } = data;
-  const { labelClass = "", rgbClass = "", jabClass = "" } = classes;
+  const { labelClass = "", rgbClass = "", jabClass = "", tileClass = "" } = classes;
   let { resultsClass = "" } = classes;
   let displayMetrics = {};
   if (!state.targetColor) {
@@ -246,7 +246,7 @@ const renderPokemon = (data, classes = {}) => {
   const jabVec = yJAB.map(c => c.toFixed(1)).join(", ");
 
   const pkmn = document.createElement("div");
-  pkmn.setAttribute("class", "pokemon_tile");
+  pkmn.setAttribute("class", `pokemon_tile ${tileClass}`);
   pkmn.innerHTML = `
     <div class="pokemon_tile-image-wrapper">
       <img src="${getSprite(name)}" />
@@ -259,10 +259,10 @@ const renderPokemon = (data, classes = {}) => {
           <span class="${rgbClass}">RGB: </span>
         </div>
         <div class="pokemon_tile-score_column ${resultsClass}">
-          <span class="pokemon_tile-no_flex ${jabClass}">
+          <span class="${jabClass}">
             (${stdDevJAB.toFixed(2)}, ${angleJAB.toFixed(2)}&deg;, ${meanDistJAB.toFixed(2)}, ${hueAngleJAB.toFixed(2)}&deg;)
           </span>
-          <span class="pokemon_tile-no_flex ${rgbClass}">
+          <span class="${rgbClass}">
             (${stdDevRGB.toFixed(2)}, ${angleRGB.toFixed(2)}&deg;, ${meanDistRGB.toFixed(2)}, ${hueAngleRGB.toFixed(2)}&deg;)
           </span>
         </div>
@@ -314,14 +314,14 @@ const rescore = () => {
     .sort((a, b) => a.scores[0] - b.scores[0])
     .slice(0, state.numPoke);
   clearNodeContents(jabList);
-  bestJAB.forEach(data => appendJAB(data, { labelClass: "hide", rgbClass: "hide" }));
+  bestJAB.forEach(data => appendJAB(data, { labelClass: "hide", rgbClass: "hide", tileClass: "pokemon_tile--smaller" }));
 
   // extract best RGB results
   const bestRGB = scores
     .sort((a, b) => a.scores[1] - b.scores[1])
     .slice(0, state.numPoke);
   clearNodeContents(rgbList);
-  bestRGB.forEach(data => appendRGB(data, { labelClass: "hide", jabClass: "hide" }));
+  bestRGB.forEach(data => appendRGB(data, { labelClass: "hide", jabClass: "hide", tileClass: "pokemon_tile--smaller" }));
 
   // update the rendered search results as well
   renderSearch();