Signature widget working in app.

resources/public/css/yyy-app.css

@@ -28,6 +28,12 @@ h1 {
   margin-top: 0;
 }
 
+#signature-pad {
+  width: 300px;
+  border: thin solid white;
+  min-height: 150px;
+}
+
 /* desktops and laptops, primarily. Adapted to mouse; targets may be small */
 @media all and (min-device-width: 1025px) {
 

resources/public/css/yyy-common.css

@@ -164,7 +164,7 @@ th {
 #main-container{
 }
 
-#back-link, .back-link {
+.back-link {
   min-width: 8em;
   padding: 0.25em 1em;
   background-color: gray;
@@ -174,26 +174,26 @@ th {
   border-bottom-right-radius: 0.5em;
 }
 
-#back-link:hover, #back-link:active, .back-link:hover, .back-link:active, {
+.back-link:hover, .back-link:active, {
   text-decoration: none;
   background-color: rgb(160, 160, 160);
 }
 
-#back-link:hover::before, #back-link:active::before {
+.back-link:hover::before, .back-link:active::before {
   content: "< ";
 }
 
-#back-link-container {
+.back-link-container {
   float: left;
   text-align: left;
 }
 
-#back-link-container, .big-link-container {
+.back-link-container, .big-link-container {
   font-size: 200%;
   padding: 0.5em 0;
 }
 
-#back-link-container > #back-link:hover::before, #back-link-container > #back-link:active::before {
+.back-link-container > .back-link:hover::before, .back-link-container > .back-link:active::before {
 
 }
 

resources/templates/app.html

@@ -1,4 +1,13 @@
 {% extends "base.html" %}
+{% block head %}
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="stylesheet" type="text/css" href="css/yyy-common.css" />
+    <link rel="stylesheet" type="text/css" href="css/yyy-app.css" />
+    <link rel="stylesheet" type="text/css" href="css/spinner.css" />
+    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Archivo+Narrow" rel="stylesheet"/>
+    <title>{{site-title}}: {{title}}</title>
+{% endblock %}
 {% block whole-page %}
     <div id="app">
       <div class="splash-screen">

resources/templates/base.html

@@ -40,8 +40,8 @@
     </header>
     {% endblock %}
     <div id="main-container" class="container">
-      <div id="back-link-container">
-        <a href="javascript:history.back()" id="back-link">Back</a>
+      <div class="back-link-container">
+        <a href="javascript:history.back()" class="back-link">Back</a>
       </div>
       <div id="big-links">
         {% block big-links %}