feat(demo): provide guidance in the page (#54)

Explain what the demo does and how to interact with the demo.
process-analytics · Jul 24, 2023 · 016cf93 · 016cf93
1 parent 72e4620
commit 016cf93
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/demo/index.html b/packages/demo/index.html
@@ -11,11 +11,13 @@
     <header>
       <img src="/logo.svg" id="logo" alt="The Process Analytics project logo" class="logo">
       <h1>PathResolver demo</h1>
-<!--      <a href="https://github.com/process-analytics/bpmn-visualization-demo-template/" target="_blank" class="gh-logo"><img src="/github-logo.svg" id="gh-logo" alt="The GitHub logo"></a>-->
     </header>
-    <section class="controls">
-      <button id="btn-compute-path">Compute path</button>
-      <button id="bt-clear">Clear</button>
+    <section class="presentation">
+      <div class="description">Select or deselect BPMN flow nodes, then compute the missing flows in the path.</div>
+      <div class="controls">
+        <button id="btn-compute-path">Compute path</button>
+        <button id="bt-clear">Clear</button>
+      </div>
     </section>
     <div id="bpmn-container"></div>
   </body>

diff --git a/packages/demo/src/style.css b/packages/demo/src/style.css
@@ -16,8 +16,8 @@ limitations under the License.
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
   font-weight: 400;
+  line-height: 1.5;
 }
 
 body {
@@ -43,6 +43,20 @@ header {
   margin-right: .5rem;
 }
 
+.presentation {
+  display: flex;
+  flex-direction: column ;
+}
+
+.description {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+}
+
+.controls {
+  align-self: center;
+}
+
 .controls button {
   background: #5755d9;
   border-color: #4b48d6;