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

[dev-guy]

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.