Frontend: Task List Visual Improvements #2264

Elscrux · 2024-04-10T22:36:57Z

Elscrux commented

2024-04-10 22:36:57 +00:00

This makes task lists (especially big ones) easier to read. I've set a margin so there is a distance between task items which makes them easier to stand out.
I've also changed the visuals of the checked elements (strikethrough + grey font color) so the unchecked ones stand out more. Note that this currently seems to be a big bugged outside of edit mode as data-checked doesn't seem to be updating correctly in this state which seems to be an issue that is already noted for the TipTap editor.

I also wanted to add a feature to drag and drop task items to reorder them, but wasn't successful so far. If someone else could try it, that'd be great though!

Before:

After:

This makes task lists (especially big ones) easier to read. I've set a margin so there is a distance between task items which makes them easier to stand out. I've also changed the visuals of the checked elements (strikethrough + grey font color) so the unchecked ones stand out more. Note that this currently seems to be a big bugged outside of edit mode as `data-checked` doesn't seem to be updating correctly in this state which seems to be an issue that is already noted for the TipTap editor. I also wanted to add a feature to drag and drop task items to reorder them, but wasn't successful so far. If someone else could try it, that'd be great though! ### Before: ![before.png](/attachments/87092fec-7d93-48fb-a35e-11f63689d17f) ### After: ![after.png](/attachments/79a9d81f-bacb-44bb-943b-3519681275ba)

before.png

57 KiB

after.png

58 KiB

Elscrux added 3 commits 2024-04-10 22:36:59 +00:00

ca7246639c Fix style imports for backslashes in the path

0ed49c729e Increase distance between task items

Makes it them more readable and easier to distinguish multi line task items

continuous-integration/drone/pr Build was killed Details

5a5b86438c Make unchecked boxes stand out more

Elscrux added 1 commit 2024-04-10 22:37:26 +00:00

continuous-integration/drone/pr Build is passing Details

8ca3916118 Merge branch 'main' into feature/improved-task-lists

Elscrux changed title from ~~Task List Visual Improvements~~ to Frontend: Task List Visual Improvements

2024-04-10 22:41:12 +00:00

frederick commented

2024-04-10 22:52:34 +00:00

Hi Elscrux!

Thank you for creating a PR!

I've deployed the frontend changes of this PR on a preview environment under this URL: https://2264-feature-improved-task-lists--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somewhere. The easiest to use is https://try.vikunja.io/.

This preview does not contain any changes made to the api, only the frontend.

Have a nice day!

Beep boop, I'm a bot.

Hi Elscrux! Thank you for creating a PR! I've deployed the frontend changes of this PR on a preview environment under this URL: https://2264-feature-improved-task-lists--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somewhere. The easiest to use is https://try.vikunja.io/. This preview does not contain any changes made to the api, only the frontend. Have a nice day! > Beep boop, I'm a bot.

konrad approved these changes 2024-04-11 15:45:08 +00:00

konrad left a comment

Thanks!

konrad merged commit a3a4d05e89 into main

2024-04-11 15:46:45 +00:00

konrad deleted branch feature/improved-task-lists

2024-04-11 15:46:46 +00:00

konrad referenced this issue from a commit

2024-04-11 15:46:59 +00:00

feat(editor): checklist visual improvements (#2264)

Sign in to join this conversation.

No reviewers