UI Improvement for Place Description Display #10087

RedAuburn · 2025-01-17T18:14:34Z

DeshDeepakKant commented

2025-01-17 18:14:34 +00:00

(Migrated from github.com)

Overview

This pull request enhances the place description display in Organic Maps by implementing a more responsive, readable, and adaptive user interface.

Fixes #9943.

Key Changes

Replaced basic WebView loading with a more sophisticated rendering approach
Added dynamic styling support for light and dark modes
Implemented responsive design with percentage-based sizing
Improved typography and readability

Detailed Improvements

1. WebView Configuration

Added WebViewClient for better web content handling
Enabled JavaScript and UTF-8 encoding
Set transparent background for seamless integration

2. Responsive Design

Implemented percentage-based sizing
Added dynamic font scaling using calc() CSS function
Ensured consistent layout across different screen sizes
Created media query for mobile optimization

3. Theme Support

Added dynamic color scheme for light and dark modes
Adjusted text, background, and heading colors based on current theme
Smooth transition between themes

4. Typography Enhancements

Used system-native font stack for better readability
Implemented justified text alignment
Added hyphenation support
Optimized heading and paragraph spacing

5. Accessibility Improvements

Ensured text is selectable
Maintained consistent line height
Implemented responsive font sizes

Before and After Screenshots

Light Mode (Before)	Light Mode (After)

Dark Mode (Before)	Dark Mode (After)

If anyone has suggestions or improvements, please feel free to share them in the comments!

### Overview This pull request enhances the place description display in Organic Maps by implementing a more responsive, readable, and adaptive user interface. - Fixes **#9943**. ### Key Changes - Replaced basic WebView loading with a more sophisticated rendering approach - Added dynamic styling support for light and dark modes - Implemented responsive design with percentage-based sizing - Improved typography and readability ### Detailed Improvements #### 1. WebView Configuration - Added `WebViewClient` for better web content handling - Enabled JavaScript and UTF-8 encoding - Set transparent background for seamless integration #### 2. Responsive Design - Implemented percentage-based sizing - Added dynamic font scaling using `calc()` CSS function - Ensured consistent layout across different screen sizes - Created media query for mobile optimization #### 3. Theme Support - Added dynamic color scheme for light and dark modes - Adjusted text, background, and heading colors based on current theme - Smooth transition between themes #### 4. Typography Enhancements - Used system-native font stack for better readability - Implemented justified text alignment - Added hyphenation support - Optimized heading and paragraph spacing #### 5. Accessibility Improvements - Ensured text is selectable - Maintained consistent line height - Implemented responsive font sizes ### Before and After Screenshots | Light Mode (Before) | Light Mode (After) | |:---:|:---:| |![184ccdca-4bb1-459f-accd-e22844136d98](https://github.com/user-attachments/assets/17acce54-f632-4b2f-8e4a-2d786e2a87b9)| ![03e73901-26f5-4367-a02e-8c4c56f321e1](https://github.com/user-attachments/assets/a0d11ed4-d67b-4764-ab8f-2d1485ebfdfa) | | **Dark Mode (Before)** | **Dark Mode (After)** | | ![368bf9d9-edf9-407a-8ae2-b63099e0cbcd](https://github.com/user-attachments/assets/4b893f23-3a82-486c-8e7a-44dae2f4f5de) | ![af9a7dfd-1827-466e-b934-1f3837a2f1e4](https://github.com/user-attachments/assets/bf329ffc-422a-4661-afa4-a8bc74fac367) | | ![181c10c5-ca9c-44c9-bb7c-cd5aaf44b81e](https://github.com/user-attachments/assets/4e765560-6eec-4f13-852a-c8c25632cb3a) | ![e2d21ad9-1090-469b-9c01-bba31a1494fb](https://github.com/user-attachments/assets/08e4eeb1-2a19-42d9-a967-7a405b7acbf1) | If anyone has suggestions or improvements, please feel free to share them in the comments!

👍 2 🎉 2

RedAuburn requested changes 2025-01-20 18:55:00 +00:00

RedAuburn left a comment

Thanks for this! Looks good overall, just a few minor fixes and a few design considerations from me :)

@organicmaps/design any thoughts on centre-aligned vs start-aligned headers?

Thanks for this! Looks good overall, just a few minor fixes and a few design considerations from me :) @organicmaps/design any thoughts on centre-aligned vs start-aligned headers?

android/app/src/main/java/app/organicmaps/widget/placepage/PlaceDescriptionFragment.java

					
				@ -11,3 +13,4 @@

				import androidx.core.content.ContextCompat;

				import androidx.core.view.ViewCompat;

				import app.organicmaps.R;

				import app.organicmaps.base.BaseMwmFragment;

RedAuburn commented

2025-01-20 18:23:02 +00:00

This doesn't seem to be needed, and Android studio warns that it may introduce XSS vulnerabilities, so probably best to remove it.

RedAuburn commented

2025-01-20 18:38:13 +00:00

The android UI uses Roboto - best to prioritize that and just fallback to sans-serif

RedAuburn commented

2025-01-20 18:42:11 +00:00

probably would be better to set these in values/colors.xml (in fact, they may already be defined there as generic colours)

RedAuburn commented

2025-01-20 18:43:37 +00:00

personally, i'd prefer left-aligned headers - this might need design discussion

RedAuburn commented

2025-01-20 18:48:04 +00:00

nit / general comment: it might be nicer to have something like Article from wikipedia.org. This would need a new string in ~data/strings/strings.txt and dealing with translations etc though, so doing it in this PR might be a bit much.

nit / general comment: it might be nicer to have something like `Article from wikipedia.org`. This would need a new string in `~data/strings/strings.txt` and dealing with translations etc though, so doing it in this PR might be a bit much.

This repo is archived. You cannot comment on pull requests.

No reviewers

RedAuburn