Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve CSS for reports #3

Open
2 tasks
ryaustin opened this issue Jun 24, 2024 · 2 comments
Open
2 tasks

Improve CSS for reports #3

ryaustin opened this issue Jun 24, 2024 · 2 comments
Assignees
@kjcioffi
Milestone
Deploy enhanced v...

Comments

@ryaustin
Copy link
Collaborator

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
This was referenced Jul 23, 2024
Closed
Merged
@kjcioffi
Copy link
Owner

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/[email protected]/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
Copy link
Collaborator Author

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 kjcioffi changed the title Enhance CSS Improve CSS for reports Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kjcioffi kjcioffi

Labels
None yet
Projects
None yet
Milestone
Deploy enhanced version of Django E-c...
Development

No branches or pull requests
2 participants
@ryaustin @kjcioffi