fix #610

Author: lovasoa

CHANGELOG.md

@@ -36,6 +36,7 @@
   - The error message now always includes the name of the file where the error occurred, which is useful when embedding SQLPage pages using `sqlpage.run_sql`, or the card component.
   - When an error occurs while executing a SQL statement, the error message now always includes the (potentially transformed) SQL statement that was sent to the database.
   - Fixed a problem where database errors would be displayed twice in the error message.
+- Fixed layout issues in the card component when embedding content with `embed`: remove double border and padding.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

examples/official-site/examples/chart.sql

@@ -5,7 +5,8 @@ select
     'Syracuse Sequence'        as title,
     coalesce($type, 'area')    as type,
     coalesce($color, 'indigo')  as color,
-    5                          as marker;
+    5                          as marker,
+    0                          as ymin;
 with recursive seq(x, y) as (
     select 0, CAST($n as integer)
     union all

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -666,7 +666,7 @@ to the path of the file you want to include, followed by `?_sqlpage_embed`.
 ',
         json('[
             {"component":"card", "title":"A dashboard with multiple graphs on the same line", "columns": 2},
-            {"embed": "/examples/chart.sql?color=green&n=42&_sqlpage_embed", "footer_md": "You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)" },
+            {"embed": "/examples/chart.sql?color=green&n=42&_sqlpage_embed"},
             {"embed": "/examples/chart.sql?_sqlpage_embed" }
         ]'));
 

examples/official-site/sqlpage/migrations/31_card_docs_update.sql

@@ -72,6 +72,6 @@ INSERT INTO example(component, description, properties) VALUES
     ('card', 'Cards with remote content',
         json('[
             {"component":"card", "title":"Card with embedded remote content", "columns": 2},
-            {"title": "Embedded Chart", "embed": "/examples/chart.sql?_sqlpage_embed", "footer_md": "You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)"  },
+            {"title": "Embedded Chart", "embed": "/examples/chart.sql?_sqlpage_embed" },
             {"title": "Embedded Video", "embed": "https://www.youtube.com/embed/mXdgmSdaXkg", "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", "embed_mode": "iframe", "height": "350" }
         ]'));

sqlpage/templates/card.handlebars

@@ -24,8 +24,10 @@
         {{/unless}} {{class}}"
         {{~#if id}} id="{{id}}"{{/if}}>
             <div class="card h-100
-                {{~#if active}} card-active{{/if~}}
-                {{~#if background_color}} bg-{{background_color}} text-{{background_color}}-fg{{/if~}}
+                {{~#if active}} card-active {{/if~}}
+                {{~#if background_color}} bg-{{background_color}} text-{{background_color}}-fg
+                {{~else}}{{#if embed}} bg-transparent border-0{{/if}}
+                {{~/if~}}
                 "
                 {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
                 {{#if link}}
@@ -37,7 +39,7 @@
                 {{#if color}}
                     <div class="card-status-start bg-{{color}}"></div>
                 {{/if}}
-                <div class="card-body">
+                <div class="card-body {{#if embed}}p-0{{/if}}">
                     {{#if title}}<h2 class="card-title fs-3 me-3">{{title}}</h2>{{/if}}
                     <div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}">
                         {{~description~}}