[PR #804] [MERGED] Web app: add RTL support #1429

New issue

Closed

opened 2026-05-07 01:02:03 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-07 01:02:03 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/binwiederhier/ntfy/pull/804
Author: @nimbleghost
Created: 7/3/2023
Status: ✅ Merged
Merged: 7/4/2023
Merged by: @binwiederhier

Base: main ← Head: rtl

📝 Commits (2)

7a1488f Web app: add RTL support
311ffc3 Format datetimes using i18n lang

📊 Changes

9 files changed (+121 additions, -46 deletions)

View changed files

📝 web/package-lock.json (+36 -4)
📝 web/package.json (+4 -1)
📝 web/src/app/utils.js (+4 -3)
📝 web/src/components/Account.jsx (+7 -8)
📝 web/src/components/App.jsx (+34 -22)
📝 web/src/components/Notifications.jsx (+4 -4)
➕ web/src/components/RTLCacheProvider.jsx (+22 -0)
📝 web/src/components/SubscriptionPopup.jsx (+8 -2)
📝 web/src/components/UpgradeDialog.jsx (+2 -2)

📄 Description

Resolves #663
Resolves #700

MUI has pretty good RTL support, not much to do except connect mui & i18next.

I do not read an RTL language, so probably want someone else to double check that it looks correct, but going by my basic knowledge and the Material reference, it seems fine.

https://mui.com/material-ui/guides/right-to-left
https://m2.material.io/design/usability/bidirectionality.html

.	.	.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/binwiederhier/ntfy/pull/804 **Author:** [@nimbleghost](https://github.com/nimbleghost) **Created:** 7/3/2023 **Status:** ✅ Merged **Merged:** 7/4/2023 **Merged by:** [@binwiederhier](https://github.com/binwiederhier) **Base:** `main` ← **Head:** `rtl` --- ### 📝 Commits (2) - [`7a1488f`](https://github.com/binwiederhier/ntfy/commit/7a1488fcd3f02f9d0828fc813f984d48c9b4b9d9) Web app: add RTL support - [`311ffc3`](https://github.com/binwiederhier/ntfy/commit/311ffc36727146030b116b42234bb75fef4f17e2) Format datetimes using i18n lang ### 📊 Changes **9 files changed** (+121 additions, -46 deletions) <details> <summary>View changed files</summary> 📝 `web/package-lock.json` (+36 -4) 📝 `web/package.json` (+4 -1) 📝 `web/src/app/utils.js` (+4 -3) 📝 `web/src/components/Account.jsx` (+7 -8) 📝 `web/src/components/App.jsx` (+34 -22) 📝 `web/src/components/Notifications.jsx` (+4 -4) ➕ `web/src/components/RTLCacheProvider.jsx` (+22 -0) 📝 `web/src/components/SubscriptionPopup.jsx` (+8 -2) 📝 `web/src/components/UpgradeDialog.jsx` (+2 -2) </details> ### 📄 Description Resolves #663 Resolves #700 MUI has pretty good RTL support, not much to do except connect mui & i18next. I do not read an RTL language, so probably want someone else to double check that it looks correct, but going by my basic knowledge and the Material reference, it seems fine. https://mui.com/material-ui/guides/right-to-left https://m2.material.io/design/usability/bidirectionality.html --- | . | . | . | | -- | -- | -- | | <img width="1423" alt="CleanShot 2023-07-03 at 15 23 13@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/2f5d639c-ad09-43c4-b17a-217a1871dfd7"> | <img width="1423" alt="CleanShot 2023-07-03 at 15 16 36@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/f20b4b4f-5b79-4978-b667-a556fa567fd9"> | <img width="1423" alt="CleanShot 2023-07-03 at 15 14 37@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/911f795c-a384-4ffe-8392-51ad696fb3df"> | | <img width="1423" alt="CleanShot 2023-07-03 at 15 25 27@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/b8efa5b3-7008-48ad-9058-423684e6a1e7"> | <img width="1423" alt="CleanShot 2023-07-03 at 15 16 56@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/5e32a2da-d656-4848-9808-203ab09f6115"> | <img width="1423" alt="CleanShot 2023-07-03 at 15 17 00@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/9358983e-40c8-4d7a-b82b-f501b49f7210"> | <img width="300" alt="CleanShot 2023-07-03 at 15 25 58@2x" src="https://github.com/binwiederhier/ntfy/assets/132819643/8eb22747-dcc1-4efd-a650-4b0aa02d5dd1"> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>