Skip to:
Content

Opened 11 months ago

Closed 3 months ago

Last modified 3 months ago

#7338 closed enhancement (wontfix)

Companion Stylesheet - Twentyseventeen

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

Download all attachments as: .zip

Change History (27)

#1 @hnla
11 months ago

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

#2 @hnla
11 months 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
11 months 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
11 months 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
10 months ago

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

@hnla
10 months ago

Updated styles.

#6 @hnla
10 months 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
10 months ago

Updates & revisions to styles.

#7 @hnla
10 months 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
10 months ago

Updates navs, cover image,.

@hnla
10 months ago

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

#8 @hnla
10 months ago

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

#9 @Offereins
10 months 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
10 months 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
10 months 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
10 months ago

Add two groupings for 2017 theme color selections

#12 @hnla
10 months 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
10 months ago

Further border adjustments for nav items in dark scheme.

@hnla
10 months ago

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

@hnla
9 months ago

Last adjustments for BP & parent style property overrides

#13 @hnla
9 months 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
9 months 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
9 months 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
9 months 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
9 months ago

  • Milestone changed from 2.8 to Future Release

#18 @DJPaul
3 months 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
3 months 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.