Companion Stylesheet - Twentytwelve

[hnla]

This ticket manages the Twentytwelve companion stylesheet implementation.

Twentytwelve is a relatively established WP theme and has been in use for some time and quite often is likely the starting point for a custom BP theme.

To minimize possible disruption to existing themes, styling is being reviewed and kept to a minium, against what we have done for the later WP default twenty* themes.

The first pass commit for the sass and compiled css files will be pushed up in a few days for iteration on and testing.

[hnla]

In 10404:

Commit Twentytwelve Companion styles

This commit adds initial pass for twentytwelve scss sheet & compiled .css files

See #6766

[hnla]

In 10443:

Update Twentytwelve Companion styles.

Builds upon original commit to address specific style concerns, and thin out styling in keeping with 2012 design.

See #6766

[imath]

Hi @hnla some feedback about this companion stylesheet :)

1/ The activity submit button could be improved

2/ Same for activity action buttons

3/ When an activity is already commented and you try to add a new comment, the form is hiding the first activity comment

4/ Avatar in member's header is no more a square

[hnla]

@imath Thanks for the feedback & screenies.

Chrome - bane of my life :( sadly though fine in FF, but induced by the companion styles where the button border issues exist, and the avatar issue is annoying.

3/ Is actually by design the idea is that this affect of positioning is only described for the top level comments so positions the textarea below the original activity you are replying to so we can see that without needing to scroll back up, nested comment replies open to the bottom of the comments block. Perhaps this, overall, isn't a great idea? if opinion is against I'll remove.

[hnla]

In 10449:

Update Twentytwelve Companion styles.

Commit addresses some issues in webkit browsers:

• Adds padding for whats new submit button.
• Corrects border cut off on action buttons.
• Removes positioning of root form reply box when comments exist.

See #6766 Props imath

[r-a-y]

Hi @hnla,

Great work so far! I found some minor styling issues on the "Messages > Compose" screen.

Missing styling for the autocomplete popup:

Not sure if the bullet-list item is intentional or not.

Is styling for autocompleted users supposed to be full-width?

[hnla]

@r-a-y Good spot! Thanks this is the sort of feedback needed, missed this, oddly?

Not sure really where best to deal with this, it feels more like a core stylesheet issue, rather than a companion sheet as we don't really deal with the acfb elements in bp styles and it's the theme styles providing these bullets and margins or not removing them.

Is styling for autocompleted users supposed to be full-width?

Would we rather it not be? How would we style? If auto width names will vary in width, possibly looking messy? Be interested in thoughts, personally I would leave as full width but not a fan of the heavy background.

[hnla]

In 10507:

Companion styles 2012 updates
Messaging auto complete.
Commit corrects/removes bullets on li elements for auto complete names & input, removes li element margins.
In addition add styling to:

• Improve padding for selected names, reduce background, improve span element spacing, add cursor on hover, add close 'x' hover color.
• ac_results auto complete suggestions, add light background to highlight names & prevent page elements behind bleeding through, improve padding/margins

This set of rulesets needs checking across the other companion styles and might be better placed in the main BP stylesheet.

See #6766 Props r-a-y

[r-a-y]

@hnla - Changes in r10507 look good! :)

[hnla]

In 10532:

Companion Styles

Update all sheets for messages auto complete adjustments as added in twentytwelve.scss

See #6766#comment:10

[r-a-y]

Hi hnla,

I noticed an issue with responsive images in the activity stream with Twenty Twelve.

Twently Twelve sets each image (and iframe, embed, object, video) with max-width: 100%. However, it does not set the height, so images are stretched vertically. You can test by pasting any large image oEmbed URL from Flickr, Smugmug, Photobucket, etc.

I would recommend the following CSS declaration for images:

.activity-inner img {
	height: auto;
}

The stretched height issue can still be found with other responsive media (iframe, embed, object, video), but it is not as noticeable. This could be fixed by removing the max-width declaration, but this will crop the embed item horizontally.

[hnla]

Another good spot, easy to overlook as height: auto is sort of expected.

Half wonder whether this shouldn't really be an update for 2012 to add, but yes agree we'll cover things for BP as you show above.

[hnla]

In 10568:

Companion Styles twentytwelve

Commit addresses an issue where 2012 omits height:auto for responsive images causing issues with act stream embeds images.

Fixes #6766 Props r-a-y

[hnla]

In 10593:

Companion Styles twentytwelve
Groups header element adjustments.
Commit addresses:

• Cover images item-actions margin top positioning only stated for cover images when activated.
• General updates and improvements for item-header content & item-actions layout & flex-box; Improves layouts at finer breakpoints.

See #6766 Props mercime