An option to control the placement of an icon within a button component.

[amrutadotorg]

Hi, for my project, I'd like to add icons to the buttons responsible for navigating between posts. Currently, the icon is always positioned on the left. Is it possible to place it on the right side of the button title?

thank you

select 
    'button' as component,
    'center' as justify;

-- Select for the previous post
WITH current_post AS (
    SELECT p.id_seq, t.language_code 
    FROM post p
    JOIN translations t ON t.element_id = p.id
    WHERE p.id = $id::int
      AND t.element_type = 'post_post'
),
previous_post AS (
    SELECT p.id, p.title, p.id_seq
    FROM post p
    JOIN translations t ON t.element_id = p.id
    WHERE t.element_type = 'post_post'
      AND t.language_code = (SELECT language_code FROM current_post)
      AND p.id_seq < (SELECT id_seq FROM current_post)
    ORDER BY p.id_seq DESC
    LIMIT 1
)
SELECT 
    'post.sql?id=' || previous_post.id AS link,
    'green' AS color,
    '<< ' || previous_post.title AS title,
    TRUE AS space_after
FROM previous_post;

-- Select for the next post
WITH current_post AS (
    SELECT p.id_seq, t.language_code 
    FROM post p
    JOIN translations t ON t.element_id = p.id
    WHERE p.id = $id::int
      AND t.element_type = 'post_post'
),
next_post AS (
    SELECT p.id, p.title, p.id_seq
    FROM post p
    JOIN translations t ON t.element_id = p.id
    WHERE t.element_type = 'post_post'
      AND t.language_code = (SELECT language_code FROM current_post)
      AND p.id_seq > (SELECT id_seq FROM current_post)
    ORDER BY p.id_seq ASC
    LIMIT 1
)
SELECT 
    'post.sql?id=' || next_post.id AS link,
    'green' AS color,
    next_post.title || ' >>' AS title
FROM next_post;

[lovasoa]

It's currently not possible, but we could add an after_icon parameter to the button component: would you be interested in making a small pull request to https://github.com/lovasoa/SQLpage/blob/main/sqlpage/templates/button.handlebars ?

[amrutadotorg]

I have no idea how to add the parameter, but asked AI. I hope It helps :)

<div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}} {{class}}">
{{#each_row}}
    {{#if form}}
    <button type="submit" form="{{form}}" {{#if link}}formaction="{{link}}"{{/if}} 
    {{else}}
    <a href="{{link}}"
    {{/if}}
        class="btn {{#if disabled}} disabled{{/if}}
        {{~#if color}} btn-{{color}}{{/if}}
        {{~#if ../size}} btn-{{../size}}{{/if}}
        {{~#if outline}} btn-outline-{{outline}}{{/if}}
        {{~#if ../shape}} btn-{{../shape}}{{/if}}
        {{~#if space_after}} me-auto{{/if}}"
        {{~#if id}} id="{{id}}"{{/if}}
        role="button">
        {{~#if icon~}}
            <span class="me-1">{{~icon_img icon~}}</span>
        {{~/if~}}
        {{~title~}}
        {{~#if after_icon~}}
            <span class="ms-1">{{~icon_img after_icon~}}</span>
        {{~/if}}
    {{#if form}}
    </button>
    {{else}}
    </a>
    {{/if}}
{{/each_row}}
</div>

Explanation {{#if icon}}: This block checks if the icon parameter is provided. If it is, it renders the icon before the text. {{title}}: This renders the button text. {{#if after_icon}}: This new block checks if the after_icon parameter is provided. If it is, it renders the icon after the text. In this way, the template will support both an icon before and after the text, depending on which parameters (icon or after_icon) are provided.

[amrutadotorg]

now looks superb, thank you