add matchMedia to responsive design (#32)

* Refactor iteration methods to use for...of loops
* add matchMedia support
* build dist

Author: issackjohn

experimental/responsive-design/dist/app.js

@@ -6,7 +6,7 @@ export const recipes = [
         calories: "500 cals",
         servingSize: "4 servs",
         image: "./public/images/spaghetti-carbonara.webp",
-        tags: ["pasta", "Italian", "carbonara"],
+        tags: ["pasta", "Italian"],
         ingredients: ["200g spaghetti", "100g pancetta", "2 large eggs", "50g pecorino cheese", "50g parmesan", "Black pepper", "Salt"],
         steps: ["Cook the spaghetti.", "Fry the pancetta.", "Mix eggs and cheese.", "Combine everything with pasta."],
     },
@@ -17,7 +17,7 @@ export const recipes = [
         calories: "600 cals",
         servingSize: "4 servs",
         image: "./public/images/chicken-alfredo.webp",
-        tags: ["pasta", "Italian", "alfredo"],
+        tags: ["pasta", "Italian"],
         ingredients: ["200g fettuccine", "2 chicken breasts", "100g butter", "200ml heavy cream", "50g parmesan", "Garlic", "Salt", "Pepper"],
         steps: ["Cook the fettuccine.", "Cook the chicken.", "Make the Alfredo sauce.", "Combine everything."],
     },
@@ -50,7 +50,7 @@ export const recipes = [
         calories: "700 cals",
         servingSize: "4 servs",
         image: "./public/images/margherita-pizza.webp",
-        tags: ["pizza", "Italian", "vegetarian"],
+        tags: ["pizza", "Italian"],
         ingredients: ["Pizza dough", "Tomato sauce", "200g mozzarella", "Fresh basil", "Olive oil", "Salt"],
         steps: ["Prepare the dough.", "Spread the sauce.", "Add cheese and basil.", "Bake the pizza."],
     },
@@ -61,7 +61,7 @@ export const recipes = [
         calories: "250 cals",
         servingSize: "2 servs",
         image: "./public/images/caesar-salad.webp",
-        tags: ["salad", "healthy", "quick"],
+        tags: ["salad", "healthy"],
         ingredients: ["Romaine lettuce", "Croutons", "Caesar dressing", "Parmesan cheese", "Lemon juice", "Salt", "Pepper"],
         steps: ["Chop the lettuce.", "Add croutons and cheese.", "Toss with dressing.", "Serve immediately."],
     },
@@ -72,7 +72,7 @@ export const recipes = [
         calories: "150 cals",
         servingSize: "12 servs",
         image: "./public/images/chocolate-chip-cookies.webp",
-        tags: ["dessert", "cookies", "chocolate"],
+        tags: ["dessert", "cookies"],
         ingredients: ["200g flour", "100g butter", "100g sugar", "1 egg", "1 tsp vanilla extract", "100g chocolate chips", "1 tsp baking soda", "Salt"],
         steps: ["Preheat the oven to 180°C.", "Mix butter and sugar.", "Add egg and vanilla.", "Mix in dry ingredients.", "Fold in chocolate chips.", "Bake for 10-12 minutes."],
     },
@@ -83,7 +83,7 @@ export const recipes = [
         calories: "200 cals",
         servingSize: "4 servs",
         image: "./public/images/greek-salad.webp",
-        tags: ["salad", "Greek", "healthy"],
+        tags: ["salad", "Greek"],
         ingredients: ["2 cucumbers", "4 tomatoes", "1 red onion", "100g feta cheese", "Olives", "Olive oil", "Lemon juice", "Oregano", "Salt", "Pepper"],
         steps: ["Chop the vegetables.", "Mix with olives and feta.", "Dress with olive oil and lemon juice.", "Season with oregano, salt, and pepper."],
     },
@@ -94,7 +94,7 @@ export const recipes = [
         calories: "350 cals",
         servingSize: "4 servs",
         image: "./public/images/pancakes.webp",
-        tags: ["breakfast", "pancakes", "sweet"],
+        tags: ["breakfast", "pancakes"],
         ingredients: ["200g flour", "2 tbsp sugar", "2 tsp baking powder", "1/2 tsp salt", "1 egg", "300ml milk", "2 tbsp melted butter"],
         steps: ["Mix dry ingredients.", "Whisk in wet ingredients.", "Cook on a hot griddle until bubbles form.", "Flip and cook until golden brown."],
     },
@@ -105,7 +105,7 @@ export const recipes = [
         calories: "150 cals",
         servingSize: "4 servs",
         image: "./public/images/tomato-soup.webp",
-        tags: ["soup", "vegetarian", "comfort"],
+        tags: ["soup", "vegetarian"],
         ingredients: ["1kg tomatoes", "1 onion", "2 cloves garlic", "500ml vegetable broth", "Fresh basil", "Olive oil", "Salt", "Pepper"],
         steps: ["Sauté onions and garlic.", "Add tomatoes and broth.", "Simmer for 20 minutes.", "Blend until smooth.", "Season with salt and pepper.", "Garnish with basil."],
     },
@@ -116,7 +116,7 @@ export const recipes = [
         calories: "400 cals",
         servingSize: "8 servs",
         image: "./public/images/lemon-drizzle-cake.webp",
-        tags: ["dessert", "cake", "lemon"],
+        tags: ["dessert", "cake"],
         ingredients: ["200g flour", "200g sugar", "200g butter", "4 eggs", "2 lemons", "100g powdered sugar", "1 tsp baking powder", "Salt"],
         steps: [
             "Preheat the oven to 180°C.",
@@ -135,7 +135,7 @@ export const recipes = [
         calories: "200 cals",
         servingSize: "4 servs",
         image: "./public/images/garlic-bread.webp",
-        tags: ["side", "bread", "garlic"],
+        tags: ["side", "bread"],
         ingredients: ["1 baguette", "100g butter", "4 cloves garlic", "Parsley", "Salt"],
         steps: ["Preheat the oven to 200°C.", "Mix softened butter with minced garlic and parsley.", "Slice the baguette and spread the garlic butter.", "Wrap in foil and bake for 10-12 minutes."],
     },
@@ -146,7 +146,7 @@ export const recipes = [
         calories: "450 cals",
         servingSize: "4 servs",
         image: "./public/images/thai-green-curry.webp",
-        tags: ["curry", "Thai", "spicy"],
+        tags: ["curry", "Thai"],
         ingredients: ["400ml coconut milk", "2 tbsp green curry paste", "200g chicken breast", "1 bell pepper", "100g snap peas", "1 tbsp fish sauce", "Basil leaves", "Jasmine rice"],
         steps: [
             "Cook the jasmine rice.",
@@ -165,7 +165,7 @@ export const recipes = [
         calories: "550 cals",
         servingSize: "4 servs",
         image: "./public/images/beef-stroganoff.webp",
-        tags: ["beef", "Russian", "comfort"],
+        tags: ["beef", "comfort"],
         ingredients: ["500g beef sirloin", "200g mushrooms", "1 onion", "2 cloves garlic", "200ml sour cream", "2 tbsp flour", "Beef broth", "Egg noodles", "Parsley"],
         steps: [
             "Cook the egg noodles according to package instructions.",
@@ -185,7 +185,7 @@ export const recipes = [
         calories: "600 cals",
         servingSize: "4 servs",
         image: "./public/images/shrimp-paella.webp",
-        tags: ["seafood", "Spanish", "rice"],
+        tags: ["seafood", "rice"],
         ingredients: ["300g shrimp", "2 cups paella rice", "1 onion", "1 bell pepper", "2 tomatoes", "4 cloves garlic", "1 tsp saffron threads", "4 cups chicken broth", "Peas", "Lemon wedges"],
         steps: [
             "Sauté onions and garlic until fragrant.",
@@ -205,7 +205,7 @@ export const recipes = [
         calories: "350 cals",
         servingSize: "4 servs",
         image: "./public/images/quinoa-stuffed-peppers.webp",
-        tags: ["vegetarian", "healthy", "baked"],
+        tags: ["vegetarian", "healthy"],
         ingredients: ["4 bell peppers", "1 cup quinoa", "2 cups vegetable broth", "1 zucchini", "1 onion", "2 cloves garlic", "1 can black beans", "1 cup corn", "1 tsp cumin", "1 tsp paprika", "1 cup shredded cheese", "Cilantro"],
         steps: [
             "Preheat the oven to 375°F (190°C).",

experimental/responsive-design/package-lock.json

@@ -5,6 +5,8 @@ class RecipeCard extends LightDOMLitElement {
     static properties = {
         recipe: { type: Object },
         isExpanded: { type: Boolean },
+        isCompactMode: { type: Boolean },
+        index: { type: Number },
     };
 
     constructor() {
@@ -15,19 +17,87 @@ class RecipeCard extends LightDOMLitElement {
             time: "5 mins",
             calories: "200 cals",
             servingSize: "2 servs",
-            tags: ["DeliciousRecipes", "HomeCooking", "FoodLovers"],
+            tags: ["DeliciousRecipes", "HomeCooking"],
             ingredients: ["Ingredient 1", "Ingredient 2", "Ingredient 3"],
             steps: ["Step 1", "Step 2", "Step 3"],
         };
         this.isExpanded = false;
+        this.isCompactMode = false;
+        this.index = 0;
+    }
+
+    _getPillColor(tag) {
+        const colorThemes = {
+            orange: {
+                tags: ["italian", "pizza", "pancakes", "breakfast"],
+                classes: "bg-orange-100 text-orange-800 border-orange-200",
+            },
+            red: {
+                tags: ["mexican", "tacos", "beef"],
+                classes: "bg-red-100 text-red-800 border-red-200",
+            },
+            yellow: {
+                tags: ["thai", "cookies", "curry"],
+                classes: "bg-yellow-100 text-yellow-800 border-yellow-200",
+            },
+            green: {
+                tags: ["salad", "vegetarian", "stir fry"],
+                classes: "bg-green-100 text-green-800 border-green-200",
+            },
+            amber: {
+                tags: ["soup", "bread", "comfort"],
+                classes: "bg-amber-100 text-amber-800 border-amber-200",
+            },
+            blue: {
+                tags: ["greek", "pasta"],
+                classes: "bg-blue-100 text-blue-800 border-blue-200",
+            },
+            pink: {
+                tags: ["dessert"],
+                classes: "bg-pink-100 text-pink-800 border-pink-200",
+            },
+            rose: {
+                tags: ["cake"],
+                classes: "bg-rose-100 text-rose-800 border-rose-200",
+            },
+            purple: {
+                tags: ["spanish"],
+                classes: "bg-purple-100 text-purple-800 border-purple-200",
+            },
+            cyan: {
+                tags: ["seafood"],
+                classes: "bg-cyan-100 text-cyan-800 border-cyan-200",
+            },
+            emerald: {
+                tags: ["healthy"],
+                classes: "bg-emerald-100 text-emerald-800 border-emerald-200",
+            },
+            gray: {
+                tags: ["side"],
+                classes: "bg-gray-100 text-gray-800 border-gray-200",
+            },
+        };
+
+        const lowerTag = tag.toLowerCase();
+
+        for (const theme of Object.values(colorThemes)) {
+            if (theme.tags.includes(lowerTag))
+                return theme.classes;
+        }
+
+        return "bg-slate-100 text-slate-800 border-slate-200";
     }
 
     _toggleExpand() {
         this.isExpanded = !this.isExpanded;
         this.dispatchEvent(
-            new Event("toggle-expand", {
+            new CustomEvent("toggle-expand", {
                 bubbles: true,
                 composed: true,
+                detail: {
+                    index: this.index,
+                    isExpanded: this.isExpanded,
+                },
             })
         );
     }
@@ -62,7 +132,32 @@ class RecipeCard extends LightDOMLitElement {
         `;
     }
 
-    render() {
+    _compactCard() {
+        return html`
+            <div class="relative overflow-hidden rounded-lg bg-white shadow-sm hover:shadow-md">
+                <div class="flex items-center space-x-3 p-3">
+                    <img src="${this.recipe.image}" alt="${this.recipe.text}" class="h-16 w-16 flex-shrink-0 rounded-lg object-cover" />
+                    <div class="min-w-0 flex-1">
+                        <h3 class="truncate text-sm font-medium text-gray-900">${this.recipe.text}</h3>
+                        <div class="mt-1 flex items-center space-x-2 text-xs text-gray-500">
+                            <span>${this.recipe.time}</span>
+                            <span>•</span>
+                            <span>${this.recipe.calories}</span>
+                            <span>•</span>
+                            <span>${this.recipe.servingSize}</span>
+                        </div>
+                        <p class="mt-1 truncate text-xs text-gray-600">${this.recipe.description}</p>
+                        <!-- Tags in compact mode -->
+                        <div class="mt-2 flex flex-wrap gap-1">${this.recipe.tags.map((tag) => html`<span class="${this._getPillColor(tag)} inline-block rounded-full border px-2 py-0.5 text-xs font-medium">${tag}</span> `)}</div>
+                    </div>
+                    <button class="show-more-btn flex-shrink-0 text-sm text-blue-500 hover:text-blue-700" @click="${this._toggleExpand}">${this.isExpanded ? "Less" : "More"}</button>
+                </div>
+                ${this.isExpanded ? this._getExpandedTemplate() : ""}
+            </div>
+        `;
+    }
+
+    _gridCard() {
         return html`
             <div class="grid-rows-subgrid row-span-6 grid rounded-lg bg-gradient-to-br from-blue-50 to-green-50 text-left shadow-md">
                 <img src="${this.recipe.image}" alt="${this.recipe.text}" class="row-start-1 h-24 w-full rounded-t-lg object-cover" />
@@ -76,13 +171,17 @@ class RecipeCard extends LightDOMLitElement {
                 </div>
                 <p class="text-pretty row-start-4 truncate px-2 py-1 text-xs text-gray-600">${this.recipe.description}</p>
                 <div class="absolute -top-4 left-0 right-0 flex justify-center space-x-2 p-2">
-                    ${this.recipe.tags.map((tag) => html`<span class="inline-flex items-center rounded-md bg-orange-100 px-1 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-orange-500/10">${tag}</span> `)}
+                    ${this.recipe.tags.map((tag) => html`<span class="${this._getPillColor(tag)} inline-flex items-center rounded-full border p-1 text-xs font-medium">${tag}</span> `)}
                 </div>
                 ${this.isExpanded ? this._getExpandedTemplate() : ""}
                 <button @click="${this._toggleExpand}" class="show-more-btn w-28 justify-self-end border-none bg-transparent p-1 text-sm text-blue-400 hover:text-blue-900">${this.isExpanded ? "Show Less" : "Show More..."}</button>
             </div>
         `;
     }
+
+    render() {
+        return this.isCompactMode ? this._compactCard() : this._gridCard();
+    }
 }
 
 customElements.define("recipe-card", RecipeCard);

experimental/responsive-design/src/data/recipes.js

@@ -7,37 +7,45 @@ class RecipeGrid extends LightDOMLitElement {
     static properties = {
         _expandedCardIndices: { type: Array },
         recipes: { type: Array },
+        isCompactLayout: { type: Boolean },
     };
 
     constructor() {
         super();
         this._expandedCardIndices = [];
         this.recipes = recipes;
+        this.isCompactLayout = false;
+
+        this._compactQuery = window.matchMedia("(max-width: 640px)");
+        this._compactQuery.addEventListener("change", this._handleLayoutChange.bind(this));
+        this.isCompactLayout = this._compactQuery.matches;
+    }
+
+    _handleLayoutChange(event) {
+        this.isCompactLayout = event.matches;
     }
 
     _handleToggleExpand(event) {
-        const target = event.target;
-        const cardIndex = parseInt(target.dataset.index);
-        if (target.isExpanded)
-            this._expandedCardIndices = [...this._expandedCardIndices, cardIndex];
+        const { index, isExpanded } = event.detail;
+        if (isExpanded)
+            this._expandedCardIndices = [...this._expandedCardIndices, index];
         else
-            this._expandedCardIndices = this._expandedCardIndices.filter((index) => index !== cardIndex);
+            this._expandedCardIndices = this._expandedCardIndices.filter((i) => i !== index);
     }
 
     _getRecipeCardsTemplate() {
-        return this.recipes.map(
-            (recipe, index) => html`
-                <recipe-card
-                    class="${this._expandedCardIndices.includes(index) ? "col-span-2 lg:col-span-2" : ""} grid-rows-subgrid relative row-span-6 mt-1 grid gap-0 rounded-lg bg-white text-left shadow-md hover:shadow-lg"
-                    .recipe="${recipe}"
-                    data-index="${index}"
-                ></recipe-card>
-            `
-        );
+        return this.recipes.map((recipe, index) => {
+            const isExpanded = this._expandedCardIndices.includes(index);
+            const gridClasses = this.isCompactLayout
+                ? "relative rounded-lg bg-white text-left shadow-md hover:shadow-lg"
+                : `${isExpanded ? "col-span-2 lg:col-span-2" : ""} grid-rows-subgrid relative row-span-6 mt-1 grid gap-0 rounded-lg bg-white text-left shadow-md hover:shadow-lg`;
+            return html` <recipe-card class="${gridClasses}" .recipe="${recipe}" .isExpanded="${isExpanded}" .isCompactMode="${this.isCompactLayout}" .index="${index}" @toggle-expand="${this._handleToggleExpand}"></recipe-card> `;
+        });
     }
 
     render() {
-        return html` <div class="grid grid-cols-2 gap-5 py-2 pl-2 pr-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6" @toggle-expand="${this._handleToggleExpand}">${this._getRecipeCardsTemplate()}</div> `;
+        const containerClass = this.isCompactLayout ? "grid grid-cols-1 gap-3 py-2 pl-2 pr-4" : "grid grid-cols-2 gap-5 py-2 pl-2 pr-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6";
+        return html` <div class="${containerClass}" @toggle-expand="${this._handleToggleExpand}">${this._getRecipeCardsTemplate()}</div> `;
     }
 }