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.

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

Custom CSS class on body for styling canned queries #727

Closed
simonw opened this issue Apr 15, 2020 · 5 comments
Closed

Custom CSS class on body for styling canned queries #727

simonw opened this issue Apr 15, 2020 · 5 comments
Labels
css enhancement small

Comments

@simonw
Copy link
Owner

simonw commented Apr 15, 2020

https://latest.datasette.io/fixtures/neighborhood_search is a canned query page.

One of the templates scanned is query-fixtures-neighborhood_search.html

BUT... the body CSS class just looks like this:

<body class="query db-fixtures">

I would be useful if that included a class that can be used to style that specific canned query page.
@simonw
Copy link
Owner Author

simonw commented Apr 15, 2020 •
edited

Compare with this table page https://latest.datasette.io/fixtures/complex_foreign_keys which has:

<body class="table db-fixtures table-complex_foreign_keys">

So in the above example the extra class should be query-neighborhood_search.

@simonw
Copy link
Owner Author

simonw commented Apr 15, 2020 •
edited

Relevant code:

datasette/datasette/templates/query.html

Line 19 in d349d57

{% block body_class %}query db-{{ database|to_css_class }}{% endblock %}

Compare with:

datasette/datasette/templates/table.html

Line 17 in d349d57

{% block body_class %}table db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}

@simonw
Copy link
Owner Author

simonw commented Apr 15, 2020

And here's the test:

datasette/tests/test_html.py

Lines 433 to 456 in d349d57

@pytest.mark.parametrize(
"path,expected_classes",
[
("/", ["index"]),
("/fixtures", ["db", "db-fixtures"]),
(
"/fixtures/simple_primary_key",
["table", "db-fixtures", "table-simple_primary_key"],
),
(
"/fixtures/table%2Fwith%2Fslashes.csv",
["table", "db-fixtures", "table-tablewithslashescsv-fa7563"],
),
(
"/fixtures/simple_primary_key/1",
["row", "db-fixtures", "table-simple_primary_key"],
),
],
)
def test_css_classes_on_body(app_client, path, expected_classes):
response = app_client.get(path)
assert response.status == 200
classes = re.search(r'<body class="(.*)">', response.text).group(1).split()
assert classes == expected_classes

@simonw simonw closed this as completed in 15e2321 Apr 15, 2020
simonw added a commit to simonw/big-local-datasette that referenced this issue Apr 15, 2020
@simonw
Deploy custom Datasette branch
4ffe361 
So I can use simonw/datasette#727

Refs #19
@simonw
Copy link
Owner Author

simonw commented Apr 15, 2020

https://latest.datasette.io/fixtures/neighborhood_search now has the following:

<body class="query db-fixtures query-neighborhood_search">

@simonw
Copy link
Owner Author

simonw commented Apr 15, 2020

https://datasette.readthedocs.io/en/latest/custom_templates.html#css-classes-on-the-body has the updated documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css enhancement small
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@simonw