Merge branch 'v1_reference_styling' into v1

main.py

@@ -7,7 +7,7 @@ from pygments.formatters import HtmlFormatter
 from nicegui import Client, ui
 from website import demo_card, reference
 from website.constants import ACCENT_COLOR, HEADER_HEIGHT, STATIC
-from website.example import bash_window, browser_window, python_window
+from website.example import bash_window, browser_window, css_for_examples, python_window
 
 ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')
 
@@ -66,6 +66,7 @@ def add_head_html() -> None:
     }};
     </script>
     ''')
+    ui.add_head_html(f'<style>\n{css_for_examples()}\n</style>')
 
 
 def add_header() -> None:
@@ -213,7 +214,8 @@ ui.run()
         ui.label('Examples').classes('text-bold text-lg')
         ui.html('Try <em>this</em>') \
             .style('font-size: 300%; font-weight: 500; margin-top: -20px')
-        reference.create_intro()
+        with ui.row().classes('justify-center w-full'), ui.column().classes('w-[65rem]'):
+            reference.create_intro()
 
     with ui.row() \
             .classes('w-full items-center gap-28 px-32 py-16 no-wrap') \

website/example.py

@@ -13,49 +13,50 @@ SPECIAL_CHARACTERS = re.compile('[^(a-z)(A-Z)(0-9)-]')
 
 class example:
 
-    def __init__(self, content: Union[Callable, type, str], tight: bool = False) -> None:
+    def __init__(self, content: Union[Callable, type, str]) -> None:
         self.content = content
-        self.markdown_classes = f'mr-8 w-full flex-none lg:w-{48 if tight else 80} xl:w-80'
-        self.rendering_classes = f'w-{48 if tight else 64} flex-none lg:mt-12'
-        self.source_classes = f'w-80 flex-grow overflow-auto lg:mt-12'
+        self.markdown_classes = f'w-full max-w-screen-lg flex-none'
+        self.rendering_classes = f'w-80 text-lg'
+        self.source_classes = f'w-[43rem] overflow-auto'
 
     def __call__(self, f: Callable) -> Callable:
-        with ui.row().classes('mb-2 flex w-full'):
+        with ui.row().classes('q-mb-xl'):
             if isinstance(self.content, str):
                 _add_html_anchor(ui.markdown(self.content).classes(self.markdown_classes))
             else:
                 doc = self.content.__doc__ or self.content.__init__.__doc__
-                html: str = docutils.core.publish_parts(doc, writer_name='html')['html_body']
+                html: str = docutils.core.publish_parts(doc, writer_name='html5_polyglot')['html_body']
                 html = html.replace('<p>', '<h4>', 1)
                 html = html.replace('</p>', '</h4>', 1)
+                html = html.replace('param ', '')
                 html = apply_tailwind(html)
                 _add_html_anchor(ui.html(html).classes(self.markdown_classes))
 
-            with browser_window().classes(self.rendering_classes):
-                f()
-
-            code = inspect.getsource(f).splitlines()
-            while not code[0].startswith(' ' * 8):
-                del code[0]
-            code = [l[8:] for l in code]
-            while code[0].startswith('global '):
-                del code[0]
-            code.insert(0, '```python')
-            code.insert(1, 'from nicegui import ui')
-            if code[2].split()[0] not in ['from', 'import']:
-                code.insert(2, '')
-            for l, line in enumerate(code):
-                if line.startswith('# ui.'):
-                    code[l] = line[2:]
-                if line.startswith('# ui.run('):
-                    break
-            else:
-                code.append('')
-                code.append('ui.run()')
-            code.append('```')
-            code = '\n'.join(code)
-            with python_window().classes(self.source_classes):
-                ui.markdown(code)
+            with ui.row().classes('items-stretch max-w-screen-lg'):
+                code = inspect.getsource(f).splitlines()
+                while not code[0].startswith(' ' * 12):
+                    del code[0]
+                code = [l[12:] for l in code]
+                while code[0].startswith('global '):
+                    del code[0]
+                code.insert(0, '```python')
+                code.insert(1, 'from nicegui import ui')
+                if code[2].split()[0] not in ['from', 'import']:
+                    code.insert(2, '')
+                for l, line in enumerate(code):
+                    if line.startswith('# ui.'):
+                        code[l] = line[2:]
+                    if line.startswith('# ui.run('):
+                        break
+                else:
+                    code.append('')
+                    code.append('ui.run()')
+                code.append('```')
+                code = '\n'.join(code)
+                with python_window().classes(self.source_classes):
+                    ui.markdown(code)
+                with browser_window().classes(self.rendering_classes):
+                    f()
         return f
 
 
@@ -94,12 +95,31 @@ 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().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-400').style('font-size: 60%; margin: -3px 0px 0px -12px')
+    with ui.card().classes('h-fill').style(f'box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: white') as card:
+        with ui.row().classes('mb-2 items-center gap-2').style('transform: translate(-6px, -6px)'):
+            ui.icon('language').classes('text-blue-400').style('font-size: 90%')
+            ui.label('localhost:8080').classes('text-blue-400').style('font-size: 60%')
     return card
 
 
 def bash_window() -> ui.card:
     return window('#e8e8e8')
+
+
+def css_for_examples() -> str:
+    return '''
+        dl {
+            display: grid;
+            grid-template-columns: max-content auto;
+        }
+
+        dt {
+            grid-column-start: 1;
+            margin-right: 1em;
+            font-weight: bold;
+        }
+
+        dd {
+            grid-column-start: 2;
+        }
+    '''