switch to more compact tiles for the documentation overview

website/documentation/content.py

@@ -1,5 +1,7 @@
 from typing import Dict
 
+from nicegui import ui
+
 from .section import Section
 from .sections import (action_events, audiovisual_elements, binding_properties, configuration_deployment, controls,
                        data_elements, page_layout, styling_appearance, text_elements)
@@ -22,8 +24,13 @@ SECTIONS: Dict[str, Section] = {
 
 
 def create_overview() -> None:
-    for section in SECTIONS.values():
-        section.intro()
+    with ui.grid().classes('grid-cols-[1fr] md:grid-cols-[1fr_1fr] xl:grid-cols-[1fr_1fr_1fr]'):
+        for section in SECTIONS.values():
+            with ui.link(target=f'/documentation/section_{section.name}/') \
+                    .classes('bg-[#5898d420] p-4 self-stretch rounded flex flex-col gap-2') \
+                    .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
+                ui.label(section.title).classes(replace='text-2xl')
+                ui.markdown(section.description).classes(replace='bold-links arrow-links')
 
 
 def create_section(name: str) -> None:

website/documentation/section.py

@@ -11,7 +11,8 @@ class Section(Protocol):
     def title(self) -> str:
         ...
 
-    def intro(self) -> None:
+    @property
+    def description(self) -> str:
         ...
 
     def content(self) -> None:

website/documentation/sections/action_events.py

@@ -3,11 +3,10 @@ from nicegui import app, ui
 from ..tools import element_demo, load_demo, subheading, text_demo
 
 name = 'action_events'
-title = 'Action Events'
-
-
-def intro() -> None:
-    ...
+title = 'Action & Events'
+description = '''
+    This section covers timers, UI events, and the lifecycle of NiceGUI apps.
+'''
 
 
 def content() -> None:

website/documentation/sections/audiovisual_elements.py

@@ -4,10 +4,9 @@ from ..tools import load_demo, text_demo
 
 name = 'audiovisual_elements'
 title = 'Audiovisual Elements'
-
-
-def intro() -> None:
-    ...
+description = '''
+    You can use elements like `ui.image`, `ui.audio`, `ui.video`, etc. to display audiovisual content.
+'''
 
 
 def content() -> None:

website/documentation/sections/binding_properties.py

@@ -2,10 +2,9 @@ from ..tools import load_demo
 
 name = 'binding_properties'
 title = 'Binding Properties'
-
-
-def intro() -> None:
-    ...
+description = '''
+    To update UI elements automatically, you can bind them to each other or to your data model.
+'''
 
 
 def content() -> None:

website/documentation/sections/configuration_deployment.py

@@ -5,10 +5,9 @@ from ..tools import load_demo, subheading, text_demo
 
 name = 'configuration_deployment'
 title = 'Configuration & Deployment'
-
-
-def intro() -> None:
-    ...
+description = '''
+    Whether you want to run your app locally or on a server, native or in a browser, we got you covered.
+'''
 
 
 def content() -> None:

website/documentation/sections/controls.py

@@ -4,10 +4,9 @@ from ..tools import load_demo
 
 name = 'controls'
 title = 'Controls'
-
-
-def intro() -> None:
-    ...
+description = '''
+    NiceGUI provides a variety of elements for user interaction, e.g. `ui.button`, `ui.slider`, `ui.inputs`, etc.
+'''
 
 
 def content() -> None:

website/documentation/sections/data_elements.py

@@ -4,10 +4,9 @@ from ..tools import load_demo
 
 name = 'data_elements'
 title = 'Data Elements'
-
-
-def intro() -> None:
-    ...
+description = '''
+    There are several elements for displaying data, e.g. `ui.table`, `ui.aggrid`, `ui.highchart`, `ui.echart`, etc.
+'''
 
 
 def content() -> None:

website/documentation/sections/page_layout.py

@@ -4,10 +4,9 @@ from ..tools import load_demo, text_demo
 
 name = 'page_layout'
 title = 'Page Layout'
-
-
-def intro() -> None:
-    ...
+description = '''
+    This section covers fundamental techniques as well as several elements to structure your UI.
+'''
 
 
 def content() -> None:

website/documentation/sections/pages_routing.py

@@ -8,10 +8,8 @@ CONSTANT_UUID = str(uuid.uuid4())
 
 name = 'pages_routing'
 title = 'Pages & Routing'
-
-
-def intro() -> None:
-    ...
+description = '''
+'''
 
 
 def content() -> None:

website/documentation/sections/styling_appearance.py

@@ -5,10 +5,9 @@ from ..tools import load_demo, subheading, text_demo
 
 name = 'styling_appearance'
 title = 'Styling & Appearance'
-
-
-def intro() -> None:
-    ...
+description = '''
+    NiceGUI allows to customize the appearance of UI elements in various ways, including CSS, Tailwind CSS and Quasar properties.
+'''
 
 
 def content() -> None:

website/documentation/sections/text_elements.py

@@ -1,21 +1,12 @@
 from nicegui import ui
 
-from ..tools import load_demo, section_intro_demo
+from ..tools import load_demo
 
 name = 'text_elements'
 title = 'Text Elements'
-
-
-def intro() -> None:
-    @section_intro_demo(name, title, '''
-        NiceGUI provides a set of text elements to display text and other content.
-        The most basic element is the `ui.label`, which can be used to display a simple text.
-        But there are also more advanced elements, such as `ui.markdown`, `ui.mermaid` and `ui.html`.
-    ''')
-    def label():
-        ui.label('Hello, world!')
-        ui.markdown('This is **Markdown**.')
-        ui.html('This is <strong>HTML</strong>.')
+description = '''
+    Elements like `ui.label`, `ui.markdown` and `ui.html` can be used to display text and other content.
+'''
 
 
 def content() -> None:

website/documentation/tools.py

@@ -83,20 +83,6 @@ class text_demo:
         return demo(f)
 
 
-class section_intro_demo(text_demo):
-
-    def __init__(self, name: str, title: str, explanation: str) -> None:
-        super().__init__(title, explanation, more_link=f'section_{name}', make_menu_entry=False)
-        self.name = name
-        with get_menu():
-            ui.link(title, f'/documentation/section_{name}')
-
-    def __call__(self, f: Callable) -> Callable:
-        result = super().__call__(f)
-        ui.markdown(f'[Read more...](/documentation/section_{self.name})').classes('bold-links arrow-links')
-        return result
-
-
 class main_page_demo(text_demo):
 
     def __init__(self, title: str, explanation: str) -> None: