diff --git a/CHANGELOG.md b/CHANGELOG.md index 3648061d..5e8f85f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - automatically center the map on the contents when no top-level latitude and longitude properties are provided even when the map contains geojson data. - allow using `FALSE as tile_source` to completely remove the base map. This makes the map component useful to display even non-geographical geometric data. - Fix a bug that occured when no `database_url` was provided in the configuration file. SQLPage would generate an incorrect default SQLite database URL. + - Add a new `background_color` attribute to the [card](https://sql.ophir.dev/documentation.sql?component=card#component) component to set the background color of the card. ## 0.23.0 (2024-06-09) diff --git a/examples/official-site/colors.sql b/examples/official-site/colors.sql new file mode 100644 index 00000000..fde527d5 --- /dev/null +++ b/examples/official-site/colors.sql @@ -0,0 +1,4 @@ +select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1; + +select 'list' as component, + 'Colors' as title; diff --git a/examples/official-site/sqlpage/migrations/31_card_docs_update.sql b/examples/official-site/sqlpage/migrations/31_card_docs_update.sql index 68e7842e..d0a70412 100644 --- a/examples/official-site/sqlpage/migrations/31_card_docs_update.sql +++ b/examples/official-site/sqlpage/migrations/31_card_docs_update.sql @@ -25,6 +25,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S ('style', 'Inline style property to your iframe embed code. For example "background-color: #FFFFFF"', 'TEXT', FALSE, TRUE), ('icon', 'Name of an icon to display on the left side of the card.', 'ICON', FALSE, TRUE), ('color', 'The name of a color, to be displayed on the left of the card to highlight it.', 'COLOR', FALSE, TRUE), + ('background_color', 'The background color of the card.', 'COLOR', FALSE, TRUE), ('active', 'Whether this item in the grid is considered "active". Active items are displayed more prominently.', 'BOOLEAN', FALSE, TRUE) ) x; INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'card', * FROM (VALUES @@ -57,6 +58,13 @@ INSERT INTO example(component, description, properties) VALUES {"title": "Squirrel", "description_md": "The **chipmunk** is a small, striped rodent of the family Sciuridae. Chipmunks are found in North America, with the exception of the Siberian chipmunk which is found primarily in Asia.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Tamias-rufus-001.jpg/640px-Tamias-rufus-001.jpg" }, {"title": "Spider", "description_md": "The **jumping spider family** (_Salticidae_) contains more than 600 described genera and about *6000 described species*, making it the largest family of spiders with about 13% of all species.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Jumping_spiders_%28Salticidae%29.jpg/640px-Jumping_spiders_%28Salticidae%29.jpg" } ]')), + ('card', 'Beautifully colored cards', + json('[ + {"component":"card", "title":"Beautifully colored cards", "columns": 3}, + {"title": "Red card", "color": "red", "background_color": "red-lt", "description": "Penalty! You are out!", "icon":"play-football" }, + {"title": "Green card", "color": "green", "background_color": "green-lt", "description": "Welcome to the United States of America !", "icon":"user-dollar" }, + {"title": "Blue card", "color": "blue", "background_color": "blue-lt", "description": "The Blue Card facilitates migration of foreigners to Europe.", "icon":"currency-euro" } + ]')), ('card', 'Cards with remote content', json('[ {"component":"card", "title":"Card with embedded remote content", "columns": 2}, diff --git a/sqlpage/templates/card.handlebars b/sqlpage/templates/card.handlebars index 26c277ad..286c15df 100644 --- a/sqlpage/templates/card.handlebars +++ b/sqlpage/templates/card.handlebars @@ -23,7 +23,11 @@ mt-1 mb-3 {{class}}"> {{#each_row}}
-
+
{{#if link}} {{/if}}