Merge pull request #1796 from zauberzeug/flex-layout

Use flex layout per default for layout elements

nicegui/elements/carousel.py

@@ -65,5 +65,6 @@ class CarouselSlide(DisableableElement):
         self.carousel = cast(ValueElement, globals.get_slot().parent)
         name = name or f'slide_{len(self.carousel.default_slot.children)}'
         self._props['name'] = name
+        self._classes = ['nicegui-carousel-slide']
         if self.carousel.value is None:
             self.carousel.value = name

nicegui/elements/column.py

@@ -3,10 +3,15 @@ from ..element import Element
 
 class Column(Element):
 
-    def __init__(self) -> None:
+    def __init__(self, *, wrap: bool = False) -> None:
         """Column Element
 
         Provides a container which arranges its child in a column.
+
+        :param wrap: whether to wrap the content (default: `False`)
         """
         super().__init__('div')
         self._classes = ['nicegui-column']
+
+        if wrap:
+            self._classes.append('wrap')

nicegui/elements/expansion.py

@@ -25,6 +25,7 @@ class Expansion(ValueElement, DisableableElement):
         if text is not None:
             self._props['label'] = text
         self._props['icon'] = icon
+        self._classes = ['nicegui-expansion']
 
     def open(self) -> None:
         """Open the expansion."""

nicegui/elements/row.py

@@ -3,10 +3,15 @@ from ..element import Element
 
 class Row(Element):
 
-    def __init__(self) -> None:
+    def __init__(self, *, wrap: bool = False) -> None:
         """Row Element
 
         Provides a container which arranges its child in a row.
+
+        :param wrap: whether to wrap the content (default: `False`)
         """
         super().__init__('div')
         self._classes = ['nicegui-row']
+
+        if wrap:
+            self._classes.append('wrap')

nicegui/elements/splitter.py

@@ -34,6 +34,7 @@ class Splitter(ValueElement, DisableableElement):
         self._props['horizontal'] = horizontal
         self._props['limits'] = limits
         self._props['reverse'] = reverse
+        self._classes = ['nicegui-splitter']
 
         self.before = self.add_slot('before')
         self.after = self.add_slot('after')

nicegui/elements/stepper.py

@@ -30,6 +30,7 @@ class Stepper(ValueElement):
         """
         super().__init__(tag='q-stepper', value=value, on_value_change=on_value_change)
         self._props['keep-alive'] = keep_alive
+        self._classes = ['nicegui-stepper']
 
     def _value_to_model_value(self, value: Any) -> Any:
         return value._props['name'] if isinstance(value, Step) else value  # pylint: disable=protected-access
@@ -65,6 +66,7 @@ class Step(DisableableElement):
         super().__init__(tag='q-step')
         self._props['name'] = name
         self._props['title'] = title if title is not None else name
+        self._classes = ['nicegui-step']
         if icon:
             self._props['icon'] = icon
         self.stepper = cast(ValueElement, globals.get_slot().parent)

nicegui/elements/tabs.py

@@ -92,3 +92,4 @@ class TabPanel(DisableableElement):
         """
         super().__init__(tag='q-tab-panel')
         self._props['name'] = name._props['name'] if isinstance(name, Tab) else name
+        self._classes = ['nicegui-tab-panel']

nicegui/elements/timeline.py

@@ -71,3 +71,4 @@ class TimelineEntry(Element):
             self._props['title'] = title
         if subtitle is not None:
             self._props['subtitle'] = subtitle
+        self._classes = ['nicegui-timeline-entry']

nicegui/static/nicegui.css

@@ -1,53 +1,81 @@
+/* prevent q-layout from getting strange outline when focussed */
 .nicegui-layout {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
+/* flex containers */
+.nicegui-content,
 .nicegui-header,
-.nicegui-footer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 16px;
-}
-.nicegui-drawer {
-  padding: 16px;
-}
-.nicegui-content {
+.nicegui-footer,
+.nicegui-drawer,
+.nicegui-tab-panel,
+.nicegui-card,
+.nicegui-carousel-slide,
+.nicegui-step .q-stepper__nav,
+.nicegui-step .q-stepper__step-inner,
+.nicegui-expansion .q-expansion-item__content,
+.nicegui-scroll-area .q-scrollarea__content,
+.nicegui-splitter .q-splitter__panel,
+.nicegui-timeline-entry .q-timeline__content,
+.nicegui-row,
+.nicegui-column {
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
   align-items: flex-start;
   gap: 1rem;
-  padding: 16px;
+  padding: 1rem;
 }
+.nicegui-header,
+.nicegui-footer,
+.nicegui-step .q-stepper__nav,
 .nicegui-row {
-  display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
 }
+.nicegui-row,
 .nicegui-column {
+  padding: 0;
+}
+
+/* original padding for some Quasar elements */
+.nicegui-step .q-stepper__nav {
+  padding: 8px 0 0 0;
+  gap: 8px;
+}
+.nicegui-timeline-entry .q-timeline__content {
+  padding: 0 0 24px 0;
+}
+.nicegui-splitter .q-splitter__panel {
+  padding: 0;
+}
+
+/* let step content fill the whole stepper for easier layout manipulation (#1788) */
+.nicegui-stepper {
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
 }
+.nicegui-stepper .q-stepper__content {
+  flex-grow: 1;
+}
+.nicegui-stepper .q-stepper__step-content,
+.nicegui-stepper .q-stepper__step-inner {
+  height: 100%;
+}
+
+/* HACK: avoid stutter when expansion item is toggled */
+.nicegui-expansion .q-expansion-item__content {
+  padding: 0 1rem;
+}
+.nicegui-expansion .q-expansion-item__content::before,
+.nicegui-expansion .q-expansion-item__content::after {
+  content: ""; /* the gap compensates for the missing vertical padding */
+}
+
+/* other NiceGUI elements */
 .nicegui-grid {
   display: grid;
   gap: 1rem;
 }
-.nicegui-card {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 16px;
-}
 .nicegui-link:link,
 .nicegui-link:visited {
   text-decoration-line: underline;
@@ -60,14 +88,8 @@
 .nicegui-separator {
   width: 100%;
 }
-.nicegui-aggrid {
-  width: 100%;
-  height: 16rem;
-}
-.nicegui-echart {
-  width: 100%;
-  height: 16rem;
-}
+.nicegui-aggrid,
+.nicegui-echart,
 .nicegui-scroll-area {
   width: 100%;
   height: 16rem;
@@ -105,6 +127,7 @@ h6.q-timeline__title {
   border-radius: 0.25rem;
 }
 
+/* connection popup */
 #popup {
   position: fixed;
   bottom: 0;

website/more_documentation/scroll_area_documentation.py

@@ -5,10 +5,9 @@ from ..documentation_tools import text_demo
 
 def main_demo() -> None:
     with ui.row():
-        with ui.card().classes('w-32 h-32'):
-            with ui.scroll_area():
-                ui.label('I scroll. ' * 20)
-        with ui.card().classes('w-32 h-32'):
+        with ui.scroll_area().classes('w-32 h-32 border'):
+            ui.label('I scroll. ' * 20)
+        with ui.column().classes('p-4 w-32 h-32 border'):
             ui.label('I will not scroll. ' * 10)