{"action":"closed","issue":{"url":"https://api.github.com/repos/reactioncommerce/reaction/issues/1710","repository_url":"https://api.github.com/repos/reactioncommerce/reaction","labels_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/1710/labels{/name}","comments_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/1710/comments","events_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/1710/events","html_url":"https://github.com/reactioncommerce/reaction/issues/1710","id":200294416,"number":1710,"title":"A few UI related change suggestions (Will help a lot with mobile devices)","user":{"login":"ch-luke","id":20023331,"avatar_url":"https://avatars1.githubusercontent.com/u/20023331?v=4","gravatar_id":"","url":"https://api.github.com/users/ch-luke","html_url":"https://github.com/ch-luke","followers_url":"https://api.github.com/users/ch-luke/followers","following_url":"https://api.github.com/users/ch-luke/following{/other_user}","gists_url":"https://api.github.com/users/ch-luke/gists{/gist_id}","starred_url":"https://api.github.com/users/ch-luke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ch-luke/subscriptions","organizations_url":"https://api.github.com/users/ch-luke/orgs","repos_url":"https://api.github.com/users/ch-luke/repos","events_url":"https://api.github.com/users/ch-luke/events{/privacy}","received_events_url":"https://api.github.com/users/ch-luke/received_events","type":"User","site_admin":false},"labels":[{"id":500154908,"url":"https://api.github.com/repos/reactioncommerce/reaction/labels/design","name":"design","color":"167C80","default":false}],"state":"closed","locked":false,"assignee":{"login":"rymorgan","id":20409254,"avatar_url":"https://avatars0.githubusercontent.com/u/20409254?v=4","gravatar_id":"","url":"https://api.github.com/users/rymorgan","html_url":"https://github.com/rymorgan","followers_url":"https://api.github.com/users/rymorgan/followers","following_url":"https://api.github.com/users/rymorgan/following{/other_user}","gists_url":"https://api.github.com/users/rymorgan/gists{/gist_id}","starred_url":"https://api.github.com/users/rymorgan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rymorgan/subscriptions","organizations_url":"https://api.github.com/users/rymorgan/orgs","repos_url":"https://api.github.com/users/rymorgan/repos","events_url":"https://api.github.com/users/rymorgan/events{/privacy}","received_events_url":"https://api.github.com/users/rymorgan/received_events","type":"User","site_admin":false},"assignees":[{"login":"rymorgan","id":20409254,"avatar_url":"https://avatars0.githubusercontent.com/u/20409254?v=4","gravatar_id":"","url":"https://api.github.com/users/rymorgan","html_url":"https://github.com/rymorgan","followers_url":"https://api.github.com/users/rymorgan/followers","following_url":"https://api.github.com/users/rymorgan/following{/other_user}","gists_url":"https://api.github.com/users/rymorgan/gists{/gist_id}","starred_url":"https://api.github.com/users/rymorgan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rymorgan/subscriptions","organizations_url":"https://api.github.com/users/rymorgan/orgs","repos_url":"https://api.github.com/users/rymorgan/repos","events_url":"https://api.github.com/users/rymorgan/events{/privacy}","received_events_url":"https://api.github.com/users/rymorgan/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2017-01-12T07:11:28Z","updated_at":"2018-02-01T16:15:56Z","closed_at":"2018-02-01T16:15:56Z","author_association":"NONE","body":"1. In dropdown.js when logging out redirect to home page (else you may get some permissions error or info page). Also do a page reload as the home / landing page seems to lock if you don’t.\r\n`\"click #logout\": (event, template) => {\r\n  event.preventDefault();\r\n  template.$(\".dropdown-toggle\").dropdown(\"toggle\");\r\n  // Meteor.logoutOtherClients();\r\n  Meteor.logout((error) => {\r\n    if (error) {\r\n      Logger.warn(\"Failed to logout.\", error);\r\n    }\r\n    // Always return to home page\r\n    Router.go(\"/\");\r\n    Router.reload();\r\n  });\r\n},`\r\n\r\n2. In full screen mode (i.e. 992px and over) when logged in as Admin and open any product the screen width is distorted and Admin column / panel is hidden.\r\n\r\n3. Changing the quantity in the “Add to cart” button is pretty difficult to do on a mobile. One possible suggestion is to include + and - buttons like the image below\r\n\r\n<img width=\"586\" alt=\"screen shot 2017-01-12 at 1 00 52 pm\" src=\"https://cloud.githubusercontent.com/assets/20023331/21880181/179a81cc-d8d0-11e6-9130-eca3d90da363.png\">\r\n\r\n4. Profile page doesn’t fit / wrap on mobile. Suggest changing the primary div class from \"flex flex-column flex-align-center flex-2x container-lg” to “… container-xs”\r\n\r\n5. Footer does not stay down. Impacts many pages including both admin sections like accounts but also front end customer pages like notifications and even the product grid (if you only have a few products ). A solution to this could be to implement a flex-box for the main tag.\r\n\r\nE.g.\r\n`.page #main {\r\n  height: 100vh;\r\n  display: flex;\r\n  flex-flow: column;\r\n\r\n  .header {\r\n    .flex(0 1 88px);\r\n  }\r\n\r\n  // Main section which grows to fit 100% of remaining gap\r\n  .section {\r\n    .flex(1 1 auto);\r\n  }\r\n\r\n  .footer {\r\n    .flex(0 1 150px);\r\n  }\r\n}`\r\n\r\n6. Using the 375px media break (aka iPhone) for the following discussion. I have found with a few changes the theme / layout can handle mobile, but we need to incorporate the following guidelines:\r\n\r\n- Look at reducing padding / margin sizes in general (i.e. even 20px padding left and right really reduces screen real-estate. (e.g. main menu icons - cart, notifications & product details …)\r\n\r\n- Dropdown boxes like notifications, language select (which I show even on this small media), login & account details, search etc need some tweaking ...\r\ni. Reduce the min-width size to 250px (e.g. the notifications dropdown in 290 and half hidden)\r\nii. Move lesser important items to the vertical menu (e.g. search & lang select)\r\niii. For all screen sizes change dropdown position (e.g. right edge of dropdown is in-line with the right-edge of the menu icon:\r\n.notify-drop.dropdown-menu {\r\n  left: auto !important;\r\n  right: 0px;\r\n  margin-top: 0px;\r\n  min-width: 250px !important;\r\n}\r\nAnd then for 375 media add \"right: -50px !important;\" (edges don’t align but at least full boxes are shown )"}}
{"actor":{"display_login":"aaronjudd"}}