creativecommons / creativecommons-certificate Goto Github PK

Description

Remove duplicate files (CODE_OF_CONDUCT.md, CONTRIBUTING.md) from the repository to ensure alignment with organizational defaults as outlined in GitHub Repo Guidelines.
Also, update the readme file.

Related to:

• creativecommons/.github#38

Resolution

• I would be interested in resolving this bug.

Description

Page: FAQ
The TOC component on the left side thas the following problems:

1. The green color is incorrect. It should be $color-forest-green.
2. All links should have the same font-weight.
3. The active link should have $color-dark-slate-gray.

Screenshots

Description

Page: Home
Resolution: Mobile
The page has an horizontal scroll.

Screenshots

Description

Page: Home
The see all FAQs button, below the question list, uses an incorrect button style. The style should be normal (documented in the Design Library).

Screenshots

[ticket work and notes cleanup required]

Live Site: https://certificates.creativecommons.org/

The certificates site is a WordPress Multisite installation, comprised of one main site and several sites in the form of books, powered by pressbooks. For this project the book sites should remain the same as much as possible, using the currently active theme, styles, and settings. The only changes made should be to update dependencies.

The following sections are notes on styling and functionality, scoped to the relevant page section.

Site

notes

• Here's the Figma mockups
• Currently installed plugin list:

  • Akismet Anti-Spam
  • Jetpack by WordPress.com
  • Breadcrumb NavXT
  • ManageWP - Worker
  • VaultPress
  • WordPress Importer
  • WP Super Cache
  • Pressbooks
  • mPDF for Pressbooks
  • Candela Citation
  • Candela LTI
  • LTI
  • Candela Thin Exports
  • Candela Utility
  • Hypothesis
  • The Events Calendar

todos

• Highlight active parent-level menu items
• Reduced font sizes for mobile
• Add "Back to Top" link on mobile

Pressbooks plugin: https://github.com/pressbooks/pressbooks

notes

• Lastest Release: https://github.com/pressbooks/pressbooks/releases/tag/5.16.3
• Current book theme(s): Bombadil (child theme of McLuhan)
• books are using the Bombadil theme (which is a child theme of "McLuhan")

todos

• Need to test compatilibity with PHP 7.4.11

---

• homepage

  • upcoming course can not contain bootcamp

• news from the blog

  • summit widget exists for this (pulling a post from .org via wp api)
  • manual
  • one post from each category on the .org site
  • education-oer
  • no openglam category
    • we do have a glam tag
  • no open access category

• conversations in the community

  • 3 manual tweet embeds

• Resources page

• Graduates

  • 4 columns
  • Canvas LMS rest api for graduates: https://duckduckgo.com/?q=canvas+lms+api&atb=v235-7&ia=web

• course template

  • only show open

• Alumni

  • alumni button in header prompts login + redirects to login page

    • alumni button turns into user info dropdown logout / edit / ect.

  • dynamic alumni count in header

  • bbpress embed

  • members

    • members list

    • search by name

    • member single view

      • 3 fields (name, course, year)

Hi all,

Here's everything the site needs prior to launching. I did some QC today. This includes content and code. I was really hoping to have most of these things done before my wife went into labor, but it was a race against the clock and I lost.

I certainly think it's possible to launch the site before end-of-year, if prioritized, but it's also likely that I'll be finishing this work in early January.

Content Considerations

• Alumni memberships/import
  • How will alumni be added? Do we have a database/listing of existing alumni? Yes, they'll be imported.
  • Will we add batches of alumni to the site when they 'graduate' the program, or offer a registration page where they can sign up on their own? Manually add batches for now
• Forum
  • We are using bbPress for forums. We can either have 1 forum, or multiple. The original design allows for one, so I just want to confirm that's the desired behavior. A single central feed to which users can post topics. 1 forum
  • The original design is missing some pages we need, so those pages are currently using default styles:
    • "full view" of a single forum post
    • user edit view
    • We compromised here and added some styles to the forum that meet in the middle.

Code considerations

• There are two branches needing to be merged:
  • alumni (for alumni functionality): #30
  • style-revisions: for Francisco's design feedback
• After merge we need to tag a release and deploy, or manually upload a .zip of the theme (we would have to temporarily enable upload permissions by editing the wp-config manually via ssh)
• After merge ACF fields need to be synced here: https://tempcert.creativecommons.org/wp/wp-admin/edit.php?post_type=acf-field-group (you will see the word "sync" next to "all" and "active")
• The alumni section requires a few pages to be created and their page templates set on the global 'options' page:

Each of these pages has a clearly-named associated page template. - The style tickets _not_ listed in the `style-revisions` PR still need to be made.

https://tempcert.creativecommons.org/wp/wp-admin/admin.php?page=acf-options

Description

Page: Home
The card that indicates the course type has two problems:

1. Padding is incorrect. It should be 56px for top and 48px for left and right sides.
2. The see course link has a different font-size. It should be body-normal (16px).

Screenshots

Description

Page: Home
Two visual improvements:

1. The answer displayed in the accordion item looks too similar to the question. That's because of the styles of both texts. My suggestion is to apply a bold style for question text.
2. The arrow aligns on the right should be 20px size (1.25rem).
3. The same icon does not rotate when opening the question to see the answer. It should rotate in 180º to indicate the box expanded.

Screenshot

Description

Page: Home
The paragraph below the main title uses an incorrect style. It should have the body-bigger style.

Screenshot

Description

Page: Course
The attribution information in the featured image (right-aligned) should work as an editable component. All courses will have this section and, therefore, using different images.

Screenshots

Description

Within the post card, the following styles are incorrect:

1. The hover style of title field shows a color change. It should be the same color plus the current underline.
2. The styles for post author and date published should have the small-caption style.
3. The circle that divides post author and date published should have a margin of 8px for left and right.

Screenshots

Description

In the course date card, the space between dates is not 4px. It should have space in between.

Screenshots

Description

Page: Scholarship Recipients
In the bio card we need to add the image attribution component as the mockup shows.

Screenshots

Description

Page: Home
Resolution: Mobile
The FAQ section has the following issues:

1. Spacing between section title and between questions does not follow the mockup.
2. Text style in question should be caption.
3. The question paragraph has a left and right padding that should not be.
4. The icon size of second question is bigger than the remaining ones.

Screenshots

Description

Page: Course content
The link cards on the right side of the page have the following problems:

1. Green color is incorrect. It should be $color-forest-green.
2. The hover style should have no underline, just a background color change from $color-forest-green to $color-brighter-forest-green.

Screenshots

Description

Page: Course
The space between course name and course details should be 64px.

Screenshots

Description

On home page, I'm seeing the default color for links ($color-forest-green) in different green versions. During hover, the color changes to a color that is not the $color-brighter-forest-green

Expectation

All green colors should be the same. While hover state should use the $color-brighter-forest-green one.

Screenshot

Problem

The breadcrumb designed has a gray color for the current page field. However, it has contrast problems and it's difficult to recognize it as text.

Description

Use white color for the current page field.

Screenshot

Description

Page: FAQ
The text styles of answers have the following issues:

1. The style of questions should be Heading 3B.
2. Question paragraph should not be a link. Therefore, not having the link states.
3. Text style of answers should be body big.

Screenshots

Description

Page: Home
Resolution: Mobile
In the course card, the descriptive and link texts have different styles. It should be caption style.

Screenshots

Description

The breadcrumb has incorrect styles for parent pages (as links) and current page (as text). Both have different font-weight.

Screenshots

Description

Page: Home
The padding-top in second section, where FAQ section begins, should use the padding-top-bigger style instead of padding-top-big. This spacing will match the 64px of distance when adding the padding of above section.

Screenshots

Description

Page: Home
Resolution: Mobile
The distance between the two links should be 24px.

Screenshots

Description

Page: Overview
The following states are incorrect:

1. The "Creative Commons Certificate" title should have the Heading 2A style.
2. The stats' name should have the Heading 5A style. With more line-height.
3. The stat's value should have the value style.

Screenshots

Description

Page: Course
The style of register here button is incorrect. It should be middle style. Documented in the Design Library.

Screenshots

The theme is ready to test. Here are some notes about, well, everything!

https://tempcert.creativecommons.org/
(same login credentials for everyone as live certificate site)

Remaining TODOs

• [1hr] Fix new header styling issues (ticket here: creativecommons/vocabulary#805)
• Push Alumni section PR
  • [30min] Finish responsive styles for Alumni pages
  • [1hr] Finish custom BB press styles
• [45min] Add black attribution bar to course featured images + scholarship recipients
• [30min] Fix course responsive styles (I think I lost a commit)
• [?] Debug Candela issue on staging server (PHP critical error when activating Candela Utilities plugin), seems to be related to symlinks/paths

---

Notes

Pressbooks Issues

• Pressbooks does not support Gutenberg. This means we are not using wp-plugin-vocabulary-blocks as originally planned.
  • Post explaining the lack of support: https://pressbooks.org/blog/2018/11/06/pressbooks-and-gutenberg/
  • More discussions of gutenberg support: https://github.com/pressbooks/pressbooks/issues?q=gutenberg
  • Pressbooks mPDF is deprecated, so we cannot currently download books as PDFs. There are some options but they require addtional dependencies. One thing we could try doing is exporting .epub books inthe future, and then converting the epub files to PDFs, but we'll have to test the stying.
    • Info on the other options, none of them are great.

Other Plugin Issues

• LTI functionality has been preserved. I'm not sure if it actually works or is being used!
• The Candela Attributions and Candela Utilities plugins are kept, but I can't tell if they are being used or not. These plugins are deprecated and difficult to install with git+composer. If we can remove or ignore them, we should.
  • I tried to test several book pages but couldn't actually find any with attributions.
• Breadcrumb NavXT is removed in favor of Yoast SEOs breadcrumbs. The breadcrumbs on this site are simple enough where we don't need a more complex implementation, and

Content questions

• There was no archive page for courses mocked up. How do we want to handle that?
• The Registration link(s) is a global setting on the options page but can also be overwritten per-course if necessary. Does this sound like good behavior?

General

• Code was formatted with phpcbf --standard=WordPress . --ignore=vendor --extensions=php 0. If there's a better approach please let me know; I've always struggled to find good PHP linters and formatters where I was happy with the output.
• Because this theme was unable to use Gutenberg blocks and, while relatively simple, has a lot of custom templates, I decided to use Advanced Custom Fields Pro to register metaboxes on page templates, as opposed to our usual combination of Queulat and widgets. I think this provides a really great experience for content editors, and reduces the amount of boilerplate code we have to write to register metaboxes with rich, complicated functionality. If there's a critical reason we do not want to go this direction, we can switch back to Queulat with some work. The templates wouldn't need to change much but we'd need to write all the Queulat code to register metaboxes.