Merge branch 'lovasoa:main' into fixed-top-navbar

Author: pchemguy

CHANGELOG.md

@@ -30,6 +30,8 @@
       ```sql
       select 'shell' as component, 'My Website' as title, CASE WHEN $role = 'admin' THEN 'Admin' END as menu_item;
     - Add the ability to use local Woff2 fonts in the [shell](https://sql.ophir.dev/documentation.sql?component=shell#component) component. This is useful to use custom fonts in your website, without depending on google fonts (and disclosing your users' IP addresses to google).
+    - Add a `fixed_top_menu` attribute to make the top menu sticky. This is useful to keep the menu visible even when the user scrolls down the page.
+ - Add a `wrap` attribute to the `list` component to wrap items on multiple lines when they are too long.
 
 ## 0.23.0 (2024-06-09)
 

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

@@ -39,6 +39,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('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),
+    ('wrap', 'Wrap list items onto multiple lines if they are too long', '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),
@@ -56,7 +57,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 INSERT INTO example(component, description, properties) VALUES
     ('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"},
+    ('list', 'A list with rich text descriptions', json('[{"component":"list", "wrap": true},
         {"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."}

sqlpage/templates/list.handlebars

@@ -26,9 +26,9 @@
                             <img src="{{image_url}}" class="avatar avatar-md rounded" width="45" height="45" alt="{{title}}" />
                         </div>
                     {{/if}}
-                    <div class="col text-truncate">
+                    <div class="col {{#if ../wrap}}text-wrap{{else}}text-truncate{{/if}}">
                         {{title}}
-                        <div class="d-block text-muted text-truncate mt-n1">
+                        <div class="d-block text-muted text-truncate mt-n1{{#if ../wrap}} text-wrap{{/if}}">
                             {{~description~}}
                             {{~#if description_md~}}
                                 <div style="margin-bottom: -1rem">{{{markdown description_md}}}</div>