Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update notmyidea theme to scale down to smaller screens. #2914

Closed
wants to merge 4 commits into from
Closed

Update notmyidea theme to scale down to smaller screens. #2914

wants to merge 4 commits into from

Conversation

BenSturmfels
Copy link
Contributor

@BenSturmfels BenSturmfels commented Aug 17, 2021

The aim here is make the theme work respectably on mobile devices with only modest changes. Providing different layouts at multiple breakpoints is beyond the scope of this change.

The changes here are:

  1. base.html: add a <meta name="viewport" element

  2. main.css:

  • use "max-width" instead of "width"
  • set a "line-height" an the banner and adjust vertical spacing to match
  • remove fixed height on the nav bar and force it to contain its child elements

The test changes just duplicate these changes to base.html and main.css.

Here's an example running under Chrome responsive view:

stumbles id au_(iPhone 6_7_8) (1)

stumbles id au_(iPhone 6_7_8) (2)

stumbles id au_(iPhone 6_7_8) (3)

This theme is also currently running at https://stumbles.id.au/.

Pull Request Checklist

  • Ensured tests pass and (if applicable) updated functional test output
  • Conformed to code style guidelines by running appropriate linting tools
  • Added tests for changed code (not applicable)
  • Updated documentation for changed code (not applicable)

@BenSturmfels
Copy link
Contributor Author

Here's the Google Mobile-Friendly Tester rating the modified theme as mobile-friendly.

Copy link

@paulfertser paulfertser left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello,
Thank you for working on this!
As a general note, I would expect all the commits to be squashed into a single one, the upstream doesn't need your development history I think. Some additional comments follow.

pelican/themes/notmyidea/static/css/main.css Outdated Show resolved Hide resolved
pelican/themes/notmyidea/static/css/main.css Outdated Show resolved Hide resolved
@Arseney300
Copy link

Hello.
I've worked on updating this theme too. Maybe we can merge our works together.
Sorry for big screenshots.
As first view we have different (maybe more, but i don't see it now):

  1. Header. My header haven't space between title and nav.
    screen-1
    screen-2
  2. Subtitle. I think be better, if subtitle will move in next line in small displays:
    screen-3
    screen-4
  3. Post meta info paddings: i set up customs paddings for it
    footer.post-info { margin-top: 0px; padding-top: 0px; padding-left: 2em; padding-right: 2em; }
    But unfortunately it change default design too, but i think it's look more beauty (question for maintainers).
  4. add
    p::before { content: ""; width: 8em; overflow: hidden; display: block; } for fix it
    screen-8
    screen-7
  5. View of links block:
    screen-5
    screen-6

My commit:
Arseney300@d5720a2

@BenSturmfels
Copy link
Contributor Author

Thank you for working on this!
As a general note, I would expect all the commits to be squashed into a single one, the upstream doesn't need your development history I think. Some additional comments follow.

@paulfertser thanks. I don't use GitHub a lot for collaboration myself, but I believe there's been a "merge and squash" button available to maintainers for a few years now for use at their discretion. Let me know if that's not the case.

@paulfertser
Copy link

Thank you for working on this!
As a general note, I would expect all the commits to be squashed into a single one, the upstream doesn't need your development history I think. Some additional comments follow.

@paulfertser thanks. I don't use GitHub a lot for collaboration myself, but I believe there's been a "merge and squash" button available to maintainers for a few years now for use at their discretion. Let me know if that's not the case.

Ben, you might be right, I really have little clue about Github-specific ways on using Git, sorry if I'm misguiding. Including two screenshots from Chromium on Debian which you might consider to view as bug reports.
stumbles id au
stumbles id au-narrow

@paulfertser
Copy link

BTW, I was told that adding some horizontal padding makes it look better on narrow screens:

body {
 padding: 0 1em;
}

@BenSturmfels
Copy link
Contributor Author

I've now updated the screenshots in the merge request description.

Hehe @paulfertser, either you caught me mid-upload or there's some weird dark theme thing going on in your screenshot above. I suspect that's not an issue with the changes. :)

@paulfertser
Copy link

Hehe @paulfertser, either you caught me mid-upload or there's some weird dark theme thing going on in your screenshot above. I suspect that's not an issue with the changes. :)

The dark theme is indeed on my client side, it's the integrated (provided by chromium without additional addons) mechanism, please consider being compatible with it. I also usually disable javascript so the blog title might be looking different (and overlapping) because of that.

@BenSturmfels
Copy link
Contributor Author

BTW, I was told that adding some horizontal padding makes it look better on narrow screens

Thanks, I'm sure it may, but I'm specifically aiming to keep the changes as minimal as possible. There's endless amounts of tweaking that could be done to refine the layout. My aim is for a small change that makes mobile work reasonably well.

@BenSturmfels
Copy link
Contributor Author

The dark theme is indeed on my client side, it's the integrated (provided by chromium without additional addons) mechanism, please consider being compatible with it. I also usually disable javascript so the blog title might be looking different (and overlapping) because of that.

If it's ok with you, I'll treat dark theme support as out of scope for this change. This is specifically about better behaviour on smaller screens.

@paulfertser
Copy link

paulfertser commented Aug 17, 2021 via email

@BenSturmfels
Copy link
Contributor Author

Thanks @Arseney300, I've fixed the header spacing you mentioned. I agree that there's a lot that could be done to further refine the layout, but this change is just intended to provide basic support for small screens with minimal changes. I'd suggest working on further refinements to the post-meta and footer links once this basic support is merged in.

The aim here is to make the theme work respectably on mobile devices with only modest changes. Providing different layouts at multiple breakpoints is beyond the scope of this change.

The changes here are:

1. `base.html`: adding a `<meta name="viewport"` element

2. `main.css`:
  * use "max-width" instead of "width"
  * set a "line-height" an the banner and adjust vertical spacing to match
  * remove fixed height on the nav bar and force it to contain its child elements
@justinmayer
Copy link
Member

Many thanks for your work on this, Ben. And thanks to Paul and Arseney for chiming in as well. 🥇

As a general note, I would expect all the commits to be squashed into a single one, the upstream doesn't need your development history I think.

I'm not sure I agree. When formulated with thought and care, multiple commits can indeed be quite useful. Also, during feedback-and-change iterations, it can be useful to see what has changed in a PR over time, in which case cleaning up the commits can be done at the very end, right before merging.

I don't use GitHub a lot for collaboration myself, but I believe there's been a "merge and squash" button available to maintainers for a few years now for use at their discretion.

That is correct. If the commits aren't valuable on their own (e.g., if there are "fix-up" commits that add no value as separate commits), the maintainer can squash the commits if the contributor hasn't already done said clean-up.

@BenSturmfels
Copy link
Contributor Author

I've just updated the remaining test HTML files for the locales that were skipped on my machine. I'm having some trouble getting these additional locales to work, so I'll check back in tomorrow to see if they passed CI.

@BenSturmfels
Copy link
Contributor Author

@justinmayer would you mind kicking off the CI process please so I can see if we get a clean test run for all locales? Thanks!

@BenSturmfels
Copy link
Contributor Author

Hi @justinmayer, I'm having some trouble figuring out whether there are test errors related to my changes or not. It looks like the errors I'm seeing on my machine are due to a missing empty <subtitle></subtitle> element in the atom feed example like feeds/alexis-metaireau.atom.xml, perhaps due to a different library version? I've followed the directions in contribute.rst and I tried building the French and Turkish locales similar to what the CI is doing and then running invoke update-functional-tests, but I presume something isn't right with the locales because it's replaced a whole lot of French month names with English ones.

At this point I'm a bit stuck. Can you advise on how best to proceed?

@avaris
Copy link
Member

avaris commented Aug 20, 2021

@BenSturmfels It's probably related to the newly released feedgenerator 1.9.2. Seems like it would affect our test outputs, and they need to be updated. You can regenerate output with that and push it as another commit.

@BenSturmfels
Copy link
Contributor Author

@avaris is there any chance you or one of the team could do that regeneration outside of this pull request? I'd really appreciate it. I'm having trouble with the locales and I'm concerned that otherwise this pull request will get bogged down in unrelated test issues I'm not very familiar with.

Signed-off-by: Deniz Turgut <dturgut@gmail.com>
@avaris
Copy link
Member

avaris commented Aug 21, 2021

I added to this PR, hope you don't mind :).

@BenSturmfels
Copy link
Contributor Author

@avaris thank you! Doesn't bother me to have it in this pull request. Of course I'm not the one that has to review it though. ;) Thanks again.

@BenSturmfels
Copy link
Contributor Author

Is there anything I can do to help this change be merged? It looks a lot bigger than it really is - really only an additional <meta name="viewport"> tag in templates plus a very modest set of CSS changes to themes/notmyidea/static/css/main.css. The rest of the changes are just test suite updates.

@justinmayer
Copy link
Member

@avaris: The more I look at the empty <subtitle></subtitle> tag in 99e7af4 that was caused by the latest version of FeedGenerator, the more I wonder whether that represents an undesirable change. I filed an issue to discuss that: getpelican/feedgenerator#30

@BenSturmfels: I haven't had a chance to look at how differently these changes render the output, but the code-level changes look fine to me.

Anyone else have any comments on these changes?

@avaris
Copy link
Member

avaris commented Sep 10, 2021

@justinmayer I think you are correct. I didn't check the diffs that closely (my bad).

@justinmayer
Copy link
Member

I just released FeedGenerator 2.0.0 containing a fix for the double subtitle elements, so I dropped the commit @avaris added to this PR and merged the other three commits manually.

Many thanks to @BenSturmfels for these improvements, which have been requested for quite some time. Truly much appreciated! 🥇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants