Fix icons in /meals/add subpage

mjkuranda · Sep 6, 2022 · 013de8c · 013de8c
1 parent 08d146e
commit 013de8c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/public/css/basic.css b/public/css/basic.css
@@ -103,7 +103,7 @@ input[type="checkbox"]:hover {
     transition: 618ms;
 }
 input[type="checkbox"]:checked {
-    box-shadow: inset 0 0 0 20px var(--cooper);
+    box-shadow: inset 0 0 0 30px var(--cooper);
 }
 input:not(:placeholder-shown):required:valid,
 textarea:not(:placeholder-shown):required:valid {

diff --git a/public/css/mobile/meals-add.css b/public/css/mobile/meals-add.css
@@ -26,13 +26,15 @@
         font-size: calc(var(--phi) * 0.618em);
     }
 
-    .category-container {
-        font-size: calc(var(--phi) * 0.718em);
-    }
-
     .category-container .category {
         width: 100% !important;
     }
+    .category-container .category label,
+    .category-container .category p {
+        margin-left: 0.2em;
+        cursor: pointer;
+        user-select: none;
+    }
     .category-container input {
         font-size: calc(var(--phi) * 0.5em);
     }

diff --git a/views/layouts/meals-add.handlebars b/views/layouts/meals-add.handlebars
@@ -67,14 +67,16 @@
                             <ul>
                                 {{#each this.ingredients as |ing|}}
                                     <li>
-                                        <input type="checkbox" name="ings[]" data-id="{{ing.icon.name}}" value="{{ing.icon.name}}" />
-                                        <img
-                                            class="icon"
-                                            src="../../{{ing.icon.src}}"
-                                            alt="'{{ing.icon.name}}' ingredient image"
-                                            author="{{ing.icon.link}}"
-                                        ></imgv>
-                                        <label>{{ing.name}}</label>
+                                        <input type="checkbox" id="{{ing.icon.name}}" name="ings[]" data-id="{{ing.icon.name}}" value="{{ing.icon.name}}" />
+                                        <label for="{{ing.icon.name}}" class="flex-center">
+                                            <img
+                                                class="icon"
+                                                src="../../{{ing.icon.src}}"
+                                                alt="'{{ing.icon.name}}' ingredient image"
+                                                author="{{ing.icon.link}}"
+                                            ></img>
+                                            <p>{{ing.name}}</p>
+                                        </label>
                                     </li>
                                 {{/each}}
                             </ul>