fix: add form padding, validators for /configure pages

putting the gap/margin in base css so another template can override

src/wuttaweb/templates/base.mako

@@ -124,9 +124,11 @@
         }
     % endif
 
-    ## nb. this refers to the "menu-sized" app title in far left of main menu
+    ## nb. this refers to the "home link" app title, next to small
+    ## header logo in top left of screen
     #navbar-brand-title {
         font-weight: bold;
+        margin-left: 0.3rem;
     }
 
     #header-index-title {
@@ -149,6 +151,12 @@
         white-space: nowrap;
     }
 
+    .wutta-form-wrapper {
+        margin-left: 5rem;
+        margin-top: 2rem;
+        width: 50%;
+    }
+
   </style>
 </%def>
 
@@ -299,7 +307,7 @@
 <%def name="render_navbar_brand()">
   <div class="navbar-brand">
     <a class="navbar-item" href="${url('home')}">
-      <div style="display: flex; gap: 0.3rem; align-items: center;">
+      <div style="display: flex; align-items: center;">
         ${base_meta.header_logo()}
         <div id="navbar-brand-title">
           ${base_meta.global_title()}
@@ -480,36 +488,44 @@
 <%def name="render_crud_header_buttons()">
   % if master:
       % if master.viewing:
-         <wutta-button once
+          % if instance_editable and master.has_perm('edit'):
-                       tag="a" href="${master.get_action_url('edit', instance)}"
+              <wutta-button once
-                       icon-left="edit"
+                            tag="a" href="${master.get_action_url('edit', instance)}"
-                       label="Edit This" />
+                            icon-left="edit"
-         % if instance_deletable:
+                            label="Edit This" />
-             <wutta-button once type="is-danger"
+          % endif
-                           tag="a" href="${master.get_action_url('delete', instance)}"
+          % if instance_deletable and master.has_perm('delete'):
-                           icon-left="trash"
+              <wutta-button once type="is-danger"
-                           label="Delete This" />
+                            tag="a" href="${master.get_action_url('delete', instance)}"
-         % endif
+                            icon-left="trash"
-     % elif master.editing:
+                            label="Delete This" />
-         <wutta-button once
+          % endif
-                       tag="a" href="${master.get_action_url('view', instance)}"
+      % elif master.editing:
-                       icon-left="eye"
+          % if instance_viewable and master.has_perm('view'):
-                       label="View This" />
+              <wutta-button once
-         % if instance_deletable:
+                            tag="a" href="${master.get_action_url('view', instance)}"
-             <wutta-button once type="is-danger"
+                            icon-left="eye"
-                           tag="a" href="${master.get_action_url('delete', instance)}"
+                            label="View This" />
-                           icon-left="trash"
+          % endif
-                           label="Delete This" />
+          % if instance_deletable and master.has_perm('delete'):
-         % endif
+              <wutta-button once type="is-danger"
-     % elif master.deleting:
+                            tag="a" href="${master.get_action_url('delete', instance)}"
-         <wutta-button once
+                            icon-left="trash"
-                       tag="a" href="${master.get_action_url('view', instance)}"
+                            label="Delete This" />
-                       icon-left="eye"
+          % endif
-                       label="View This" />
+      % elif master.deleting:
-         <wutta-button once
+          % if instance_viewable and master.has_perm('view'):
-                       tag="a" href="${master.get_action_url('edit', instance)}"
+              <wutta-button once
-                       icon-left="edit"
+                            tag="a" href="${master.get_action_url('view', instance)}"
-                       label="Edit This" />
+                            icon-left="eye"
+                            label="View This" />
+          % endif
+          % if instance_editable and master.has_perm('edit'):
+              <wutta-button once
+                            tag="a" href="${master.get_action_url('edit', instance)}"
+                            icon-left="edit"
+                            label="Edit This" />
+          % endif
       % endif
   % endif
 </%def>

src/wuttaweb/templates/configure.mako

@@ -8,8 +8,10 @@
   ${self.buttons_content()}
 
   ${h.form(request.current_route_url(), enctype='multipart/form-data', ref='saveSettingsForm', **{'@submit': 'saveSettingsFormSubmit'})}
-  ${h.csrf_token(request)}
+    ${h.csrf_token(request)}
-  ${self.form_content()}
+    <div class="wutta-form-wrapper">
+      ${self.form_content()}
+    </div>
   ${h.end_form()}
 
   <b-modal has-modal-card
@@ -148,8 +150,18 @@
     ThisPageData.settingsNeedSaved = false
     ThisPageData.undoChanges = false
     ThisPageData.savingSettings = false
+    ThisPageData.validators = []
 
     ThisPage.methods.saveSettings = function() {
+
+        for (let validator of this.validators) {
+            let msg = validator.call(this)
+            if (msg) {
+                alert(msg)
+                return
+            }
+        }
+
         this.savingSettings = true
         this.$refs.saveSettingsForm.submit()
     }

src/wuttaweb/templates/form.mako

@@ -2,11 +2,11 @@
 <%inherit file="/page.mako" />
 
 <%def name="page_content()">
-  <div style="margin-top: 2rem; width: 50%;">
+  % if form is not Undefined:
-    % if form is not Undefined:
+      <div class="wutta-form-wrapper">
         ${form.render_vue_tag()}
-    % endif
+      </div>
-  </div>
+  % endif
 </%def>
 
 <%def name="render_vue_templates()">