search

LLNL / llnl.github.io

Public home for LLNL software catalog
https://software.llnl.gov
MIT License
55 stars 51 forks source link

UI Refresh #17

Closed IanLee1521 closed 5 years ago

IanLee1521 commented 7 years ago

We should improve the UI look and feel, including providing good metrics visibility

Some ideas:

Tasklist as of July 2:

IanLee1521 commented 6 years ago

https://github.com/blog/2464-use-any-theme-with-github-pages

davidbeckingsale commented 6 years ago

I like code.nasa.gov!

IanLee1521 commented 5 years ago

@hauten now has a design in OneDrive for this task.

hauten commented 5 years ago
  1. IN PROGRESS (possible wording changes to include "radiuss" TBD) - @hauten - ask PIs to apply topic tags (per Confluence) to their repos, or offer to do it for them
  2. Intern - build new home page using the aforementioned OneDrive design (open source web-final.ai)
  3. Intern - pull tagged repos in to their respective topic lists
  4. Intern - /catalog should be a "new" sub-page with all 500+ browseable repos (essentially moving the home page content to a sub-page)
  5. Team - need to figure out what happens when there are >5 repos per topic - what happens when you click "...MORE" and navigate off the home page for any given topic? (may not be relevant to this first batch of repos; no topic goes over 6 repos)
  6. DONE (also updated Math icon & MFEM logo) - @hauten - write blurbs for each topic on home page (open source web-final.pdf)
IanLee1521 commented 5 years ago

@hauten -- We may need to pull apart the .ai file in order to get the individual images into this repo, but I'll leave that for Angela to head up and work with you on.

hauten commented 5 years ago

In case my edits above don't make it obvious, the design has been slightly updated with descriptions of the 6 icons and a couple of other small adjustments. New file in OneDrive has "final" in file name. @IanLee1521 I'll make sure Angela has what she needs.

angela-flores-wdc commented 5 years ago

I've finished the layout for the new home page, making catalog it's own sub-page. Right now the repos being pulled in per category are from randomly selected topics. These topics can be edited in the /categories/category_info.json file when a decision is made as to what topic each category will be.

I have not implemented a "more" feature to handle a large amount of repos under a topic, this will need to be brainstormed more (maybe each category can lead to its own "page" just as each repo in the catalog does?). Also, it seems that repo name alone is not a unique identifier, so maybe we should display "repo name/repo owner" on the homepage?

All these changes are in the "new-home-page" branch

davidbeckingsale commented 5 years ago

Looks good!

I took a quick look at this - for repos that are forks or mirrors (e.g. mfem, glvis) it probably makes sense to only display them once.

Visually, I think the category logos should be smaller, and the repository names larger.

LRWeber commented 5 years ago

Yes, the owner/name combo is what is needed for a unique identifier. I think the order you display that info depends on how you want to format it. (E.g. Most of the actual data uses owner/name as GitHub itself does, but the catalog cards and repo pages show the name more prominently with the owner as a sort of subtitle.)

davidbeckingsale commented 5 years ago

I think in most cases where name is duplicated, we want the repo that is not LLNL/name.

LRWeber commented 5 years ago

@angfl97 You may want to update the data promises in category-info.js. I recently re-worked the other pages' data promises to make them less convoluted. They now use a promise variable directly instead of a promise inside a function inside a variable. (Yikes!)

repo-dynamic.js should be a good example.

IanLee1521 commented 5 years ago

@davidbeckingsale I'm not sure that is always going to be true, but might be a good first cut... I think we may need to revisit why repos are forking into LLNL if they live on their own, and if they should be.

IanLee1521 commented 5 years ago

@angfl97 -- Could you start a pull request for this change? That way we can comment and make changes collaboratively as needed. You might call it something like "WIP: New Homepage" or similar, where WIP == Work in Progress.

angela-flores-wdc commented 5 years ago

@IanLee1521 got it!

hauten commented 5 years ago

Updated/revised decisions on 6/19 with @IanLee1521 & @angfl97:

  1. Keep header image on home page.
  2. Copy the 6 categories to /radiuss, replacing the placeholder "catalog view" of radiuss repos - i.e., both home and /radiuss will have category groupings; we may add more categories to home per @gonsie's suggestion.
  3. Keep /catalog (all 500+ repos) as subordinate to home.
  4. Figure out a dynamic expansion/sidebar for overflow if >5 repos per category - i.e., what to do with "...MORE" from the original design.
  5. De-duplicate the list of repos pulled into each category - see @davidbeckingsale's suggestion above.
  6. To help avoid duplication, get rid of mirrors of non-LLNL-org repos (e.g., MFEM mirror) - will reach out to affected PIs.
  7. Add org avatars to the repos listed under each category to provide context (e.g., the repo called "data" is vague without the context of its org/logo of "MFEM").
  8. Add org avatars to the home page somewhere TBD.
  9. Tag RADIUSS repos with 'radiuss' (separate tag) and the categories per LC Confluence page. Contact PIs of non-LLNL-org repos to do the same. See also issue #151.
  10. Sort repos under each category by number of stars.
  11. Update scripts accordingly!
hauten commented 5 years ago

Today's discussion - for portal home & /radiuss unless noted otherwise

  1. Alphabetize the categories
  2. Link repo name to GH URL
  3. Replace globe & octocat with "i" information icon, which should point to the software.llnl.gov/repo/#/LLNL/[repo name] page
  4. Include star count
  5. Remove org avatar only if there's a repo avatar instead - see issue #168 5a. @hauten to provide logo files with standard naming convention - DONE 5b. document that standard naming convention - DONE
  6. HOME ONLY: continue with category-specific view with lefthand nav as demo'ed