search

nextcloud / activity

:zap: Activity app for Nextcloud
111 stars 62 forks source link

Make container view looks proportional on viewport #1700

Open solracsf opened 1 month ago

solracsf commented 1 month ago

On big screen resolution, actual implementation with fixed with looks like an iframe. Make it fluid and align with other items on screen.

Before

image

After

image

solracsf commented 1 month ago

/backport to stable29

solracsf commented 1 month ago

/backport to stable28

cypress[bot] commented 1 month ago

1 flaky test on run #1584 ↗︎

0 10 0 0 Flakiness 1

Details:

Make container view looks proportional on viewport
Project: Activity Commit: fcd0b5e0b3
Status: Passed Duration: 02:20 💡
Started: Jun 10, 2024 5:41 PM Ended: Jun 10, 2024 5:43 PM
Flakiness  cypress/e2e/sidebar.cy.ts • 1 flaky test • Run E2E View Output
Test Artifacts
Check activity listing in the sidebar > Has tag activity Test Replay Screenshots

Review all test suite changes for PR #1700 ↗︎

solracsf commented 1 month ago

With this changes it looks really weird and unreadable on wide screens

Well, we think the same but with current implementation 😄

I think the problem is that the date is floating right of the activity line. If they all (activity and date) were aligned left, i think this would be the best option.

Should this be validated, i could work on that if no one wants to do that.

But, a centered and fixed width doesn't seem the best option IMHO.

susnux commented 1 month ago

But, a centered and fixed width doesn't seem the best option IMHO.

That's why I cc the designers. We use the same layout also in Talk, Announcement Center, and Forms so basically all apps that are "lists" content wise

ShGKme commented 1 month ago

That's why I cc the designers. We use the same layout also in Talk, Announcement Center, and Forms so basically all apps that are "lists" content wise

Not really the same. Styles are local here and it looks different. For example, we don't have a scroll bar in the middle of content in Talk. It's on the corner.

ShGKme commented 1 month ago

What about adding a light border between items, so it's easy to connect time and item visually?

solracsf commented 1 month ago

@ShGKme please feel free to take the lead on this one 👍

susnux commented 1 month ago

For example, we don't have a scroll bar in the middle of content in Talk. It's on the corner.

Yes as I wrote this is a bug currently but the limited width is on design purpose (see also current settings changes).

the scrollbar currently looks not good and should be moved to the very right instead directly next to the centered list.

ShGKme commented 3 weeks ago

@solracsf @susnux I've pushed a commit with an intermediate change:

But I'd make it even wide than in the past

Before This PR Proposal
image image image
marcoambrosini commented 3 weeks ago

Width should be 900px. If possible NcAppSettingsSection should be user. Your proposal looks good @ShGKme

ShGKme commented 3 weeks ago

If possible NcAppSettingsSection should be user

I'd not use NcAppSettingsSection even if we want a similar design... NcAppSettingsSection by definition has a different purpose. We should not think about activities and other usages while modifying settings components.

We can just use the same design here or introduce a new component.

marcoambrosini commented 3 weeks ago

We should not think about activities and other usages while modifying settings components

Many already do... Do you think that then it would make sense to create an ad hoc component there that all app developers can use?

ShGKme commented 3 weeks ago

@marcoambrosini Do you mean NcAppSettingsSection or NcSettingsSection?

Many already do...

Do you have an example?

github-actions[bot] commented 2 weeks ago

Hello there, Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)