Discourse Modal Grip

Customization Theme component

AI-generated summary

The discussion introduces the Discourse Modal Grip theme component, designed to enhance mobile UX by adding a grip handle to modals on touch devices. Don explains that the grip appears above modals on mobile, replacing the close button and centering the title, inspired by a previous community suggestion. It automatically hides when the keyboard is visible to prevent accidental sliding into the phone’s notification center. The component also adjusts other modals (e.g., Table Builder, Chat, Templates) and excludes non-dismissable ones. Settings allow customization, and installation is supported via the theme-install-button. Arkshine praises the small but effective UX improvement.

1
:information_source: Summary Modal Grip
:eyeglasses: Preview Theme Creator
:hammer_and_wrench: Repository GitHub - VaperinaDEV/discourse-modal-grip · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Hello :wave:

This simple theme component adds a grip to the modal. It shows on mobile touch devices above the modal. It hides the close button and centerize the title. Inspired by Add grip to mobile modals

Screenshot_20240429_194556
Screenshot_20240429_1945561080×920 69.9 KB

There are some settings to modify things. :arrow_down_small:

Screenshot 2024-04-29 at 20.36.30
Screenshot 2024-04-29 at 20.36.30787×606 17.8 KB

The grip is only shows up if the keyboard not. When the keyboard is visible then the border radius is 0 and the default modal header comes back with the close button etc… This is because when the keyboard visible then the modal is goes to full height and keeping the grip can cause accidentally slide down the phone notification center instead of closing modal…

There are some adjustment to other modals, like: Table Builder modal, Chat new message modal, Templates modal.

And also hid the grip from the known non dismissable modals.

6 Likes
2

It’s a small change, but it’s a great UX improvement. Good job. :+1:

3 Likes