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 <Friedemann.Kleint@qt.io>
(cherry picked from commit 8bacb6a2f31681991494348353fc7c332dd9b4e7)
Reviewed-by: Cristian Maureira-Fredes <cristian.maureira-fredes@qt.io>

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"