[WIP] Header menu, content view, and setup wizard from mockup

[willy-b]

Working on the top menu from the 1st mockup. "View all", "Settings", and "+" buttons work to toggle those views. Mousing over the top menu fades in the search bar, but the search bar is nonfunctional.

[willy-b]

I see some new mockups came out on Friday. The =media/UI_Mockups/Mockup 2/= are only images, whereas content in =media/UI_Mockups/Mockup 1/= is at the HTML mockup stage. Going to switch to Mockup 2

[willy-b]

• Just pushed a basic content view allowing you to view Content body content.
• Added fragment URL based routing so you can back/forward and bookmark a piece of content.

[willy-b]

Single piece of content view (in progress):

Front-page view (in progress):

[kwolk]

Wow, the first post!

How much longer for this decentralised Reddit before we can all post?

[willy-b]

Added 'REPLY' and HEART buttons per Chris' mockup

[willy-b]

Datt initial setup modal WIP (from Chris' excellent mockup as always):

'#/setup' route maps to it

[willy-b]

@kwolk Soon I hope (I need to work faster ;-) ); best place to keep up with plans, etc is in the Datt slack: dattnetwork.slack.co

[ryanxcharles]

Hi Willy, great work. Some thoughts after an initial pass:

• Don't use jQuery
• hashbuf is always a buffer, never hex. Don't mix types.
• You did "git merge" to get changes into your PR. That is fine for now, but should be changed to a "git pull --rebase" before merging into master. A bunch of my commits appear in your PR. Rebase will make the commit history more linear.

Will add more comments later.

[willy-b]

Datt Setup - Create identity screen (from Chris' mockup) now works:

Datt Setup - Restore identity screen (from Chris' mockup) present but not functional yet:

[willy-b]

@ryanxcharles Thanks for the review. I can definitely rebase before we merge. Regarding jQuery: I'm ONLY using jQuery for showing/hiding the Bootstrap Modal (setup modal), because Bootstrap JS uses jQuery. Looking into removing that dependency.

[ryanxcharles]

Second pass (written before I noticed your above comments):

• For the bootstrap stuff that uses jQuery, just don't use bootstrap's javascript. All things can be accomplished without using it. If UI features are most easily accomplished with jQuery, just don't do those UI features now.
• I believe there are plugins for React to do routing. That is probably a better way than jQuery.
• CSS style should have two space indentation.
• HTML style should have two space indentation.
• Please limit commit message headers to 50 chars. Put remaining text in a message blow the header. See all of my commits for how to do this.

[willy-b]

Content/posts now support Markdown formatting. Added a body to user announcement messages which showcases this:

[willy-b]

Hey @ryanxcharles , Thanks again for the code review.

• Re jQuery: Good news, I am not using jQuery for routing. Only to support Bootstrap's modal transitions. We should replace that too but given it is <5 lines of total influence, I would argue that it is a post-MVP concern.
• I'll fix the 2-space indentation for HTML / CSS now
• When I rebase I will address the commit messages. Thanks for holding us to a high standard w.r.t. to our commit-style/documentation ; it will make it much more pleasant for developers coming on board later (and for ourselves in future)
• We can add React Router plugin, but I would argue the added complexity makes it a post-MVP move. I prototyped with and without and the code without is much simpler at this stage.

[willy-b]

N.B. almost all of this UI has been pulled back out of master and is now waiting in PR #93