search

HyphaApp / hypha

Submission management software for open calls
https://www.hypha.app
BSD 3-Clause "New" or "Revised" License
68 stars 38 forks source link

Submission data on determination form page #3972

Closed bickelj closed 1 week ago

bickelj commented 4 months ago

Fixes #3971

Test Steps

frjo commented 4 months ago

Neat idea. We should have this on both determination and reviews I think.

Can we have it in a fly out tab that only loads when needed via htmx? I think the tab should be closed by default.

When the tab is clicked it takes 50 % of the width.

bickelj commented 3 months ago

@frjo We'll have to come back to this, I suppose. Because our change shows it by default, I guess we will want that option too.

bickelj commented 2 weeks ago

@frjo I spent some time looking into making the requested changes. The htmx part is easy and works great: add a button, tell it to get a new html fragment that contains the submission data. As for getting the elements to flow the way I wanted them to, that seems like another story. There is quite a bit of CSS all the way up and down the elements that seems to push things wider or narrower than I was expecting. In any case, I like your suggestion.

For more context, the road I was going down was having the container around the form (edit determination) and aside (submission data) be default flex where the height basically matches, within the other width boundaries. But I think some of the inner elements sizes were not interacting the way I wanted. If I delete a bunch of CSS classes experimentally/temporarily, things get closer to what I expected.

Taking a step back and looking at CSS, I see upwards of 3000 CSS rules on this page for under 600 elements (visible and invisible) on the page. I wonder if we can make these a little more manageable. For development purposes, I see that I can use tools to hide visibility of all the rules on the page to remove those from the mix and re-introduce them to see which ones are causing issues.

bickelj commented 1 week ago

I couldn't seem to get the flex items to match height (which is the default behavior of setting flex) but I discovered the flex-basis style. Using that flex-basis along with some Alpine.js and htmx it looks closer to what we want. What do you think, @frjo?

And I see the test failure I also need to fix.

frjo commented 1 week ago

@bickelj Works really well. Played around with styling a bit and added the same feature to reviews. Please take a look at https://github.com/HyphaApp/hypha/pull/4142.

I think staff will really like this feature!

bickelj commented 1 week ago

Superseded by #4142