From e5d369e28620adfb5ace93fed01bed04f975550a Mon Sep 17 00:00:00 2001 From: Cristian Maureira-Fredes Date: Thu, 10 Jun 2021 15:41:11 +0200 Subject: examples: tweak css for the gallery - Using cards with buttons - Fit images as a cover for each example Task-number: PYSIDE-841 Change-Id: I1702fbad8fabc9d0f9e2a06d46afcf73b4075c8d Reviewed-by: Friedemann Kleint (cherry picked from commit 8bacb6a2f31681991494348353fc7c332dd9b4e7) Reviewed-by: Cristian Maureira-Fredes --- .../pyside6/doc/_themes/pysidedocs/static/pyside.css | 17 +++++++++++++++++ tools/example_gallery/main.py | 9 +++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css index 506b61d15..c4767f57f 100644 --- a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css +++ b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css @@ -2176,3 +2176,20 @@ div.rightside { border-color: #41cd52 !important; font-weight: bold !important; } + +.card { + height: 250px; + text-align: center; +} + +.card-img-top { + object-fit: cover; + width: 50px; + height: 120px; +} + +.card-body { + vertical-align: middle; + padding: 5px !important; + text-align: center; +} diff --git a/tools/example_gallery/main.py b/tools/example_gallery/main.py index 332f2a2f5..8cc156101 100644 --- a/tools/example_gallery/main.py +++ b/tools/example_gallery/main.py @@ -96,7 +96,7 @@ def get_module_gallery(examples): gallery = ( ".. panels::\n" f"{ind(1)}:container: container-lg pb-3\n" - f"{ind(1)}:column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2\n\n" + f"{ind(1)}:column: col-lg-3 col-md-3 col-sm-6 col-xs-12 p-2\n\n" ) # Iteration per rows @@ -116,7 +116,8 @@ def get_module_gallery(examples): gallery += f"{ind(1)}---\n" if e["img_doc"]: - gallery += f"{ind(1)}:img-top: {e['img_doc'].name}\n\n" + gallery += f"{ind(1)}:img-top: {e['img_doc'].name}\n" + gallery += f"{ind(1)}:img-top-cls: + d-flex align-self-center\n\n" else: gallery += "\n" @@ -124,6 +125,10 @@ def get_module_gallery(examples): gallery += f"{ind(1)}`{name} <{url}>`_\n" gallery += f"{ind(1)}+++\n" gallery += f"{ind(1)}{underline}\n" + gallery += f"\n{ind(1)}.. link-button:: {url}\n" + gallery += f"{ind(2)}:type: url\n" + gallery += f"{ind(2)}:text: Go to Example\n" + gallery += f"{ind(2)}:classes: btn-qt btn-block stretched-link\n" return f"{gallery}\n" -- cgit v1.2.3