awesome-django-blog
awesome-django-blog copied to clipboard
jsolly
Update Ezra Chat Bot styling
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
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
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
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😅
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
@jsolly I'm having issues with updating the styling here.
Changes in the styling aren't reflecting on the site
@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'
@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)
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.
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 runserverpython3 app/manage.py livereloadMake sure the runserver command is run before the livereload.
3 - Make a CSS change. It should be reflected in the app immediately. okay
@jsolly
It returns this error:
$ python app/manage.py livereload Unknown command: 'livereload' Type 'manage.py help' for usage. (venv)
@freedompraise please make sure you add LIVERELOAD=True to your .env file. If you don't do that, you get the error you are mentioning.
@freedompraise please make sure you add
LIVERELOAD=Trueto your .env file. If you don't do that, you get the error you are mentioning.
Alright
@jsolly I still am not observing any changes. Could it be because I'm working on the staticfiles folder?
Weird. Can we take a look together in a call? Also fun to catch up =]
Find a slot on my calendar!
https://cal.com/jsolly/coffee-chat
Hey @freedompraise I see the branch is still open. Do you need any more help?
I am pretty sure we got all the livereloading stuff working in our call.
Hello John. I encountered some styling conflicts earlier, and struggled to center a few divs😪
I am back on it now.
Made some changes earlier, and should make the PR today