search

xy2z / dopenote

đź“ť Self-hosted modern webapp for notes - Free and open source - (WORK IN PROGRESS)
https://dopenote.gitbook.io/docs/
GNU General Public License v3.0
24 stars 9 forks source link

Loading screen #52

Open xy2z opened 5 years ago

xy2z commented 5 years ago

When loading the app, show a nice loading "screen" untill Vue is complete.

calvinmorett commented 5 years ago

I would like to work on some interaction with this. Do we have any idea what is the best approach? I have a few ideas.

On Sat, May 4, 2019 at 9:27 AM xy2z notifications@github.com wrote:

When loading the app, show a nice loading "screen" untill Vue is complete.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/52, or mute the thread https://github.com/notifications/unsubscribe-auth/ACY5OBKYCZT3YVHZR46XDXLPTWFK5ANCNFSM4HKY4QPQ .

xy2z commented 5 years ago

Awesome! It needs to be light so it wont take longer for loading the page. I was thinking of using font awesome, since its already in use.

So i was thinking it could an absolute div floating over the app, maybe with some background opacity. And just a css animated loading icon, and maybe a loading text.

What ideas do you have?

calvinmorett commented 5 years ago

Very similar to my idea, just design wise - sure there are a million ideas. Just a div like you suggest is the first step so let’s start there.

Hmm could do something with font awesome animation really easily let me make a couple of ideas and send them

On Sat, May 4, 2019 at 4:17 PM xy2z notifications@github.com wrote:

Awesome! It needs to be light so it wont take longer for loading the page. I was thinking of using font awesome, since its already in use.

So i was thinking it could an absolute div floating over the app, maybe with some background opacity. And just a css animated loading icon, and maybe a loading text.

What ideas do you have?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/52#issuecomment-489362241, or mute the thread https://github.com/notifications/unsubscribe-auth/ACY5OBPG5TVTMYDC6YB53P3PTXVN7ANCNFSM4HKY4QPQ .

calvinmorett commented 5 years ago

First of all, I would like to also include this because it's a easy, and is just plug-n-play so to speak. I've used it before and it's got some really interesting templates, that can fit for anything.

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

No need to hook into any of your code, progress is detected automatically.

https://github.hubspot.com/pace/docs/welcome/

--- Anyways, something I worked on quickly that might fit, 1kb in css - can be edited down some to go down in size a bit too. https://codepen.io/CalvinMorett/full/vwYrJd

xy2z commented 5 years ago

This looks really nice! Is it using pace.js? Altough this means we need 1kb of css and 5kb of pace.js (and a pace css theme?) to work... But I feel like in the future we can also use Pace for when saving (notes, settings, etc.), since it works with ajax, so I'm up for seeing if it works as expected.

calvinmorett commented 5 years ago

This looks really nice! Is it using pace.js?

This is just a rough idea, like I said there are a million. This isn't with pace.js

Altough this means we need 1kb of css and 5kb of pace.js (and a pace css theme?) to work...

Sorry, I was confusing in my write up. My css file there could probably be less than <1kb if I edited it down and merged some things. Though, I do think pace would be what you're looking for.

But I feel like in the future we can also use Pace for when saving (notes, settings, etc.), since it works with ajax, so I'm up for seeing if it works as expected.

I think it looks really clean, and it can integrate easily.

xy2z commented 5 years ago

But we still need pace.js to actually know how far the progress is, with your example? Or else the loading bar will just loop endlessly.

I think we should use pace.js, I can definitely see alot of uses for this. Can you integrate the one you made with pace.js?

calvinmorett commented 5 years ago

Yes, for sure I will try to integrate it, I haven’t done it before but was planning on doing this at some point because pace is powerful! I will focus on doing this integration and share the results, I hope I am able to create the same sort of styling if not - at least something simple enough where we can reiterate on it later, to fit the overall application.

On Mon, May 6, 2019 at 8:01 AM xy2z notifications@github.com wrote:

But we still need pace.js to actually know how far the progress is, with your example? Or else the loading bar will just loop endlessly.

I think we should use pace.js, I can definitely see alot of uses for this. Can you integrate the one you made with pace.js?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/52#issuecomment-489595673, or mute the thread https://github.com/notifications/unsubscribe-auth/ACY5OBOOKYBYFKZN7QB7QMTPUAMY5ANCNFSM4HKY4QPQ .

calvinmorett commented 5 years ago

https://codepen.io/CalvinMorett/full/eamPeO

CTRL + R to keep refreshing the animation. Let me know your thoughts.

Download: https://gist.github.com/calvinmorett/2d79962831b730be1d34732077d25281

xy2z commented 5 years ago

Looks good! Does pace requires jquery? I'd prefer not to add it to the app, just for a loader.

calvinmorett commented 5 years ago

No it doesn't. Link updated, JQuery removed.

xy2z commented 5 years ago

Good :) So it's ready to implement? Feel free to submit a PR. If you have any questions don't hesitate to ask :)

calvinmorett commented 5 years ago

What is the best way to implement this on a pull request?

On Tue, May 7, 2019 at 9:12 AM xy2z notifications@github.com wrote:

Good :) So it's ready to implement? Feel free to submit a PR. If you have any questions don't hesitate to ask :)

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/52#issuecomment-490073383, or mute the thread https://github.com/notifications/unsubscribe-auth/ACY5OBON67VVN6XN6NLQVE3PUF53TANCNFSM4HKY4QPQ .

xy2z commented 5 years ago

Oh I just noticed the body css has background: #333, this should probably be removed or else it would affect the app? Can the background be set on .pace?

  1. Add the CSS file to public/css/loader.css
  2. Add pace script to https://github.com/xy2z/dopenote/blob/master/resources/views/app.blade.php (eg. line 13) And add the CSS in the styles section (line 8)
  3. Test :)