search

cessda / cessda.cvs.two

Apache License 2.0
0 stars 1 forks source link

UI look and feel #352

Closed cessda-bitbucket-importer closed 2 years ago

cessda-bitbucket-importer commented 2 years ago

Original report on BitBucket by Taina Jääskeläinen.

  1. Would it be possible to make the results list less wide? Now the version information and the download button are very far to the right and people might not even notice them.

    1. See CESSDA Data Catalogue, for example: https://datacatalogue.cessda.eu/ Somewhat wider than there but not as wide as currently.
    2. This would of course affect also ‘Results per page’ and ‘Sort’.

  2. Same width for the CV level information in other views (CV names, definition, notes) in Details, Versions and Export/download tabs in detailed study view.

  3. Different order on the blue line (current order in the image): Home About User Guide Editor Editor User Guide Agency Admin Technical

‌

‌

cessda-bitbucket-importer commented 2 years ago

Original comment by Viet Tran.

Work in progress

cessda-bitbucket-importer commented 2 years ago

Original comment by Stefan Dlugolinsky (GitHub: Stifo).

cessda-bitbucket-importer commented 2 years ago

Original comment by Taina Jääskeläinen.

Stefan, the filters now lost the list of available options, both in the UI and the Editor. Can you find the necessary code bit and put them back?

They appear when the user clicks on the search box below the filter name. Example from Editor in the production version.

‌

‌

cessda-bitbucket-importer commented 2 years ago

Original comment by Stefan Dlugolinsky (GitHub: Stifo).

noticed that the list of options works only when clicking within the left side of the search box (tag-input-form doesn’t resize with tag-input?)

cessda-bitbucket-importer commented 2 years ago

Original comment by Taina Jääskeläinen.

Did not really understand the technical side.

But when the user lands on the Home page for the first time, clicks open the Agency filter and then clicks in the filter search box, nothing happens. It is only when the user clicks the second time that the list appears. After this, the list appears the first time the user clicks.

But when the list does not appear at the first time, the user might think the filter does not work and not reclick. We need to have the list appearing on the first click.

You can test the current behaviour in staging by refreshing the page.

cessda-bitbucket-importer commented 2 years ago

Original comment by Stefan Dlugolinsky (GitHub: Stifo).

Findings

‌

cessda-bitbucket-importer commented 2 years ago

Original comment by Taina Jääskeläinen.

Does this mean you were able to resolve this? As usual, I’m out of my depth with these technical issues.

The user gets the list in the production version no matter where they click in the box, left or right.

cessda-bitbucket-importer commented 2 years ago

Original comment by Stefan Dlugolinsky (GitHub: Stifo).

Yes, I have resolved it, but the fixing code is not yet in the master nor deployed in the dev nor in staging. There is some issue in automated build and deployment that blocks me. I’ve already asked for help in Slack where I gave more details on this. Once this is unblocked, I’ll merge the fix with master and mark this issue resolved.

In production, the left sidebar is so narrow, that this problem with left/right side clicking does not prevail. It started to occur in dev&staging after I resized the left sidebar. Basically, you can imagine that there is an input field, where user clicks and over this input field, there’s another invisible field capturing clicks of users. This invisible field is not resized to the full width of the input field, therefore it doesn’t capture rightmost user clicks. I didn’t notice this problem as I always clicked more to the left.

cessda-bitbucket-importer commented 2 years ago

Original comment by Taina Jääskeläinen.

Could the filters be narrower than the current left sidebar? Or the sidebar itself narrower than now in staging, i.e. only so wide that this problem would not occur? Just an idea, feel free to disagree or say not a good solution. Narrower sidebar might look funny - or not.

cessda-bitbucket-importer commented 2 years ago

Original comment by Stefan Dlugolinsky (GitHub: Stifo).

It is not easy to set the proper sizes of elements on a page. It’s not because it is hard to code, it isn’t. The reason is that there are different users with different devices, display sizes and preferences. If you could please specify the sizes of the sidebar and its input fields at least by means of a percentage of the whole page width, that would really help. Otherwise it is a shot in the dark for me to set it. Can we do it this way? Now, the width of the sidebar is 30% of the page width.

cessda-bitbucket-importer commented 2 years ago

Original comment by Taina Jääskeläinen.

OK. In the CESSDA Data Catalogue (CDC), the 1) width of the sidebar is something like 22%, so could we try with 20%?

2) Start the buttons on the blue bar so that the first one is at the level of the sidebar beginning (if easy to do). Like in CDC:

https://datacatalogue.cessda.eu/

‌

‌

‌

3) Leave filter selections visible like in the image above in the ‘Country’ filter.

How much time do you think these changes would take? I would not like to delay the release, so if these two take time

perhaps move to next release. Point 2 is not that relevant,

Moving the UI changes to next release would mean having the current production version UI. Users would have problems with filters if the current staging UI version would be used.

‌

cessda-bitbucket-importer commented 2 years ago

Original comment by Stefan Dlugolinsky (GitHub: Stifo).

1), 2) and 3) are done. @‌TainaFSD , please take a look in the dev/staging, whether it’s OK. Thanks.

‌

cessda-bitbucket-importer commented 2 years ago

Original comment by Taina Jääskeläinen.

Thanks, Stefan. Tasks 1-3 done and working as requested. UI changes required for the next release are done. I will close this issue.