feat: prevent scrolling the rest of the page when a modal is open #1617

Merged
konrad merged 2 commits from feature/stop-body-scrolling-when-modal-is-open into main 2022-03-27 20:42:21 +00:00
Owner

Based on this article: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

Not sure if there's a more "vue-y" way to do this but it works pretty good. (I don't think there's a vue-way to do this because we need to manipulate the body tag which is outside the scope of the vue app?)

Based on this article: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ Not sure if there's a more "vue-y" way to do this but it works pretty good. (I don't think there's a vue-way to do this because we need to manipulate the body tag which is outside the scope of the vue app?)
konrad force-pushed feature/stop-body-scrolling-when-modal-is-open from ab71f12bfa to 8dbb9c2fde 2022-02-27 15:09:05 +00:00 Compare
Member

Hi konrad!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://1617-feature-stop-body-scrolling-when--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi konrad! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://1617-feature-stop-body-scrolling-when--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.
Contributor

It may be nice to put this into a composable, to easily use the "scroll lock" functions in other components when needed

It may be nice to put this into a composable, to easily use the "scroll lock" functions in other components when needed
Member

It may be nice to put this into a composable, to easily use the "scroll lock" functions in other components when needed

Like this one: https://vueuse.org/core/usescrolllock/

> It may be nice to put this into a composable, to easily use the "scroll lock" functions in other components when needed Like this one: https://vueuse.org/core/usescrolllock/
Author
Owner

Vueuse never ceases to amaze me. Will change it!

Vueuse never ceases to amaze me. Will change it!
konrad force-pushed feature/stop-body-scrolling-when-modal-is-open from 8dbb9c2fde to f92aeed540 2022-03-22 21:48:41 +00:00 Compare
Author
Owner

Now using vueuse's function for this.

Now using vueuse's function for this.
konrad merged commit f9b7e2fd76 into main 2022-03-27 20:42:21 +00:00
konrad deleted branch feature/stop-body-scrolling-when-modal-is-open 2022-03-27 20:42:21 +00:00
dpschen reviewed 2022-04-09 22:12:00 +00:00
@ -86,0 +80,4 @@
defineEmits(['close', 'submit'])
const modal = ref<HTMLElement | null>(null)

Why not:

const modal = ref<HTMLElement>()
Why not: ```js const modal = ref<HTMLElement>() ```
Author
Owner

Don't I need to specify the default value?

Don't I need to specify the default value?

The default would be undefined in that case. Meaning:

ref<HTMLElement>() is identical to ref<HTMLElement | undefined>(undefined)

The default would be `undefined` in that case. Meaning: `ref<HTMLElement>()` is identical to `ref<HTMLElement | undefined>(undefined)`
Author
Owner

Ohh okay, that makes sense. I'm kind of used to setting everything to null if its not defined, coming from the backend. But undefined makes more sense in the js world.

Ohh okay, that makes sense. I'm kind of used to setting everything to `null` if its not defined, coming from the backend. But `undefined` makes more sense in the js world.
This repo is archived. You cannot comment on pull requests.
No description provided.