Merge pull request #6662 from andywarburton/main

tannewt · web-flow · commit 96e870dc7727 · 2022-07-29T09:42:13.000-07:00
Added css support to web workflow
diff --git a/supervisor/shared/web_workflow/static/directory.html b/supervisor/shared/web_workflow/static/directory.html
@@ -4,6 +4,7 @@
     <title></title>
     <meta charset="UTF-8">
     <script src="/directory.js" defer=true></script>
+    <link rel="stylesheet" href="/style.css">
 </head>
 <body>
     <h1><a href="/"><img src="/favicon.ico"/></a>&nbsp;<span id="path"></span></h1>
diff --git a/supervisor/shared/web_workflow/static/serial.html b/supervisor/shared/web_workflow/static/serial.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="/serial.js" defer=true></script>
+  <link rel="stylesheet" href="/style.css">
 </head>
 <body style="flex-direction: column; display: flex; height: 100%; width: 100%; margin: 0; font-size: 1rem;">
   <div style="flex: auto; display: flex; overflow: auto; flex-direction: column;">
diff --git a/supervisor/shared/web_workflow/static/style.css b/supervisor/shared/web_workflow/static/style.css
@@ -0,0 +1,7 @@
+body {
+  max-width: 960px;
+  margin: 20px auto;
+  font-size: 18px;
+  font-family: "Proxima Nova", Verdana, sans-serif;
+  line-height: 20.7px;
+}
diff --git a/supervisor/shared/web_workflow/static/welcome.html b/supervisor/shared/web_workflow/static/welcome.html
@@ -5,17 +5,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/welcome.js" defer=true></script>
+    <link rel="stylesheet" href="/style.css">
 </head>
 <body>
+
     <h1><a href="/"><img src="/favicon.ico"/></a>&nbsp;Welcome!</h1>
-    Welcome to CircuitPython's Web API. Go to the <a href="/fs/">file browser</a> to work with files in the CIRCUITPY drive. Go to the <a href="/cp/serial/">serial terminal</a> to see code output and interact with the REPL. Make sure you've set <code>CIRCUITPY_WEB_API_PASSWORD='somepassword'</code> in <code>/.env</code>. Provide the password when the browser prompts for it. Leave the username blank.
-    <h2>Device Info</h2>
-    Board: <a id="board"></a><br>
-    Version: <span id="version"></span><br>
-    Hostname: <a id="hostname"></a><br>
-    IP: <a id="ip"></a>
-    <h2>Other Devices</h2>
-    Here are other CircuitPython devices on your network:
+
+    <p>Welcome to CircuitPython's Web API. Go to the <a href="/fs/">file browser</a> to work with files in the CIRCUITPY drive. Go to the <a href="/cp/serial/">serial terminal</a> to see code output and interact with the REPL. Make sure you've set <code>CIRCUITPY_WEB_API_PASSWORD='somepassword'</code> in <code>/.env</code>. Provide the password when the browser prompts for it. <strong>Leave the username blank.</strong></p>
+
+    <h2>Device Info:</h2>
+
+    <dl>
+        <dt>Board:</dt>
+        <dd><a id="board"></a></dd>
+        <dt>Version:</dt>
+        <dd><span id="version"></span></dd>
+        <dt>Hostname:</dt>
+        <dd><a id="hostname"></a></dd>
+        <dt>IP:</dt>
+        <dd><a id="ip"></a></dd>
+    </dl>
+
+    <h2>Here are other CircuitPython devices on your network:</h2>
     <ul id="devices">
     </ul>
 </body>
diff --git a/supervisor/shared/web_workflow/web_workflow.c b/supervisor/shared/web_workflow/web_workflow.c
@@ -894,6 +894,7 @@ STATIC_FILE(directory_html);
 STATIC_FILE(directory_js);
 STATIC_FILE(welcome_html);
 STATIC_FILE(welcome_js);
+STATIC_FILE(style_css);
 STATIC_FILE(serial_html);
 STATIC_FILE(serial_js);
 STATIC_FILE(blinka_16x16_ico);
@@ -1103,6 +1104,8 @@ static bool _reply(socketpool_socket_obj_t *socket, _request *request) {
             _REPLY_STATIC(socket, request, welcome_js);
         } else if (strcmp(request->path, "/serial.js") == 0) {
             _REPLY_STATIC(socket, request, serial_js);
+        } else if (strcmp(request->path, "/style.css") == 0) {
+            _REPLY_STATIC(socket, request, style_css);
         } else if (strcmp(request->path, "/favicon.ico") == 0) {
             // TODO: Autogenerate this based on the blinka bitmap and change the
             // palette based on MAC address.
