fix: label spacing #946

konrad · 2021-11-03T21:34:20Z

konrad commented

2021-11-03 21:34:20 +00:00

Before:

After:

Before: ![image](/attachments/81eb348d-933c-4989-8cf6-6e7800766a64) After: ![image](/attachments/ba853616-7566-4732-8693-5b1b218bd748)

image.png

21 KiB

image.png

21 KiB

konrad added 1 commit 2021-11-03 21:34:21 +00:00

continuous-integration/drone/pr Build is passing Details

14c4b76a87

fix: label spacing

konrad requested review from dpschen 2021-11-03 21:34:24 +00:00

dpschen approved these changes 2021-11-04 10:14:48 +00:00

dpschen left a comment

For the future: usually a better pattern:

add spacing via padding from the parent
add spacing between children via Adjacent sibling combinator:

.tag + .tag {
	// add margin to push away from last element
}

This solution works best for simple cases.
In our case it might be tricky with the line wrapping that we have (realized that after finished writing the above).

Better than margin would be to use [gap](https://developer.mozilla.org/ru/docs/Web/CSS/gap)

For the future: usually a better pattern: - add spacing via `padding` from the parent - add spacing between children via [Adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator): ```scss .tag + .tag { // add margin to push away from last element } This solution works best for simple cases. In our case it might be tricky with the line wrapping that we have (realized that after finished writing the above). Better than margin would be to use [gap](https://developer.mozilla.org/ru/docs/Web/CSS/gap)

dpschen commented

2021-11-04 10:16:14 +00:00

Now it would be nice if Gitea would allow me to edit my comment and fix my crappy formatting :D

konrad was assigned by dpschen

2021-11-04 10:21:30 +00:00

konrad commented

2021-11-04 16:23:36 +00:00

That does sound like a nice pattern. I've never actually heard of it, will keep it in mind.

Doesn't gap only work on flex or grid? iirc the labels are currently inline-box. The same layout could probably be achieved with flex or grid, but that would require a bit more work.

That does sound like a nice pattern. I've never actually heard of it, will keep it in mind. Doesn't `gap` only work on flex or grid? iirc the labels are currently inline-box. The same layout could probably be achieved with flex or grid, but that would require a bit more work.

dpschen commented

2021-11-04 16:27:22 +00:00

That does sound like a nice pattern. I've never actually heard of it, will keep it in mind.

Doesn't gap only work on flex or grid? iirc the labels are currently inline-box. The same layout could probably be achieved with flex or grid, but that would require a bit more work.

Yes, there must be a flex or gap from the parent.

> That does sound like a nice pattern. I've never actually heard of it, will keep it in mind. > > Doesn't `gap` only work on flex or grid? iirc the labels are currently inline-box. The same layout could probably be achieved with flex or grid, but that would require a bit more work. Yes, there must be a flex or gap from the parent.

👍 1

konrad commented

2021-11-04 16:27:58 +00:00

There's a Gitea issue about your comment edit problem already: https://github.com/go-gitea/gitea/issues/10656

konrad merged commit 7e82aa83e6 into main

2021-11-04 16:28:21 +00:00

konrad deleted branch fix/label-spacing

2021-11-04 16:28:21 +00:00

konrad referenced this issue from a commit

2021-11-04 16:28:21 +00:00

fix: label spacing (#946)

dpschen commented

2021-11-04 16:32:53 +00:00

Just realized there is also this: https://kolaente.dev/vikunja/frontend/src/branch/main/src/styles/components/labels.scss

Would be nice if we could somehow merge / align those styles

Just realized there is also this: https://kolaente.dev/vikunja/frontend/src/branch/main/src/styles/components/labels.scss Would be nice if we could somehow merge / align those styles

dpschen commented

2021-11-04 16:36:15 +00:00

There's a Gitea issue about your comment edit problem already: https://github.com/go-gitea/gitea/issues/10656

Is that the same? I meant this (see screenshot)

> There's a Gitea issue about your comment edit problem already: https://github.com/go-gitea/gitea/issues/10656 Is that the same? I meant this (see screenshot)

Screenshot 2021-11-04 at 17.34.46.png

82 KiB