new compact attribute in the list component

Author: lovasoa

CHANGELOG.md

@@ -13,6 +13,8 @@
    - ![file upload too large](https://github.com/lovasoa/SQLpage/assets/552629/1c684d33-49bd-4e49-9ee0-ed3f0d454ced)
  - Fix a bug in [`sqlpage.read_file_as_data_url`](https://sql.ophir.dev/functions.sql?function=read_file_as_data_url#function) where it would truncate the mime subtype of the file. This would cause the browser to refuse to display SVG files, for instance.
  - Avoid vertical scrolling caused by the footer even when the page content is short.
+ - Add a new `compact` attribute to the [list](https://sql.ophir.dev/documentation.sql?component=list#component), allowing to display more items in a list without taking up too much space. Great for displaying long lists of items.
+   - ![compact list screenshot](https://github.com/lovasoa/SQLpage/assets/552629/41302807-c6e4-40a0-9486-bfd0ceae1537)
 
 ## 0.23.0 (2024-06-09)
 

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

@@ -32,6 +32,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('empty_description', 'Description to display if the list is empty.', 'TEXT', TRUE, TRUE),
     ('empty_description_md', 'Description to display if the list is empty, in Markdown format.', 'TEXT', TRUE, TRUE),
     ('empty_link', 'URL to which the user should be taken if they click on the empty list.', 'URL', TRUE, TRUE),
+    ('compact', 'Whether to display the list in a more compact format, allowing more items to be displayed on the screen.', 'BOOLEAN', TRUE, TRUE),
     -- item level
     ('title', 'Name of the list item, displayed prominently.', 'TEXT', FALSE, FALSE),
     ('description', 'A description of the list item, displayed as greyed-out text.', 'TEXT', FALSE, TRUE),
@@ -47,15 +48,15 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES
-    ('list', 'The most basic list', json('[{"component":"list"},{"title":"A"},{"title":"B"},{"title":"C"}]')),
+    ('list', 'A basic compact list', json('[{"component":"list", "compact": true, "title": "SQLPage lists are..."},{"title":"Beautiful"},{"title":"Useful"},{"title":"Versatile"}]')),
     ('list', 'An empty list with a link to add an item', json('[{"component":"list", "empty_title": "No items yet", "empty_description": "This list is empty. Click here to create a new item !", "empty_link": "documentation.sql"}]')),
     ('list', 'A list with rich text descriptions', json('[{"component":"list"},
         {"title":"SQLPage", "image_url": "https://raw.githubusercontent.com/lovasoa/SQLpage/main/docs/favicon.png", "description_md":"A **SQL**-based **page** generator for **PostgreSQL**, **MySQL**, **SQLite** and **SQL Server**. [Free on Github](https://github.com/lovasoa/sqlpage)"},
         {"title":"Tabler", "image_url": "https://avatars.githubusercontent.com/u/35471246", "description_md":"A **free** and **open-source** **HTML** template pack based on **Bootstrap**."},
         {"title":"Tabler Icons", "image_url": "https://tabler.io/favicon.ico", "description_md":"A set of over **700** free MIT-licensed high-quality **SVG** icons for you to use in your web projects."}
     ]')),
     ('list', 'A beautiful list with bells and whistles.',
-            json('[{"component":"list", "title":"Popular websites"}, '||
+            json('[{"component":"list", "title":"Popular websites" }, '||
             '{"title":"Google", "link":"https://google.com", "description": "A search engine", "color": "red", "icon":"brand-google", "active": true }, '||
             '{"title":"Wikipedia", "link":"https://wikipedia.org", "description": "An encyclopedia", "color": "blue", "icon":"world", "edit_link": "?edit=wikipedia", "delete_link": "?delete=wikipedia" }]'));
 

sqlpage/templates/list.handlebars

@@ -1,14 +1,13 @@
 <div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     {{#if title}}
-        <div class="card-header ">
+        <div class="card-header {{#if compact}}py-2{{/if}}">
             <h2 class="card-title">{{title}}</h2>
         </div>
     {{/if}}
     <div class="list-group list-group-flush list-group-hoverable">
         {{#each_row}}
             <div {{#if id}}id="{{id}}"{{/if}}
-                class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{class}}">
-
+                class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{#if ../compact}}py-1{{/if}} {{class}}">
                 <div class="row align-items-center">
                     {{#if link}}
                         <a href="{{link}}" class="col text-truncate row align-items-center text-decoration-none link-body-emphasis">