make api reference responsive

main.py

@@ -155,7 +155,7 @@ ui.run()
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
         link_target('examples', '-50px')
         section_heading('Examples', 'Try *this*')
-        with ui.column().classes('w-full gap-16'):
+        with ui.column().classes('w-full'):
             reference.create_intro()
 
     with ui.column().classes('dark-box p-8 lg:p-16 my-16'):
@@ -230,7 +230,9 @@ ui.run()
 def reference_page():
     add_head_html()
     add_header()
-    reference.create_full()
+    with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
+        section_heading('Documentation and Examples', '*API* Reference')
+        reference.create_full()
 
 
 ui.run(uvicorn_reload_includes='*.py, *.css, *.html')

nicegui/elements/upload.py

@@ -22,7 +22,7 @@ class Upload(Element):
         :param upload_button_icon: icon for the upload button
         """
         super().__init__('upload')
-        self.classes('row items-baseline gap-2')
+        self.classes('row items-center gap-2')
         self._props['multiple'] = multiple
         self._props['file_picker_label'] = file_picker_label
         self._props['upload_button_icon'] = upload_button_icon

nicegui/run.py

@@ -27,6 +27,30 @@ def run(*,
         uvicorn_reload_excludes: str = '.*, .py[cod], .sw.*, ~*',
         exclude: str = '',
         ) -> None:
+    '''ui.run
+
+    You can call `ui.run()` with optional arguments:
+
+    :param host: start server with this host (default: `'0.0.0.0'`)
+    :param port: use this port (default: `8080`)
+    :param title: page title (default: `'NiceGUI'`, can be overwritten per page)
+    :param favicon: relative filepath to a favicon (default: `None`, NiceGUI icon will be used)
+    :param dark: whether to use Quasar's dark mode (default: `False`, use `None` for "auto" mode)
+    :param binding_refresh_interval: time between binding updates (default: `0.1` seconds, bigger is more CPU friendly)
+    :param show: automatically open the UI in a browser tab (default: `True`)
+    :param reload: automatically reload the UI on file changes (default: `True`)
+    :param uvicorn_logging_level: logging level for uvicorn server (default: `'warning'`)
+    :param uvicorn_reload_dirs: string with comma-separated list for directories to be monitored (default is current working directory only)
+    :param uvicorn_reload_includes: string with comma-separated list of glob-patterns which trigger reload on modification (default: `'.py'`)
+    :param uvicorn_reload_excludes: string with comma-separated list of glob-patterns which should be ignored for reload (default: `'.*, .py[cod], .sw.*, ~*'`)
+    :param exclude: comma-separated string to exclude elements (with corresponding JavaScript libraries) to save bandwidth
+      (possible entries: chart, colors, interactive_image, joystick, keyboard, log, scene, upload, table)
+
+    The environment variables `HOST` and `PORT` can also be used to configure NiceGUI.
+
+    To avoid the potentially costly import of Matplotlib, you set the environment variable `MATPLOTLIB=false`.
+    This will make `ui.plot` and `ui.line_plot` unavailable.
+    '''
     globals.host = host
     globals.port = port
     globals.reload = reload

website/example.py

@@ -24,7 +24,7 @@ class example:
         self.browser_title = browser_title
 
     def __call__(self, f: Callable) -> Callable:
-        with ui.column().classes('w-full'):
+        with ui.column().classes('w-full mb-8'):
             if isinstance(self.content, str):
                 documentation = ui.markdown(self.content)
             else:
@@ -35,9 +35,9 @@ class example:
                 html = html.replace('param ', '')
                 html = apply_tailwind(html)
                 documentation = ui.html(html)
-            _add_html_anchor(documentation.classes('text-lg'))
+            _add_html_anchor(documentation.classes('text-lg documentation bold-links'))
 
-            with ui.row().classes('w-full items-stretch gap-8'):
+            with ui.column().classes('w-full items-stretch gap-8 no-wrap xl:flex-row'):
                 code = inspect.getsource(f).splitlines()
                 indentation = len(code[0].split('@example')[0]) + 4
                 while not code[0].startswith(' ' * indentation):
@@ -59,9 +59,9 @@ class example:
                     code.append('ui.run()')
                 code.append('```')
                 code = '\n'.join(code)
-                with python_window(classes='w-full max-w-[50rem]'):
+                with python_window(classes='w-full max-w-[48rem]'):
                     ui.markdown(code)
-                with browser_window(self.browser_title, classes='w-full max-w-[20rem] browser-window'):
+                with browser_window(self.browser_title, classes='w-full max-w-[48rem] xl:max-w-[20rem] min-h-[10rem] browser-window'):
                     f()
         return f
 

website/static/style.css

@@ -20,7 +20,7 @@ a:active:not(.browser-window *) {
   opacity: 0.85;
 }
 .bold-links a:link {
-  font-weight: bold;
+  font-weight: 500;
 }
 .arrow-links a:link::after {
   content: "north_east";
@@ -42,16 +42,21 @@ a:active:not(.browser-window *) {
 
 dl.field-list {
   display: grid;
+  font-size: 85%;
   grid-template-columns: max-content auto;
+  margin: 1em 0;
 }
 dl.field-list dt {
   grid-column-start: 1;
   margin-right: 1em;
-  font-weight: bold;
+  font-weight: 500;
 }
 dl.field-list dd {
   grid-column-start: 2;
 }
+dl.field-list p {
+  margin-bottom: 0;
+}
 
 .dark-box {
   background-color: #5a99ff;