Update project detail page layout & elements

Created on 18 November 2022, over 1 year ago
Updated 26 June 2024, 16 days ago

Problem/Motivation

The question is how do we display the information that exists on the Drupal.org project pages on the Project Browser detail page in a way that makes the most sense to folks trying to decide on which project to download.

Steps to reproduce

Spin up a Drupal site with the Project Browser module installed. Select a specific module by selecting the module name in a card. The resulting page is the project detail page.

Then find the corresponding project page on Drupal.org.

Proposed resolution

- as seen here https://docs.google.com/presentation/d/1FsfBtN7zdRRRvJg7RWr_iJrB7viEVKJs...

Regular zoom meetings on this issue are happening at this time. The next scheduled discussion is Tuesday February 21, 4pm ET. Monitor the #project-browser channel on Drupal Slack for meeting times

📌 Task
Status

Needs work

Version

1.0

Component

User experience

Created by

🇺🇸United States leslieg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States bsnodgrass

    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.

  • 🇺🇸United States chrisfromredfin Portland, Maine

    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."

  • 🇺🇸United States chrisfromredfin Portland, Maine

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

  • 🇺🇸United States bsnodgrass

    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.

  • 🇮🇪Ireland lostcarpark

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

  • 🇺🇸United States chrisfromredfin Portland, Maine
  • 🇺🇸United States leslieg

    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

  • 🇺🇸United States chrisfromredfin Portland, Maine

    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.

  • 🇸🇰Slovakia poker10

    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!

  • 🇺🇸United States chrisfromredfin Portland, Maine

    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!

  • 🇺🇸United States kleighm

    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?

  • 🇺🇸United States kleighm
  • 🇺🇸United States chrisfromredfin Portland, Maine
  • First commit to issue fork.
  • 🇺🇸United States bernardm28 Tennessee

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

  • 🇺🇸United States bernardm28 Tennessee
  • Merge request !482Resolve #3322594 "Drupalconportland2024" → (Open) created by bernardm28
  • Pipeline finished with Failed
    about 2 months ago
    Total: 533s
    #172950
  • 🇺🇸United States bernardm28 Tennessee

    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.

  • Pipeline finished with Failed
    about 2 months ago
    #172983
  • Pipeline finished with Failed
    about 2 months ago
    Total: 422s
    #172996
  • 🇺🇸United States leslieg

    "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?

  • 🇺🇸United States bernardm28 Tennessee


    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
  • Pipeline finished with Failed
    about 2 months ago
    Total: 392s
    #175414
  • Pipeline finished with Failed
    about 2 months ago
    Total: 380s
    #179803
  • Pipeline finished with Failed
    about 2 months ago
    Total: 351s
    #179808
  • Pipeline finished with Failed
    about 2 months ago
    #179825
  • Status changed to Needs review about 2 months ago
  • Pipeline finished with Success
    about 2 months ago
    Total: 407s
    #179837
  • Status changed to Needs work about 1 month ago
  • 🇺🇸United States chrisfromredfin Portland, Maine

    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?? 😬

  • First commit to issue fork.
  • Pipeline finished with Failed
    about 1 month ago
    #192108
  • Pipeline finished with Failed
    about 1 month ago
    Total: 348s
    #192136
  • Pipeline finished with Failed
    about 1 month ago
    Total: 399s
    #192142
  • Pipeline finished with Running
    about 1 month ago
    #192145
  • Pipeline finished with Failed
    about 1 month ago
    Total: 411s
    #192148
  • 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.

  • 🇺🇸United States bernardm28 Tennessee

    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.

  • 🇺🇸United States analaura@cellar-door.io Houston, TX

    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'

  • Pipeline finished with Failed
    25 days ago
    Total: 427s
    #201439
  • Pipeline finished with Failed
    25 days ago
    Total: 393s
    #201499
  • Pipeline finished with Failed
    25 days ago
    Total: 459s
    #201518
  • 🇺🇸United States bernardm28 Tennessee

    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.

  • First commit to issue fork.
  • 🇦🇺Australia sime Canberra

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

  • 🇦🇺Australia sime Canberra

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

  • Pipeline finished with Failed
    25 days ago
    Total: 502s
    #201534
  • 🇺🇸United States chrisfromredfin Portland, Maine

    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.

  • 🇺🇸United States chrisfromredfin Portland, Maine

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

    1. Categories
    2. Security Advisory Coverage
    3. Maintenance Status
    4. Development Status
  • Pipeline finished with Failed
    about 6 hours ago
    #222810
  • Pipeline finished with Canceled
    about 6 hours ago
    Total: 468s
    #222832
  • Pipeline finished with Failed
    about 6 hours ago
    #222833
Production build 0.69.0 2024