Style the examples

laffra · laffra · commit db403c650728 · 2023-11-13T13:31:27.000+01:00
diff --git a/examples/custom.py b/examples/custom.py
@@ -7,7 +7,7 @@
 def create():
     
     class CustomWidget(ltk.VBox):
-        classes = [ "custom" ]
+        classes = [ "custom Widget" ]
 
         def __init__(self, src, label):
             ltk.VBox.__init__(self, 
@@ -23,7 +23,8 @@ def __init__(self, src, label):
             ltk.Card(
                 CustomWidget("https://chrislaffra.com/chris.png", "Chris laffra")
             ).css("width", 200).draggable(),
-            ltk.Text("For clarity, we marked the custom widget orange.").css("margin-top", 20),
+            ltk.Text("For clarity, we marked the custom widget orange.")
+                .css("margin-top", 20),
             ltk.H4("Tip: drag the card."),
         )
         .attr("name", "Custom")                 # example
diff --git a/index.html b/index.html
@@ -15,9 +15,34 @@
     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
     <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+    <style>
+        #progress {
+            position: absolute;
+            overflow: hidden;
+            top: 0px;
+            z-index: 10000;
+            width: 100%;
+            height: 3px;
+        }
+
+        #progress img {
+            position: relative;
+            height: 100px;
+            width: 300%;
+            top: -50px;
+            left: -100vw;
+            opacity: 0.5;
+        }
+    </style>
 </head>
 <body>
-    <h1>The PyScript LTK Kitchen Sink</h1>
+    <div id="progress">
+        <img src="progress_line.gif">
+    </div>
+
+    <center>
+        <h1>The PyScript LTK Kitchen Sink</h1>
+    </center>
 
     <!-- Include LTK itself and its examples -->
     <py-config>
diff --git a/main.py b/main.py
@@ -9,17 +9,27 @@ def cleanup(src):
         if not "# example" in line
     ])
 
+ltk.find("#progress").remove()
 
 ltk.body.append(
-    ltk.Tabs(
-        ltk.HBox(
-            example.css("width", "50%"),
-            ltk.VBox(
-                ltk.H2("The source:"),
-                ltk.TextArea(cleanup(example.attr("src")))
-                    .css("height", 400)
-            ).css("width", "50%"),
-        ).attr("name", example.attr("name"))
-        for example in examples.elements
+    ltk.Div(
+        ltk.Tabs(
+            ltk.HBox(
+                example.css("width", "40%"),
+                ltk.VBox(
+                    ltk.H2("The source:"),
+                    ltk.TextArea(cleanup(example.attr("src")))
+                        .css("height", 400)
+                        .css("border-width", 0)
+                        .css("font-family", "Courier")
+                )
+                .css("width", "60%")
+                .css("padding-left", 24)
+                .css("border-left", "2px solid lightgray"),
+            ).attr("name", example.attr("name"))
+            for example in examples.elements
+        )
     )
-)
+    .css("width", 1300)
+    .css("margin", "auto")
+)
diff --git a/progress_line.gif b/progress_line.gif
