Skip to:
Content

Opened 3 years ago

Closed 2 years ago

Last modified 19 months ago

#6533 closed enhancement (fixed)

Companion Stylesheet - Twenty Thirteen

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

Description

This ticket manages the Twenty Thirteen companion stylesheet implementation.

This task follows on from the twentyfourteen (#6338) & twentyfifteen (#6291) tasks to continue the process of enhancing BuddyPress elements when displayed in the default WP themes.

Style discussions and all patches for the task will be maintained here.

An initial commit of files will be made shortly that can be iterated on, these will inherit from the styles and work of the previous companion styles while being refined and modified to suit twentythirteen's particular styling and layout.

Attachments (4)

2013-invite-list-UL.png (12.2 KB) - added by mercime 2 years ago.
6533-spacing.png (49.9 KB) - added by mercime 2 years ago.
mobile-menu.jpg (42.5 KB) - added by hnla 2 years ago.
Exploring adding a collapsed menu for the user account screens object-nav. This works for small screens up to ~38em. There are a many restrictions in attempting this as it has to be pure css and really wewould normally want/need acces to markup and/or JS to manage aspects of labels and transitions or classes.
open-mobile-menu.jpg (64.6 KB) - added by hnla 2 years ago.
On hover/focus the menu expands thusly. To try to accomodtae an unknown number of links and to allow transitions a height is set that suits the default menu items and sets overflow: auto to handle additional menu items.

Download all attachments as: .zip

Change History (20)

#1 @hnla
3 years ago

In 9972:

Commit Twenty Thirteen Companion styles

This commits initial pass for twentythirteen scss sheet based on the previous work for 2014/15.

  • Variables, Mixins adjusted for 2013 colors and specific styling.
  • Breakpoints adjusted for BP elements to suit 2013 layout.
  • BP navigational elements and lists tweaked to suit layout.

This provides a good base now for iterating further styles on.

See #6533

#2 @hnla
3 years ago

In 9973:

Commit twentythirteen companion styles compiled .css files.
See #6533

#3 @mercime
2 years ago

Attached image of group invite pane where left padding of UL needs to be removed/decreased to taste.

#4 @hnla
2 years ago

@mercime thanks, looking at that now.

#5 @mercime
2 years ago

Attached image re spacing in Member and Groups Directory pages.

@mercime
2 years ago

#6 @hnla
2 years ago

In 10216:

Commit updates for Twentythirteen companion styles.
Update addresses user account and single group headers, styling updates for cover image header and default header instances at various screen sizes.
See #6533

#7 @hnla
2 years ago

@mercime the spacing was partly by design for wide screen and where we have essentially three elements avatar, item-title/meta, and action buttons and was an attempt to broadly space those across the width so we didn't look to unbalanced towards one side or the other.

Do you think it looks too wide, especially in the context of three blocks in a horizontal layout?

#8 @hnla
2 years ago

In 10224:

Update Twentythirteen style - Group send invites screen.

  • Reduce friends ul checkbox padding.
  • Re-factor left & main column widths, allow more room for left list wide screens.
  • Add refined columnar layout for medium breakpoints, allow invite list & selected friends to flow as single column stacking.

See #6533 Props @mercime

#9 @mercime
2 years ago

@hnla Thank you kindly for your generous props :)

Re spacing: Can only recommend that the max spacing between avatar and title/meta is === to width of avatar. Thanks.

#10 @hnla
2 years ago

In 10249:

Twentythirteen companion styles updates

  • Various adjustments for elements margin/padding conflicts with parent styles.
  • Object nav small screen styles.

See #6533

@hnla
2 years ago

Exploring adding a collapsed menu for the user account screens object-nav. This works for small screens up to ~38em. There are a many restrictions in attempting this as it has to be pure css and really wewould normally want/need acces to markup and/or JS to manage aspects of labels and transitions or classes.

@hnla
2 years ago

On hover/focus the menu expands thusly. To try to accomodtae an unknown number of links and to allow transitions a height is set that suits the default menu items and sets overflow: auto to handle additional menu items.

#11 @hnla
2 years ago

In 10283:

Twentythirteen Companion styles updates.

  • Updates general styles.
  • Corrects issue where scss nested rulesets/selectors aren't compiled where nested CSS comment structures are found causing all styles to be omitted.
  • Add new menu layout for user object-nav for mobile screens, menu parent on hover/focus expands to display menu items.

See #6533

#12 @hnla
2 years ago

Just adding a note to self:

Issue spotted by @DJPaul with what's new form as mentioned in slack chat:
https://wordpress.slack.com/archives/buddypress/p1445455610000541

http://cl.ly/image/3T260H1A2O2q

Issue affects Chrome and might need to be addressed across twenty* companion styles.

#13 @hnla
2 years ago

In 10309:

Twentythirteen Companion styles updates.

  • Updates list elements for groups & member screens, improves item-desc & .update elements for small screens, centres blocks and titles.
  • Adjust bp search box for label input widths ,wider for small screens & correct input text width to 100% of it's parent label.

See #6533

#14 @DJPaul
2 years ago

Real nice work on this, @hnla! Let's open new tickets for future release if we spot issues in the future, or if we have further ideas.

#15 @DJPaul
2 years ago

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

#16 @DJPaul
19 months ago

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