Skip to:
Content

Opened 2 years ago

Closed 2 years ago

Last modified 19 months ago

#6766 closed enhancement (fixed)

Companion Stylesheet - Twentytwelve

Reported by: hnla Owned by: hnla
Milestone: 2.5 Priority: normal
Severity: trivial Version:
Component: Templates Keywords:
Cc:

Description

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.

Change History (17)

#1 @hnla
2 years ago

In 10404:

Commit Twentytwelve Companion styles

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

See #6766

This ticket was mentioned in Slack in #buddypress by djpaul. View the logs.


2 years ago

This ticket was mentioned in Slack in #buddypress by djpaul. View the logs.


2 years ago

#4 @hnla
2 years ago

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

#5 @imath
2 years ago

Hi @hnla some feedback about this companion stylesheet :)

1/ The activity submit button could be improved
https://cldup.com/DOpQvL8Ksi.png

2/ Same for activity action buttons
https://cldup.com/2mzQJR-8_N.png

3/ When an activity is already commented and you try to add a new comment, the form is hiding the first activity comment
https://cldup.com/BWhX40I1m9.png

4/ Avatar in member's header is no more a square
https://cldup.com/fr-Yacc37X.png

#6 @hnla
2 years ago

@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.

#7 @hnla
2 years ago

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

#8 @r-a-y
2 years ago

Hi @hnla,

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

Missing styling for the autocomplete popup:

https://anonmgur.com/up/c8c7ff1e6ec5566de40d7a8f98b184c7.png

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

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

https://anonmgur.com/up/895bf0c4eda6669de976aa7fd94ae961.png

#9 @hnla
2 years ago

@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.

#10 @hnla
2 years ago

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

#11 @r-a-y
2 years ago

@hnla - Changes in r10507 look good! :)

#12 @hnla
2 years ago

In 10532:

Companion Styles

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

See #6766#comment:10

#13 @r-a-y
2 years ago

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.

Last edited 2 years ago by r-a-y (previous) (diff)

#14 @hnla
2 years ago

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.

#15 @hnla
2 years ago

  • Owner set to hnla
  • Resolution set to fixed
  • Status changed from new to closed

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

#16 @hnla
2 years ago

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

#17 @DJPaul
19 months ago

  • Component changed from Appearance - Template Parts to Templates
Note: See TracTickets for help on using tickets.