nicholas/formulation
1
0
Fork 0
Code Pull Requests Actions Activity

fix(tabs): ensure Prep Method is selected on initial recipe load and replicate Meez dark tab hover styling

Browse Source
This commit is contained in:
nicholas
2026-08-18 08:56:35 -05:00
parent bebab112fc
commit 045cc254c2
4 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scratch/recipe_tab_hover_meez.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

src/application/pages/app/ingredients/[id].astro
+4 -2
View File
@@ -309,8 +309,8 @@ database.close();
<div class="recipe-read-right ingredient-read-right">
<div class="recipe-workspace-tabs recipe-read-tabs entity-tabs" aria-label="Ingredient details">
<button class="mobile-only-tab active" type="button" data-tab="overview"><Fragment set:html={recipeTabIcon("overview")}/><span class="recipe-tab-label">Details</span></button>
<button type="button" data-tab="costs"><Fragment set:html={recipeTabIcon("costing")}/><span class="recipe-tab-label">Cost</span></button>
<button class="mobile-only-tab" type="button" data-tab="overview"><Fragment set:html={recipeTabIcon("overview")}/><span class="recipe-tab-label">Details</span></button>
<button class="active" type="button" data-tab="costs"><Fragment set:html={recipeTabIcon("costing")}/><span class="recipe-tab-label">Cost</span></button>
<button type="button" data-tab="equivalencies"><Fragment set:html={recipeTabIcon("equivalencies")}/><span class="recipe-tab-label">UoM Equivalency</span></button>
<button type="button" data-tab="nutrition"><Fragment set:html={recipeTabIcon("nutrition")}/><span class="recipe-tab-label">Nutrition</span></button>
</div>
@@ -508,6 +508,8 @@ database.close();
if (target) target.click();
} else if (window.innerWidth <= 900) {
switchIngredientTab('overview');
} else {
switchIngredientTab('costs');
}
</script>
</BaseLayout>
src/application/pages/app/recipes/[id].astro
+4 -2
View File
@@ -247,8 +247,8 @@ const recipeTabIcon=(name:string)=>`<span class="recipe-tab-icon"><svg viewBox="
<div class="recipe-read-right">
<div class="recipe-workspace-tabs recipe-read-tabs">
<button class="mobile-only-tab active" type="button" data-recipe-tab="formula"><Fragment set:html={recipeTabIcon("formula")}/><span class="recipe-tab-label">Ingredients</span></button>
<button type="button" data-recipe-tab="method"><Fragment set:html={recipeTabIcon("method")}/><span class="recipe-tab-label">Prep Method</span></button>
<button class="mobile-only-tab" type="button" data-recipe-tab="formula"><Fragment set:html={recipeTabIcon("formula")}/><span class="recipe-tab-label">Ingredients</span></button>
<button class="active" type="button" data-recipe-tab="method"><Fragment set:html={recipeTabIcon("method")}/><span class="recipe-tab-label">Prep Method</span></button>
<button type="button" data-recipe-tab="costing"><Fragment set:html={recipeTabIcon("costing")}/><span class="recipe-tab-label">Cost</span></button>
<button type="button" data-recipe-tab="equivalencies"><Fragment set:html={recipeTabIcon("equivalencies")}/><span class="recipe-tab-label">UoM Equivalency</span></button>
<button type="button" data-recipe-tab="nutrition"><Fragment set:html={recipeTabIcon("nutrition")}/><span class="recipe-tab-label">Nutrition</span></button>
@@ -476,6 +476,8 @@ const recipeTabIcon=(name:string)=>`<span class="recipe-tab-icon"><svg viewBox="
}
} else if (window.innerWidth <= 900) {
switchRecipeTab('formula');
} else {
switchRecipeTab('method');
}
</script>
{editing&&<script is:inline>
src/styles/global.css
+25 -19
View File
@@ -2158,16 +2158,22 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .recipe-workspace-tabs button:last-child {
border-right: 0;
}
.application-body .recipe-workspace-tabs button:hover {
background: transparent;
color: #050841;
border-bottom: 2px solid #3d5df6;
.application-body .recipe-workspace-tabs button:hover:not(.active) {
background: #fbfbfb !important;
color: #050841 !important;
border-bottom: 2px solid #050841 !important;
}
.application-body .recipe-workspace-tabs button:hover:not(.active) .recipe-tab-icon {
color: #050841 !important;
}
.application-body .recipe-workspace-tabs button.active {
color: #050841;
background: #f1f5fe;
border-bottom: 2px solid #3d5df6;
font-weight: 500;
color: #050841 !important;
background: #f1f5fe !important;
border-bottom: 2px solid #3d5df6 !important;
font-weight: 500 !important;
}
.application-body .recipe-workspace-tabs button.active .recipe-tab-icon {
color: #3d5df6 !important;
}
.application-body .recipe-tab-icon {
display: grid;
@@ -2745,13 +2751,13 @@ input[type="search"]::-webkit-search-results-decoration,
box-sizing:border-box;
transition:background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button:hover,
.application-body .recipe-read-shell .recipe-workspace-tabs button:hover,
.application-body .recipe-workspace-tabs button:hover,
.application-body .entity-tabs button:hover {
background-color: transparent !important;
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button:hover:not(.active),
.application-body .recipe-read-shell .recipe-workspace-tabs button:hover:not(.active),
.application-body .recipe-workspace-tabs button:hover:not(.active),
.application-body .entity-tabs button:hover:not(.active) {
background-color: #fbfbfb !important;
color: #050841 !important;
border-bottom: 2px solid #3d5df6 !important;
border-bottom: 2px solid #050841 !important;
}
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button.active,
.application-body .recipe-read-shell .recipe-workspace-tabs button.active,
@@ -4416,12 +4422,12 @@ input[type="search"]::-webkit-search-results-decoration,
transition: border-color 0.12s ease, background-color 0.12s ease !important;
}
/* Inactive Tab Hover: transparent background + blue underline */
.application-body .recipe-workspace-tabs button:hover,
.application-body .entity-tabs button:hover {
background: transparent !important;
/* Inactive Tab Hover: Meez style: #fbfbfb background + dark #050841 underline */
.application-body .recipe-workspace-tabs button:hover:not(.active),
.application-body .entity-tabs button:hover:not(.active) {
background: #fbfbfb !important;
color: #050841 !important;
border-bottom: 2px solid #3d5df6 !important;
border-bottom: 2px solid #050841 !important;
}
/* Active Tab: soft blue background + blue underline */