Decide on info to display on Project Detail page

Created on 18 November 2022, over 2 years ago
Updated 18 January 2023, about 2 years 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

Come to a consensus on the inclusion and placement of the various sections on the drupal.org project page on the Project Browser detail page.

๐Ÿ“Œ Task
Status

Active

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
  • Pipeline finished with Failed
    11 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
    11 months ago
    #172983
  • Pipeline finished with Failed
    11 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
    11 months ago
    Total: 392s
    #175414
  • Pipeline finished with Failed
    11 months ago
    Total: 380s
    #179803
  • Pipeline finished with Failed
    11 months ago
    Total: 351s
    #179808
  • Pipeline finished with Failed
    11 months ago
    #179825
  • Status changed to Needs review 11 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States kleighm
  • Pipeline finished with Success
    11 months ago
    Total: 407s
    #179837
  • Status changed to Needs work 10 months 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
    10 months ago
    #192108
  • Pipeline finished with Failed
    10 months ago
    Total: 348s
    #192136
  • Pipeline finished with Failed
    10 months ago
    Total: 399s
    #192142
  • Pipeline finished with Running
    10 months ago
    #192145
  • Pipeline finished with Failed
    10 months 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 anilu@ 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
    10 months ago
    Total: 427s
    #201439
  • Pipeline finished with Failed
    10 months ago
    Total: 393s
    #201499
  • Pipeline finished with Failed
    10 months 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 Melbourne

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

  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia sime Melbourne

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

  • Pipeline finished with Failed
    10 months 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
    9 months ago
    #222810
  • Pipeline finished with Canceled
    9 months ago
    Total: 468s
    #222832
  • Pipeline finished with Failed
    9 months ago
    #222833
  • Pipeline finished with Failed
    9 months ago
    Total: 519s
    #228276
  • Pipeline finished with Failed
    9 months ago
    #228294
  • Pipeline finished with Failed
    9 months ago
    Total: 477s
    #228844
  • ๐Ÿ‡ฎ๐Ÿ‡ชIreland lostcarpark

    I think this is working well, but a couple of things struck me.

    • For many modules, there is no explicit short description. In this case it takes the first line or two of the main description. The short description is shown at the top, and the full description below the images. However, if the autogenerated description is used and there are no images, the same text is shown twice, which can look odd. We should consider whether this might hurt adoption, or keeping it would encourage maintainers to provide short descriptions.
    • For many modules, the sidebar seems rather spartan at the moment. There seem to be some specific things missing that I'll mention in the next three points.
    • Modules covered by security policy have a message about coverage, but modules not covered don't say anything. It would be nice to have a message like "This module is not currently covered by security policy. Install at your own risk."
    • I'd like to see something about maintenance status, which has a slot on the sidebar in the issue description.
    • I'd like a link to the drupal.org module page, which again is shown on the mockup in the issue. At present getting to the module page requires opening a tab and finding it manually.

    Apart from these minor details, I think this is a great step forward.

  • Pipeline finished with Failed
    7 months ago
    Total: 408s
    #267015
  • Pipeline finished with Failed
    7 months ago
    Total: 462s
    #267278
  • Pipeline finished with Failed
    7 months ago
    Total: 468s
    #267299
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

    Using this MR branch, if I go to a detail page, and then I hit "back to browsing >" at the top left, then I get an error.

    browse:1 Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse ()
    at stores.js:46:30
    at main.js:7:2

    If we can fix this, and/or any other major issues that might be caused here, then I think we should merge this as-is and add small follow-ons for the additional feedback from James (others share these opinions :) )

  • Pipeline finished with Failed
    7 months ago
    Total: 328s
    #280158
  • Merge request !575Resolve #3322594 "Cleanstarttest" โ†’ (Merged) created by bernardm28
  • Pipeline finished with Failed
    7 months ago
    Total: 498s
    #285379
  • Pipeline finished with Failed
    7 months ago
    Total: 417s
    #285390
  • Pipeline finished with Failed
    7 months ago
    Total: 374s
    #285397
  • Pipeline finished with Failed
    7 months ago
    Total: 540s
    #286714
  • Pipeline finished with Failed
    7 months ago
    Total: 564s
    #286719
  • Pipeline finished with Failed
    7 months ago
    Total: 463s
    #286731
  • Pipeline finished with Failed
    7 months ago
    Total: 443s
    #286734
  • Pipeline finished with Failed
    7 months ago
    Total: 486s
    #286741
  • Pipeline finished with Failed
    7 months ago
    Total: 493s
    #287557
  • Pipeline finished with Failed
    7 months ago
    Total: 489s
    #287568
  • Pipeline finished with Failed
    7 months ago
    #287579
  • Pipeline finished with Failed
    7 months ago
    Total: 451s
    #287581
  • Pipeline finished with Running
    7 months ago
    #287603
  • Pipeline finished with Failed
    7 months ago
    Total: 529s
    #287709
  • Pipeline finished with Failed
    7 months ago
    Total: 417s
    #287716
  • Pipeline finished with Failed
    7 months ago
    Total: 430s
    #287735
  • Pipeline finished with Failed
    6 months ago
    #293960
  • Pipeline finished with Failed
    6 months ago
    Total: 418s
    #293966
  • Pipeline finished with Success
    6 months ago
    Total: 416s
    #294020
  • Pipeline finished with Skipped
    6 months ago
    #294082
  • Pipeline finished with Skipped
    6 months ago
    #294083
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

    This is at a point where it's passing tests, and we've at least switching the layouts of the columns. There will be a lot of follow-ups, but they will be smaller in scope and easier to manage and continually rebase as they'll be smaller.

    I'm going to merge this, with tremendous amounts of gratitude to those who've worked on it! I hope we can keep up the good work with some other, smaller-scoped issues. :)

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

    chrisfromredfin โ†’ changed the visibility of the branch 3322594-DrupalConPortland2024 to hidden.

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Status changed to Fixed 3 months ago
  • Tried PB in a Drupal CMS instance locally and I was surprised that there is nothing about the authors/maintainers of a module in the page details.

    I do not find info about this section in the previous comments on this issue ๐Ÿค” (I can't access the Figma to see if there's more details there).

    Can we explain why we do not display the information of the authors and the maintainer(s) of a given module ?

    I think it is valuable info to have.

  • To be more precise, I was expecting to see the avatar of the maitainers of the module in this sidebar:

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

    #19 links to a shared Google Doc with a revised, simplified mockup.

    I would not be opposed to a new issue being opened that brings in elements of the original wireframe back in, but I would want it to be run through usability with our target audience. I'm not here to snub open source developers, I am one, but I every addition should be intentional.

    But either way, not in this issue. :)

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    i would orient towards the top tasks exercise we did a few months back. that illustrated which details were important to people assessing a module on a details page. but looks like the sheet got removed? https://docs.google.com/spreadsheets/d/17JiSqr5VHOfupdGLo6pLatM2VfxOy3vw... #gid=127356256 at least the link i've provided on the invision board is not valid anymore? and i'Ve attached the screenshot from the invision board from the discussions that spun out after the exercise was done.

  • ๐Ÿ‡ธ๐Ÿ‡ฐSlovakia poker10

    I agree with @matthieuscarset that the information about maintainer(s) is important, as they invest time to maintain the modules and should be mentioned where possible. Also without the names, it may look like Drupal is maintaining everything.

    Was a new issue created for this yet?

  • I did not open an issue for this. Please do so @poker10 if you feel the courage to argument about displaying author/maintainer information.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

    Actually, you did! :) Added a related here for cross-reference purposes.

Production build 0.71.5 2024