BP companion styles for Activity Permalink page

[mercime]

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

[mercime]

Twenty Fifteen at 320px

[mercime]

Twenty Fourteen at 320px

[hnla]

Ah nested comments?

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

[mercime]

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]

Twenty Fifteen at 480px

[mercime]

Twenty Fourteen at 480px

[hnla]

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

Compiled .css file to match to patch 6449.2015.01.patch

[hnla]

And the twentyfourteen css if possible?

[hnla]

Twentyfourteen CSS updated for 6449

[mercime]

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.

[hnla]

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

[hnla]

2014 scss update

[mercime]

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.

[hnla]

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

[hnla]

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

[mercime]

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

[hnla]

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

[mercime]

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?

[hnla]

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]

updated css files based on #6461

[DJPaul]

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