Test accordion layout for settings ref

AUS-DOH-Safety-and-Quality · Dec 20, 2023 · a8a4127 · a8a4127
1 parent fde32b7
commit a8a4127
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 0 deletions.
diff --git a/docs/SettingsReference.md b/docs/SettingsReference.md
@@ -8,3 +8,73 @@ nav_order: 7
 # Settings Options
 
 This page summarises the usage and options for each of the Settings menus provided by the visual.
+
+<button class="accordion">Data Settings</button>
+<div class="panel">
+  <p>Controlling the calculation of control limits</p>
+
+  <button class="accordion">Chart Type</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Keep Outliers in Limit Calcs.</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Multiplier</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Decimals to Report</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Report as percentage</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Split Limits on Click</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Truncate Lower Limits at:</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Truncate Upper Limits at:</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Target</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+</div>
+
+<button class="accordion">Outlier Highlighting</button>
+<div class="panel">
+  <p>Options</p>
+
+  <button class="accordion">Type of Change to Flag</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Improvement Direction</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+
+  <button class="accordion">Highlight all in Pattern</button>
+  <div class="panel">
+    <p>Available option</p>
+  </div>
+</div>
diff --git a/docs/_includes/head_custom.html b/docs/_includes/head_custom.html
@@ -4,3 +4,29 @@
   {% when "mathjax" %}
     {% include mathjax.html %}
 {% endcase %}
+
+<style>
+  .accordion {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 50%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    transition: 0.4s;
+  }
+
+  .active, .accordion:hover {
+    background-color: #ccc;
+  }
+
+  .panel {
+    padding: 0 18px;
+    display: none;
+    background-color: white;
+    overflow: hidden;
+  }
+  </style>