Add 'falafel' theme, based on bobcat

but with more aggressive approach, includes no jQuery UI JS/CSS (and is
somewhat broken accordingly, for now)

tailbone/static/themes/falafel/css/layout.css

@@ -0,0 +1,99 @@
+
+/******************************
+ * main layout
+ ******************************/
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.content-wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+
+/******************************
+ * header
+ ******************************/
+
+header .level {
+    /* height: 60px; */
+    line-height: 60px;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
+header .level #header-logo {
+    display: inline-block;
+}
+
+header .level .global-title,
+header .level-left .global-title {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+header .level #current-context,
+header .level-left #current-context {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+header .level #current-context span,
+header .level-left #current-context span {
+    margin-right: 10px;
+}
+
+header .level .theme-picker {
+    display: inline-flex;
+}
+
+#content-title h1 {
+    font-size: 2em;
+}
+
+/******************************
+ * content
+ ******************************/
+
+#page-body {
+    padding: 0.4em;
+}
+
+/******************************
+ * context menu
+ ******************************/
+
+#context-menu {
+    text-align: right;
+    white-space: nowrap;
+}
+
+/******************************
+ * "object helper" panel
+ ******************************/
+
+.object-helper {
+    border: 1px solid black;
+    margin: 1em;
+    padding: 1em;
+    width: 20em;
+}
+
+.object-helper-content {
+    margin-top: 1em;
+}
+
+/******************************
+ * feedback
+ ******************************/
+
+.feedback-dialog .red {
+    color: red;
+    font-weight: bold;
+}

tailbone/static/themes/falafel/js/tailbone.feedback.js

@@ -0,0 +1,59 @@
+
+const FeedbackForm = {
+    props: ['user_name', 'referrer'],
+    template: '#feedback-template',
+    methods: {
+        sendFeedback() {
+
+            var textarea = $('.feedback-dialog textarea');
+            var msg = $.trim(textarea.val());
+            if (! msg) {
+                alert("Please enter a message.");
+                textarea.select();
+                textarea.focus();
+                return;
+            }
+
+            // disable_button(dialog_button(event));
+
+            var form = $('.feedback-dialog').parents('form');
+            // TODO: this was copied from default template, but surely we could
+            // just serialize() the form instead?
+            var data = {
+                _csrf: form.find('input[name="_csrf"]').val(),
+                referrer: location.href,
+                user: form.find('input[name="user"]').val(),
+                user_name: form.find('input[name="user_name"]').val(),
+                message: msg
+            };
+
+            var that = this;
+            $.ajax(form.attr('action'), {
+                method: 'POST',
+                data: data,
+                success: function(data) {
+                    that.$emit('close');
+                    alert("Message successfully sent.\n\nThank you for your feedback.");
+                }
+            });
+
+        }
+    }
+}
+
+new Vue({
+    el: '#feedback-app',
+    methods: {
+        showFeedback() {
+            this.$modal.open({
+                parent: this,
+                canCancel: ['escape', 'x'],
+                component: FeedbackForm,
+                hasModalCard: true,
+                props: {
+                    referrer: location.href
+                }
+            });
+        }
+    }
+});