Skip to content

Commit e231f04

Browse files
simonwsimonw
committed
Align permission simulator layouts
1 parent 1183a25 commit e231f04

3 files changed

Lines changed: 60 additions & 64 deletions

File tree

‎datasette/templates/_permission_ui_styles.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@
99
.permission-form form {
1010
max-width: 60rem;
1111
}
12+
.permission-form-grid {
13+
display: grid;
14+
gap: 1.5rem;
15+
grid-template-columns: repeat(2, minmax(0, 1fr));
16+
}
17+
.permission-form-result {
18+
margin-top: 1rem;
19+
max-width: 60rem;
20+
}
1221
.form-section {
1322
margin-bottom: 1.25em;
1423
}
@@ -174,4 +183,9 @@
174183
text-align: center;
175184
color: #666;
176185
}
186+
@media only screen and (max-width: 576px) {
187+
.permission-form-grid {
188+
grid-template-columns: minmax(0, 1fr);
189+
}
190+
}
177191
</style>

‎datasette/templates/allow_debug.html‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,9 @@
55
{% block extra_head %}
66
{% include "_permission_ui_styles.html" %}
77
<style>
8-
.two-col {
9-
display: inline-block;
10-
width: 48%;
11-
}
12-
.two-col label {
13-
width: 48%;
14-
}
158
p.message-warning {
169
white-space: pre-wrap;
1710
}
18-
@media only screen and (max-width: 576px) {
19-
.two-col {
20-
width: 100%;
21-
}
22-
}
2311
</style>
2412
{% endblock %}
2513

@@ -32,24 +20,28 @@ <h1>Debug allow rules</h1>
3220

3321
<p>Use this tool to try out different actor and allow combinations. See <a href="https://docs.datasette.io/en/stable/authentication.html#defining-permissions-with-allow-blocks">Defining permissions with "allow" blocks</a> for documentation.</p>
3422

35-
<form class="core" action="{{ urls.path('-/allow-debug') }}" method="get" style="margin-bottom: 1em">
36-
<div class="two-col">
37-
<p><label>Allow block</label></p>
38-
<textarea class="permission-textarea" name="allow">{{ allow_input }}</textarea>
39-
</div>
40-
<div class="two-col">
41-
<p><label>Actor</label></p>
42-
<textarea class="permission-textarea" name="actor">{{ actor_input }}</textarea>
43-
</div>
44-
<div style="margin-top: 1em;">
45-
<input type="submit" value="Apply allow block to actor">
46-
</div>
47-
</form>
48-
49-
{% if error %}<p class="message-warning">{{ error }}</p>{% endif %}
50-
51-
{% if result == "True" %}<p class="message-info">Result: allow</p>{% endif %}
52-
53-
{% if result == "False" %}<p class="message-error">Result: deny</p>{% endif %}
23+
<div class="permission-form">
24+
<form class="core" action="{{ urls.path('-/allow-debug') }}" method="get">
25+
<div class="permission-form-grid">
26+
<div class="form-section">
27+
<label for="allow-block">Allow block</label>
28+
<textarea class="permission-textarea" id="allow-block" name="allow">{{ allow_input }}</textarea>
29+
</div>
30+
<div class="form-section">
31+
<label for="allow-actor">Actor</label>
32+
<textarea class="permission-textarea" id="allow-actor" name="actor">{{ actor_input }}</textarea>
33+
</div>
34+
</div>
35+
<div class="form-actions">
36+
<button type="submit" class="submit-btn">Apply allow block to actor</button>
37+
</div>
38+
</form>
39+
40+
{% if error %}<p class="message-warning permission-form-result">{{ error }}</p>{% endif %}
41+
42+
{% if result == "True" %}<p class="message-info permission-form-result">Result: allow</p>{% endif %}
43+
44+
{% if result == "False" %}<p class="message-error permission-form-result">Result: deny</p>{% endif %}
45+
</div>
5446

5547
{% endblock %}

‎datasette/templates/debug_permissions_playground.html‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,6 @@
2020
.check-action, .check-when, .check-result {
2121
font-size: 1.3em;
2222
}
23-
.two-col {
24-
display: inline-block;
25-
width: 48%;
26-
}
27-
.two-col label {
28-
width: 48%;
29-
}
30-
@media only screen and (max-width: 576px) {
31-
.two-col {
32-
width: 100%;
33-
}
34-
}
3523
</style>
3624
{% endblock %}
3725

@@ -47,28 +35,30 @@ <h2>Raw simulator</h2>
4735

4836
<div class="permission-form">
4937
<form action="{{ urls.path('-/permissions') }}" id="debug-post" method="post">
50-
<div class="two-col">
51-
<div class="form-section">
52-
<label>Actor</label>
53-
<textarea class="permission-textarea" name="actor">{% if actor_input %}{{ actor_input }}{% else %}{"id": "root"}{% endif %}</textarea>
54-
</div>
55-
</div>
56-
<div class="two-col" style="vertical-align: top">
57-
<div class="form-section">
58-
<label for="permission">Action</label>
59-
<select name="permission" id="permission">
60-
{% for permission in permissions %}
61-
<option value="{{ permission.name }}">{{ permission.name }}</option>
62-
{% endfor %}
63-
</select>
64-
</div>
65-
<div class="form-section">
66-
<label for="resource_1">Parent</label>
67-
<input type="text" id="resource_1" name="resource_1" placeholder="e.g., database name">
38+
<div class="permission-form-grid">
39+
<div>
40+
<div class="form-section">
41+
<label for="activity-actor">Actor</label>
42+
<textarea class="permission-textarea" id="activity-actor" name="actor">{% if actor_input %}{{ actor_input }}{% else %}{"id": "root"}{% endif %}</textarea>
43+
</div>
6844
</div>
69-
<div class="form-section">
70-
<label for="resource_2">Child</label>
71-
<input type="text" id="resource_2" name="resource_2" placeholder="e.g., table name">
45+
<div>
46+
<div class="form-section">
47+
<label for="permission">Action</label>
48+
<select name="permission" id="permission">
49+
{% for permission in permissions %}
50+
<option value="{{ permission.name }}">{{ permission.name }}</option>
51+
{% endfor %}
52+
</select>
53+
</div>
54+
<div class="form-section">
55+
<label for="resource_1">Parent</label>
56+
<input type="text" id="resource_1" name="resource_1" placeholder="e.g., database name">
57+
</div>
58+
<div class="form-section">
59+
<label for="resource_2">Child</label>
60+
<input type="text" id="resource_2" name="resource_2" placeholder="e.g., table name">
61+
</div>
7262
</div>
7363
</div>
7464
<div class="form-actions">

0 commit comments

Comments
 (0)