show more via css classes

Archmonger · Jan 3, 2023 · 2a6c517 · 2a6c517
1 parent 79537b8
commit 2a6c517
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/conreq/_core/app_store/components/spotlight.py b/conreq/_core/app_store/components/spotlight.py
@@ -37,8 +37,9 @@ def spotlight_section(
     apps: Iterable[AppPackage],
 ):
     opacity, set_opacity = hooks.use_state(0)
-    show_more, set_show_more = hooks.use_state(False)
     card_list = [card(app, key=app.uuid) for app in apps]
+    min_show_len = 3
+    show_more, set_show_more = hooks.use_state(len(card_list) <= min_show_len)
 
     @hooks.use_effect(dependencies=[])
     async def fade_in_animation():
@@ -57,28 +58,31 @@ async def fade_in_animation():
                 h4({"className": "title"}, title),
                 p({"className": "description"}, description),
             ),
-            div(
-                {"className": "collapse-controls"},
-                button(
-                    {
-                        "className": "btn btn-sm btn-dark",
-                        "onClick": lambda _: set_show_more(not show_more),
-                    },
-                    "Show More ",
-                    i({"className": f'fas fa-angle-{"up" if show_more else "down"}'}),
-                ),
-            ),
+            [
+                div(
+                    {"className": "collapse-controls"},
+                    button(
+                        {
+                            "className": "btn btn-sm btn-dark",
+                            "onClick": lambda _: set_show_more(not show_more),
+                        },
+                        "Show More ",
+                        i(
+                            {
+                                "className": f'fas fa-angle-{"up" if show_more else "down"}'
+                            }
+                        ),
+                    ),
+                    key="collapse-controls",
+                )
+            ]
+            if len(card_list) > min_show_len
+            else [],
         ),
         div(
-            {"className": "card-stage"}
-            | ({"style": {"height": "auto"}} if show_more else {}),
+            {"className": f"card-stage {'show-more' if show_more else ''}"},
             div(
-                {"className": "collapse"}
-                | (
-                    {"style": {"flex-flow": "wrap", "width": "auto"}}
-                    if show_more
-                    else {}
-                ),
+                {"className": "collapse"},
                 card_list,
             ),
         ),

diff --git a/conreq/_core/app_store/static/conreq/app_store.css b/conreq/_core/app_store/static/conreq/app_store.css
@@ -86,6 +86,10 @@ a.nav-sub-link:active {
 	margin-bottom: 20px;
 }
 
+.spotlight .card-stage.show-more {
+	height: auto;
+}
+
 .spotlight .card-stage .collapse {
 	display: flex;
 	flex-flow: row;
@@ -94,6 +98,11 @@ a.nav-sub-link:active {
 	width: fit-content;
 }
 
+.spotlight .card-stage.show-more .collapse {
+	flex-flow: wrap;
+	width: auto;
+}
+
 .spotlight .card-stage .card {
 	--border-radius: 8px;
 	--border-size: 1px;