Style: enhance the style of some platform pages #61
Conversation
|
looks great! can you please ask chatgpt to merge it with the existing styles? and if you can use the existing style classes, it'd be great, so it's easier to track what was changed |
|
I don't think there will be a problem merging it as styles are added inside the |
|
|
||
| <style> | ||
| body { |
There was a problem hiding this comment.
can you please move it to the courses.css? and please make sure there are no conflits with the existing styles
There was a problem hiding this comment.
or even better to login.css
| @@ -1,43 +1,119 @@ | |||
| {% extends 'base.html' %} | |||
| {% load tz %} | |||
|
|
|||
| {% block styles %} | |||
| <style> | |||
| .course-header { | |||
There was a problem hiding this comment.
same here - please don't keep css in html
| @@ -2,13 +2,80 @@ | |||
|
|
|||
| {% load static %} | |||
|
|
|||
| {% block styles %} | |||
| <style> | |||
| .homework-container { | |||
There was a problem hiding this comment.
and here and everywhere else where we have css in html
There was a problem hiding this comment.
ok i will move all CSS to external CSS files
| <li><a href="{% url 'course' course.slug %}">{{ course.title }}</a></li> | ||
| <div class="col mb-4"> | ||
| <div class="card h-100 shadow hover-effect"> | ||
| <img src="https://via.placeholder.com/400x250/1E448B/FFF?text={{ course.title|urlencode }}" class="card-img-top" alt="{{ course.title }}" decoding="async"> |
There was a problem hiding this comment.
What's this website? I'm wondering if it's a good idea to rely on something external
There was a problem hiding this comment.
I want the course card to have images like those images images so I came up with 3 approaches
-
add ImageField to the course model and use it on the course card but this approach needs a lot of work
- migrations and expected problems that may happen because of courses that exist and don't have an image
- a lot of configurations are needed for Django so that Django can serve images correctly on deployment
-
create
static/imgsfolder and add those images by hand and on templates and this requires- we should name images using the course name or course slug so that we can add them easily on templates
- every future course we need to add an image for it on the
static/imgsfolder
-
the third approach and the easiest one use third-party websites that create placeholder images that can be added to a course card
There was a problem hiding this comment.
Let's do this in a separate PR please. I'd do it via uploading the image to S3 but it's a bigger change for now
|
here is what the last commit introduce
the final preview of the website preview.mp4 |
|
I definitely like it but not everything, and because the change is too large it's too difficult for me to accept it all at once. Is there a way to gradually change it? |
|
Let's maybe start with a PR for the login page? |
|
ok I will close this pull request retrieve all changes back and create a new one for the login page only, I think focusing on Django related PR's will be helpful at this time |
Style: enhance the style of some platform pages
Title: CSS enhancements to improve the platform UI.
Description
In this pull request, I try to use ChatGPT to implement several CSS enhancements to improve the platform's UI.
Changes Made
Visual Changes
Screencast.from.2024-07-25.22-26-24.mp4