kamandprompt / baat-cheet Goto Github PK

At present, the layout is not responsive, when anybody tries to run this app on a smartphone, they encounter multiple errors.
A screenshot would be enough to explain the issue.

My suggestion would be to use Bootstrap(or some other framework) to style front-end.

The input bar is not present in rooms other than the main lobby.
To repro - Create a new room. The message Input is absent.

At present the new room screen-overlay does not look good on small screens. We want style changes to this. You can use Bootstrap. A Pr containing bootstrap cdns is about to be merged(#70).

Steps to reproduce: try adding a new room from + icon on small screens.

In other created room it's working, In lobby it's not working.

At present there is some unnecessary code in each file. You are supposed to remove that unnecessary code.

Tasks:

• Remove unnecessary code(of JS as well as CSS).

• Wherever possible replace code like

anotherElement.innerHTML = '<element id="someID" class="someClass">Some text</element>';

with code like

element = document.createElement("element");
element.classList.add("someClass");
element.id = "someID";
element.innerText = "Some Text";
anotherElement.innerHTML = element;

Most important thing is to create separate commit for each file.

New comer issue.

Display no rooms when search don't find any room with the name entered.

At present the new room screen-overlay does not look good on small screens, even on large screens this doesn't looks good. We want style changes to this. You are supposed to use Bootstrap.

Steps to reproduce: try adding a new room using add new room card.

Remove image icons from here and add font-awesome icons at respective places in code.

When someone is reading older messages, this causes problem

Above the list of rooms is a search box and button which is of no use right now, add a functionality to search for a particular room.

At present, the message area has a lot of custom styling. We need to style it with bootstrap. Perhaps a container can be useful here. You can take inspiration from following image.

At present while adding a new room user can put any number of characters in the input fiels. Your task is to limit number of characters in room name and description to 10 and 20 respectively.

At present there is no log out button, a user has to close tab when he/she wants to leave the app. Add a log out button.

Make entry page responsive using Bootstrap.
Steps to reproduce: resize the webpage.

Menu vanishes after resizing the window
here is a loom record of the issue

Baat Cheet Sidebar bug

At present, the message input area has a lot of custom styling. We need to style it with bootstrap. You can take inspiration from following image.

And unlike this image there will be two buttons in one form(one for emoji and other for send button).

At present, all emojis are of different color.

Tasks:

• Add all emojis of same color(preferably yellow).

• Add new emojis.

Source of emojis: Twemoji

At present, the leftbar is styled by custom classes, remove these custom classes and add Bootstrap classes there.

The information about user joining or leaving should be displayed only to users who are in room not to the users who haven't set their username yet.

PS: if you leave just close the site without setting your name, it will broadcast null left 😛

Center align the list. Current view -

If possible, also widen to see Participants word completely, or decrease it's font size.

At present there is a notify.min.js, you are supposed to remove this file and add this functionality using Bootstrap toast.

Socketio script is not getting loading, probably the link doesn't work.

@Signior-X @parshvajain25

A message sent/received right now is has very big height (probably due to it being a

tag ). The message box height should be in much smaller. And the sender name should be prominent, probably darker.

Decrease sidebar to about 30% and increase the right sidebar to about 70%. Also if you're able to centre-align the room list with respect to the left sidebar by adding some left margin to it.

At present, the entry page on mobile devices looks like

Align the title and area for nickname at the center of page i.e. align the jumbotron properly.

At present there is a blue color at so many places in app, you are supposed to remove to remove this color and add bootstrap's primary class.

Try sending this as message

<script>alert("hello")</script>

a pop up will come

I tried making overflow: auto but didn't help.

create style.css and script.s and move the CSS and JS from the index to them respectively.

Can I make some improve? For example:

• Variavel destructuring

• Template string

• General refactor

If you are in room A and room B and you are reading messages of room A. If someone sends a text message in room B then you get a notification, but if someone sends an emoji in room B then you get a notification like someone@roomB \n <img id = 'emoji'>. it should say name of that emoji like someone@roomB \n :emoji:

There is no contributing.md. A link for the same is there in readme.md, but that leads to 404 page.

style leftbar with bootstrap
tasks:

• style the search form with bootstrap's form-control class

• style the cards containing room name and description with bootstrap's card class under card-columns class of bootstrap.

• move the add-room(plus) button as a card under room list, so that user can click on a card to create new room.

Final look can be something like

:

At present, the room info is at the top of chat window.
Tasks:

• Move this division at the right of screen, just like left-bar make a right-bar which collapses on small screens.

• Add the current user info permanently in this division.

• In rooms other than lobby also shift the leave room button in right-bar.

• Use bootstrap to style this right bar

Redesign the New Room button and put it in a better place.

On the blue icon next to the search input add search icon (magnifying glass) over the blue button. (frontend only).

On small screens, there is only one way to collapse or expend the leftbar, which is to click on the button. Add swipe actions that after swiping right, the leftbar will expend, and after swiping left this will collapse.