cleanup and styling tweaks

examples/views/recipes/components/ratings.py

@@ -4,8 +4,4 @@
 
 @components.register("Ratings")
 class RatingsComponent(LiveComponent):
-    async def mount(self, socket):
-        print("Ratings mounted")
-
-    async def update(self, socket, template_vars):
-        print("Ratings updated", template_vars)
+    pass

examples/views/recipes/components/recipe_card.css

@@ -16,7 +16,9 @@
 }
 
 .recipe_card-content {
-    padding: 0.75em;
+    padding-inline: 0.75em;
+    padding-bottom: 0.75em;
+
 }
 
 .recipe_card-header {
@@ -25,14 +27,19 @@
     align-items: flex-end;
 }
 
+
 .recipe_card-content .recipe_card-title {
-    font-size: 1.1em;
-    font-weight: 500;
+    font-family: var(--recipe-title-font);
+    font-weight: 400;
+    font-style: normal;
+
+    font-size: 1.6em;
+
     color: #333;
 }
 
 .recipe_card-content .recipe_card-time {
-    font-size: 0.9em;
+    font-size: 0.8em;
     color: #666;
     font-weight: 100;
 }
@@ -51,7 +58,7 @@
 }
 
 .recipe_card-actions {
-    padding-top: .75em;
+    padding-top: 0.25em;
     display: flex;
     justify-content: space-between;
 }

examples/views/recipes/components/recipe_card.py

@@ -6,9 +6,3 @@
 class RecipeCardComponent(LiveComponent):
     def __init__(self):
         super().__init__()
-
-    async def mount(self, socket):
-        print("RecipeCard mounted")
-
-    async def update(self, socket, template_vars):
-        print("RecipeCard updated", template_vars)

examples/views/recipes/recipe_db.py → examples/views/recipes/recipe_list.py

@@ -1,5 +1,4 @@
 from dataclasses import dataclass, field
-import random
 import uuid
 from typing import Optional
 

examples/views/recipes/recipes.css

@@ -1,9 +1,17 @@
+:root {
+  --recipe-title-font: "Shadows Into Light", cursive;
+}
+
 main {
   margin: 0;
   padding: 20px;
   height: 100vh;
 }
 
+.recipes_title {
+  margin-top: 0;
+}
+
 html {
   background-color: #F0F0F0;
 }

examples/views/recipes/recipes.html

@@ -1,5 +1,9 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
+
 <main>
-    <h1 style="margin-top: 0.75em">Latest Recipes</h1>
+    <h1 class="recipes_title">Latest Recipes</h1>
     <div class="recipes">
         {% for recipe in recipes %}
         {% live_component "RecipeCard" with id = recipe.id & recipe = recipe  %}

examples/views/recipes/recipes.py

@@ -1,6 +1,6 @@
 from pyview import LiveView, LiveViewSocket
-from dataclasses import dataclass, field
-from .recipe_db import Recipe, all_recipes
+from dataclasses import dataclass
+from .recipe_list import Recipe, all_recipes
 
 
 @dataclass
@@ -29,6 +29,4 @@ async def handle_event(self, event, payload, socket):
             id = payload["id"]
             recipe = next((r for r in socket.context.recipes if r.id == id), None)
             if recipe is not None:
-                print("Set rating", recipe.rating, "to", payload["rating"])
-
                 recipe.rating = int(payload["rating"])

pyview/live_component/live_components_context.py

@@ -31,15 +31,11 @@ def register_component(
         id = f"{user_id}-{component.__class__.__name__}"
         ref = ComponentReference(id, self.cid_index)
 
-        print("Registering component", id, ref)
         for c in self.components:
             if c.ref.id == id:
                 c.context = context
-                print("Component already registered", id)
                 return c.ref
 
-        print("Component not registered", id)
-
         self.components.append(LiveComponentContext(ref, component, context))
         self.cid_index += 1
         return ref