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

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

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

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

Relevant code:

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

Compare with:

{% 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:

@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
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant