search

novuhq / novu

Open-Source Notification Platform. Embeddable Notification Center, E-mail, Push and Slack Integrations.
https://novu.co
Other
35.36k stars 3.92k forks source link

[NV-474] - Fit to screen's lentgh/size #666

Closed novubot closed 1 year ago

novubot commented 2 years ago

Why?

For some screens the bottom third is totally empty today. For larger screen it's very limiting the usable space.

How?

Let's take advantage of that space by modifying the UI to fit the screen size. Making the screen fit inside the viewable port 100vh-(the existing header and spacing)

Where?

In the apps/web project, to get the latest workflow editor, checkout from the workflow branch.

See:

image.png

--\ Created via Raycast

fosa-ij commented 2 years ago

Hi, good day. I would love to work on this project and I'd want to know the required skills needed for this project. And also a bit more information on what I'm to do as I don't really get the project description

AakashRaj20 commented 2 years ago

@scopsy hey I would like to try this issue

scopsy commented 2 years ago

Hi @fosa-ij sure! So you would need some understanding of React and CSS for this to work. In the screenshot, You can see that the card of the "Workflow Editor" only takes 60-70 percent of the screen height. What we won't is to utilize the entire screen height of the user.

If this still doesn't make sense feel free to reach out on Discord, and if you think you want to try something else, let me know so I can assign @AakashRaj20 for it 🙏

fosa-ij commented 2 years ago

Hi @fosa-ij sure! So you would need some understanding of React and CSS for this to work. In the screenshot, You can see that the card of the "Workflow Editor" only takes 60-70 percent of the screen height. What we won't is to utilize the entire screen height of the user.

If this still doesn't make sense feel free to reach out on Discord, and if you think you want to try something else, let me know so I can assign @AakashRaj20 for it 🙏

okay @scopsy thanks a lot, but React is not part of my stack, I would like to pass it on to @AakashRaj20. But anything in the mix of CSS and javascript would fit just fine. Thanks for the effort.

davidsoderberg commented 2 years ago

@AakashRaj20 I have now assigned you 😄

AakashRaj20 commented 2 years ago

@AakashRaj20 I have now assigned you smile

Thank you 😁

AakashRaj20 commented 2 years ago

@AakashRaj20 I have now assigned you smile

Hey I have tried setting up the project multiple times but nothing loads on the web page it remains empty. Please help me setting up the project Locally.

scopsy commented 2 years ago

Sure @AakashRaj20 could you please send me a DM on Discord so we can schedule a call ?

AakashRaj20 commented 2 years ago

Sure @AakashRaj20 could you please send me a DM on Discord so we can schedule a call ?

ok sure

jainpawan21 commented 2 years ago

Hi @scopsy, if @AakashRaj20 is not working on this issue, can you please assign this to me?

scopsy commented 2 years ago

@AakashRaj20 unfortuantly looks like we couldn't meet, let me know if you want to try and schedule again 🙏

AakashRaj20 commented 2 years ago

@AakashRaj20 unfortuantly looks like we couldn't meet, let me know if you want to try and schedule again 🙏 Yes I tried setting up the project but I was not able to it would he great if you can take a look again tommorow any time you are free.

scopsy commented 2 years ago

Couldn't find you on Discord @AakashRaj20 what is your handle there?

AakashRaj20 commented 2 years ago

Couldn't find you on Discord @AakashRaj20 what is your handle there?

itachi20#7614

jainpawan21 commented 2 years ago

Hi @AakashRaj20 Do you need any help in this? You can message us in help-needed channel in discord or DM me

Ian-Yy commented 2 years ago

Hi, can I give a try on this issue?

Ian-Yy commented 2 years ago

Hi, I have analyzed the issue and would like some help on this.

I think this is happening because the PageContainer does not fit to screen size too. Thus, even setting the React Flow in the Workflow Editor height: 100% would not work. I tried setting both the PageContainer and React Flow to 100% and it works but it will affect every other pages. Another method is to hardcode the height of React Flow to 60-70vh.

Please let me know which methods will be better or if there's a better way. Thanks

scopsy commented 2 years ago

@Ian-Yy do you have a screen shot of how it will affect other pages?

Ian-Yy commented 2 years ago

Sorry for taking so long on this. When I was taking the screen shot for the other pages, I realized setting the height: 100% will break those pages where their height needs to be more than 100% such as Getting Started, Integration Store and etc. So, I personally think to minimize the affected page, it would be better setting the height of React Flow to vh.

I also tried setting top down minHeight: 100% which should make every page utilize 100% of the height but I have no idea why it would not work on the novu. I even have a working code snippet that is structurally similar that works. Just let me know if you think setting all pages to utilize 100% height is a better direction then I can get the code snippet up and troubleshoot why it does not work on novu.