Update Ezra Chat Bot styling

freedompraise commented 7 months ago

Context

The current UI is a bit crappy and doesn't do well in responsiveness. Also, its black background colour blends into the main background of the site ((prior to prompting) which doesn't look good.

What's your idea to make it better?

Update the UI to something sleek and responsive

Screenshots

Record

[x] I have read the Contributing Guidelines
[x] I have searched the issues for a similar request
[x] I want to work on this issue

jsolly commented 7 months ago

Good idea. All of the CSS for Ezra has a specific section in the main.css.

The chatbot uses a combination of vanilla JS and HTMX, so be on the lookout for that.

I made a 1 hour video about how I created the bot that might be useful as a reference: https://youtu.be/4EYe4-tpRVY?si=inTga6eMqhBjchny

freedompraise commented 6 months ago

Good idea. All of the CSS for Ezra has a specific section in the main.css.

The chatbot uses a combination of vanilla JS and HTMX, so be on the lookout for that.

I made a 1 hour video about how I created the bot that might be useful as a reference: https://youtu.be/4EYe4-tpRVY?si=inTga6eMqhBjchny

Okay

I will pick up this issue now

jsolly commented 6 months ago

I really like the styling the ring.com uses for their chat. Maybe borrow inspiration from them.

CleanShot 2024-04-30 at 21 45 17

freedompraise commented 6 months ago

I really like the styling the ring.com uses for their chat. Maybe borrow inspiration from them.

Okay cool. I've been in need of inspiration this whole time😅

freedompraise commented 5 months ago

Good idea. All of the CSS for Ezra has a specific section in the main.css.

The chatbot uses a combination of vanilla JS and HTMX, so be on the lookout for that.

I made a 1 hour video about how I created the bot that might be useful as a reference: https://youtu.be/4EYe4-tpRVY?si=inTga6eMqhBjchny

I find it intriguing that there's vanilla JS here😅. You made me believe it was forbidden for the project when I was implementing the comment functionality with htmx

freedompraise commented 5 months ago

@jsolly I'm having issues with updating the styling here.

Changes in the styling aren't reflecting on the site

jsolly commented 5 months ago

@freedompraise how are you running the app? Can you try this command?

python3 app/manage.py runserver livereload

If that doesn't work, you might want to try going into the network tab and checking 'disable cache'

freedompraise commented 5 months ago

@jsolly I've checked the 'disable cache', and it isn't working.

The command to run with livereload returns this error: CommandError: "livereload" is not a valid port number or address:port pair. (venv)

jsolly commented 5 months ago

I was wrong in how livereload works. I just pushed a change. Can you try this?

1 - Add LIVERELOAD=True to your .env file 2 - Run these two commands in TWO different terminal windows

python3 app/manage.py runserver

python3 app/manage.py livereload

Make sure the runserver command is run before the livereload.

3 - Make a CSS change. It should be reflected in the app immediately.

freedompraise commented 5 months ago

I was wrong in how livereload works. I just pushed a change. Can you try this?

1 - Add LIVERELOAD=True to your .env file 2 - Run these two commands in TWO different terminal windows
python3 app/manage.py runserver
python3 app/manage.py livereload
Make sure the runserver command is run before the livereload.

3 - Make a CSS change. It should be reflected in the app immediately. okay