st-col does not seem to work properly

[montyvesselinov]

trafficstars

import Stipple
import StippleUI

@Stipple.vars Name begin
	name::String = "World!"
end

function ui()
	[
		Stipple.row([
			Stipple.cell(class="st-module", xs=5, sm=4, md=3, lg=2, xl=1,
				Stipple.p("Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
			),
			Stipple.cell(class="st-module", xs=7, sm=8, md=9, lg=10, xl=11,
				Stipple.p("Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
			)
		])
		Stipple.row([
			Stipple.cell(class="st-module", xs=5, sm=4, md=3, lg=2, xl=1,
				Stipple.p("Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
			),
			Stipple.cell(class="st-module", xs=6, sm=7, md=8, lg=9, xl=10,
				Stipple.p("Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
			)
		])
	]
end

Stipple.route("/") do
	Stipple.page(Stipple.init(Name), ui()) |> Stipple.html
end

Stipple.up()

The second row works ok because the sizes add up to 11. The 2 cells are always on the same row.

The top row breaks always break into 2 rows.

[hhaensel]

You're right, "st-col" breaks the correct alignment. If you replace Stipple.cell with Stipple.htmldiv everything works as expected. The problem is the additional margin, which should be corrected by stipplecore.css, but it seems it's overwritten by the the col classes. We already had one issue with st-col breaking the quasar layout #247, which is still open.

@essenciary I propose to separate st-col elements and col elements. The quasar way of managing spacing would be to apply q-gutter classes, however it is important to know that you need a wrapper cell in almost all cases because margins and paddings are set by the gutter class. We could add a keyword gutter = x with x in ["sm", "md", "lg", ..]. that adds the respective gutter class.

For closing the two issues, I see three possibilities:

1. leave cell() as is and add qcell() (Quasar cell) or col() or similar to create a cell without automatic class 'st-col'
2. rename cell() to stcell or similar and remove automatic class 'st-col' from current cell()
3. remove automatic adding of st-col class completely

[hhaensel]

@montyvesselinov What you want is probably best achieved by

function ui()
    [
        Stipple.row(class = "q-col-gutter-md", [
            Stipple.htmldiv(xs=5, sm=4, md=3, lg=2, xl=1,
                Stipple.cell(class = "st-module q-pa-sm full-height", "Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
            ), 

            Stipple.htmldiv(xs=7, sm=8, md=9, lg=10, xl=11,
                Stipple.cell(class = "st-module q-pa-sm full-height", "Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
            )
        ])

        Stipple.row(class = "q-col-gutter-md", [
            Stipple.htmldiv(xs=5, sm=4, md=3, lg=2, xl=1,
                Stipple.cell(class = "st-module q-pa-sm full-height", "Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
            ),

            Stipple.htmldiv(xs=6, sm=7, md=8, lg=9, xl=10,
                Stipple.cell(class = "st-module q-pa-sm full-height", "Hello, World long long long long long long long long long long long long long long long long long long long long long long long!")
            )
        ])
    ]
end

[montyvesselinov]

Thank you! This is very helpful!

[hhaensel]

Let's not close it yet, we're working on a fix. Thanks for the feedback.