updated styling for desktop , reset button, hiding / showing what you…

… need
drc · Jan 10, 2024 · d0f62fb · d0f62fb
1 parent 05eb63b
commit d0f62fb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/src/components/Calculator.svelte b/src/components/Calculator.svelte
@@ -32,7 +32,7 @@
     init();
 </script>
 
-<form on:submit|preventDefault={calculateForm}>
+<form class="flex" on:submit|preventDefault={calculateForm}>
     <div>
         <label for="format">Format</label>
         <select name="format" id="format">
@@ -130,6 +130,7 @@
             >Calculate</label
         >
         <input type="submit" value="Calculate" />
+        <input type="reset" value="Reset" />
     </div>
 </form>
 
@@ -144,6 +145,35 @@
         font-size: inherit;
     }
 
+    @media only screen and (min-width: 1025px) {
+        .flex {
+            display: flex;
+            flex-wrap: wrap;
+            /* border: 2px solid red; */
+            /* flex-flow: column; */
+            justify-content: space-between;
+            height: 30svh;
+            align-items: center;
+        }
+
+        .flex > div {
+            display: flex;
+            flex-direction: column;
+            /* border: 1px solid blue; */
+        }
+
+        .flex > div:last-child {
+            /* background: red; */
+            flex-grow: 1;
+            flex-basis: 100%;
+        }
+
+        .flex > div > input[type="submit"] {
+            margin-bottom: 4svh;
+            height: 5svh;
+        }
+    }
+
     /* 1170×2532 pixels at 460ppi */
     @media only screen and (max-width: 844px) {
         label {
@@ -161,7 +191,8 @@
             box-sizing: border-box;
         }
 
-        input[type="submit"] {
+        input[type="submit"],
+        input[type="reset"] {
             margin-top: 2svh;
         }
     }

diff --git a/src/components/Results.svelte b/src/components/Results.svelte
@@ -7,12 +7,12 @@
     <p>Total Non-Land Cards: {deck.cards}</p>
     <p>Land to fill: {deck.format - deck.cards}</p>
     <p>Total Mana: {deck.total()}</p>
-    <!-- {#if deck.white.ratio} -->
+    {#if deck.white.ratio}
     <p class="deck white">{deck.white.ratio}-{deck.white.ratio + 1} Plains</p>
-    <!-- {/if} -->
-    <!-- {#if deck.blue.ratio} -->
+    {/if}
+    {#if deck.blue.ratio}
         <p class="deck blue">{deck.blue.ratio}-{deck.blue.ratio + 1} Islands</p>
-    <!-- {/if} -->
+    {/if}
     {#if deck.black.ratio}
         <p class="deck black">
             {deck.black.ratio}-{deck.black.ratio + 1} Swamps