search

lovasoa / SQLpage

SQL-only webapp builder, empowering data analysts to build websites and applications quickly
https://sql.ophir.dev
MIT License
882 stars 62 forks source link

Button component doesn't have a row-level parameter ID #340

Closed bruceus closed 1 month ago

bruceus commented 1 month ago

Introduction

When the button component row-level parameter ID is defined, I cannot find it the rendered html code in SQLpage.

To Reproduce

List of steps to reproduce the behavior. Include the sql file you are using and the eventual relevant parts of your database schema

select
    'button'    as component,
    'pill'      as shape;
select
    'arrow-big-up'  as icon,
    'btop'          as id,
    '#top'          as link;

Actual behavior

When the SQLpage is rendered, I'm looking into the html code via Chrome Developer tools and I cannot see any ID within the DIV html tag for button.

No errors generated in SQLpage.

Screenshots

2024-05-24_11-45-35

Expected behavior

The ID is present within DIV html tag.

Version information

Additional context

I cloned the latest SQLPage code from GIT. I had a look into sqlpage\templates\button.handlebars and I cannot find ID there.

lovasoa commented 1 month ago

Hello and welcome to SQLPage! The row level attributes of the button component are documented here: https://sql.ophir.dev/documentation.sql?component=button#component

There is indeed no id attribute. But that would be a welcome addition! Would you be interested in making a small pull request to add this?

And out of curiosity: what is it that you are building with SQLPage?

bruceus commented 1 month ago

Hello and welcome to SQLPage! The row level attributes of the button component are documented here: https://sql.ophir.dev/documentation.sql?component=button#component

There is indeed no id attribute. But that would be a welcome addition! Would you be interested in making a small pull request to add this?

And out of curiosity: what is it that you are building with SQLPage?

Hi there, Sorry, I was mistaken with ID in DIV html tag placement. Only the top-level parameter should be included within DIV html tag.

I am trying to add "Scroll-up" button which I find useful for navigating user on the long pages with many SQL rows to the top of the page and I need to place it somewhere on the SQLpage. I'm currently testing the simplest placement which is the fixed one by referencing main.css file in shell component with the following code: `

btop {

position: fixed; bottom: 0; right: 10px; font-size: 40px; z-index: 9999; } `

The issue is that even if I tried to add id as the row-level attribute in button.handlebars within A html tag like this: `

{{#each_row}} {{#if form}} {{else}} {{/if}} {{/each_row}}

` and reloaded the SQLpage, the button itself is placed where it should be but it looks a bit messy:

2024-05-24_13-10-27

Thank you for the generous offer to create a pull request. Gladly, but the problem is that my button looks best if the ID was placed in the code as the top-level attribute within DIV html tag which is probably very specific to my case and not applicable to all cases (e.g. 3 buttons case from the documentation). If it is added as the row-level attribute into the A attribute to comply with SQLPage documentation it is a mess. I was just playing with the default button.handlebars where only the A html tag is available for building the button.