openedx / openedx-app-ios

The mobile app for iOS for the Open EdX Platform.
Apache License 2.0
19 stars 13 forks source link

feat: Problem with course menu position on iPad and in Landscape mode on iPhone #292

Closed forgotvas closed 3 months ago

forgotvas commented 4 months ago

[iOS] Problem with course menu position on iPad and in Landscape mode on iPhone #234

During that ticket was added accessibility injection for increase font size inside webview that depends on accessibility font size. Paddings based on readability content size that will increase if user will reduce font size and will reduce if user will increase font size. Demo video

Portrait Changes Before|After --|-- ![before01](https://github.com/openedx/openedx-app-ios/assets/480059/7b1c0838-caa9-4ba2-be96-0eccff39df30)|![after01](https://github.com/openedx/openedx-app-ios/assets/480059/e5f4e2cc-5d56-4d45-b17b-13b0effe7e84) ![before02](https://github.com/openedx/openedx-app-ios/assets/480059/f4b16517-5c2f-4db1-ac2d-8fe233d613a8)|![after02](https://github.com/openedx/openedx-app-ios/assets/480059/d07bc97a-e2a7-4e07-841f-7eff6d677743) ![before03](https://github.com/openedx/openedx-app-ios/assets/480059/a6b9ebec-e4de-496a-8378-a6166788a382)|![after03](https://github.com/openedx/openedx-app-ios/assets/480059/f493c2b0-34bb-47e2-bf88-c6aaa2717abc) ![before04](https://github.com/openedx/openedx-app-ios/assets/480059/dfcfc74e-b3bf-412a-86b7-d48cdeb8935a)|![after04](https://github.com/openedx/openedx-app-ios/assets/480059/d88062a2-5e9f-47e0-8b33-922bfb73c9db) ![before05](https://github.com/openedx/openedx-app-ios/assets/480059/485d09de-dceb-455c-b929-94256b93fe4d)|![after05](https://github.com/openedx/openedx-app-ios/assets/480059/598f078c-3735-4c68-aac6-e402cf7564a4) ![before06](https://github.com/openedx/openedx-app-ios/assets/480059/6746fa27-ba32-471a-b23a-86a51c71985c)|![after06](https://github.com/openedx/openedx-app-ios/assets/480059/767672e1-a582-4bb7-959d-72a97ef14788) ![before07](https://github.com/openedx/openedx-app-ios/assets/480059/05ea6dc4-78c6-4c78-a279-eaefc9c0b92e)|![after07](https://github.com/openedx/openedx-app-ios/assets/480059/5ace1ac1-23d6-40f0-af16-7c138635024e) ![before08](https://github.com/openedx/openedx-app-ios/assets/480059/6a882363-4c13-45a5-9e34-57977fd5725c)|![after08](https://github.com/openedx/openedx-app-ios/assets/480059/8b5e23cc-fff5-4e67-9e60-3cdfa2e99032) ![before09](https://github.com/openedx/openedx-app-ios/assets/480059/219eb8ba-9d0d-4f35-a29e-3eea8e29d6ce)|![after09](https://github.com/openedx/openedx-app-ios/assets/480059/a5cb7c6c-f9a3-40f1-8576-f3d81b96c919) ![before10](https://github.com/openedx/openedx-app-ios/assets/480059/bd9dc736-7fe1-4969-accb-1a56b2b165d5)|![after10](https://github.com/openedx/openedx-app-ios/assets/480059/5766126e-b909-43e2-8463-08bb734c65a1) ![before11](https://github.com/openedx/openedx-app-ios/assets/480059/c78ff397-455a-459b-9146-f9c9a25ce826)|![after11](https://github.com/openedx/openedx-app-ios/assets/480059/7ce496b7-0075-403f-9e26-5f6c711468f0) ![before12](https://github.com/openedx/openedx-app-ios/assets/480059/dacf688e-d78a-4c4e-bc45-6dd20d00de32)|![after12](https://github.com/openedx/openedx-app-ios/assets/480059/5abc6086-7ccb-42c2-8123-c294313336ab) ![before13](https://github.com/openedx/openedx-app-ios/assets/480059/56b6ad16-b58f-4d73-9ff0-e9ad5e04f407)|![after13](https://github.com/openedx/openedx-app-ios/assets/480059/2d673291-3c97-4705-bab3-a6d22eeb9fd5) ![before14](https://github.com/openedx/openedx-app-ios/assets/480059/f27f07fc-6338-4307-9ae4-fc6d45a8d3ea)|![after14](https://github.com/openedx/openedx-app-ios/assets/480059/cd302827-e6b8-4b3f-91cc-ccb28aed0f44) ![before15](https://github.com/openedx/openedx-app-ios/assets/480059/07507316-a1a0-41df-945b-2fa927e94a81)|![after15](https://github.com/openedx/openedx-app-ios/assets/480059/93e6d8d0-8d1c-440b-ab5c-a51ab9d2fa53) ![before16](https://github.com/openedx/openedx-app-ios/assets/480059/55ff9e3c-cdd2-452e-9d19-33b10708664e)|![after16](https://github.com/openedx/openedx-app-ios/assets/480059/8ab62dbc-da22-4dfc-a4a2-04239435acad) ![before17](https://github.com/openedx/openedx-app-ios/assets/480059/17487b04-e137-4476-872f-8be0abc3cbf5)|![after17](https://github.com/openedx/openedx-app-ios/assets/480059/fa1b53fa-05b1-409d-bec9-a38c771f6b83) ![before18](https://github.com/openedx/openedx-app-ios/assets/480059/b642a588-ca13-40e1-959b-71d97f4b9d99)|![after18](https://github.com/openedx/openedx-app-ios/assets/480059/83aaf049-5709-412c-94ed-64b9cad6badc) ![before19](https://github.com/openedx/openedx-app-ios/assets/480059/eb66964b-6a55-4afd-9585-40a736ed1da7)|![after19](https://github.com/openedx/openedx-app-ios/assets/480059/eeae7ac0-6ec7-407f-bc7f-90b71b44b822) ![before20](https://github.com/openedx/openedx-app-ios/assets/480059/a3a2f1b3-593e-47a4-85c7-2876c4d1235d)|![after20](https://github.com/openedx/openedx-app-ios/assets/480059/3b042617-8f98-461f-822f-76c20cba9b44) ![before21](https://github.com/openedx/openedx-app-ios/assets/480059/4d2fce90-161a-4bcd-ac00-eb5f70de059c)|![after21](https://github.com/openedx/openedx-app-ios/assets/480059/d401aefe-2c81-4063-be18-68cf9372c454) ![before22](https://github.com/openedx/openedx-app-ios/assets/480059/b32e886f-9c85-4eef-8eb5-40b88c9640cf)|![after22](https://github.com/openedx/openedx-app-ios/assets/480059/0d5aaa5b-ec20-4442-b80a-429c7a24fb1d) ![before23](https://github.com/openedx/openedx-app-ios/assets/480059/a6018dc9-8e01-4759-b62c-1ff17870a912)|![after23](https://github.com/openedx/openedx-app-ios/assets/480059/1295b08c-0f35-4348-a17f-7cac70883c31) ![before24](https://github.com/openedx/openedx-app-ios/assets/480059/109baf25-972d-4582-bd88-d20b5aa3baea)|![after24](https://github.com/openedx/openedx-app-ios/assets/480059/b6607339-e56c-458e-a8e7-56f203b419a8) ![before25](https://github.com/openedx/openedx-app-ios/assets/480059/42b43ccd-4465-4578-a4fc-69562655e754)|![after25](https://github.com/openedx/openedx-app-ios/assets/480059/067dc73a-0899-4085-9def-4f7969bc8ab5)
Landscape Changes Before|After --|-- ![beforeLandscape01](https://github.com/openedx/openedx-app-ios/assets/480059/1d5bb57d-c99c-46aa-a5f2-53750378324e)|![afterLandscape01](https://github.com/openedx/openedx-app-ios/assets/480059/90bf9d66-afc9-4ad4-997c-c27c57c5f382) ![beforeLandscape02](https://github.com/openedx/openedx-app-ios/assets/480059/0a839934-b0a0-4301-bf57-f8003226a358)|![afterLandscape02](https://github.com/openedx/openedx-app-ios/assets/480059/9ff28275-d35e-430b-91fc-71761ecca210) ![beforeLandscape03](https://github.com/openedx/openedx-app-ios/assets/480059/3e4a0565-a135-415b-a196-76238345a2da)|![afterLandscape03](https://github.com/openedx/openedx-app-ios/assets/480059/f6c7c546-cc35-4796-9130-a4225f9d84e3) ![beforeLandscape04](https://github.com/openedx/openedx-app-ios/assets/480059/62321ff2-18a9-47d0-8c55-e6a38430135a)|![afterLandscape04](https://github.com/openedx/openedx-app-ios/assets/480059/474bd2bd-8b0f-44d5-a9dc-38dff4f10b67) ![beforeLandscape05](https://github.com/openedx/openedx-app-ios/assets/480059/7df848e6-b529-4992-90ad-911be5bb79ba)|![afterLandscape05](https://github.com/openedx/openedx-app-ios/assets/480059/f743948b-d54b-4f5b-b6c2-81cc93d3a878) ![beforeLandscape06](https://github.com/openedx/openedx-app-ios/assets/480059/f42a9626-f813-4687-bd69-f4297693969e)|![afterLandscape06](https://github.com/openedx/openedx-app-ios/assets/480059/c87eba3d-fa6b-4d4f-becf-ee6bb1cf2c90) ![beforeLandscape07](https://github.com/openedx/openedx-app-ios/assets/480059/6b59553b-0988-4a85-9d2e-89f55a5782a1)|![afterLandscape07](https://github.com/openedx/openedx-app-ios/assets/480059/bca4e66e-69b8-4154-adae-d7ee1cd70c6f) ![beforeLandscape08](https://github.com/openedx/openedx-app-ios/assets/480059/e744c377-c119-4e44-bd5f-26575c76ea07)|![afterLandscape08](https://github.com/openedx/openedx-app-ios/assets/480059/ba56307a-2644-43ba-987d-ef50bf33618d) ![beforeLandscape09](https://github.com/openedx/openedx-app-ios/assets/480059/de043ff5-6ce9-414f-80ad-1b3a5fc20bd4)|![afterLandscape09](https://github.com/openedx/openedx-app-ios/assets/480059/315da0c1-1677-46c3-a468-9ab602fadb32) ![beforeLandscape10](https://github.com/openedx/openedx-app-ios/assets/480059/c5b900e9-5aee-4a07-861e-63812d023a0f)|![afterLandscape10](https://github.com/openedx/openedx-app-ios/assets/480059/e1fc9fec-815f-4b75-b885-21c86332b9aa) ![beforeLandscape11](https://github.com/openedx/openedx-app-ios/assets/480059/336986f5-ae22-4bb1-8d57-43eb250deccc)|![afterLandscape11](https://github.com/openedx/openedx-app-ios/assets/480059/38b11c41-0107-4a61-bd4d-fa4db0b8a723) ![beforeLandscape12](https://github.com/openedx/openedx-app-ios/assets/480059/2d2784bc-2f16-40f3-956a-a8eba9ef7e8d)|![afterLandscape12](https://github.com/openedx/openedx-app-ios/assets/480059/2f6c52c8-79b4-49e2-b5b2-58ea414d24cf) ![beforeLandscape13](https://github.com/openedx/openedx-app-ios/assets/480059/47615aa7-2c86-496a-b85a-6cac96bd65df)|![afterLandscape13](https://github.com/openedx/openedx-app-ios/assets/480059/2b618f7b-e53d-485c-93f0-aa30df9de077) ![beforeLandscape14](https://github.com/openedx/openedx-app-ios/assets/480059/f7ce39d1-ec51-444c-b86e-40639c1029ce)|![afterLandscape14](https://github.com/openedx/openedx-app-ios/assets/480059/dcb2c0cc-1a8e-4a74-986c-865ad53cf7c0) ![beforeLandscape15](https://github.com/openedx/openedx-app-ios/assets/480059/04d771f5-4602-4037-b0de-ba6cc987ef47)|![afterLandscape15](https://github.com/openedx/openedx-app-ios/assets/480059/f5840e54-5037-4deb-8e74-772fedda1c90) ![beforeLandscape16](https://github.com/openedx/openedx-app-ios/assets/480059/8d8f2b28-6edc-4e80-84db-17c2ad0ea0e8)|![afterLandscape16](https://github.com/openedx/openedx-app-ios/assets/480059/741c2766-32a6-414d-86b8-27c7f133ef41) ![beforeLandscape17](https://github.com/openedx/openedx-app-ios/assets/480059/d4865515-b2c6-43ea-b085-f726a7147910)|![afterLandscape17](https://github.com/openedx/openedx-app-ios/assets/480059/cafd866c-b076-476d-b000-df0906e84da9) ![beforeLandscape18](https://github.com/openedx/openedx-app-ios/assets/480059/2a328c77-5e29-4a3f-98b9-37c93e3be5b9)|![afterLandscape18](https://github.com/openedx/openedx-app-ios/assets/480059/b540595f-771e-44e7-9f15-aacc56ea3b8d) ![beforeLandscape19](https://github.com/openedx/openedx-app-ios/assets/480059/4cb7633e-3c42-43f5-a804-ac6a37aa1dc3)|![afterLandscape19](https://github.com/openedx/openedx-app-ios/assets/480059/a4d6099a-0b18-47c7-97b4-8d1bb3c43297) ![beforeLandscape20](https://github.com/openedx/openedx-app-ios/assets/480059/b52502d7-a244-46eb-8e0b-59f13d535bf1)|![afterLandscape20](https://github.com/openedx/openedx-app-ios/assets/480059/bbb59028-e71d-4bc2-a8a6-41823b29f8ce) ![beforeLandscape21](https://github.com/openedx/openedx-app-ios/assets/480059/ff05076d-af17-4d6a-803d-e30a655101dd)|![afterLandscape21](https://github.com/openedx/openedx-app-ios/assets/480059/f6305cd2-23d5-404b-ad2b-1bb0f1d85542) ![beforeLandscape22](https://github.com/openedx/openedx-app-ios/assets/480059/507112cd-7275-4a10-8f52-88256fdeceea)|![afterLandscape22](https://github.com/openedx/openedx-app-ios/assets/480059/deaa2ae1-c8cb-48e4-9acb-552d3b95c4ae) ![beforeLandscape23](https://github.com/openedx/openedx-app-ios/assets/480059/17cbccc2-cfa3-494c-98b1-f9a5bf4196f4)|![afterLandscape23](https://github.com/openedx/openedx-app-ios/assets/480059/99919171-eaec-424f-8601-fbe5e2428d37) ![beforeLandscape24](https://github.com/openedx/openedx-app-ios/assets/480059/be8804f0-50c6-4295-9ee2-305134417eac)|![afterLandscape24](https://github.com/openedx/openedx-app-ios/assets/480059/6bc828bc-3c13-45c8-b1df-70afe0c86cc7)
rnr commented 3 months ago

@saeedbashir We are all just waiting for your review. Please take a look. Thank you.

saeedbashir commented 3 months ago
  1. @forgotvas Could you please correct the alignment of Or sign in with and Or register with on sign-in and register screens?
  2. I'm not sure how the is working. Although it's look good, but there is enough content in case of Privacy Policy, etc and it left space empty space on both sides. The same is the case with HTML based blocks. But the discover and program web views uses full available space.

image image

saeedbashir commented 3 months ago

Not sure, but we might have two course cards in one row in case of iPad, just like we have it on production app. image

forgotvas commented 3 months ago

Not sure, but we might have two course cards in one row in case of iPad, just like we have it on production app. image

@rnr ^^^

forgotvas commented 3 months ago
  1. @forgotvas Could you please correct the alignment of Or sign in with and Or register with on sign-in and register screens?
  2. I'm not sure how the is working. Although it's look good, but there is enough content in case of Privacy Policy, etc and it left space empty space on both sides. The same is the case with HTML based blocks. But the discover and program web views uses full available space.

image image

Hi @saeedbashir,

  1. Do you want it to be centered?
  2. In iOS 9 apple introduced readabilityContentGuide https://developer.apple.com/documentation/uikit/uiview/1622644-readablecontentguide#discussion and dynamic type. They made that release to make user easily be read without forcing users to move their head to track the lines. Some old tutorial. In guidelines apple wrote:

Modify the built-in text styles if necessary. System APIs define font adjustments — called symbolic traits — that let you modify some aspects of a text style. For example, the bold trait adds weight to text, letting you create another level of hierarchy. You can also use symbolic traits to adjust leading if you need to improve readability or conserve space. For example, when you display text in wide columns or long passages, more space between lines (loose leading) can make it easier for people to keep their place while moving from one line to the next. Conversely, if you need to display multiple lines of text in an area where height is constrained — for example, in a list row — decreasing the space between lines (tight leading) can help the text fit well. If you need to display three or more lines of text, avoid tight leading even in areas where height is limited. For developer guidance, see leading(_:).

We didn't touch discovery and programs tabs because there not a content type it's more like browser so it should be on full screen.

saeedbashir commented 3 months ago
  1. Do you want it to be centered?

How about aligning it to other content like textfields?

rnr commented 3 months ago

Not sure, but we might have two course cards in one row in case of iPad, just like we have it on production app. image

@rnr ^^^

@forgotvas I think we could try this approach. Thank you

forgotvas commented 3 months ago
  1. Do you want it to be centered?

How about aligning it to other content like textfields?

@saeedbashir, done:

Simulator Screenshot - iPad Pro (12 9-inch) (6th generation) - 2024-03-20 at 18 16 50 Simulator Screenshot - iPad Pro (12 9-inch) (6th generation) - 2024-03-20 at 18 16 54
forgotvas commented 3 months ago

Not sure, but we might have two course cards in one row in case of iPad, just like we have it on production app. image

@rnr ^^^

@forgotvas I think we could try this approach. Thank you

@sergeymomot please create ticket for that

volodymyr-chekyrta commented 3 months ago

@forgotvas please resolve the conflicts

forgotvas commented 3 months ago

@volodymyr-chekyrta, done