remote/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2026-07-16 12:34:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

Share permission form control styles

Browse source
This commit is contained in:
Simon Willison 2026-07-14 08:10:29 -07:00
commit 2d3c427213
3 changed files with 39 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

44
datasette/templates/_permission_ui_styles.html
View file

@ -6,8 +6,11 @@
padding: 1.5em;
margin-bottom: 2em;
}
.permission-form form {
max-width: 60rem;
}
.form-section {
margin-bottom: 1em;
margin-bottom: 1.25em;
}
.form-section label {
display: block;
@ -15,22 +18,43 @@
font-weight: bold;
}
.form-section input[type="text"],
.form-section select {
width: 100%;
max-width: 500px;
padding: 0.5em;
.form-section select,
.permission-textarea {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
color: #222;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
max-width: none;
width: 100%;
}
.form-section input[type="text"] {
padding: 0.6rem 0.75rem;
}
.form-section select {
min-height: 2.75rem;
padding: 0.6rem 0.75rem;
}
.permission-textarea {
font-family: monospace;
min-height: 12rem;
padding: 0.75rem;
resize: vertical;
}
.form-section input[type="text"]:focus,
.form-section select:focus {
outline: 2px solid #0066cc;
.form-section select:focus,
.permission-textarea:focus {
border-color: #0066cc;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
outline: none;
}
.form-section small {
display: block;
margin-top: 0.3em;
margin-top: 0.45em;
color: #666;
}
.form-actions {

12
datasette/templates/allow_debug.html
View file

@ -3,14 +3,8 @@
{% block title %}Debug allow rules{% endblock %}
{% block extra_head %}
{% include "_permission_ui_styles.html" %}
<style>
textarea {
height: 10em;
width: 95%;
box-sizing: border-box;
padding: 0.5em;
border: 2px dotted black;
}
.two-col {
display: inline-block;
width: 48%;
@ -41,11 +35,11 @@ p.message-warning {
<form class="core" action="{{ urls.path('-/allow-debug') }}" method="get" style="margin-bottom: 1em">
<div class="two-col">
<p><label>Allow block</label></p>
<textarea name="allow">{{ allow_input }}</textarea>
<textarea class="permission-textarea" name="allow">{{ allow_input }}</textarea>
</div>
<div class="two-col">
<p><label>Actor</label></p>
<textarea name="actor">{{ actor_input }}</textarea>
<textarea class="permission-textarea" name="actor">{{ actor_input }}</textarea>
</div>
<div style="margin-top: 1em;">
<input type="submit" value="Apply allow block to actor">

45
datasette/templates/debug_check.html
View file

@ -7,47 +7,6 @@
{% include "_permission_ui_styles.html" %}
{% include "_debug_common_functions.html" %}
<style>
.permission-check-form form {
max-width: 60rem;
}
.permission-check-form .form-section {
margin-bottom: 1.25em;
}
.permission-check-form .form-section select,
.permission-check-form .form-section input[type="text"],
#actor {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
color: #222;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
max-width: none;
width: 100%;
}
.permission-check-form .form-section select {
min-height: 2.75rem;
padding: 0.6rem 0.75rem;
}
#actor {
font-family: monospace;
min-height: 12rem;
padding: 0.75rem;
resize: vertical;
}
.permission-check-form .form-section select:focus,
.permission-check-form .form-section input[type="text"]:focus,
#actor:focus {
border-color: #0066cc;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
outline: none;
}
.permission-check-form .form-section small {
margin-top: 0.45em;
}
#output {
margin-top: 2em;
padding: 1em;
@ -154,11 +113,11 @@
<p>Test an actor, action and resource. The result explains which rules matched, which specificity level won, and whether actor restrictions or required actions changed the verdict.</p>
<div class="permission-form permission-check-form">
<div class="permission-form">
<form id="check-form" method="get" action="{{ urls.path('-/check') }}">
<div class="form-section">
<label for="actor">Actor JSON:</label>
<textarea id="actor" name="actor">{{ actor_json }}</textarea>
<textarea class="permission-textarea" id="actor" name="actor">{{ actor_json }}</textarea>
<small>Use <code>null</code> for an anonymous actor. This actor is simulated; it does not change who you are signed in as.</small>
</div>