Skip to:
Content

BuddyPress.org

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#7338 closed enhancement (wontfix)

Companion Stylesheet - Twentyseventeen

Reported by: hnla's profile hnla Owned by: hnla's profile hnla
Milestone: Priority: normal
Severity: normal Version:
Component: Templates Keywords: needs-testing
Cc: lmoffereins@…

Description

Add a new companion stylesheet addressing any layout issues for the latest WordPress theme twentyseventeen.

This ticket acts a reference point for direct commits relating to the addition of supporting stylesheet & styles to address specific layout issues that may arise between BP and twentyseventeen.

Attachments (8)

7338-01.patch (16.9 KB) - added by hnla 7 years ago.
Updated styles.
7338-02.patch (22.7 KB) - added by hnla 7 years ago.
Updates & revisions to styles.
7338-03.patch (28.7 KB) - added by hnla 7 years ago.
Updates navs, cover image,.
7338-04.patch (37.3 KB) - added by hnla 7 years ago.
Adjust: search form style, act comment margening & fine tweaks.
7338-05.patch (43.8 KB) - added by hnla 7 years ago.
Add two groupings for 2017 theme color selections
7338-06.patch (48.3 KB) - added by hnla 7 years ago.
Further border adjustments for nav items in dark scheme.
7338-07.patch (51.4 KB) - added by hnla 7 years ago.
Update search form for dark-scheme, additional background adjustments user account settings..
7338-08.patch (76.1 KB) - added by hnla 7 years ago.
Last adjustments for BP & parent style property overrides

Download all attachments as: .zip

Change History (27)

#1 @hnla
7 years ago

  • Keywords needs-testing added
  • Owner set to hnla
  • Status changed from new to accepted

#2 @hnla
7 years ago

In 11275:

Commit Twentyseventeen companion style sheets

Commit is first pass to add the scss,css files to core.

This commit updates the stylesheet to match to 2017 breakpoints & general styles; Corrects any overly apparent style conflicts; updates our mixins and vars where necessary, & is a fairly rounded pass to improve the look of BP run under 2017.

Subsequent passes will address any further style issues encountered & address some visual styling aspects such as backgrounds, borders that are better removed.

See #7338

#3 @Offereins
7 years ago

  • Cc lmoffereins@… added

Thanks for taking this up, @hnla! Here's my initial feedback for the pages that I'm looking at now:

  • BP increases font-size on the .entry-title page title. This deviates from the global theme layout.
  • The page's content column width since breakpoint @ 880 is too wide to my liking. The page title has to wrap because of it.
  • Buttons in directory items have stretched 100% width (since breakpoint @ 767). The Profile 'Save Changes'-button is not, for instance. Is that also true for other twenty-* themes?

Small screens (before breakpoint @ 480)

  • Page content is always centered, for single items as well as directories (Members, Activity) For page headers that seems okay, but directory content looks off.

PS. Tested with Chrome on my laptop with some screen-resizing for each page.

#4 @hnla
7 years ago

Thanks @Offereins,

BP increases font-size on the .entry-title page title. This deviates from the global theme layout.

yes I dithered over this as generally I want to follow themes styles as much as possible, on the titles they just looked far too small and just odd, to some extent BP adds unique content and on it's screens I tend to think we take liberties and do what looks best for BP rather than theme but this isn't perhaps best.

I'll re-factor to remove the heading sizes.

The page's content column width since breakpoint @ 880 is too wide to my liking. The page title has to wrap because of it

Hmm I'll check, for major elements I use the themes breakpoints, for granular BP elements I'll use a further set - I'm assuming this for screens where the two column look is set?

I'll check button element for profile save, it may have been by design but also maybe just an element that has yet to be corrected for this theme(not sure about the other themes).

I'll check the smaller screens for directory content, again might just be something not yet addressed.

Thanks for the feedback.

#5 @hnla
7 years ago

-01 patch addresses points raised by offereins and also adjusts some backgrounds/borders and table styling to lighten elements.

@hnla
7 years ago

Updated styles.

#6 @hnla
7 years ago

patch -02 addresses further styling issues between theme styles & BP, removes some styling aspects such as backgrounds, adjusts act stream comments slightly.

Patches iterate on the last one, so only necessary to patch to latest version.

@hnla
7 years ago

Updates & revisions to styles.

#7 @hnla
7 years ago

-03 patch adjusts:

  • Cover image elements in screens where 2017 theme is set to page-two-column.
  • Removes link colurs & removes object nav small screen slide down.
  • Adds in the vertical user/group nav for screens not displaying themes two column style page for medium up.

@hnla
7 years ago

Updates navs, cover image,.

@hnla
7 years ago

Adjust: search form style, act comment margening & fine tweaks.

#8 @hnla
7 years ago

Last round of style adjustments.
I'll run patch for .scss file towards end of week, lint and commit.

#9 @Offereins
7 years ago

I haven't found the time to test yer patches, but I recently stumbled upon the color scheme options in Twenty Seventeen (see Customizer > Colors). @hnla Are you considering to support the Dark color scheme? BP becomes quite unreadable when using the default (light) colors in it.

#10 @hnla
7 years ago

@Offereins no hadn't really considered this, it's moving right off the original purpose of these corrective styles into a whole different area, just the initial companion sheet ties up a lot of my time.

I'll look at, but it's going to be very perfunctory at best, possibly a few of the global color vars can be adapted to work under classes if 2017 provides them.

#11 @hnla
7 years ago

@Offereins checking quickly don't see too many issues with the default/light scheme. The dark scheme needs some of the set backgrounds doubled up under the body classes so that they can be flipped in and out other than that as I've been quite careful to inherit or not state colours the majority of BP elements /screens adjust to be white text so overall things aren't too bad.

@hnla
7 years ago

Add two groupings for 2017 theme color selections

#12 @hnla
7 years ago

-05 adds two groups to handle the backgrounds & colors set by both companion sheet and BP main styles.

2017 adds two body classes for dark or light theme selection this patch extracts properties to assign to one or other parent class and overrides BP main styles where required.

@hnla
7 years ago

Further border adjustments for nav items in dark scheme.

@hnla
7 years ago

Update search form for dark-scheme, additional background adjustments user account settings..

@hnla
7 years ago

Last adjustments for BP & parent style property overrides

#13 @hnla
7 years ago

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

In 11379:

Commit Twentyseventeen companion style sheets

Commit adds final revision for style adjustments including rules to account for dark/light schemes.

Fixes #7338
Props hnla, offereins

#14 @netweb
7 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening, r11379 doesn't pass the scss-lint tests

See Travis CI job: https://travis-ci.org/buddypress/BuddyPress/jobs/190911934

Running "scsslint:core" (scsslint) task
Running scss-lint on core
src/bp-templates/bp-legacy/css/twentyseventeen.scss:2160:1 [W] Indentation: Line should be indented 3 tabs, but was indented 4 tabs
src/bp-templates/bp-legacy/css/twentyseventeen.scss:2165:1 [W] Indentation: Line should be indented 3 tabs, but was indented 4 tabs
src/bp-templates/bp-legacy/css/twentyseventeen.scss:2167:1 [W] Indentation: Line should be indented 3 tabs, but was indented 4 tabs
Warning: Task "scsslint:core" failed. Use --force to continue.
Aborted due to warnings.
The command "grunt $BP_TRAVISCI" exited with 3.

#15 @hnla
7 years ago

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

In 11382:

Twentyseventeen scss formatting

Commit corrects some over indented lines.

Fixes #7338
Props netweb

#16 @Offereins
7 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening because the .colors-dark subset needs some refining on the following parts:

  • input field coloring (xprofile)
  • list item separation border color
  • activity-header border color
  • screen-reader-text has defined width

Patch pending.

#17 @DJPaul
7 years ago

  • Milestone changed from 2.8 to Future Release

#18 @DJPaul
7 years ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from reopened to closed

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

#19 @DJPaul
7 years ago

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

Note: See TracTickets for help on using tickets.