Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag and drop: Do not hard-code card etc. heights #82

Open
dev-guy opened this issue Sep 11, 2023 · 0 comments
Open

Drag and drop: Do not hard-code card etc. heights #82

dev-guy opened this issue Sep 11, 2023 · 0 comments

Comments

@dev-guy
Copy link
Contributor

dev-guy commented Sep 11, 2023

Drag and drop does not work correctly in apps that use a different font than what SvelteKit uses by default. Cards are not where svelte-kanban thinks they are located. See movie.

This issue is not caused by embedding <Kanban> inside nested divs etc.. It arises from hard-coding assumptions about the fonts used by the card class.

See also There’s no such thing as a desktop screen

Card.svelte:

   .card{
        height: 5.5rem;
    }

Kanban.svelte:

	const HEIGHT_CARD = 105; // 96
	const HEIGHT_CARD_CONTAINER = 120;
	const STARTING_POINT_TOP = 98;

Column.svelte:

    @keyframes growingSlot{
        from{
            height:0px;
        }
        to{
            height:120px;
        }
    }

5.5rem is based on the font inherited by the card class. Computing this value before cards are visible is impossible, since fonts can be overridden by browser configuration and CSS. Also, a board can contain no cards at all. There is no way to compute the height of a card or its container (which is perhaps the height of the "empty" card) without rendering a card.

STARTING_POINT_TOP represents the number of pixels from the top of a column to the first card (below the column title and the, for example, 5 Cards text). This value is also font-size specific. This value could be computed after rendering a column by locating a particular element that contains the 5 Cards text, as long as a board has at least one column.

Stretch goals

The logic requires each card to have the same height. It would be nice for each card to have a custom height instead, so the height wouldn’t even be hard-coded in CSS.

Allow columns to have custom widths.

Related Issues

#60 will eliminate duplicate code when dragging and dropping a card. Only the drag-move function computes the location where the card will be dropped. This means the code will only need to be changed in one place after #60 is finished.

@dev-guy dev-guy changed the title Card height constants should be shared between Card.svelte and Kanban.svelte HTML element heights should not be hard-coded Sep 12, 2023
@dev-guy dev-guy changed the title HTML element heights should not be hard-coded Do not hard-code HTML element heights Sep 12, 2023
@dev-guy dev-guy changed the title Do not hard-code HTML element heights Drag and drop: Do not hard-code DOM element sizes Sep 12, 2023
@dev-guy dev-guy changed the title Drag and drop: Do not hard-code DOM element sizes Drag and drop: Do not hard-code card heights Sep 12, 2023
@dev-guy dev-guy changed the title Drag and drop: Do not hard-code card heights Drag and drop: Do not hard-code card height Sep 12, 2023
@dev-guy dev-guy changed the title Drag and drop: Do not hard-code card height Drag and drop: Do not hard-code card etc. heights Sep 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant