feat: add slight delay in color mode transitions by orimdominic · Pull Request #407 · adityatelange/hugo-PaperMod

orimdominic · 2021-05-09T08:40:05Z

Add slight delay in color mode transitions

kdkasad · 2021-05-09T18:44:24Z

I think it looks great, but there's one thing I don't like; the transition fires when the page is first loaded, so the page fades in instead of just appearing as it normally does. Also, I think the transition should be applied to .post-entry and .toc elements as well.

kdkasad

The transitions look good, but the page load problem still exists.

Edit: also the TOC element's padding is now messed up.

orimdominic · 2021-05-09T21:53:35Z

@kdkasad Thanks
Kindly confirm if the issue on page first load still exists.

kdkasad · 2021-05-09T22:00:56Z

assets/css/common/post-single.css

@@ -267,6 +267,7 @@
    background: var(--code-bg);
    border-radius: var(--radius);
    padding: .4em


Missing semicolon. This messes up the padding of TOC elements.

I thought as much. This was what came to mind
Thanks.

orimdominic · 2021-05-09T22:02:14Z

The transitions look good, but the page load problem still exists.

Edit: also the TOC element's padding is now messed up.

I'm on the page load issue at the moment
That of of the TOC element's padding is quite odd. Nothing related to it was tampered with (to the best of my knowledge) but I'll look into it

orimdominic · 2021-05-09T22:03:45Z

How do I deploy to test these changes so that I can see what you see before I push new commits?
@kdkasad

kdkasad · 2021-05-09T22:06:18Z

The transitions look good, but the page load problem still exists.
Edit: also the TOC element's padding is now messed up.

...

That of of the TOC element's padding is quite odd. Nothing related to it was tampered with (to the best of my knowledge) but I'll look into it

It's because of a missing semicolon. See my previous comment

kdkasad · 2021-05-09T22:06:50Z

How do I deploy to test these changes so that I can see what you see before I push new commits?
@kdkasad

I just run hugo server -DF locally; no fancy deployement.

orimdominic · 2021-05-09T22:10:30Z

hugo server -DF

That is what I do, but I don't see text.
I'll keep working with my own repo and verify the changes from there

kdkasad · 2021-05-09T22:20:54Z

hugo server -DF

That is what I do, but I don't see text.
I'll keep working with my own repo and verify the changes from there

Ah. I have the exampleSite branch checked out in a separate directory, with a symlink from $WORKDIR/exampleSite/themes/hugo-PaperMod to $WORKDIR/hugo-PaperMod, where the repo is.

Here are the commands to set that up:

$ cd $WORKDIR # for me, $WORKDIR is ~/code/papermod
$ mkdir exampleSite
$ git clone https://github.com/adityatelange/hugo-PaperMod
$ cd hugo-PaperMod
$ git worktree add ../exampleSite exampleSite
$ cd ../exampleSite/themes
$ rm -rf hugo-PaperMod
$ ln -s ../../hugo-PaperMod hugo-PaperMod

After that, you'll have the following directory structure:

$WORKDIR (~/code/papermod)
├── exampleSite
│   ├── (site content/configuration)
│   └── themes
│       └── hugo-PaperMod → ../../hugo-PaperMod
└── hugo-PaperMod
    └── (theme files)

Then run hugo server -DF from inside the exampleSite directory. I run it using tmux, so I can have it running in the background while I work on the theme.

orimdominic · 2021-05-09T22:23:17Z

hugo server -DF

That is what I do, but I don't see text.
I'll keep working with my own repo and verify the changes from there

Ah. I have the exampleSite branch checked out in a separate directory, with a symlink from $WORKDIR/exampleSite/themes/hugo-PaperMod to $WORKDIR/hugo-PaperMod, where the repo is.

Here are the commands to set that up:
$ cd $WORKDIR # for me, $WORKDIR is ~/code/papermod
$ mkdir exampleSite
$ git clone https://github.com/adityatelange/hugo-PaperMod
$ cd hugo-PaperMod
$ git worktree add ../exampleSite exampleSite
$ cd ../exampleSite/themes
$ rm -rf hugo-PaperMod
$ ln -s ../../hugo-PaperMod hugo-PaperMod
After that, you'll have the following directory structure:
$WORKDIR (~/code/papermod)
├── exampleSite
│   ├── (site content/configuration)
│   └── themes
│       └── hugo-PaperMod → ../../hugo-PaperMod
└── hugo-PaperMod
    └── (theme files)
Then run hugo server -DF from inside the exampleSite directory. I run it using tmux, so I can have it running in the background while I work on the theme.

Awesome!
I'll try this out now!

orimdominic · 2021-05-13T22:06:40Z

@kdkasad Update

Sorry for the delay. I'm working on some other projects.
I've been able to solve the overlay appearing on page load by setting the transition delay to work for only dark to light.
I'm still trying to figure out why that happens. I've scanned the sample website I referenced in the discussion about this feature and I replicated the method there but the delay still happens (unless I apply the fix I talked about in this comment)
I'm held back by the projects I'm working on but I felt that it's best to give an update on the progress of this.
I'm still trying to figure out why that happens and a better fix

kdkasad · 2021-05-14T05:22:05Z

@kdkasad Update

Sorry for the delay. I'm working on some other projects.
I've been able to solve the overlay appearing on page load by setting the transition delay to work for only dark to light.
I'm still trying to figure out why that happens. I've scanned the sample website I referenced in the discussion about this feature and I replicated the method there but the delay still happens (unless I apply the fix I talked about in this comment)
I'm held back by the projects I'm working on but I felt that it's best to give an update on the progress of this.
I'm still trying to figure out why that happens and a better fix

No problem taking your time; there's no need to rush.

As for why the delay happens on page load, it's because the stylesheet originally loads the page in the light theme, and the page's JavaScript instantly switches it to the dark theme when it's been selected.

I think the only way to fix this is to set the transition property after the inital theme switch using JavaScript.

orimdominic · 2021-05-22T14:24:47Z

@kdkasad Thanks
Finally got around to implementing your suggestion.
How does it look now?

kdkasad

The color switch on page load seems to be solved, but one transition was removed which shouldn't have been.

assets/css/common/post-entry.css

kdkasad · 2021-05-23T22:57:23Z

assets/css/common/post-entry.css

    background: var(--entry);
    border-radius: var(--radius);
    transition: transform .1s;
+    transition: background-color 350ms, border 350ms;


This should be changed to the following, otherwise the second rule will override the first, effectively canceling it.

transition: transform .1s, background-color 350ms, border 350ms;

Apologies.
I'm working on a serious bug on another project currently.
I half-mindedly added that so I could go back to the project.
Fixing it soon

kdkasad

Looks good!

Sorry for all the comments and requests for tiny changes; only maintainers have the ability to add commits to a pull request, so commenting is the only way for me to make changes, no matter how trivial.

orimdominic · 2021-05-24T04:18:11Z

@kdkasad This feature is 50% my work and 50% your work.
I'm grateful for your guidance via the comments

orimdominic · 2021-06-21T14:50:16Z

@kdkasad This PR has not been merged.
Is the conflict the only issue here?

kdkasad · 2021-06-22T00:29:00Z

@kdkasad This PR has not been merged.
Is the conflict the only issue here?

I'm not sure. @adityatelange is the maintainer, so it's up to him to merge PRs. However I suspect that the conflict may be one reason he hasn't merged it. I'd recommend rebasing on the latest commit if you can.

… into feat/color-mode-transition-delay

sonarqubecloud · 2021-07-01T01:47:27Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

orimdominic · 2021-07-01T01:48:56Z

@adityatelange Could you please give this a review?
I guess you skipped it because of merge conflicts.

Thanks.

adityatelange · 2021-07-03T06:03:03Z

@adityatelange Could you please give this a review?
I guess you skipped it because of merge conflicts.

Thanks.

I am so sorry to keep you waiting.
I am not really a fan of this feature, and I hope many wouldn't want a feature that is hard to disable.

orimdominic · 2021-07-03T09:48:32Z

@adityatelange
If there's a setting in config.yml that helps users enable or disable this feature, will you accept it?

PS: You just taught me a practical lesson in Don't give users a feature they cannot configure to their taste

adityatelange · 2021-07-04T08:51:49Z

@adityatelange
If there's a setting in config.yml that helps users enable or disable this feature, will you accept it?

PS: You just taught me a practical lesson in Don't give users a feature they cannot configure to their taste

IMO that is not easy to override and keep CSS styling with Hugo without using Hugo extended tricks.
Also, the animation lags on low-powered mobile devices is what I have experienced with my primary device.

orimdominic · 2021-07-04T14:25:51Z

Alright. Thanks!

feat: add slight delay in color mode transitions

5abf048

fix: irregular transition delays in some components

61d75eb

kdkasad approved these changes May 9, 2021

View reviewed changes

kdkasad reviewed May 9, 2021

View reviewed changes

kdkasad mentioned this pull request May 9, 2021

Add missing semicolons in CSS files #408

Merged

fix: quick flash on page load

a5e10dc

kdkasad suggested changes May 23, 2021

View reviewed changes

assets/css/common/post-entry.css Outdated Show resolved Hide resolved

fix: reinstate removed css rule

863de43

kdkasad reviewed May 23, 2021

View reviewed changes

fix: transition override

5f199e8

kdkasad approved these changes May 24, 2021

View reviewed changes

Merge branch 'master' of https://github.com/adityatelange/hugo-PaperMod…

f25cdb5

… into feat/color-mode-transition-delay

orimdominic closed this Jul 4, 2021

rea1shane mentioned this pull request Oct 31, 2023

Why do the colors change in order when switching themes? #1326

Closed

Uh oh!

Conversation

orimdominic commented May 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kdkasad commented May 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kdkasad left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

orimdominic commented May 9, 2021

Uh oh!

kdkasad May 9, 2021

Choose a reason for hiding this comment

Uh oh!

orimdominic May 9, 2021

Choose a reason for hiding this comment

Uh oh!

orimdominic commented May 9, 2021

Uh oh!

orimdominic commented May 9, 2021

Uh oh!

kdkasad commented May 9, 2021

Uh oh!

kdkasad commented May 9, 2021

Uh oh!

orimdominic commented May 9, 2021

Uh oh!

kdkasad commented May 9, 2021

Uh oh!

orimdominic commented May 9, 2021

Uh oh!

orimdominic commented May 13, 2021

Uh oh!

kdkasad commented May 14, 2021

Uh oh!

orimdominic commented May 22, 2021

Uh oh!

kdkasad left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kdkasad May 23, 2021

Choose a reason for hiding this comment

Uh oh!

orimdominic May 23, 2021

Choose a reason for hiding this comment

Uh oh!

kdkasad left a comment

Choose a reason for hiding this comment

Uh oh!

orimdominic commented May 24, 2021

Uh oh!

orimdominic commented Jun 21, 2021

Uh oh!

kdkasad commented Jun 22, 2021

Uh oh!

sonarqubecloud bot commented Jul 1, 2021

Uh oh!

orimdominic commented Jul 1, 2021

Uh oh!

adityatelange commented Jul 3, 2021

Uh oh!

orimdominic commented Jul 3, 2021

Uh oh!

adityatelange commented Jul 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

orimdominic commented Jul 4, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

orimdominic commented May 9, 2021 •

edited

Loading

kdkasad commented May 9, 2021 •

edited

Loading

kdkasad left a comment •

edited

Loading

adityatelange commented Jul 4, 2021 •

edited

Loading