code review

examples/authentication/main.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-'''This is only a very simple authentication example which stores session ids in memory and does not do any password hashing.
+'''This is only a very simple authentication example which stores session IDs in memory and does not do any password hashing.
 
 Please see the `OAuth2 example at FastAPI <https://fastapi.tiangolo.com/tutorial/security/simple-oauth2/>`_  or
 use the great `Authlib package <https://docs.authlib.org/en/v0.13/client/starlette.html#using-fastapi>`_ to implement a real authentication system.
@@ -37,7 +37,7 @@ def main_page(request: Request) -> None:
 def login(request: Request) -> None:
     if is_authenticated(request):
         return RedirectResponse('/')
-    request.session['id'] = str(uuid.uuid4())  # NOTE this stores a new session id in the cookie of the client
+    request.session['id'] = str(uuid.uuid4())  # NOTE this stores a new session ID in the cookie of the client
     with ui.card().classes('absolute-center'):
         username = ui.input('Username')
         password = ui.input('Password').classes('w-full').props('type=password')

main.py

@@ -93,7 +93,7 @@ async def index_page(client: Client):
     add_header()
 
     with ui.row() \
-            .classes('w-full h-screen q-pa-md items-center gap-12 no-wrap') \
+            .classes('w-full h-screen q-pa-md items-center gap-16 no-wrap') \
             .style(f'transform: translateX(-250px)'):
         ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-black').style('width: 500px')
         with ui.column().classes('gap-8'):
@@ -101,11 +101,12 @@ async def index_page(client: Client):
                 .style('font-size: 400%; line-height: 0.9; font-weight: 500')
             ui.markdown('And let any browser be the frontend\n\nof your Python code.') \
                 .style('font-size: 200%; line-height: 0.9')
-            with ui.column().classes('q-mt-md'):
-                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5').style('margin: 0 0 -1.4em 0.32em')
+            with ui.link(target='#about').classes('column mt-6 items-center').style('margin-left: -1em'):
+                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5').style('margin-bottom: -0.95em')
                 ui.icon('keyboard_arrow_down').classes('text-6xl text-black')
-                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5').style('margin: -1.3em 0 0 0.32em')
+                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5').style('margin-top: -0.85em')
 
+    ui.link_target('about').style(f'position: relative; top: -20px')
     with ui.row() \
             .classes('w-full h-screen q-pa-md items-center gap-28 p-32 no-wrap') \
             .style(f'background: {ACCENT_COLOR}'):
@@ -136,47 +137,48 @@ async def index_page(client: Client):
             .style('font-size: 300%; font-weight: 500; margin-top: -20px')
         with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between q-mb-xl'):
             with ui.column().classes('gap-1 col-3'):
-                ui.icon('swap_horiz').classes('text-5xl q-mb-md text-primary opacity-80')
-                ui.label('Interaction').classes('text-bold mb-4')
-                ui.markdown('- buttons, switches, slider, input, ...')
+                ui.icon('swap_horiz').classes('text-5xl mb-3 text-primary opacity-80')
+                ui.label('Interaction').classes('text-bold mb-3')
+                ui.markdown('- buttons, switches, sliders, inputs, ...')
                 ui.markdown('- notifications, dialogs and menus')
                 ui.markdown('- keyboard input')
                 ui.markdown('- on-screen joystick')
             with ui.column().classes('gap-1 col-3'):
-                ui.icon('space_dashboard').classes('text-5xl q-mb-md text-primary opacity-80')
-                ui.label('Layout').classes('text-bold mb-4')
+                ui.icon('space_dashboard').classes('text-5xl mb-3 text-primary opacity-80')
+                ui.label('Layout').classes('text-bold mb-3')
                 ui.markdown('- navigation bars, tabs, panels, ...')
                 ui.markdown('- grouping with rows, columns and cards')
                 ui.markdown('- HTML and markdown elements')
                 ui.markdown('- flex layout by default')
             with ui.column().classes('gap-1 col-3'):
-                ui.icon('insights').classes('text-5xl q-mb-md text-primary')
-                ui.label('Visualization').classes('text-bold mb-4')
+                ui.icon('insights').classes('text-5xl mb-3 text-primary')
+                ui.label('Visualization').classes('text-bold mb-3')
                 ui.markdown('- charts, diagrams and tables')
                 ui.markdown('- 3D scenes')
                 ui.markdown('- progress bars')
                 ui.markdown('- built-in timer for data refresh')
         with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between'):
             with ui.column().classes('gap-1 col-3'):
-                ui.icon('brush').classes('text-5xl q-mb-xs text-primary opacity-80')
-                ui.label('Styling').classes('text-bold mb-4')
+                ui.icon('brush').classes('text-5xl mb-3 text-primary opacity-80')
+                ui.label('Styling').classes('text-bold mb-3')
                 ui.markdown('- customizable color themes')
-                ui.markdown('- add custom css and classes')
+                ui.markdown('- custom CSS and classes')
                 ui.markdown('- modern look with material design')
+                ui.markdown('- built-in [Tailwind](https://tailwindcss.com/) support')
             with ui.column().classes('gap-1 col-3'):
-                ui.icon('source').classes('text-5xl q-mb-md text-primary opacity-80')
-                ui.label('Coding').classes('text-bold mb-4')
+                ui.icon('source').classes('text-5xl mb-3 text-primary opacity-80')
+                ui.label('Coding').classes('text-bold mb-3')
                 ui.markdown('- live-cycle events')
                 ui.markdown('- implicit reload on code change')
                 ui.markdown('- straight-forward data binding')
                 ui.markdown('- execute javascript from Python')
             with ui.column().classes('gap-1 col-3'):
-                ui.icon('anchor').classes('text-5xl q-mb-md text-primary opacity-80')
-                ui.label('Foundation').classes('text-bold mb-4')
-                ui.markdown('- generic Vue to Python bridge')
-                ui.markdown('- dynamic GUI through Quasar')
-                ui.markdown('- content is served with FastAPI')
-                ui.markdown('- Python 3.7 - 3.11')
+                ui.icon('anchor').classes('text-5xl mb-3 text-primary opacity-80')
+                ui.label('Foundation').classes('text-bold mb-3')
+                ui.markdown('- generic [Vue](https://vuejs.org/) to Python bridge')
+                ui.markdown('- dynamic GUI through [Quasar](https://quasar.dev/)')
+                ui.markdown('- content is served with [FastAPI](http://fastapi.tiangolo.com/)')
+                ui.markdown('- Python 3.7+')
 
     ui.link_target('installation').style(f'position: relative; top: -{HEADER_HEIGHT}')
     with ui.column().classes('w-full q-pa-xl q-mb-xl'):
@@ -217,7 +219,7 @@ ui.run()
             .classes('w-full items-center gap-28 px-32 py-16 no-wrap') \
             .style(f'background: {ACCENT_COLOR}'):
         with ui.column().classes('gap-4'):
-            ui.markdown('Browse through tons of live examples.') \
+            ui.markdown('Browse through plenty of live examples.') \
                 .style('font-size: 220%; color: white; line-height: 0.9; font-weight: 500')
             ui.html('Fun-Fact: This whole website is also coded with NiceGUI.') \
                 .style('font-size: 150%; color: white')
@@ -274,7 +276,7 @@ ui.run()
                 <strong><a href="https://quasar.dev/">Quasar</a></strong>
                 for the frontend.<br/>
 
-                We have build on top of
+                We have built on top of
                 <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
                 which itself is based on the ASGI framework
                 <strong><a href="https://www.starlette.io/">Starlette</a></strong>,

nicegui/run.py

@@ -43,7 +43,7 @@ def run(*,
         webbrowser.open(f'http://{host if host != "0.0.0.0" else "127.0.0.1"}:{port}/')
 
     def split_args(args: str) -> List[str]:
-        return args.split(',') if ',' in args else [args]
+        return [a.strip() for a in args.split(',')]
 
     # NOTE: The following lines are basically a copy of `uvicorn.run`, but keep a reference to the `server`.
 

website/demo_card.py

@@ -19,8 +19,8 @@ def create():
                 output = ui.label('Try it out!') \
                     .classes('w-44 my-6 h-8 text-xl text-grey-9 overflow-hidden text-ellipsis text-center')
                 ui.slider(min=0, max=100, value=50, step=0.1, on_change=lambda e: output.set_text(e.value)) \
-                    .style('width: 150px')
-                with ui.row().classes('mt-1'):
+                    .style('width: 150px; margin-bottom: 2px')
+                with ui.row():
                     ui.number('Number', value=3.1415927, format='%.2f', on_change=lambda e: output.set_text(e.value)) \
                         .classes('w-20')
                     ui.select({1: 'One', 2: 'Two', 3: 'Three'}, value=1, on_change=lambda e: output.set_text(e.value))

website/example.py

@@ -95,9 +95,9 @@ def python_window() -> ui.card:
 
 def browser_window() -> ui.card:
     with ui.card().style(f'box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: white') as card:
-        with ui.row():
+        with ui.row().classes('mb-2'):
             ui.icon('language').classes('text-blue-400').style('font-size: 90%; margin: -4px 0px 0px -4px')
-            ui.label('localhost:8080').classes('text-blue-200').style('font-size: 60%; margin: -3px 0px 0px -12px')
+            ui.label('localhost:8080').classes('text-blue-400').style('font-size: 60%; margin: -3px 0px 0px -12px')
     return card
 
 

website/reference.py

@@ -28,9 +28,9 @@ NiceGUI comes with a collection of commonly used UI elements.
         ui.markdown('''This is **Markdown**.''')
         ui.html('This is <strong>HTML</strong>.')
         with ui.row():
-            ui.label('css').style('color: #888; font-weight: bold')
-            ui.label('tailwind').classes('font-serif')
-            ui.label('quasar').classes('q-mt-md')
+            ui.label('CSS').style('color: #888; font-weight: bold')
+            ui.label('Tailwind').classes('font-serif')
+            ui.label('Quasar').classes('q-mt-md')
         ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
 
     @example('''#### Value Binding
@@ -694,11 +694,10 @@ It also enables you to identify sessions using a [session middleware](https://ww
         from collections import Counter
         from datetime import datetime
 
+        from nicegui import app
         from starlette.middleware.sessions import SessionMiddleware
         from starlette.requests import Request
 
-        from nicegui import app
-
         app.add_middleware(SessionMiddleware, secret_key='some_random_string')
 
         counter = Counter()