More demo template improvements

Author: Mark Gibbs

demo/demo/static/demo/demo.css

@@ -1,3 +1,6 @@
 /* Extra CSS markup for demo pages */
 
 .btnspace { margin-bottom: 10px; }
+
+.dpd-example-wrapper { background-color: #e0e0e0; padding: 10px; }
+.dpd-example { background-color: white; }

demo/demo/templates/demo_four.html

@@ -7,12 +7,28 @@
 
 {%block content%}
 <h1>Live Updating</h1>
-<div>
-  WS Content here
-  {%plotly_app slug="connected-2"%}
+<p>
+  Live updating uses a websocket connection. The server pushes messages to the UI, and this is then translated into a
+  callback through a dash component.
+</p>
+<div class="card bg-light border-dark">
+  <div class="card-body">
+    <p><span>{</span>% load plotly_dash %}</p>
+    <p><span>{</span>% plotly_app slug="connected-2" %}</p>
+  </div>
 </div>
-<div>
-  WS Content here
-  {%plotly_app slug="connected-2"%}
+<p>
+</p>
+<div class="card border-dark">
+  <div class="card-body">
+    {%plotly_app slug="connected-2"%}
+  </div>
+</div>
+<p>
+</p>
+<div class="card border-dark">
+  <div class="card-body">
+    {%plotly_app slug="connected-2"%}
+  </div>
 </div>
 {%endblock%}

demo/demo/templates/demo_one.html

@@ -5,11 +5,11 @@
 
 {%block content%}
 <h1>Simple App Embedding</h1>
-<div>
+<p>
   This is a simple example of use of a dash application within a Django template. Use of
   the plotly_app template tag with the name of a dash application represents the simplest use of
   the django_plotly_dash framework.
-</div>
+</p>
 <div class="card bg-light border-dark">
   <div class="card-body">
     <p><span>{</span>% load plotly_dash %}</p>

demo/demo/templates/demo_three.html

@@ -1,21 +1,23 @@
 {%extends "base.html"%}
 {%load plotly_dash%}
 
-{%block post_body%}{%plotly_message_pipe%}{%endblock%}
-
 {%block title%}Demo Three - Additional Callback Functionality{%endblock%}
 
 {%block content%}
 <h1>Enhanced Callback Functionality</h1>
-<div>
-  {%plotly_app slug="connected-2"%}
-</div>
-<div>
-  WS Content here
-  {%plotly_app name="Connected"%}
+<p>
+</p>
+<div class="card bg-light border-dark">
+  <div class="card-body">
+    <p><span>{</span>% load plotly_dash %}</p>
+    <p><span>{</span>% plotly_app slug="connected-2" %}</p>
+  </div>
 </div>
-<div>
-  WS Content here
-  {%plotly_app slug="simpleexample-1"%}
+<p>
+</p>
+<div class="card border-dark">
+  <div class="card-body">
+    {%plotly_app slug="connected-2"%}
+  </div>
 </div>
 {%endblock%}

demo/demo/templates/demo_two.html

@@ -5,10 +5,10 @@
 
 {%block content%}
 <h1>Initial State</h1>
-<div>
+<p>
   Referring to an instance of a dash application, uniquely identified by a slug, will use the persisted
   representation of that app along with its initial state.
-</div>
+</p>
 <div class="card bg-light border-dark">
   <div class="card-body">
     <p><span>{</span>% load plotly_dash %}</p>