byuweb / byu-calendar-components Goto Github PK

check the size gzipped:
https://cdn.byu.edu/byu-calendar-components/experimental/featured-events-component/.cdn-meta/version-manifest.json

• Look at how we can condense and
• reduce duplication (date functions?) in our components,
• shared styles - Katria look at condensing the styles and consolidating them

Right now, all calendar component js and css is being bundled INTO the byu-calendar component js and css files.. So every time byu-calendar is used, we have to load ALL the js/css for ALL calendar components. that is definitely not ideal.

We need to think through the best approach for breaking this out and WHERE to add CONDITIONAL include lines for the css or js for the component.

We can't conditionally bundle in some calendar components' js or scss into byu-calendar; then that component code would vary all the time.

We need the byu-calendar component to REFERENCE the css and js files for the "sub" calendar components WHEN those components are in use.

Will we have issues with several references to the same js/css on the same page?
Only if they have multiple complete displays with the same style..

byu-calendar is a wrapper around any other kind of component. If we have a list of calendar-tiles then it'll have a byu-calendar wrapper, and then a number of byu-calendar-tiles instances inside. The byu-calendar component will reference the js and css for the byu-calendar-tiles just once.

It would only be duplicated if they had 2 separate byu-calendar displays of the same display type on the same page.

Sentinel font is very likely to be going away; let's make the switch to google fonts - Domine

https://fonts.google.com/specimen/Domine

Check and make sure the font sizes don't need to be adjusted to match their size/styles before.
We can include this google font reference in the template for a row or tile, whichever ones use this font.

Let's add a quick simple component and display type for this new tile format:
https://byu.app.box.com/file/299067743269 - scroll down a couple pages, it's a block on the left. Don't worry about the Calendar block title style or line to the right,

Let's have the royal background, as seen in the mockup, but allow a navy-background option by adding that class to the byu-minimal-tile element.

Colors:
https://byu.app.box.com/file/291987058104
brand.byu.edu/guidelines/color/

If you open up the demo site you get errors like this for IOS devices

The error it shows is: