responsive design in the card component

Author: lovasoa

CHANGELOG.md

@@ -117,6 +117,7 @@ and does not even need to listen on port 80 to do so.
  - The `cookie` component now supports setting the `SameSite` attribute of cookies, and defaults to `SameSite=Strict` for all cookies. What this means in practice is that cookies set by SQLPage will not be sent to your website if the user is coming from another website. This prevents someone from tricking your users into executing SQLPage queries on your website by sending them a malicious link.
  - Bugfix: setting `min` or `max` to `0` in a number field in the `form` component now works as expected.
  - Added support for `.env` files to set SQLPage's [environment variables](./configuration.md#environment-variables).
+ - Better responsive design in the card component. Up to 5 cards per line on large screens. The number of cards per line is still customizable with the `columns` attribute.
 
 ## 0.16.1 (2023-11-22)
 

docs/cards.png

@@ -1,10 +1,10 @@
 create table if not exists tab_example_cards as 
-select 'Leaf' as title, 'Leaf_1_web' as img, 'f4' as prefix, 'green' as color union all
-select 'Caterpillar', 'Caterpillar_of_box_tree_moth%2C_Germany_2019', 'a9', 'green' union all
-select 'Butterfly', 'Common_brimstone_butterfly_(Gonepteryx_rhamni)_male', '6a', 'green' union all
-select 'Flower', 'Red-poppy-flower_-_West_Virginia_-_ForestWander', 'fd', 'red' union all
-select 'Bird', 'Summer_tanager_(Piranga_rubra)_male_Copan_3', 'dd', 'red' union all
-select 'Medusa', 'Aurelia_aurita_2', '5c', 'blue';
+select 'Leaf' as title, 'Leaf_1_web' as img, 'f4' as prefix, 'green' as color, 'Autumn''s dance begins, Crimson leaves in breezy waltz, Nature''s fleeting art.' as description union all
+select 'Caterpillar', 'Caterpillar_of_box_tree_moth%2C_Germany_2019', 'a9', 'green', 'Caterpillar crawls, silent transformation unfolds.' union all
+select 'Butterfly', 'Common_brimstone_butterfly_(Gonepteryx_rhamni)_male', '6a', 'green', 'Cocoon unfolds wings, fleeting transformation.' union all
+select 'Flower', 'Red-poppy-flower_-_West_Virginia_-_ForestWander', 'fd', 'red', 'Blossom in the sun, vibrant beauty blooms.' union all
+select 'Bird', 'Summer_tanager_(Piranga_rubra)_male_Copan_3', 'dd', 'red', 'Winged melody soars' union all
+select 'Medusa', 'Aurelia_aurita_2', '5c', 'blue', 'Mythic curse unveiled';
 
 select 'tab' as component, true as center;
 select 'Show all cards' as title, 'All things are beautiful' as description, '?' as link, $tab is null as active;
@@ -18,9 +18,10 @@ group by color;
 
 
 select 'card' as component;
-select title, 
+select title, description,
     format('https://upload.wikimedia.org/wikipedia/commons/thumb/%s/%s/%s.jpg/640px-%s.jpg', substr(prefix,1,1), prefix, img, img) as top_image,
-    color
+    color,
+    'https://en.wikipedia.org/wiki/File:' || img || '.jpg' as link
 from tab_example_cards
 where $tab is null or $tab = color;
 

examples/official-site/examples/tabs.sql

@@ -11,10 +11,13 @@
     row
     row-cols-1
     {{#if columns}}
-        {{#if (gt columns 2)}}row-cols-md-2{{/if}}
-        row-cols-xl-{{columns}}
+        {{#if (gt columns 2)}}row-cols-sm-2{{/if}}
+        row-cols-lg-{{columns}}
     {{else}}
-        row-cols-xl-3
+        row-cols-sm-2
+        row-cols-md-3
+        row-cols-lg-4
+        row-cols-xl-5
     {{/if}}
     gx-2 gy-2
     mt-1 mb-3">