Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

Images in tiles are only styled as width: 100% if they're direct children of the tile. All images in tiles should have max-width: 100%.

Slideshows have static dimensions based on browser width, which means they don't look good if placed in a container smaller than the full content width, like a tile or something. Making the dimensions relative would solve this problem.

Buttons have a default type, plus prominent and disabled types. Prominent and disabled types are controlled by individual boolean attributes in the shortcode, even though they are mutually exclusive. There should be one shortcode attribute, perhaps style, that accepts the values prominent and default.

Boxouts assume the size of cards as their max width. They should be full-width components and be treated like sections.

Currently, tabs on mobile reorganize so that the entire tab list sits on top of the changing content panels. This can be confusing for the user, especially if there are many tabs. Alternatively, tabs should behave like accordions on mobile, where clicking a tab reveals the associated content directly beneath it (between the parent tab and the subsequent tab) instead of below all the tabs.

I'm not sure how to achieve this right now given the current HTML structure of tabs, where the tab list is a ul and is followed by a number of section elements containing the corresponding content. In order to achieve the accordion effect, the content would either have to be arranged dynamically based on browser width, or the whole thing would need to be rewritten in a way that would work universally.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

Dropdowns in the menu component display behind other wrapped menu items. This is most likely a z-index issue.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Add ability to customize metrics colors through background and textcolor, or something like that.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Hero should have the ability to display captions. By default, it should display the WP caption of the image (if it's an image hero). There should also be support for a caption shortcode attribute, which, if set, would override the WP caption. Setting caption='' should disable the caption.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Currently, components like heros, cards, and panels that can accept (or require) an image use the provided url for the media without including a source set. WordPress has some pretty good functions when it comes to source sets, so we should leverage those in components with images.

Goals

Implementing source sets should ideally:

• Not change shortcodes or the way users must use them
• Allow shortcode img attributes to accept either an image url or the image ID
• Build source sets using wp_calculate_image_srcset()

Implementation

Using wp_calculate_image_srcset() requires the use of wp_get_attachment_metadata(), which in turn requires the attachment ID. From here, there are two scenarios:

1. If the user provides the image ID, we're all set. We'll need to use wp_get_attachment_url() for wp_calculate_image_srcset() though.

2. If the user provides the image url, there's some extra work to do. There's no WordPress function to get the attachment ID from the path/url, but this function could work:

function pn_get_attachment_id_from_url( $attachment_url = '' ) {
 
	global $wpdb;
	$attachment_id = false;
 
	// If there is no url, return.
	if ( '' == $attachment_url )
		return;
 
	// Get the upload directory paths
	$upload_dir_paths = wp_upload_dir();
 
	// Make sure the upload path base directory exists in the attachment URL, to verify that we're working with a media library image
	if ( false !== strpos( $attachment_url, $upload_dir_paths['baseurl'] ) ) {
 
		// If this is the URL of an auto-generated thumbnail, get the URL of the original image
		$attachment_url = preg_replace( '/-\d+x\d+(?=\.(jpg|jpeg|png|gif)$)/i', '', $attachment_url );
 
		// Remove the upload path base directory from the attachment URL
		$attachment_url = str_replace( $upload_dir_paths['baseurl'] . '/', '', $attachment_url );
 
		// Finally, run a custom database query to get the attachment ID from the modified attachment URL
		$attachment_id = $wpdb->get_var( $wpdb->prepare( "SELECT wposts.ID FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta WHERE wposts.ID = wpostmeta.post_id AND wpostmeta.meta_key = '_wp_attached_file' AND wpostmeta.meta_value = '%s' AND wposts.post_type = 'attachment'", $attachment_url ) );
 
	}
 
	return $attachment_id;
}

Pitfalls

Heros use images as background images, and there's no standardized way to deal with source sets in CSS. Apparently -webkit-image-set is a thing, but it only has support in Safari, Chrome, and Opera. So, it's unclear if or how heros can take advantage of source sets.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Allow linking to a specific tab on a page; i.e. anchoring to the tabbed interface with the target tab opened.

Issue Type

[] Bug
[] New Feature
[x] Enhancement

Description

Cards have a max width right now. Propose making them full width components unless floated, similar to Boxout functionality addressed in issue #27.

Steps to Reproduce

Expected behavior: Cards should assume the width of their parent.

Actual behavior: Cards have a max width of 360px

Environment

Version: All

OS: All

Browser: All

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

The hero shortcode has an id attribute, but it's only used if the vid attribute is set. This isn't really intuitive nor useful.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

This issue has been expanded to include all components.

Original:

Metrics break when including < and > characters. Using a > character produces a metric wrapped in quotes, and places an additional quote before the metric caption. Using a '<' character breaks the metric all together.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Semantically, card titles should be h2. The current style is fine.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

There is some variability in component margins. Block level components should have a bottom margin of 2rem, and inline components should have no bottom margin. Layout frameworks (i.e. Tiles) should have no bottom margin (gutters are still okay). No components should have a top margin.

Environment

Version: All

OS: All

Browsers: All

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Metrics are have display: inline-block. They should be block level elements, being full-width unless floated, in which case they become only as large as they need to be in order to fit their content.

Steps to Reproduce

Expected behavior: Metrics should be full width unless floated

Actual behavior: Metrics are inline-block and always fit their content

Environment

Version: 2.0.0 and later

OS: All

Browsers: All

The slideshow click targets for navigating the slides don't work on mobile. It's probably because the touch events are taking over, so the only option for the user is to slide.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Menus break at 600px instead of using sass:$break1. This can make breakpoints inconsistent.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

The url sanitization for shortcode attributes requires that urls have a protocol. This isn't necessary, sometimes we might want to do //www.uri.edu/something so the link can work with HTTP and HTTPS.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

Clicking the hero scroll prompter in Chrome only scrolls the page to about halfway down the hero... not idea. Safari and Firefox are fine.

Environment

Browsers: Chrome

Issue Type

[] Bug
[] New Feature
[x] Enhancement

Description

Currently, the quote component requires citation. Can that field be optional?

Issue Type

[x] Bug
[] New Feature
[] Enhancement

Description

[Description of the issue]

Steps to Reproduce

1. place html inside a [cl-tab] shortcode.

Heros, panels, notices, menus, videos, boxouts (see #27), tabs, and tiles should be semantically treated as sections in the HTML. This will probably be as simple as making sure they're wrapped in section tags. Floated boxouts and social bars should be treated as asides and wrapped in aside tags.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Hovering over the social media icons should invoke a tooltip (e.g. "Twitter", "Facebook", etc).

Issue Type

[x] Bug
[] New Feature
[] Enhancement

Description

If you add a class attribute to a component, then later edit the component with the WYSIWYG editor, the WYSIWYG editor removed the class attribute. And presumably any other attribute it doesn't expect.

In the same vein, if you have a card with attribute button="" the WYSIWYG converts it to button="Explore"

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

YouTube's API calls onYouTubePlayerAPIReady() when the API is loaded (see YouTube's API docs). This has to be in the global scope so YouTube's script can call it. However, this doesn't allow for any other implementations of the YouTube API, since there can be only one onYouTubePlayerAPIReady() function on any given page, and the CL script is loaded on every page across a site.

If a user wants to use YouTube's API to control a custom embed on a site or page, they must use onYouTubePlayerAPIReady() to create the player, and hence the function will be defined more than once. This will generally result in the function ultimately being defined by the custom implementation and overwriting CL's definition, since the CL script is loaded before the theme scripts and page content. This means that the custom embed will work, but CL hero (video hero, specifically) and video components will not load beyond their poster frame.

Steps to Reproduce

1. Embed a video from YouTube that you would like to control with YouTube's API.
2. Include a script on a page or in the theme that loads YouTube's API to control the embedded video.
3. Add a video hero component or video component to a page (either on the same page as the custom embed or otherwise).
4. Observe that the custom video loads and is controllable, while the CL components do not load.

Expected behavior: Custom YouTube embeds and hero/video components should function independently, or at least concurrently

Actual behavior: The custom embed functions at the expense of the CL components

Additional information: YouTube's API docs

Environment

Version: All

OS: All

Browsers: All

This is a small picky thing, and I know you're still messing with font sizes and headers, but on some components the h1s are a little tight with the text below (for example: boxout - https://www.uri.edu/harrington-draft/learning-spaces/the-hub/). On panels it seems fine unless there's a list underneath, for example: https://www.uri.edu/harrington-draft/learning-spaces/the-hub/labs-and-study-spaces/.

Issue Type

[X] Bug
[] New Feature
[X] Enhancement

Description

The menu dropdown trigger that appears on mobile is built by JS. Therefore, without JS, there's no way to open a menu (in fact, a user would not even know the menu exists). There needs to be a non-JS fallback for this.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

See uriweb/uri-modern#119

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Buttons have display: block, which means they can't be easily centered. The workaround for now is to add css="display:inline-block" to the shortcode, or add a class with the style attribute to hook into. But this problem is cropping up enough where a permanent official fix is in order.

Steps to Reproduce

Expected behavior: Buttons should be able to be centered

Actual behavior: They can't be

Environment

Version: All

OS: All

Browsers: All

Right now cards require a button. They shouldn't. Cards should function with just an image, header, body text, or any combination of those, both with and without a bottom button.

To help with this, any text should probably be separated from the image and/or button by living in its own div. That way, padding around the text will be controlled by the div and not by the text elements, adding flexibility to the kinds of text elements that can be included.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

The overlay gradient behind text on heroes is too harsh. This might be solved by using gradient easing.

All components should really have ARIA roles and labels where appropriate.

Currently, heros have three formats: default, super, and fullscreen. Super and fullscreen are declared by separate shortcode attributes, even though they are mutually exclusive. There should be one attribute, possibly called format, that would accept one value to define the format of the hero:

format (string)(optional)(values: super, fullwidth)
Set the format of the hero (default: none)

This would also accommodate any new hero formats that might be developed going forward.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

If the page is already scrolled when reloaded, superheros are unable to calculate their absolute offset to the top of the page, and therefore do not resize properly.

Issue Type

[] Bug
[X] New Feature
[] Enhancement

Description

Add a social sharing component where users can share the current page/post via Facebook and Twitter.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

Images in tiles have width: 100%, which negates any WP size class. They should probably have max-width: 100% instead, so they honor WP sizes without overflowing the tile.

Image heros can be made dynamic by setting the shortcode attribute dynamic=true. This is okay, but it doesn't allow for future animation options. The proposal is to have something like animation="slide", which would make selecting other animations possible.

Any content in enclosing shortcodes does not display. This affects panels, boxouts, notices, tabs, and tiles.

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

Notices are enclosing shortcodes by default, so that other shortcodes and media can be included. This is cumbersome and unnecessary if the notice body is short and only contains one paragraph of text. Propose adding a body attribute which, if set, will be used as the content.

Environment

Version: All

OS: All

Browsers: All

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

Setting tiles as compact makes them have a bottom margin equal to their width. This is probably because their styles were originally copied from square tiles, which have that padding-bottom property.

Steps to Reproduce

1. Add the class compact to a tile layout.
2. Observe giant bottom margins; tiles will appear square if they have no content.

Environment

Version: All

OS: All

Browsers: All

Issue Type

[] Bug
[] New Feature
[X] Enhancement

Description

It might be useful to be able to build tiles with <ul> and <li> elements.

Notices have a default type an an urgent type. Currently, notices can be made urgent through the shortcode by adding the attribute urgent=true. This works, but it doesn't allow for other notice types to be added in the future. Notices types should be controlled by a non-boolean attribute, e.g. style="urgent".

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

There are still some p padding/margin stragglers in tiles. Gotta catch 'em all!

Environment

Version: All

OS: All

Browsers: All

Shortcode attributes with boolean values are validated against a whitelist. The problem is that the error checker is type casting the variable, so "true" == true, etc. In that case, the attribute will validate, but may have unintended consequences when building the shortcode. The attribute should be set as a boolean after validation and before being passed to the shortcode template.

Issue Type

[x] Bug
[] New Feature
[] Enhancement

Description

Multiple of instances of tabs on a single page misbehave.

Steps to Reproduce

1. Create more than one instance of [cl-tabs] on a page
2. Select any tab that isn't the first one

Expected behavior: [What you expect to happen]

selected tab's content is displayed

Actual behavior: [What actually happens]

current tab's content remain's displayed; selected tab is highlighted, js console says, "TypeError: undefined is not an object (evaluating 's[n].hidden=!1')"

Reproduces how often: [What percentage of the time does it reproduce?]

https://www.youtube.com/watch?v=pjvQFtlNQ-M (where 60 = 100)

Additional information: [Add any additional information useful in reproducing the problem]

Environment

Version: X.x.x

OS: [please list]

Browsers: [please list]

superhero is the height of the browser window. On a site where there are 300px of stuff above the hero (nav, branding, etc), that's too big, and the bottom 300px of the hero is outside of the window's display area.

fullwidth hero spans the full with, but we lose some height.

I propose a goldilocks superhero that magically knows when it's too high to too short. I think we need some sort of test. For example, we might use the fold. If the hero is below the fold, then the hero's height is browser height minus a little bit. If above, then we'll need a better test to figure out intent.

I think the gist of it is that when we lead with a superhero, we probably want to make sure that the bottom of the hero is either aligned with the bottom of the window, or leaves a little space.

This component would display a number and a caption. Scorecards could be placed in tiles to make a metrics bar, for example.

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

Line breaks don't work in boxouts (just noticed it in v0.3.0 on quack). I tried manually adding BR tags but that still didn't work.

Example:

https://www.uri.edu/harrington-draft/learning-spaces/the-hub/
vs.
http://quack.uri.edu/harrington/learning-spaces/the-hub/

Issue Type

[X] Bug
[] New Feature
[] Enhancement

Description

If the page is scrolled to a point past the top of the superhero, and then reloaded, the superhero will resize much larger than it should. The reload size seems to be proportional to how far past the hero the page is scrolled.

My guess is this is because the scroll point : hero offset relationship is returning a negative number, which throws off all the resizing calculations.

Steps to Reproduce

1. Load a page with a super hero somewhere down the page
2. Scroll past the top of the superhero (scrolling further will heighten the effect)
3. Reload the page, and observe the massive superhero