Enhance CSS - Githubissues

ryaustin commented 2 months ago

Improve the look and feel of the e-commerce website using CSS. The aim is to make the site feel modern. You may consider the following challenges (optional):

[ ] adding dark-mode support
[ ] adding 1 or 2 themes that the user can select under their admin

kjcioffi commented 1 month ago

A suggestion in #43 surfaced about a custom base template for reports.

you might consider creating reports_base.html. This is so that you can set reports up independent of the base.html with its navigation etc that will not make much sense on a pdf report.

We see from the weasyprint documentation that using page selectors, we can create a block rules that weasyprint will respond to. A practical example could be setting the page size and orientation (which can also be passed in as variables in the context data). setting up headers and footers so that reports look consistent.

Here's an example of a reports_base.html taken from bits and pieces of their documentation and a bit of regular html/django:

{% load static %}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Report {% block title %} {% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/reports/reports_base.css' %}">
    <style>
      @page {
        size: letter Portrait; 
        margin: 1in;
        font-family: 'Roboto', 'Arial', sans-serif;

        @bottom-left {
          content: 'Contempo Crafts';
          font-size: x-small;
        }

        @bottom-center {
          content: "Page " counter(page) " of " counter(pages);
          font-size: x-small;
        }

        @bottom-right {
          content: '{{report_date | default_if_none:""}} {{report_name}}';
          font-size: x-small;
        }

      }
    </style>
    {% block styles %}{% endblock %}

  </head>

ryaustin commented 4 weeks ago

HI Kevin, yes reports base template is an excellent idea and one I employ in my own code. This type of discovery on your own is important because it shows how much deeper you understand django and all the patterns you're learning. You start to find ways to employ those patterns without being told or given permission. Try things, break things, iterate - that's where learning occurs.

kjcioffi / django-ecommerce

Enhance CSS #3

A suggestion in #43 surfaced about a custom base template for reports.