Refactor authentication pages: replaced Bootstrap with Tailwind CSS#99
Refactor authentication pages: replaced Bootstrap with Tailwind CSS#99farhannadim311 wants to merge 3 commits intopyladies:mainfrom
Conversation
There was a problem hiding this comment.
Hi @farhannadim311 Thanks for the PR, I think this can affect other pages which are using Bootstrap, which is a blocker for this PR, IMO you need to changes all the pages to use tailwind, if you are removing bootstrap from the base template.
|
@Mr-Sunglasses you are correct, i only have changed the classname instead of using tailwind as a cdn or doing pip- install tailwind. i apologize for my misleading description, however i wanted to work on this as a summer project for gsoc and i made changes just to the login and landing page of the website to match the theme of pycon ladies. if you think that the theme matches, i can do another pull request using tailwind as cdn or installing django-tailwind as a dependency, whatever you would like. thank you |
farhannadim311
left a comment
farhannadim311
left a comment
There was a problem hiding this comment.
the portal directory which contains -
base.html (switched to tailwind via cdn)
index.html (pulls from it)
for the templates directory, i created a file called base_auth.html and the login and signup pulls from that, so this should leave the rest of the file accessible by bootstrap till changes to it are made using tailwind and the login and signup should work fine as well since its more modularised now
templates/account/base_auth.html
Outdated
| @@ -0,0 +1,55 @@ | |||
| <!DOCTYPE html> | |||
| {% load static %} | |||
There was a problem hiding this comment.
The load templatetag needs to be the first line of the html file.
| <!-- Tailwind CSS via CDN --> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <script> | ||
| tailwind.config = { |
There was a problem hiding this comment.
Great start. Is this something that can be stored in a separate css file?
templates/account/login.html
Outdated
| </div> | ||
| </div> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
Is it possible to refactor and move this out to its own custom css?
|
It's a great start. |
|
Hi @Mariatta, I can definitely work on the changes that you want, as for the light theme and dark theme. i would need some time on that, i should be able to do a seperate theme by this week. another change that i want to do as well, is to change the theme. although the theme looks really similar to the original pycon ladies theme, upon further inspection on the original pycon ladies gradient theme, i saw that it wasn't exactly the same. i will try to bring about the following changes. thank you |
farhannadim311
left a comment
farhannadim311
left a comment
There was a problem hiding this comment.
added a dark and light mode feature and changed the code structure a bit by moving a lot of the styles to auth.css
|
Would you mind resolving the conflicts? |
|
working on it |
3 participants
Summary
This PR updates the authentication templates to use Tailwind CSS instead of Bootstrap. It improves design consistency, responsiveness, and maintains the PyLadiesCon branding and dark theme.
🔧 Files Modified:
templates/account/login.htmltemplates/account/signup.htmltemplates/portal/base.htmltemplates/portal/index.html🎨 Changes Made:
🖼️ Screenshots:
Let me know if there are any suggested changes! Happy to make adjustments.