middlebury / campaign-website Goto Github PK

The video component has a show/hide title checkbox which controls whether that text is shown. The video on the homepage has it's title hidden ("Why Middlebury? Why Now?" is text embedded in the image. However, the other videos in the design proof have their titles shown (ex. "Faculty Talk About Their Students" on the Access page).

Currently, the video component's title is hard-coded to be visually hidden and does not have styles to match how it is shown in the design.

This is not shown on any of the top level pages, currently, but there is an example in the design for the lower level pages where a generic image with a caption and alignment options is shown in the content body.

I know that we're focusing on the top level pages now, but this is the only component that exists in the site currently for editors to use without a corresponding template.

The color contrast of titles on video tiles is not high enough. A gradient needs to be added, as shown in the design files, to make it accessible.

The main logo should be 16 px from left on tablet and mobile. It's currently 32. See screen shots.

Tablet and mobile only.

link on Figma:
https://www.figma.com/file/tPFIYYNENRGeOjQBQp1o2T/Campaign-Site?node-id=737%3A8047

Thanks,
Ari

In this screenshot, the h2 at the top is a section__title in a chart group. Its styles should be changed to match the h2 in the text component at the bottom.

https://www.middlebury.edu/campaign/access/commitment

This may be an issue with the gulp-config project and not localized to just the campaign website, but our other frontend projects provide a "deploy" command (see https://github.com/middlebury/midd-frontend/blob/master/gulpfile.js#L369) which does two things:

1. Changes the image paths in the build files to be the type of paths which Drupal expects.
2. Copies the build assets to a new directory, usually one of our Drupal test sites.

This is typically run with:

npm run deploy -- --themeDir=$LOCAL_PATH/web/themes/custom/middlebury_theme --imagesDir=$DEV_BASE_PATH/themes/custom/middlebury_theme/images/

Where $LOCAL_PATH will be something like /home/username/private_html/drupal9 and $DEV_BASE_PATH will be /~username/drupal9

All of the options from here https://github.com/middlebury/midd-frontend/blob/master/src/templates/school-charts.twig#L50 to the end of the page should be supported, though the "stats" (aka Big Number) is the most important.

Just to provide a write-up of what we discussed this afternoon:

The lead h2 on the homepage will change from {% include 'paragraphs/lead.twig' %} to

          {% include 'paragraphs/text.twig' with {
            content: '<h2>Empower young people in one of the most rigorous, immersive, globally engaged experiences in the liberal arts and sciences.</h2>'
          } %}

And the final text component on the home page will change to a new "quote" component, modeled on this one https://github.com/middlebury/midd-frontend/blob/master/src/templates/paragraphs/quote.twig. The quote--marks class is optional and adds the quotation marks around the text. The quote__cite line is also optional.

The midd-frontend project has a build process which generates a static version of the assets with the correct image paths and puts it on a new branch https://github.com/middlebury/midd-frontend/tree/master-dist

I think there used to be a travis config file in the project, but I can't find that any more. There is a travis webhook https://github.com/middlebury/midd-frontend/settings/hooks/60124993. I'm not entirely sure how this branch is created in the project, but it's needed for our production deployment workflow.

This might also be a good opportunity to rename the branches in the campaign-website project to main and main-dist.

The tri story component has a header section with a title, but it should also allow for a text blurb below the title and above the three columns.

This header is currently only being used for the tri story component, but it could be more generally used for headings of video groups or other components we add later, so it might make sense to have the class applied to the title and blurb be generic, rather than specific to the tri-story feature.

In this screenshot are five "big number" charts in a single chart group. The second row should be center aligned and spaced. This may be an issue in the Drupal templates and not the front-end code.

http://sledge.middlebury.edu/~imcbride/campaign/access/commitment

Some <hr>'s don't appear on Firefox and Safari. The styles need to be fixed so that they load consistently on all browsers.

If you remove the header image from a page, many items in the left nav will no longer be clickable because the hidden mega menu is indexed on top of them.

Right now there is a left padding style on the "play" text. If there's no duration for the video this adds extra padding to the button.

This is not a high priority since we only have one story, but when we get 10+ in a single category it might be needed.

The video tiles in the video group component seem to have extra padding/margin around them which needs to be fixed to match the design.

https://www.middlebury.edu/campaign/

The difference between the live site and the demo content is that the links on the live site aren't in an unordered list.

The text in the Mega CTA component is provided by the editor via a single WYSIWYG field, so none of the elements will have classes on them. For this component, the styles being provided by .mega-cta__content-subheading will have to switch to .mega-cta__content h3, and so on for the other custom classes within the div.mega-cta__content element, including the p, h3, ul, and li element styles.

This is already set up in lead.twig, but I wanted to call this out in case you wanted to make adjustments to its margins or styles. I've implemented it as a div with class="paragraph--lead lead", but that can be easily revised as needed.

https://github.com/middlebury/drupal8/commit/a1bf78dbfd802fc3ecfab6daf52df7a2ea07f392

Because each of the components can be used on both Top Level and Basic Content pages, their markup will be the same for both and will need to be agnostic of which page they are on. Here we can see that the text component inherits some styles from how text is displayed in various components: tri column, mega cta, and regular text, on the top level page to center it.