Update project detail page layout & elements

A quick note for those following this issue, there was a zoom meeting held yesterday 2/14 to review ideas and some mock-ups. Another meeting will be held next week during the regular time for the #project-browser slack channel site building committee time to continue the discussion.

Updated Summary with the next meeting time. I will be posting at least one issues related to our discussion later today.

One vision to minimize and make this simpler, while relying on drupal.org for more information in the interim:

• Module Name - gotta have this
• Description - the full description of the module and what it does, ideally based on the body template for Drupal module projects →
• Screenshots - the images from drupal.org, which are ideally useful screenshots depicting how the module can be used and what functionality and usefulness it provides
• Other Resources - links to external resources like documentation, handbook pages, or YouTube videos

We believe there are two primary reasons why people would click through to a detail page:

1. I don't know what this module does based on its card, and I want to learn more to see if this is a module I want to try out.
2. I know that I want to try this module, but I don't know how to use it. (i.e. "Where in the interface will I find the module's configuration (Structure, Appearance, Configuration, Content, etc.)" as well as "How would I use it, try it, or set it up")

One thing to consider is that perhaps the detail page should really be a modal since this (a) has less information and (b) this kind of solves the 'h1' problem with being on a detail "page."

I'm feeling ambitious and I want to try and get this into core.

Consensus in the Site Builder asynch meeting this week. https://drupal.slack.com/archives/C01UHB4QG12/p1692131239990579

We should add a link on the Project Detail page to the D.O. project.

I wonder could we get some people together during contribution a Drupalcon Lille to look at this?

We have punted on the Project Detail page for quite some time and would like to get someone to work on this at DrupalCon Portland 2024. We have taken feedback from the Usability Study as well as from contributors at the various camps/cons and in slack and are proposing this layout. Please comment o the isssue or on the shared doc

Note - The proposed template for the Project page on Drupal.org is not included in MVP, however we will look at that in a future release

I liked this, big +1 for me - the only caveat is that I think we need to collapse-by-default the full description at small screens so that super-long descriptions don't push the fairly important quality metrics too far down the page. I have added this in the Google Doc. Updating the Proposed Resolution.

Sorry if this was explained somewhere else, but what exactly does the "Stable" and "Maintained" means?

Does the stability status relate to your installed branch (or in case the module is not installed to the newest branch)? Because a project can have a different stability statuses on various branches.

Is the "Maintained" just a status taken from the project configuration, which is misconfigured in a lot of projects and does not reflect reality? Or is it a list of maintainers?

Thanks!

Sounds like you're interested in #3282163 and possibly also #3267678 ! ;)

Stable means whether or not the module's stable releases are covered by security policy, and the maintenance status is whether or not it is in one of the statuses that we consider "maintained" which is up through "seeking co-maintainer". (Yes, this is self-selected and maybe not accurate; one hope is that giving this field proper credit via project browser will encourage maintainers to keep it accurate, the other thought is maybe we drop it altogether - I encourage you to let us know your thoughts in those issues)

Thank you for your input!

https://www.figma.com/file/I1WJBCptKycwAPvp9robir/Project-Browser-Issue-... I was looking at applying this design to the Browse Projects project page. It looks like we need to apply a class and markup since this is so close to the categories.

I have a few questions:
1) What is included in the categories section?
2) Would we include files and links in the images section under categories?

bernardm28 → changed the visibility of the branch 3322594-project-detail to hidden.

Since drupal already has a sidebar, I might copy some of its styles.

Some of the items on the right panel below do not yet exist. I imagine I should leave a placeholder.

"Some of the items on the right panel below do not yet exist. I imagine I should leave a placeholder."
@bernardm28. Which items in the right sidebar are you refering to?

I was thinking on this items.
There is a button for add/install button but the items underneath i did not see them on the svelte file.
Those include

• Message if not compatible
• # Installs
• Stable
• Maintain
• Link to Drupal.org

Two things at a minimum -

1. Let's remove the boxes at the right hand column, and just stack that information up with some decent spacing.
2. We really want to show the "summary" of the body field, then the images, THEN the full description. I'm not sure if there's backend work needed here to make that happen, but we should have access to the summary field separately from the full description. The summary is what we're showing on the cards view, so we want to repeat it, then show the images, then the full description.

I think there are some other improvements to be made:
- Get rid of the "Details" heading
- get rid of the "Categories:" label and just show the chips
- let's get rid of the module author (i.e. "By Dave Reid") altogether
- let's make the slideshow actually work?? 😬

I didn't get to

let's make the slideshow actually work

from #34 📌 Update project detail page layout & elements Needs work , but I think I hit all the other asks.

I'm considering using https://biggerpicture.henrygd.me instead of making our own gallery since that supports multiple types.
Thoughts? I will add it to the MR tomorrow.

I made a revision of the page, and found some improvements.

Styles improvements:
1. Make the Logo 80px width
2. Fix the categories and project details alignment so is staked below the title.
3. Remove border and background from carousel arrows. Make them 40width.

Accessibility:
Follow general guides from https://www.w3.org/WAI/tutorials/carousels/ (I should be able to find better documentation if needed)
1. Carousel should be accessible from the keyboard. User should be able to tab true the carousel controls and move back and forward.
2. Remove the Aria-hidden from the carousel container. And maybe added to the hidden slides instead.
3. Images should be contained on a list element.
4. Add carousel dots (meatballs) at the bottom. Dots should have data-slide=# corresponding to the number on the slide.
5. Add aria-label='Next slide' to the carousel arrow next and 'Previous slide'

So it looks like the carousel does not work because we renamed
project.field_project_images to project.project_images but the fixture only finds one image with that name.
FYI updating a fixture within drupalPod is very slow.

sime → changed the visibility of the branch 3322594-DrupalConPortland2024-snapshot-1x to hidden.

sime → changed the visibility of the branch 3322594-DrupalConPortland2024-snapshot-1x to hidden.

FYI rather than rebuild the entire fixture there's a separate command which will update you with the difference between the code-based fixture and the latest data from d.o.

Project Browser itself is an example of a project you can use the detail page for - because it uses the body template, has images appropriately, has a logo, etc.

Let's change the order the filters appear in, also -

1. Categories
2. Security Advisory Coverage
3. Maintenance Status
4. Development Status