Share permission form control styles

Author: simonw

datasette/templates/_permission_ui_styles.html

@@ -6,31 +6,55 @@
     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;
     margin-bottom: 0.3em;
     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 {

datasette/templates/allow_debug.html

@@ -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 @@ <h1>Debug allow rules</h1>
 <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">

datasette/templates/debug_check.html

@@ -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 @@ <h1>Explain a permission decision</h1>
 
 <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>