Coder Social home page Coder Social logo

Comments (20)

jarodise avatar jarodise commented on August 16, 2024 1

yes, it works for me! thanks for the effort!

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

@jarodise Hey, thanks so much for the feedback.

I was able to reproduce the bug you found. I think that there are some areas where the mouse is only half in the hover zone. That might be why it the scrollbar keeps disappearing. Thanks again for the issue.

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

Hi, seems like the problem still exists.

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

Same situation?

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

Yeah, basically it's caused by the scroll bar showing up during the hovering, scroll bar is hidden by default and shows up when the hover popup goes below the bottom of the page.

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

I think the easy solution would be either complete hide the scroll bar or make it show all the time.

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

I think the easy solution would be either complete hide the scroll bar or make it show all the time.

I notice that when I hover over the link, the footer shifts down as well. The modal is set to position: relative, so when it comes appears it affects the page length. Setting it to position: absolute should fix this.

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

@jarodise Try it now.

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

I'm not sure if you pushed the update to your demo site, but from my end, the problem still persists, see the screen capture I got from your demo site:

Kapture 2020-08-14 at 12 00 01

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

Weird. What's your screen size? What device?

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

I'm on Macbook Pro 13 inch Late 2015, however, I don't think it's device relevant, like I said earlier, the problem is caused by scrollbar showing up when the popup goes beyond the extend of the page bottom, so as long as the content is long enough to reach the bottom of the page, this problem will show up. no matter how big the screen or what the resolution is.

If everything is limited to the top part of the page where the bottom of the page is never reached, of course this problem will not show because the scroll bar won't show in that case, but however we cannot rule out of possibility of having longer form notes or larger photos that will push the content to the bottom page , which eventually will cause the scroll bar to show and then cause the shifting of the page.

The solution remains, either having the scroll bar show all the time, or not showing at all, only by doing this you won't have the shifting caused by the sudden emergence of scroll bar, hope I explained myself clearly.

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

Notice the scroll bar:
Kapture 2020-08-14 at 12 21 11

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

Suggestion: If we move the popup away from the bottom of the screen, we might avoid the issue altogether.
image

I'm hesitant to have the scrollbar always present, because most websites don't have/need a scrollbar. I can't hide the scrollbar completely, because some pages would get cut off. That's why I'm looking for a workaround.

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

@jarodise what do you think? ☝️

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

@jarodise what do you think? ☝️

yeah, I think this is a good solution.

another idea would be, having an on/off switch for preview popup, since this is the reason that's causing it.

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

One last question: Do you know how I could apply the update on my forked repo?

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

One last question: Do you know how I could apply the update on my forked repo?

Great question. I'm really not sure. Template repositories are pretty new to me. I'd imagine you could connect your repository to this one using git. I'll play around.

from eleventy-garden.

jarodise avatar jarodise commented on August 16, 2024

One last question: Do you know how I could apply the update on my forked repo?

Great question. I'm really not sure. Template repositories are pretty new to me. I'd imagine you could connect your repository to this one using git. I'll play around.

Yeah, if you find an easy option, please kindly let me know, I've played with a few git commands I found on stackoverflow, but came across some errors about merge conflict, as someone who's really not technical, I don't know how I could go forward with this, I hope I don't have to delete and refork the template every time you push an update.

thanks!

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

Yeah, if you find an easy option, please kindly let me know...

@jarodise See the css I changed to fix this issue: 2d9335e

from eleventy-garden.

binyamin avatar binyamin commented on August 16, 2024

@jarodise I think I found a way for you to update it. Lmk if this works.

# Set up reference to original template
$ git remote add upstream [email protected]:binyamin/eleventy-garden.git
$ git fetch upstream

# Save any uncommited changes
$ git stash

# Update repository
$ git merge upstream/master -m "Update from template"

# Recreate any uncommited changes
$ git stash apply

You may see merge conflicts (ie. lines of code which we both changed). VS code can help you resolve them.

from eleventy-garden.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.