creativetimofficial / ct-material-dashboard-pro

Material Dashboard Pro - Premium Bootstrap 5 Admin
https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics
116 stars 28 forks source link

[Bug] Chat / Messages page doesn't render correctly on a mobile phone #345

Open mochouinard opened 2 years ago

mochouinard commented 2 years ago

Version

Latest

Reproduction link

https://demos.creative-tim.com/material-dashboard-pro/pages/pages/profile/messages.html

Operating System

Android 12

Device

Samsung S22 Ultra

Browser & Version

Standard Chrome

Steps to reproduce

Just visit the page from a mobile phone : https://demos.creative-tim.com/material-dashboard-pro/pages/pages/profile/messages.html I get same issues when using my browser in mobile phone simulator mode.

What is expected?

On mobile, see the list of users, and when we click on a user, we go to the messages, and provide a quick button to come back to the list of users / contact / friends. Or any better more modern way to handle a messaging interaction,

What is actually happening?

Both list of user and messages are cram within the small screen which doesn't fit.


Solution

I would expect a similar experience as a mobile chat application. See the list of person or active conversation with some data shown like it present right now.

When we click on it, it would open the message list for that contact. (I haven't checked yet if there is context menu stuff with this template, so what I need might

MAYBE the only quick feature request would be to see a number of new message icon (color circle with a number inside on the right of the person in the contact / friends list.

Additional comments

Not related to this exactly, but is there any context menu in your template ? I would like to do right click on a contact to delete a conversation for example...

groovemen commented 2 years ago

Hello @mochouinard,

Thank you for using our products and for letting us know about this issue. We will fix this issue in the next product update or you can change the

's that are wrapping the chat:

  • from this: <div class="col-4"> you can change with: <div class="col-lg-4"> and
  • from this: <div class="col-8"> you can change with: <div class="col-lg-8">
  • Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

mochouinard commented 2 years ago

Hi @groovemen,

Making it wrap one after each other make it readable, but it just doesn't make it really interesting.
It just two list after each other. It feel incomplete (Like a navigation menu that is not working).

I would have expected basic navigation experience.

Here is an example : https://prospace.one/chat-direct.html When you click on a person, it load the chat, then you have a top left button to go back to the user list.

groovemen commented 2 years ago

Hello again,

Thank you for your suggestion, I will talk with my colleagues and if there will be other users that need these features, we will implement them right away.

All the best, Stefan