vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: improve UX/UI on Home and TaskDetailView #3863

Closed
Jakob wants to merge 11 commits from Jakob/frontend:feat/improve-uxui into main
pull from: Jakob/frontend:feat/improve-uxui
merge into: vikunja:main
Conversation 4 Commits 11 Files Changed 7 +64 -45
Jakob commented 2023-12-21 09:39:49 +00:00
First-time contributor
Copy Link

Some UI Elements got very crazy styling ... I tried to fix them as best as I can with what was mostly there

Changes

Home

  • Make space for projects in task list for nicer alignment
  • Reduce Grid height to bring tasks up (150 -> 100px height)

Ticket Details

  • Add .section-card class to format sections
  • Fix Outline Button without border
  • Fix margins and paddings (column, attachment etc)

showTasks

  • Align in 2 columns to save space

There is so much more there ... but trying to keep it small ... more to come if appreciated

Some UI Elements got very crazy styling ... I tried to fix them as best as I can with what was mostly there ## Changes ### Home - Make space for projects in task list for nicer alignment - Reduce Grid height to bring tasks up (150 -> 100px height) ### Ticket Details - Add `.section-card` class to format sections - Fix Outline Button without border - Fix margins and paddings (column, attachment etc) ### showTasks - Align in 2 columns to save space There is so much more there ... but trying to keep it small ... more to come if appreciated
Home.png
404 KiB
Ticket Details.png
318 KiB
showTasks.png
106 KiB
Home.png Ticket Details.png showTasks.png
Jakob added 6 commits 2023-12-21 09:39:53 +00:00
f8b0a3b587 feat: alinment project in tasklist 
Format the project label to have a somewhat nicer alignement
continuous-integration/drone/pr Build is passing Details
495d8c85ae Revert file from upstream
Jakob changed title from feat/improve-uxui on Home and Ticket Detail to feat: improve UX/UI on Home and Ticket Detail 2023-12-21 09:40:37 +00:00
Jakob changed title from feat: improve UX/UI on Home and Ticket Detail to feat: improve UX/UI on Home and TaskDetailView 2023-12-21 09:41:19 +00:00
frederick commented 2023-12-21 09:46:06 +00:00
Member
Copy Link

Hi Jakob!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://3863-feat-improve-uxui--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 somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi Jakob! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://3863-feat-improve-uxui--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 somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.
Jakob added 1 commit 2023-12-21 09:58:22 +00:00
continuous-integration/drone/pr Build is passing Details
a90c1eabeb Reduce height last viewed
Jakob added 1 commit 2023-12-21 10:06:58 +00:00
continuous-integration/drone/pr Build is passing Details
d32a8cb6ed Add `.section-card` element for cleaner css classes
Jakob added 1 commit 2023-12-21 10:09:35 +00:00
continuous-integration/drone/pr Build is passing Details
faa2afd87c remove old .card override
Jakob added 1 commit 2023-12-21 10:15:16 +00:00
continuous-integration/drone/pr Build is failing Details
41665f5b8f Reduce height by wrapping into 2 columns
Jakob added 1 commit 2023-12-22 09:57:03 +00:00
continuous-integration/drone/pr Build is passing Details
079b1358a4 replace p with div for linting
konrad requested changes 2023-12-27 17:57:02 +00:00
konrad left a comment
Owner

Hi! Thank you for the PR.

TBH, I think this does not look not any better than what we currently have. The shadow on the task detail page is too much, elevating the details a lot. This does not really work here, as it is a completely different pattern from the rest of Vikunja where shadows are not as dominant and instead there's a more "flat-surface" look.

This has too much spacing:

image

What you added might look okay if the task detail page is full page, but it does not work at all in a popup:

image

In that case we already have a layer from the popup, the shadows create another layer on top of that. That's too many layers.

Speaking of the task detail view, what is this?:

image

Hi! Thank you for the PR. TBH, I think this does not look not any better than what we currently have. The shadow on the task detail page is too much, elevating the details a lot. This does not really work here, as it is a completely different pattern from the rest of Vikunja where shadows are not as dominant and instead there's a more "flat-surface" look. This has too much spacing: ![image](/attachments/add4daca-e000-4464-8257-a8433b28e7b2) What you added might look okay if the task detail page is full page, but it does not work at all in a popup: ![image](/attachments/af20b804-992a-44c5-8ace-59766a7a1335) In that case we already have a layer from the popup, the shadows create another layer on top of that. That's too many layers. Speaking of the task detail view, what is this?: ![image](/attachments/5a4b584f-fcd0-419d-9857-f12ba5c2bb3c)
src/components/tasks/partials/singleTaskInProject.vue
@ -387,3 +387,3 @@
.task-project {
width: auto;
min-width: 60px; //TODO: Quickfix, find a better way to make a nice vertical alignment
konrad commented 2023-12-27 17:45:13 +00:00
Owner

What exactly is the goal here? Can you point it out with before/after screenshots?

What exactly is the goal here? Can you point it out with before/after screenshots?
src/styles/theme/cards.scss
@ -0,0 +1,8 @@
.section-card {
konrad commented 2023-12-27 17:50:38 +00:00
Owner

What is the difference between this and the existing card component?

What is the difference between this and the existing card component?
src/views/tasks/TaskDetailView.vue
@ -986,7 +987,6 @@ h3 .button {
}
.attachments {
margin-bottom: 0;
konrad commented 2023-12-27 17:56:32 +00:00
Owner

Why remove the spacing?

Why remove the spacing?
src/views/tasks/TaskDetailView.vue
@ -291,3 +294,3 @@
:shadow="task.done"
@click="toggleTaskDone()"
class="is-outlined has-no-border"
class="is-outlined border"
konrad commented 2023-12-27 17:48:05 +00:00
Owner

I don't think this is an improvment. The button should either have no shadow or the one already set up. A 1px border looks out of place.

I don't think this is an improvment. The button should either have no shadow or the one already set up. A 1px border looks out of place.
konrad commented 2024-01-20 18:50:52 +00:00
Owner
Copy Link

Hey are you still interested in this?

Hey are you still interested in this?
Jakob commented 2024-01-20 18:53:22 +00:00
Author
First-time contributor
Copy Link

To be quite frank: no ... you comments didn't leave a very welcoming feeling and other projects appreciate contributions more.

The code is yours, I will not continue working on it.

To be quite frank: no ... you comments didn't leave a very welcoming feeling and other projects appreciate contributions more. The code is yours, I will not continue working on it.
konrad commented 2024-01-20 22:02:56 +00:00
Owner
Copy Link

Sorry if I came across as rude or something like that, that was never my intention. Looks like I was too direct.
I was a bit uneasy sending my original comments, but sent them nevertheless.

Design is subjective in a lot of places, and I guess in some parts, I just didn't like what you did (and that's nothing you did wrong). But design is also rational and objective in terms of consistency and relation of some elements to others. Going from a flat look here to a look with plenty of shadows creates an inconsistency in the overall design.

I also only criticized what I felt needs improvement. I didn't comment on the rest, which was good.

Sorry if I came across as rude or something like that, that was never my intention. Looks like I was too direct. I was a bit uneasy sending my original comments, but sent them nevertheless. Design is subjective in a lot of places, and I guess in some parts, I just didn't like what you did (and that's nothing you did wrong). But design is also rational and objective in terms of consistency and relation of some elements to others. Going from a flat look here to a look with plenty of shadows creates an inconsistency in the overall design. I also only criticized what I felt needs improvement. I didn't comment on the rest, which was good.
konrad closed this pull request 2024-02-07 10:00:58 +00:00
This repo is archived. You cannot comment on pull requests.
Reviewers
No reviewers
konrad
Labels
Clear labels   
area/internal-code

   
changes requested

   
confirmed

   
dependencies

   
duplicate

This issue or pull request already exists

  
good first issue

   
help wanted

Need some help

  
hosting

   
invalid

Something is wrong

  
kind/bug

Something is not working

  
kind/feature

New feature

  
question

More information is needed

  
wontfix

This won't be fixed

No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
3 Participants
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/frontend#3863
No description provided.
Delete Branch "Jakob/frontend:feat/improve-uxui"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?