Responsive

[xy2z]

Not coming in v1.0 Waiting with this til I've found the perfect rich text editor

[calvinmorett]

Are you looking to use a certain responsive framework?

[xy2z]

I usually just make it myself.. but do you know any good frameworks?

[calvinmorett]

Since you seem to like flexbox, suggest we try https://bulma.io

Other suggestions can be found here: https://cssreset.com/flexbox-css-frameworks/

[xy2z]

I already use Bulma for login and register, so that would be great.

[calvinmorett]

So I'm currently working on a responsive design and I would like your thoughts on how you would like a user to experience the site.

I have some ideas and I coded one using Bulma, but it didn't work out how I envisioned it, so I felt I should get your input before going any further. I've since transitioned to using grd.css, because it is easier to use, and I'm more familiar with it. It's also a CSS grid framework using Flexbox, and easier than Bulma for design.

These are the ways I imagine the mobile views to be. The colors are just there to better signify what panel of the design you're looking at.

---

I think because I want to do style changes, I think including them in while working on a responsive version is the best way to go. Here is a live shot of what I've been working on.

The current version of a quick, responsive design. is Sidebar stacked on Notes List stacked on Editor View. Quick video showing this in the browser. https://drive.google.com/file/d/1Uwa_X6IXaQGZyNiYPIUU4Ibu06QQihZO/view

[xy2z]

I like "mobile view 2". It's more "minimalistic" when viewing the note, and fast to navigate to other notes/notebooks. 👍

Styles: Notebook Sidebar: Looks really nice!

Notes-sidebar: I think the starred takes too much attention. I'd prefer the active note to have most attention, so its always clear which note you have open. One problem with "new note" button is if the user has alot of notes, it will not be visible (in bottom)? I think putting it on top would be better, so it's always the same position.

[calvinmorett]

Okay, I'm glad you're in favor of the one that I like and think would be a better user experience. Considering using ,https://slideout.js.org

• Notebooks sidebar: thank you, I feel users shouldn't have that much to worry about on that panel, so it will also give us more space because of that.

Starred note does attract a lot of attention, I think I've come up with a solution. https://codepen.io/CalvinMorett/full/vobJaG

I will try more positioning for the new notes button, inside the notes-list panel, but currently it feels weird having it on the top to me for some reason. I understand your reasoning for the button being on the bottom though. I think having it in a moving place, while maybe not considered very nice in terms of usability: Making people think about where to go: I think it does create a sort of mindfulness. I think it's easy to get carried away and create note after note, with no real intention where the notes will end up. This creates a sort of 5s rule, of getting to the button. And at the same time, clicking a button on the bottom of the list where it will end up seems very familiar at the same time. It's less of a game-ification in adding notes and also there is the alternative place of adding notes, in the left panel sidebar.

More to come.

[calvinmorett]

Currently, working on finalizing how it looks with 2 scroll bars. Proving to be more difficult to implement than I want. Will npm change anything in the build process?

[xy2z]

It shouldnt. The only difference is you have to add it via npm instead of adding it via <script>

[xy2z]

How is it going @calvinmorett ? 😃

[calvinmorett]

@xy2z hey, sorry for the delay, I know you're sort of waiting on my end for some other steps, so I'll try to punch this through this weekend. I was having issues with figuring out how to add two sidebars, while at the same time actually making it easier for the user, instead of more to deal with. Maybe I'm overthinking it.

example: https://codepen.io/CalvinMorett/full/YzKpOGZ

[xy2z]

@calvinmorett No problem - Sounds good :) Yeah just keep it simple, we can always improve it later :)

It works great! This is just for mobile though right? So left sidebar is for notebooks and right is notes?

[calvinmorett]

Mobile yes, correct!

On Fri, Sep 27, 2019 at 9:12 AM xy2z notifications@github.com wrote:

@calvinmorett https://github.com/calvinmorett No problem - Sounds good :) Yeah just keep it simple, we can always improve it later :)

It works great! This is just for mobile though right? So left sidebar is for notebooks and right is notes?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xy2z/dopenote/issues/6?email_source=notifications&email_token=ACY5OBJS5SKVHOI7O72FDZTQLYBEJA5CNFSM4GWLAX52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7Y3B5Y#issuecomment-535933175, or mute the thread https://github.com/notifications/unsubscribe-auth/ACY5OBMS7G3PB52N3VEPPUTQLYBEJANCNFSM4GWLAX5Q .

[calvinmorett]

@xy2z I've tried to implement this design a couple of times, and I've been trying to figure out if there is any workarounds to do this manually, because I run into issues when trying to install docker, so I'm unable to install and use it.

[xy2z]

@calvinmorett you don't need docker. I've created gitter.im chat so we can talk, it's easier :) https://gitter.im/dopenote/community

[xy2z]

@calvinmorett did you get it to work?

[calvinmorett]

xy2z, No dice, kinda confused on reading through the install stuff, can I still use composer/artisan?

[xy2z]

Have you followed the dev guide in https://dopenote.gitbook.io/docs/setup-dev-environment ?

Yes you can still use composer/artisan.