Dev/singlepage - Githubissues

hagata commented 9 years ago

This is just about the last bit. The only thing left to do if you want would be to install something like Owl Carousel for the product demo section on the homepage. Otherwise, I can present the images all stacked (scroll down through them all) instead.

lorensr commented 9 years ago

Like new bg gradient. Good transitions btwn screen sizes. Thanks, like Owl for mobile but not for desktop. We prefer the current parlaywith.me interior pages. Maybe I could get your singlepage working w/ current interior, and you could do the .ai for #18, and then we're done?

hagata commented 9 years ago

👍 Yes, I meant only using Owl Carousel for mobile. It has a breakpoint thing that's like 'show X images on big screens, then show X and scroll for small'

I can re-do the interior, what about it are you looking to retain? e.g., Colors, top-nav? And yes, Thanks for reminding me of #18

lorensr commented 9 years ago

Oh great, thanks.

the inner styling is gone, like fee table spacing, cliffnote bg, list bullets + numbering

http://parlaywith.me/fees/ http://parlaywith.me/terms/ etc

second-level nav is not for fees or support pages, and has the four legal links - about, terms, privacy, security
feels drab/unbranded, whole page in black and grey. maybe queen+parlay and/or nav links green.
like current top-level nav: home, product, team, support, fees, legal, sign in
top-level nav current-page coloring, like is done on second-level nav:
nice things about menu bar are
- can open it after having scrolled to middle of one of the long pages like /terms
- more vertical room for nav items than there is horizontal room for nav items in non-nav setup not wedded to menu bar, if no bar, then question is how to fit nav,
- looks better on pages with the second-level nav - don't have two rows of links (or three in the case of below pic)

if didn't do menu bar, then how to fit nav links. home could be the logo, then we have two symmetrical rows of three, which i don't like the look of. could put sign in in top right, and then on iphone5 we have this:

and it could flex to one row on larger screens

and if no menu bar, then don't like repetitive footer links on short pages: support, fees, legal-about.

hagata commented 9 years ago

Ok, So I made a number of updates to the inner page including a fun parlay pattern background to keep it fun/ branded throughout the legal sections. made some updates to the menu and small breakpoints overall.

Wasn't 100% clear on the feedback regarding the mobile legal subnav, but I made some changes to that. There is still some opportunity there for tweaking the user experience—like a Top/ Home button

lorensr commented 9 years ago

Haha, nice bg. Do you dislike how either green logo and/or green top nav links look?

On Tue, Aug 4, 2015 at 12:50 PM, Genki Hagata notifications@github.com wrote:

Ok, So I made a number of updates to the inner page including a fun parlay pattern background to keep it fun/ branded throughout the legal sections. made some updates to the menu and small breakpoints overall.

Wasn't 100% clear on the feedback regarding the mobile legal subnav, but I made some changes to that. There is still some opportunity there for tweaking the user experience—like a Top/ Home button

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/pull/19#issuecomment-127672530.

lorensr commented 9 years ago

if you scroll down far enough, bg runs into lines :)

hagata commented 9 years ago

It's hard to tell from that ss, what lines?

hagata commented 9 years ago

Oh, and for the green, I decided to keep it dark $pistol colored for more contrast, especially on poorly calibrated desktop monitors. The thin lines of type and on the logo tend to get 'fuzzy'. I can try a darker green than before, but much brighter than the $pistol green

lorensr commented 9 years ago

i don't know what they are, but they replace the fun background if you scroll most of the way down on the terms page on chrome mobile emulator

hagata commented 9 years ago

Interesting. I was able to reproduce it only in Chrome emulator, but not on an actual device (iPhone 5s, Sam. Galaxy S4) or in another browser. Should be OK, lmk if it isn't.

lorensr commented 9 years ago

Oh great, sorry, thanks

On Tuesday, August 4, 2015, Genki Hagata notifications@github.com wrote:

Interesting. I was able to reproduce it only in Chrome emulator, but not on an actual device (iPhone 5s, Sam. Galaxy S4) or in another browser. Should be OK, lmk if it isn't.

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/pull/19#issuecomment-127804287.

lorensr commented 9 years ago

Is this the right way to add js and css to gulp?

gulp.task('scripts', function() {
  return gulp.src([
    './_includes/**/*.js',
    './main.js',
    './bower_components/owl-carousel2/dist/owl.carousel.min.js'
  ])
...
gulp.task('component-styles', function(){
  return gulp.src([
    './_includes/**/*.scss',
    './bower_components/owl-carousel2/dist/assets/owl.carousel.min.css',
    './bower_components/owl-carousel2/dist/assets/owl.theme.default.min.css'
  ])

And how do I get liquid to ignore bower_components?

 Liquid Exception: Variable '{{' was not properly terminated with regexp: /\}\}/ in bower_components/owl-carousel2/docs_src/templates/pages/docs/dev-buildin-plugins.hbs
jekyll 2.5.3 | Error:  Variable '{{' was not properly terminated with regexp: /\}\}/

hagata commented 9 years ago

yes, I'm using Gulp-concat to just concat files together into global.js, so you can double check after running gulp if the owl-carousel js ended up in global.js. Same goes for the css. The only slight difference is that the component-styles task is concating things into an .scss file, which Jekyll then takes care of, into main.css

as for excluding, it looks like you were just missing quotes in config.yml just add exclude: ['bower_components'] under the comment/ under the sass line and it will work. If it doesn't, delete the _site folder and rerun gulp.

Edit ~~I committed the exclude to config.yml~~ Make sure, if removing bower components, to link up the dependencies somewhere else, like jquery.

lorensr commented 9 years ago

just thought i'd share this funny v1 carousel ;) it works! i can swipe the mini-phones!

hagata commented 9 years ago

👍nice! 😁

lorensr commented 9 years ago

OMG got hung up for a while banging my head on owl API not working. realized after reimplementing stuff that it was because i was looking at v1.x docs and using v2 lib 😝

lorensr commented 9 years ago

Getting a github pages build error "The file css/main.scss contains syntax errors. For more information, see https://help.github.com/articles/page-build-failed-markdown-errors." on gh-pages branch. Serves fine locally. Installed the right versions of jekyll, jekyll-sass-converter, and sass that they use: https://pages.github.com/versions/ . This something you've seen before? Here's the file: https://github.com/parlaywithme/pweb/blob/gh-pages/css/main.scss

hagata commented 9 years ago

I haven't seen this before. Where are you seeing the error?

lorensr commented 9 years ago

It's emailed to me when I push. No further details.

On Wednesday, August 5, 2015, Genki Hagata notifications@github.com wrote:

I haven't seen this before. Where are you seeing the error?

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/pull/19#issuecomment-128170369.

lorensr commented 9 years ago

fixed by removing css/components.scss from gitignore

hagata commented 9 years ago

Nice. 😆 On Aug 5, 2015 3:52 PM, "Loren Sands-Ramshaw" notifications@github.com wrote:

fixed by removing css/components.scss from gitignore

— Reply to this email directly or view it on GitHub https://github.com/parlaywithme/pweb/pull/19#issuecomment-128174307.

parlaywithme / pweb

Dev/singlepage #19