style(list): highlighted area of items is not entirely clickable #2016

New Issue

WofWca · 2023-02-27T11:56:02Z

WofWca commented

2023-02-27 11:56:02 +00:00

Description

That is, nothing happens if you click the area outside of the blue rectangle (see the screenshot), which makes it seem like it's just not working.

What I would suggest as a fix is to set position: absolute; top: 0; bottom: 0; right: 0; left: 0; for the <a element such that it fills the wrapper element, and put the other buttons below it in HTML such that they're above it clickable-wise.
Or look up a solution somewhere else, there's plenty of similar code written.

Vikunja Frontend Version

f4c568e961

Vikunja API Version

v1

Browser and version

Gecko 110

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

### Description That is, nothing happens if you click the area outside of the blue rectangle (see the screenshot), which makes it seem like it's just not working. What I would suggest as a fix is to set `position: absolute; top: 0; bottom: 0; right: 0; left: 0;` for the `<a` element such that it fills the wrapper element, and put the other buttons below it in HTML such that they're above it clickable-wise. Or look up a solution somewhere else, there's plenty of similar code written. ### Vikunja Frontend Version f4c568e9610398e9504589cc953001b38e42f70b ### Vikunja API Version v1 ### Browser and version Gecko 110 ### Can you reproduce the bug on the Vikunja demo site? Yes ### Screenshots ![image](/attachments/db5c1ceb-50d1-44de-9264-03fcd7d51644)

image.png

5.2 KiB

WofWca added the

kind/bug

label 2023-02-27 11:56:02 +00:00

konrad referenced this issue from a commit

2023-02-27 15:00:11 +00:00

fix(task): allow clicking on the whole task to open the task detail view

konrad closed this issue

2023-02-27 15:00:11 +00:00

konrad commented

2023-02-27 15:00:48 +00:00

Fixed in fe764a46e9. Please check with the next unstable build (~30 min) if the problem went away.

Fixed in https://kolaente.dev/vikunja/frontend/commit/fe764a46e931ae79f1651f4a669a8c777e260f16. Please check with the next unstable build (~30 min) if the problem went away.

WofWca commented

2023-02-27 15:03:24 +00:00

I'm afraid it's not ok to put buttons inside <as.

I'm afraid [it's not ok to put buttons inside `<a`s](https://stackoverflow.com/a/6393863/10406353).

konrad commented

2023-02-27 15:07:05 +00:00

The alternative would be to use a div and attach a click handler to it so that the user will be redirected to the task detail page on click. That would work but would loose all meaning of a link which this is. I feel like the position hack you suggested might work but may create other problems.

Not sure what to do instead? @dpschen do you have an idea?

The alternative would be to use a div and attach a `click` handler to it so that the user will be redirected to the task detail page on click. That would work but would loose all meaning of a link which this is. I feel like the position hack you suggested might work but may create other problems. Not sure what to do instead? @dpschen do you have an idea?

dpschen commented

2023-02-27 15:38:29 +00:00

The suggested solution from @WofWca goes in a good direction.
See also https://css-tricks.com/block-links-the-search-for-a-perfect-solution/

The suggested solution from @WofWca goes in a good direction. See also https://css-tricks.com/block-links-the-search-for-a-perfect-solution/

konrad referenced a pull request from vikunja/frontend that will close this issue

2023-02-27 16:48:24 +00:00

fix(task): make the whole task clickable #3176

konrad commented

2023-02-27 16:50:28 +00:00

PR is up: vikunja/frontend#3176

PR is up: https://kolaente.dev/vikunja/frontend/pulls/3176

konrad reopened this issue

2023-02-27 16:50:28 +00:00

konrad referenced this issue from a commit

2023-09-06 16:31:55 +00:00

feat(tasks): make the whole task in list view clickable

konrad closed this issue

2023-09-06 16:31:55 +00:00

konrad commented

2023-09-06 16:33:22 +00:00

I've cherry-picked changes from #3176 in 54c527c23f and improved them. It might not be the most ideal solution but I think it's good enough to have it in main now. We don't have nested links anymore and the whole task is now clickable. Not 100% sure about a11y here but I think the new solution is fine.

I've cherry-picked changes from #3176 in https://kolaente.dev/vikunja/frontend/commit/54c527c23f30429343a1f8b1e593bdcf179ee1ff and improved them. It might not be the most ideal solution but I think it's good enough to have it in main now. We don't have nested links anymore and the whole task is now clickable. Not 100% sure about a11y here but I think the new solution is fine.

konrad referenced this issue from vikunja/frontend

2023-09-06 16:33:52 +00:00

fix(task): make the whole task clickable #3176

konrad referenced this issue from vikunja/frontend

2023-09-06 16:34:26 +00:00

WIP: feature/single-task-in-list-reworked #3180

konrad referenced this issue from a commit

2024-02-07 14:00:34 +00:00

chore(deps): update dependency vue-tsc to v0.36.0 (#2016)

Sign in to join this conversation.