add bootstrap css

diff --git a/Makefile b/Makefile
new file mode 100644 (file)
index 0000000..6eeac00
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,16 @@
+#!/usr/bin/make -f
+
+all: assets/bootstrap.min.css assets/bootstrap.bundle.min.js
+
+BOOTSTRAP_VERSION=5
+BOOTSWATCH_VERSION=5
+
+assets/bootstrap.min.css:
+       curl -o "$@" "https://cdn.jsdelivr.net/npm/bootswatch@${BOOTSWATCH_VERSION}/dist/darkly/bootstrap.min.css"
+
+assets/bootstrap.bundle.min.js:
+       curl -o "$@" "https://cdn.jsdelivr.net/npm/bootstrap@${BOOTSTRAP_VERSION}/dist/js/bootstrap.bundle.min.js"
+
+
+clean:
+       rm -f assets/bootstrap.*

diff --git a/assets/.gitignore b/assets/.gitignore
new file mode 100644 (file)
index 0000000..6cdde6a
--- /dev/null
+++ b/assets/.gitignore
@@ -0,0 +1,2 @@
+bootstrap.bundle.min.js
+bootstrap.min.css

diff --git a/src/ptouch_web/dashapp.py b/src/ptouch_web/dashapp.py
index c3ff627a161a6269a566e6227de81cf49e952289..9b3b11d0ff96f6aab68bf76bdafea1152bfea034 100644 (file)
--- a/src/ptouch_web/dashapp.py
+++ b/src/ptouch_web/dashapp.py
@@ -1,25 +1,72 @@
 from dash import Dash, html, dcc, Input, Output, State, ctx
 import requests
 
-app = Dash(__name__, requests_pathname_prefix="/app/")
+app = Dash(
+    __name__,
+    requests_pathname_prefix="/app/",
+    external_stylesheets=["/app/assets/bootstrap.min.css"],
+    assets_folder="../../assets/",
+)
 
 app.layout = html.Div(
     [
         html.Div(
+            className="mb-3",
             children=[
-                html.Label("Text input"),
-                dcc.Textarea(
-                    id="label-text",
-                    style={"width": "100%"},
-                    placeholder="Text for label",
+                html.Div(
+                    className="mb-3",
+                    children=[
+                        html.Label("Label Text", className="form-label"),
+                        dcc.Textarea(
+                            id="label-text",
+                            style={"width": "100%"},
+                            className="form-control",
+                            placeholder="Text for label",
+                        ),
+                        html.Div(
+                            id="label-help",
+                            className="form-text",
+                            children=["Multiple lines print as shown"],
+                        ),
+                    ],
+                ),
+                html.Div(
+                    className="mb-3",
+                    children=[
+                        html.Label("Font size", className="form-label"),
+                        dcc.Input(
+                            id="font-size",
+                            className="form-control",
+                            type="number",
+                            min=0,
+                            max=100,
+                        ),
+                        html.Div(
+                            id="emailHelp",
+                            className="form-text",
+                            children=["Leave blank for auto font size"],
+                        ),
+                    ],
+                ),
+                html.Div(
+                    className="mb-3",
+                    children=[
+                        html.Label("Copies", className="form-label"),
+                        dcc.Input(
+                            id="copies",
+                            className="form-control",
+                            value=1,
+                            type="number",
+                            min=0,
+                            max=100,
+                        ),
+                    ],
+                ),
+                html.Button(
+                    "Print", name="print", id="print", className="btn btn-primary"
                 ),
-                html.Label("Font size"),
-                dcc.Input(id="font-size", type="number", min=0, max=100),
-                html.Label("Copies"),
-                dcc.Input(id="copies", value=1, type="number", min=0, max=100),
-                html.Button("Print", name="print", id="print"),
                 html.Div(id="print-result"),
-            ]
+            ],
         ),
     ]
 )