New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unify code that defines layouts between app and marketing page break points #3116

Closed
kslottow opened this Issue Feb 8, 2018 · 17 comments

Comments

Projects
None yet
3 participants
@kslottow
Contributor

kslottow commented Feb 8, 2018

We should merge the layout code between the app and marketing page.

We should have these sizes:

  • > 1400 large (desktop)
  • 1024-1400 medium (small desktop)
  • 768-1024 small (mobile landscape/tablet portrait)
  • < 768 xtra-small (mobile portrait)
@kslottow

This comment has been minimized.

Contributor

kslottow commented Mar 22, 2018

Reasoning from Ben:

It still makes sense to me to define the mobile portrait vs. mobile landscape breakpoint, even if it's not used at first.

@bendk bendk added this to the Sprint 39 milestone May 30, 2018

@bendk

This comment has been minimized.

Member

bendk commented May 30, 2018

I'm going to be doing this one in the gh-enterprise-1981 branch, because that one has a layout that's complex enough to deserve a good foundation.

@bendk bendk modified the milestones: Sprint 39, Sprint 40 May 30, 2018

@kslottow

This comment has been minimized.

Contributor

kslottow commented Jun 1, 2018

This will fix the following problem observed on production: https://amara.org/en/teams/judit-testing/manage/requests/
impersonate: kslottow
OS Sierra, Chrome 66

Between screen widths of 1195 and 1331 px, all tabs show on a horizontal line. Once the width gets WIDER than 1332, however, "videos" (the last tab) jumps down one line

Screen Shot 2018-05-30 at 10.11.20 PM.png

@bendk

This comment has been minimized.

Member

bendk commented Jun 5, 2018

This one is implemented. The main things to test are:

  • That the UI code responds to those breakpoints and only those breakpoints. Things shouldn't change except when you transition from one to another (unlike production where you see the "snapping behavior" at weird times)
  • The footer should be "sticky". If there's only a little bit of content on the page, it should still go all the way to the bottom.
  • I didn't break any other layout code.

You should only need to test the futureui pages for this one.

@bendk bendk modified the milestones: Sprint 40, Sprint 41 Jun 13, 2018

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jun 16, 2018

  • Home page layout breaks on wide screens (> 1400 px) with animations not fitting in or falling apart.

  • Video Info tab on the video page and Subtitle Info tab on the language page fall apart when the screen width goes under 1300 px

screenshot from 2018-06-16 07 34 10

  • Language drop-down selectors get messed up in extra-small screen width (<768 px)

screenshot from 2018-06-16 08 09 49

  • Subtitle request entries spill over in extra-small screen width:
    screenshot from 2018-06-16 08 13 40

  • Facebook and Twitter icon are missing in the footer, is this intentional?

@bendk

This comment has been minimized.

Member

bendk commented Jun 20, 2018

I made #3271 for the issue with the language selector. Let's work on that issue separately since it's not a regression.

@bendk

This comment has been minimized.

Member

bendk commented Jun 20, 2018

 Subtitle request entries spill over in extra-small screen width

This one isn't a regression from production and we're actually planning on redesigning these lists as a whole anyways, so I think we can ignore this for now.

@bendk

This comment has been minimized.

Member

bendk commented Jun 20, 2018

I added back the facebook/twitter icons. They're slightly different than production since we're using font-awesome for them now.

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jun 22, 2018

This is what the Facebook / Twitter icons look like on the branch:

screenshot from 2018-06-22 07 43 21

"Members" page does not respect all the listed breakpoints - spills over the edge of the screen on screen widths smaller than 768 px.

@bendk

This comment has been minimized.

Member

bendk commented Jun 25, 2018

Facebook/twitter is working for me. Can you try shift-reload?

I think that members page behavior is somewhat intended. It works the same way on production. I think the idea is to use a single column when you get to smaller widths. I don't think it's very useful and we should revisit that, but it doesn't seem like a regression.

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jun 26, 2018

FB/Twitter still a problem, in any browser, and force reloading would not help.

@bendk

This comment has been minimized.

Member

bendk commented Jun 26, 2018

What page are you viewing?

@bendk bendk modified the milestones: Sprint 41, Sprint 42 Jun 27, 2018

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jun 27, 2018

Marketing / futureui pages.

@bendk

This comment has been minimized.

Member

bendk commented Jun 27, 2018

Hmm, I'm seeing them. Can we try merging, then checking it out on dev?

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jun 27, 2018

OK.

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jul 3, 2018

@bendk: So FB and Twitter icons are missing on dev as they were on my local instance.

@PCF-Testing

This comment has been minimized.

Member

PCF-Testing commented Jul 5, 2018

Deployed.

@PCF-Testing PCF-Testing closed this Jul 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment