Docs: update page position example

Author: jlukic

docs/src/examples/query/dimensions/query-pageposition/page.css

@@ -1,34 +1,55 @@
 .container {
   position: relative;
   height: 200px;
-  margin: 20px 0;
-  background: var(--standard-10);
-  border: var(--border);
+  margin: var(--vertically-spaced) 0;
+  background: var(--angled-gradient) var(--yellow-background-color);
+  border: 2px solid var(--yellow-border-color);
   border-radius: var(--border-radius);
 }
 
 .box {
   position: absolute;
   width: 180px;
   height: 60px;
-  padding: 10px;
+  padding: var(--padding);
   top: 10px;
   left: 10px;
-  background: var(--standard-10);
+  background: var(--angled-gradient) var(--blue-background-color);
+  border: 2px solid var(--blue-border-color);
   border-radius: var(--border-radius);
   text-align: center;
   align-content: center;
+  font-weight: bold;
+  color: var(--blue-text-color);
 }
 
+.measurements {
+  margin: var(--vertically-spaced);
+  background: var(--standard-5);
+  border: var(--border);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+  font-weight: bold;
+  font-size: var(--large);
 
-p {
-  margin: 8px 0;
-  font-family: monospace;
-  span {
-    font-weight: bold;
+  .parts {
+    font-size: var(--medium);
+    margin-top: var(--margin);
+    color: var(--standard-40);
+    border-top: var(--border);
+    padding-top: var(--padding);
   }
-  b {
-    font-weight: bold;
-    color: var(--primary-text-color);
+
+  p {
+    margin: 3px 0;
+    font-family: Monospace;
+    span {
+      font-weight: bold;
+      color: var(--primary-text-color);
+    }
+    b {
+      font-weight: bold;
+      color: var(--primary-text-color);
+    }
   }
 }

docs/src/examples/query/dimensions/query-pageposition/page.html

@@ -1,10 +1,13 @@
-<p>Get and set element position relative to document</p>
-
 <div class="container">
   <div class="box">Movable box</div>
 </div>
 
-<p>Position relative to page: <span class="position"></span></p>
+<div class="measurements">
+  <p>Page Position: top: <span class="page-top">-</span><b>px</b>, left: <span class="page-left">-</span><b>px</b></p>
+  <div class="parts">
+    <p>Includes scroll offset from document origin</p>
+  </div>
+</div>
 
 <ui-button class="move">Move to global (100, 50)</ui-button>
 <ui-button class="reset">Move to global (0, 0)</ui-button>

docs/src/examples/query/dimensions/query-pageposition/page.js

@@ -1,8 +1,11 @@
 import { $ } from '@semantic-ui/query';
 
 function updatePosition() {
+  // pagePosition() returns position relative to document including scroll
   const pos = $('.box').pagePosition();
-  $('.position').text(`top: ${Math.round(pos.top)}px, left: ${Math.round(pos.left)}px`);
+
+  $('.page-top').text(Math.round(pos.top));
+  $('.page-left').text(Math.round(pos.left));
 }
 
 // Show initial position