Add mobile support for basic "feedback" dialog

tailbone/templates/mobile/base.mako

@@ -52,7 +52,7 @@
 
     ${self.mobile_header()}
 
-    <div data-role="page" data-url="${self.page_url()}"${' data-rel="dialog"' if dialog else ''|n}>
+    <div data-role="page" data-url="${self.page_url()}">
 
       ${self.mobile_usermenu()}
 
@@ -86,20 +86,26 @@
   <div data-role="header">
     ${self.mobile_header_link()}
     <h1>${base_meta.global_title()}</h1>
+    ${self.mobile_header_feedback()}
   </div>
 </%def>
 
 <%def name="mobile_header_link()">
   <% classes = 'ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ' %>
   % if request.user:
-      ${h.link_to(request.user.get_short_name(), '#usermenu', class_=classes + 'ui-icon-user' + (' root-user' if request.is_root else ''))}
+      ${h.link_to(request.user.get_short_name(), '#usermenu', data_role='button', data_icon='user',
+          class_=' root-user' if request.is_root else '')}
   % elif request.matched_route.name in ('mobile.login', 'mobile.about'):
-      ${h.link_to("Home", url('mobile.home'), class_=classes + 'ui-icon-home')}
+      ${h.link_to("Home", url('mobile.home'), data_role='button', data_icon='home')}
   % else:
-      ${h.link_to("Login", url('mobile.login'), class_=classes + 'ui-icon-user')}
+      ${h.link_to("Login", url('mobile.login'), data_role='button', data_icon='user')}
   % endif
 </%def>
 
+<%def name="mobile_header_feedback()">
+  ${h.link_to("Feedback", '#', id='feedback-button', data_role='button', data_icon='recycle')}
+</%def>
+
 <%def name="mobile_usermenu()">
   <div id="usermenu" data-role="panel" data-display="overlay">
     <ul data-role="listview">
@@ -137,6 +143,15 @@
 
     ${self.body()}
 
+    <div data-role="popup" data-overlay-theme="b" id="feedback-popup" class="ui-content">
+      <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
+      ${self.mobile_feedback_form()}
+    </div>
+
+    <div data-role="popup" data-overlay-theme="b" id="feedback-thanks" class="ui-content">
+      Thank you for your feedback.
+    </div>
+
     <div class="replacement-header">
       ${self.mobile_header_link()}
     </div>
@@ -149,3 +164,45 @@
     <h4>powered by ${h.link_to("Rattail", url('mobile.about'))}</h4>
   </div>
 </%def>
+
+<%def name="mobile_feedback_form()">
+  ${h.form(url('mobile.feedback'))}
+  ${h.csrf_token(request)}
+  ${h.hidden('user', value=request.user.uuid if request.user else None)}
+
+  <p>
+    Questions, suggestions, comments, complaints, etc. <span class="red">regarding this website</span>
+    are welcome and may be submitted below.
+  </p>
+
+  <div class="field-wrapper referrer">
+    <label for="referrer">Referring URL</label>
+    <div class="field"></div>
+    ${h.hidden('referrer')}
+  </div>
+
+  % if request.user:
+      ${h.hidden('user_name', value=six.text_type(request.user))}
+  % else:
+      <div class="field-wrapper user_name">
+        <label for="user_name">Your Name</label>
+        <div class="field">
+          ${h.text('user_name')}
+        </div>
+      </div>
+  % endif
+
+  <div class="field-wrapper message">
+    <label for="message">Message</label>
+    <div class="field">
+      ${h.textarea('message', cols=45, rows=15)}
+    </div>
+  </div>
+
+  <div class="buttons" id="feedback-form-buttons">
+    <button type="button" data-inline="true" class="submit" data-theme="b">Send Note</button>
+    <button type="button" data-inline="true" class="cancel">Cancel</button>
+  </div>
+
+  ${h.end_form()}
+</%def>