Skip to:
Content

BuddyPress.org

Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#6449 closed defect (bug) (fixed)

BP companion styles for Activity Permalink page

Reported by: mercime Owned by:
Milestone: 2.3 Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-patch
Cc:

Description

Attached animated gifs for Twenty Fifteen and Twenty Fourteen themes shows indentation for list item needs some adjustment at 320px

Attachments (13)

activitypermalink-2015-320px.gif (725.3 KB) - added by mercime 4 years ago.
Twenty Fifteen at 320px
activitypermalink-2014-320px.gif (891.2 KB) - added by mercime 4 years ago.
Twenty Fourteen at 320px
activitypermalink-2015-480px.gif (770.6 KB) - added by mercime 4 years ago.
Twenty Fifteen at 480px
activitypermalink-2014-480px.gif (678.1 KB) - added by mercime 4 years ago.
Twenty Fourteen at 480px
6449.2015.01.patch (1.8 KB) - added by hnla 4 years ago.
twentyfifteen.css (43.4 KB) - added by hnla 4 years ago.
Compiled .css file to match to patch 6449.2015.01.patch
twentyfourteen.css (34.1 KB) - added by hnla 4 years ago.
Twentyfourteen CSS updated for 6449
6449.2014.01.patch (2.1 KB) - added by hnla 4 years ago.
2014 scss update
activitypermalink-2014-320px-2nd.gif (708.9 KB) - added by mercime 4 years ago.
activitypermalink-2015-320px-2nd.gif (779.0 KB) - added by mercime 4 years ago.
line.png (5.6 KB) - added by mercime 4 years ago.
twentyfourteen.scss.patch (2.1 KB) - added by mercime 4 years ago.
6449.patch (276.7 KB) - added by mercime 4 years ago.
updated css files based on #6461

Change History (31)

@mercime
4 years ago

Twenty Fifteen at 320px

@mercime
4 years ago

Twenty Fourteen at 320px

#1 @hnla
4 years ago

Ah nested comments?

I'll take a look at what can be done about reducing the list indents for mobile.
Thanks mercime.

#2 @mercime
4 years ago

hnla no problem. Checked other pages before, sorry I just noticed the permalink page this morning :(

The pages at 480px - attaching also animated gifs for the activity permalink pages for the two themes at for reference.

@mercime
4 years ago

Twenty Fifteen at 480px

@mercime
4 years ago

Twenty Fourteen at 480px

#3 @hnla
4 years ago

@mercime if you have a moment could you try out this patch below for twentyfifteen.

It attempts to address spacing and clarity of nesting.

  • re-factors the avatar and comment content to stack at small screen and adjusts margins wider.
  • Adjusts the ul margins to essentially stack with a greatly reduced indented margin
  • Adds a left border to nested ul to re-present comments as might be seen in email comment structures to denote comments depths.

There is only so far this can be taken as the whole notion of nested comments is quite daft especially at very narrow screens, reaching a point of collapse far before the allowed possible depths might be reached, unless one goes to far greater lengths to style in a stacked view, a job for another day/layout.

The patch contains the scss file patched but I compile my working .css file locally with the commits producing their own compilation so attaching my local .css file separately, sorry if this is getting complicated.

@hnla
4 years ago

@hnla
4 years ago

Compiled .css file to match to patch 6449.2015.01.patch

#4 @hnla
4 years ago

And the twentyfourteen css if possible?

@hnla
4 years ago

Twentyfourteen CSS updated for 6449

#5 @mercime
4 years ago

The patch contains the scss file patched but I compile my working .css file locally with the commits producing their own compilation so attaching my local .css file separately, sorry if this is getting complicated

No problem @hnla. Will look at this later this P.M., I'm going to lunch/meeting in a few minutes. Could you please upload the revised scss files for Twenty Fourteen and Twenty Fifteen so I can see the changes? Thanks.

Last edited 4 years ago by mercime (previous) (diff)

#6 @hnla
4 years ago

Twentyfifteen scss patch is above.
I'll upload twentyfourteen scss below.

@hnla
4 years ago

2014 scss update

#7 @mercime
4 years ago

Congratulations @hnla :) Attached are animated gifs per your revised scss files for the Twenty Fourteen and Twenty Fifteen themes at 320px.

A couple of suggestions for your consideration: removing the left border of .activity-comments in the Twenty Fourteen theme and increasing the left padding of the same theme's .activity-comments ul ul to 2%, the same as that of Twenty Fifteen theme. Screenshot attached in support of removing the left border and the patch for the suggestions.

Cheers.

@mercime
4 years ago

#8 @hnla
4 years ago

@mercime

A couple of suggestions for your consideration: removing the left border of .activity-comments in the Twenty Fourteen theme and increasing the left padding of the same theme's .activity-comments ul ul to 2%, the same as that of Twenty Fifteen theme. Screenshot attached in support of removing the left border and the patch for the suggestions.

Agreed and done. I'll commit these changes to the two themes a little later, thanks for the screenies.

#9 @hnla
4 years ago

In 9894:

Update twentyfourteen & twentyfifteen activity comments

Update improves the activity items list comments for both companion stylesheets.

At narrow width mobile screens nested comments of any depth greater than two were looking squeezed due to compounded left margin indents, commit provides a better mobile small screen experience.
See #6449 Props mercime

#10 @hnla
4 years ago

  • Keywords close added

#11 @mercime
4 years ago

  • Keywords close removed

@hnla something's gone awry with the indentation (should be tabs not spaces) and selectors which should be on their own lines in twentyfifteen.css and twentyfourteen.css. This therefore affects the same in the respective -rtl.css files when converted. Looked at Grunt.js, the .scss files which are formatted correctly should be converted to the correct format in your twenty-*.css files when you run grunt.

Last edited 4 years ago by mercime (previous) (diff)

#12 @hnla
4 years ago

Always been like that, thought this was simply how grunt lib-sass was compiling things.

#13 @mercime
4 years ago

Strange. I use gulp now, but the last time I used grunt-sass per package.json last year, it didn't affect the tabs nor selector per line. I remember seeing that the tab/space issue was fixed in another ticket. Did the tab change to spaces after the grunt-sass task was added sometime ago? Or is it caused by the sourceMapping?

#14 @hnla
4 years ago

Not really sure on any of these questions tbh without testing; as far as I can recall it always compiled in this fashion and thought it odd and did ask the question was this right as it appears to be outputting as 'nested' yet the crunt config suggests 'expanded'

@mercime
4 years ago

updated css files based on #6461

#15 @mercime
4 years ago

  • Keywords has-patch added

#16 @mercime
4 years ago

  • Milestone changed from Awaiting Review to 2.3

#17 @DJPaul
4 years ago

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

@mercime Thanks, but there's no need to patch the .CSS file. Those will be regenerated when the relevant Grunt task is run.

#18 @DJPaul
3 years ago

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