Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design Bugs #7733

Closed
WebSavvyDude opened this issue Aug 13, 2017 · 9 comments
Closed

Design Bugs #7733

WebSavvyDude opened this issue Aug 13, 2017 · 9 comments

Comments

@WebSavvyDude
Copy link

Description:

There are all sorts of design bugs. For example: Userlist is not showing up on certain browser sizes. Full width in browsers are ok (userlist shows) but as you move the browser window smaller the userlist doesn't show anymore. Another issue is some padding problems on the "Register or Chat Anonymously" buttons. They sit too low on the browser. Another issue is the box when you select a username has some margin issues.

Server Setup Information:

  • Version of Rocket.Chat Server: 0.58.rc.1
  • Operating System:
  • Deployment Method(snap/docker/tar/etc):
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • Node Version:

Steps to Reproduce:

Simply test it on any browser or mobile device.

Expected behavior:

No design bugs.

Actual behavior:

Many design bugs.

Relevant logs:

@JSzaszvari
Copy link
Contributor

| as you move the browser window smaller the userlist doesn't show anymore

I'm pretty sure that's by design, it switches to the mobile interface when the size of your browser reaches a certain size as to still be able to chat to people and you can press the hamburger menu that appears in the top left to bring the sidebar back. Although I'm just guessing that what is happening without screenshots

There is a huge redesign underway at the moment that should fix a lot of this

See here #7643

@JSzaszvari
Copy link
Contributor

JSzaszvari commented Aug 13, 2017

Until that's done, you can fix some of the Ui problems by using the Override CSS functionality in the admin Section

@WebSavvyDude
Copy link
Author

@JSzaszvari What do you mean the override CSS functionality?

Also, as the browser window goes smaller it should still be able to show the userlist if you click it but it simply doesn't appear at all in mobile devices.

@JSzaszvari
Copy link
Contributor

JSzaszvari commented Aug 13, 2017

@WebSavvyGuy See gifs below, Is this what you are having a issue with?

Mobile:
c

size

By custom css, I was talking about how you can modify the CSS application wide in the settings like this - So if a button is misaligned, until the redesign is finished you can most likely fix it with CSS:
2017-08-14_02-27-43-1

@WebSavvyDude
Copy link
Author

WebSavvyDude commented Aug 13, 2017

@JSzaszvari Thanks alot for your nice gifs. I need to figure out how to do that to show you guys.

But my issue is when i press the "userlist" icon (the 3 heads) normally in mobile or smaller browsers it should still open up the list so i can actually see whos in the room. However, it is no longer doing that.

@pandada8
Copy link
Contributor

image

this is an example from official demo, where I clicked the button in sidebar and nothing showed,
adding height: 100% to @media (max-width: 1100px) .flex-tab-container.opened .flex-tab can sort of fix the problem.

image

@WebSavvyDude
Copy link
Author

@pandada8

Do you mind to share where you made those changes please

@WebSavvyDude
Copy link
Author

WebSavvyDude commented Aug 14, 2017

I added the following into Layout>Custom CSS

@media(max-width:1100px) { .flex-tab-container.opened .flex-tab { position:absolute; right:40px; border-width:0 0 0 1px; z-index:100; height:100% } }

Because without seeing the userlist, nobody was able to PM anyone else.
It fixed the user list issue in mobile but now people are complaining the avatars are so big and taking the whole mobile screen or something and they cant type. I noticed these issues on both IPhone and Samsung.

@MartinSchoeler
Copy link
Contributor

Apparently #7643 fixed this, please reopen if the problem persists. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants