review

examples/todo_list/main.py

@@ -39,27 +39,27 @@ def rename(item: TodoItem, name: str) -> None:
     render_list.refresh()
 
 
-with ui.card().classes('w-80 items-stretch'):
-    ui.label('Todo list').classes('text-semibold text-2xl')
-    add_input = ui.input('New item')
-    add_input.on('keydown.enter', lambda: add(add_input.value))
+@ui.refreshable
+def render_list():
+    if not items:
+        ui.label('List is empty.')
+        return
+    ui.linear_progress(sum(item.done for item in items) / len(items), show_value=False)
+    with ui.row().classes('justify-center w-full'):
+        ui.label(f'Completed: {sum(item.done for item in items)}')
+        ui.label(f'Remaining: {sum(not item.done for item in items)}')
+    for item in items:
+        with ui.row().classes('items-center'):
+            ui.checkbox(value=item.done, on_change=lambda _, item=item: toggle(item))
+            input = ui.input(value=item.name).classes('flex-grow')
+            input.on('keydown.enter', lambda _, item=item, input=input: rename(item, input.value))
+            ui.button(on_click=lambda _, item=item: remove(item)).props('flat fab-mini icon=delete color=grey')
 
-    @ui.refreshable
-    def render_list():
-        if not items:
-            ui.label('List is empty.')
-            return
-        ui.linear_progress(sum(item.done for item in items) / len(items), show_value=False)
-        with ui.row():
-            ui.label(f'Completed: {sum(item.done for item in items)}')
-            ui.label(f'Remaining: {sum(not item.done for item in items)}')
-        for item in items:
-            with ui.row().classes('items-center'):
-                ui.checkbox(value=item.done, on_change=lambda _, item=item: toggle(item))
-                input = ui.input(value=item.name).classes('flex-grow')
-                input.on('keydown.enter', lambda _, item=item, input=input: rename(item, input.value))
-                ui.button(on_click=lambda _, item=item: remove(item)).props('flat fab-mini icon=delete color=grey')
 
+with ui.card().classes('w-80 items-stretch'):
+    ui.label('Todo list').classes('text-semibold text-2xl')
     render_list()
+    add_input = ui.input('New item').classes('mx-12')
+    add_input.on('keydown.enter', lambda: add(add_input.value))
 
 ui.run()