Horizontal Layout

[J3RN]

The new horizontal layout

TODO:

• Get sections side-by-side
• Smooth links between sections
• Parallaxing background
• Limit the downward scrolling to be section-specific
• Fix animation on browsers other than Firefox
• Optimize sections for theoretically infinite length
• Fix admin section
• Fix expanding blog posts outside of Chrome
• Make carets look less terrible

[mrogman]

The code looks good as far as I can tell but the page doesn't finish loading and becomes unresponsive for me so I can't check out anything you're doing in the browser. The issue is probably on my end.

[J3RN]

@D30XY I'm sorry to hear that it doesn't load for you. If you can figure it out, I'd be happy to have your help.

[mrogman]

Ok, problem solved. However, the scroll animation still isn't working

[mrogman]

Well, I haven't identified the culprit but the animation works fine in firefox (broken in Chrome and Safari).

@J3RN What would you like to knock out next?

[J3RN]

I guess this is what I get for only testing against Firefox 😦 Right now I'm working on the parallax scrolling (I'm just writing it myself - it's trivial enough to not require a plugin).

That means the only thing left is optimizing the sections to be forever-long. It's pretty open to interpretation, but by all mean - go for it!

[J3RN]

Oh! And don't forget to pull first, there's lots of recent changes!

[mrogman]

Wait where are you putting the parallax? Is it going in <section class="header"> or in the background? I was thinking it would be in the background and the header section would be transparent acting as a viewing window for the parallax as you scrolled through the sections and would be full screen on the home page. If you had something else in mind I may need to go back and undo my last commit.

[J3RN]

I just finished the parallaxing. Unfortunately, I had to rollback your header shrinkage. It was supposed to look like that, as the image parallaxes in the background. Eventually we'll fix those headers up to be centered and pretty and whatnot.

Enjoy the parallaxing, though! 😄

[mrogman]

Nice, looks good!

[mrogman]

Alright guys -- One of the things I've been working on is getting the current section to remain centered in the viewport when resizing the browser window (previously the sections would expand, and the viewport did not follow the current section offset). I spun up two super hacky solutions to this problem, the latter of which I think looks much more 'natural' and is currently in use if you want to check it out.

If you want to check out the first one, open the previous commit with git checkout c93fb6fb0d04785f28d7154456b3f789ed954edb .

Alright, so here's how it works:

• When the window resize event is triggered:
  • Hide all sections except the current section
  • If currently viewing content, hide the header
  • Fix the current section to the top left corner of the viewport
• When the window resizeEnd event is triggered:
  • Restore all sections and hidden headers
  • Jump to the new current section offset upon restoration

This all happens seamlessly so that it looks like the section stays in place and resizes with the window, like one would expect. After the resize is finished, the user is able to continue on browsing normally.

[mrogman]

Also, I created a responsive grid with breakpoints for the nav bar so that it resizes nicely. Only problem is that it breaks when the admin link is inserted. The problem is that each link container spans a column and when the admin link is added, there is one too many columns for the parent container. Since we are rethinking our login design (#52), I figure we can tack this issue onto it.

[J3RN]

@D30XY Nice work! Actually, we do have a grid system in place, which is Bourbon Neat. However, if it's working, I'd say don't fix it - at least for now.

[mrogman]

Sorry, I didn't phrase that properly. I did use the bourbon neat framework. I just gave the nav bar it's own row and split it up accordingly.

[J3RN]

OK, awesome! Thanks for clearing that up!

On Apr 20, 2015, at 6:40 PM, d30xy notifications@github.com wrote:

Sorry, I didn't phrase that properly. I did use the bourbon neat framework. I just gave the nav bar it's own row and split it up accordingly.

—
Reply to this email directly or view it on GitHub #51 (comment).

[J3RN]

Alright, to get this presentation-ready, what I want is to get the admin section working again. Other things can be done post-merge.

[mrogman]

Cool, let's do it. Can you explain what you mean by getting the admin section working again? Do you mean the admin link or is there something wrong with the admin screen?

[J3RN]

@D30XY I was referring to the "Date is required" thing when created blog posts. You mentioned it a little while back.

[mrogman]

Oh, right. Yeah, the date chooser only shows up in chrome and I'm not entirely sure yet if there's much we can do about it. However, I have set it to insert today's date by default if not specified (or there is no date picker available) so the date field is no longer required. This will at least allow the admin to add new posts in other browsers.

[mrogman]

I wonder if we should just ditch the date field altogether and just have it insert today's date upon creation because why would you compose a blog post and assign a different date to it anyway?

[J3RN]

This is the approach that I’m leaning towards.

On Apr 21, 2015, at 11:43 AM, d30xy notifications@github.com wrote:

I wonder if we should just ditch the date field altogether and just have it insert today's date upon creation because why would you compose a blog post and assign a different date to it anyway?

—
Reply to this email directly or view it on GitHub #51 (comment).

[mrogman]

It is done!

[mrogman]

The date field is also omitted for the events collection because it has the same name in the schema. Have we made a decision about what we are going to do with this section?

[J3RN]

@afuhrtrumpet I think we're ready to merge this.