Skip to content

Allow overriding CSS and JavaScript - #1418

Merged
bittner merged 2 commits into
masterfrom
feature/allow-overriding-css-and-javascript
Dec 3, 2020
Merged

Allow overriding CSS and JavaScript#1418
bittner merged 2 commits into
masterfrom
feature/allow-overriding-css-and-javascript

Conversation

@bittner

@bittner bittner commented Dec 2, 2020

Copy link
Copy Markdown
Contributor

If I want to override the CSS and JavaScript shipped with debug toolbar there is no easy way to do this cleanly.

This change adds two template blocks to the base template, which allows extending the template cleanly, patching just CSS and/or JavaScript, as follows:

{# FILE: templates/debug_toolbar/base.html #}

{% extends "debug_toolbar/base.html" %}
{% load static %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/debug-toolbar-custom.css' %}">
{% endblock %}

{% block js %}
{{ block.super }}
<script src="{% static 'js/debug-toolbar-custom.js' %}" async></script>
{% endblock %}

I also fixed a minor syntax highlighting issue, but I included that with a separate commit. I hope that's fine.

@codecov

codecov Bot commented Dec 2, 2020

Copy link
Copy Markdown

Codecov Report

Merging #1418 (0fb6d06) into master (f277b9d) will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #1418   +/-   ##
=======================================
  Coverage   87.76%   87.76%           
=======================================
  Files          29       29           
  Lines        1577     1577           
  Branches      220      220           
=======================================
  Hits         1384     1384           
  Misses        142      142           
  Partials       51       51           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f277b9d...0fb6d06. Read the comment docs.

@bittner
bittner requested a review from jdufresne December 2, 2020 22:25

@matthiask matthiask left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with this. I asked myself whether you wouldn't want to add your own CSS and JS on top instead of replacing the bundled assets (e.g. using {% block extrahead %} similar to Django's administration panel) but then I remembered that django-debug-toolbar isn't added to the <head> at all.

@bittner

bittner commented Dec 3, 2020

Copy link
Copy Markdown
Contributor Author

Thanks for reviewing, @matthiask! 💯

Merging. 🚀

@bittner
bittner merged commit 8814450 into master Dec 3, 2020
@bittner
bittner deleted the feature/allow-overriding-css-and-javascript branch December 3, 2020 07:39
@bittner

bittner commented Dec 3, 2020

Copy link
Copy Markdown
Contributor Author

Can we push a new release to PyPI with this soon?

@bittner
bittner requested a review from pauloxnet December 3, 2020 08:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants