switch view modes, update theme on background color

index.html

@@ -89,8 +89,33 @@
             type="text"
             id="search"
             placeholder="Food Search"
+            oninput="adjustSearchFontSize()"
             onchange="searchFoods()"
           />
+          <button
+            id="search-view-grid"
+            class="page-button"
+            onclick="updateFoodItemListingStyle('1fr 1fr 1fr')"
+            style="display: none"
+          >
+            <img
+              src="images/grids_icon.svg"
+              alt="pencil icon"
+              style="filter: brightness(0)"
+            />
+          </button>
+          <button
+            id="search-view-list"
+            class="page-button"
+            onclick="updateFoodItemListingStyle('1fr')"
+            style="display: none"
+          >
+            <img
+              src="images/rows_icon.svg"
+              alt="pencil icon"
+              style="filter: brightness(0)"
+            />
+          </button>
           <button class="page-button" onclick="showPage('food-create')">
             <img
               src="images/edit_icon.svg"

index.js

@@ -37,6 +37,7 @@ async function searchFoods() {
     spinner.style.display = 'none';
 
     const json = await response.json();
+    updateFoodItemListingStyle('1fr 1fr 1fr');
     updateSelectableFoodItems(json.foods, 0);
   } catch (err) {
     await new Promise(resolve => setTimeout(resolve, 1000));
@@ -48,6 +49,27 @@ async function searchFoods() {
   }
 }
 
+function adjustSearchFontSize() {
+  const searchElement = document.getElementById("search")
+  searchElement.style.fontSize = Math.max(Math.min(searchElement.clientWidth / searchElement.value.length, '24'), '12');
+}
+
+function updateFoodItemListingStyle(style) {
+  if (style) {
+    document.getElementById("grid-food-items-wrapper").style.gridTemplateColumns = style;
+  }
+  document.getElementById("search-view-grid").style.display = 'none';
+  document.getElementById("search-view-list").style.display = 'none';
+  if (style === '1fr 1fr 1fr') {
+    document.querySelector(".grid-search-wrapper").style.gridTemplateColumns = 'auto 1fr auto auto auto';
+    document.getElementById("search-view-list").style.display = '';
+  }
+  if (style === '1fr') {
+    document.querySelector(".grid-search-wrapper").style.gridTemplateColumns = 'auto 1fr auto auto auto';
+    document.getElementById("search-view-grid").style.display = '';
+  }
+}
+
 function showPage(page) {
   history.pushState({}, "", `#${page}`);
   pageTransition(page);

settings.js

@@ -4,6 +4,7 @@ get('background-color').then(color => {
   const value = color || '#40798c';
   document.documentElement.style.setProperty('--color-background', value)
   document.getElementById('background-color').value = value;
+  document.querySelector('meta[name="theme-color"]').setAttribute('content', value);
 });
 get('button-color').then(color => {
   const value = color || '#ffffff';
@@ -94,4 +95,7 @@ function updateColor(key) {
   const newValue = document.getElementById(`${key}-color`).value;
   set(`${key}-color`, document.getElementById(`${key}-color`).value)
   document.documentElement.style.setProperty(`--color-${key}`, newValue);
+  if (key === 'background') {
+    document.querySelector('meta[name="theme-color"]').setAttribute('content', newValue);
+  }
 }

styles.css

@@ -45,7 +45,7 @@ html > * {
   background-position: 15px 50%;
   background-size: 30px;
   padding-left: 50px;
-  padding-right: 50px;
+  padding-right: 12px;
 }
 
 #food-edit-name {
@@ -136,6 +136,7 @@ html > * {
   cursor: pointer;
   transition: all 0.1s;
   padding: 10px;
+  container-name: foodButton;
 }
 .food-button > div {
   text-overflow: ellipsis;