Update demo page

simonwep · Jan 2, 2021 · 49482db · 49482db
1 parent 5361dd6
commit 49482db
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -65,20 +65,25 @@ <h1>Selection<span>JS</span></h1>
 </header>
 
 <main>
-    <section class="sec demo">
-
+    <section class="demo">
         <div class="info">
-            <p>Click to select the boxes, use <span class="key">ctrl</span> / <span class="key">cmd</span> + <span class="key">shift</span> to select a range. </p>
+            <p>
+                <span>Click to select the boxes, use</span>
+                <span class="key">ctrl</span> /
+                <span class="key">cmd</span> +
+                <span class="key">shift</span>
+                <span> to select a range.</span>
+            </p>
             <p>Click and drag <span class="key">left mouse</span> to make a multi-selection.</p>
             <p>Hold <span class="key">ctrl</span> / <span class="key">cmd</span> to make multiple selections.</p>
         </div>
 
         <h2>Selection boundaries</h2>
-        <section class="box-wrap boxes green"></section>
-        <section class="box-wrap boxes blue"></section>
+        <section class="boxes green"></section>
+        <section class="boxes blue"></section>
 
         <h2>Full support for scrollable containers</h2>
-        <section class="box-wrap boxes red"></section>
+        <section class="boxes red"></section>
     </section>
 
     <h2>How it's being done...</h2>

diff --git a/www/code.js b/www/code.js
@@ -1,8 +1,8 @@
 // Generate dom elements
 const boxes = [
-    ['.box-wrap.boxes.red', 252],
-    ['.box-wrap.boxes.blue', 42],
-    ['.box-wrap.boxes.green', 42]
+    ['.boxes.red', 252],
+    ['.boxes.blue', 42],
+    ['.boxes.green', 42]
 ];
 
 for (const [sel, items] of boxes) {
@@ -19,10 +19,10 @@ for (const [sel, items] of boxes) {
 const selection = new SelectionArea({
 
     // All elements in this container can be selected
-    selectables: ['.box-wrap > div'],
+    selectables: ['.boxes > div'],
 
     // The container is also the boundary in this case
-    boundaries: ['.box-wrap']
+    boundaries: ['.boxes']
 }).on('start', ({store, event}) => {
 
     // Remove class if the user isn't pressing the control key or ⌘ key

diff --git a/www/styles.css b/www/styles.css
@@ -96,7 +96,7 @@ main section.demo .info {
     color: var(--c-text);
 }
 
-main section.demo .box-wrap {
+main .boxes {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -107,12 +107,12 @@ main section.demo .box-wrap {
     padding: 1em 0;
 }
 
-main section.demo .box-wrap.green,
-main section.demo .box-wrap.blue {
+main .boxes.green,
+main .boxes.blue {
     margin-bottom: 3em;
 }
 
-main section.demo .box-wrap.red {
+main .boxes.red {
     display: grid;
     grid-template-columns: repeat(28, 1fr);
     grid-gap: 0.4em;
@@ -124,11 +124,11 @@ main section.demo .box-wrap.red {
     margin-bottom: 3em;
 }
 
-main section.demo .box-wrap.red > div {
+main .boxes.red > div {
     margin: 0;
 }
 
-main .box-wrap::after {
+main .boxes::after {
     display: block;
     content: '';
     clear: both;
@@ -167,6 +167,7 @@ main .boxes.red div.selected {
 
 main section.demo .info p {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
 }
@@ -203,11 +204,6 @@ main section.demo .info p {
 
 @media only screen and (max-width: 1000px) {
 
-    #fork-me {
-        height: 6em;
-        width: 6em;
-    }
-
     header {
         padding: 1em 0 0 0;
     }
@@ -224,8 +220,12 @@ main section.demo .info p {
         margin: 0 0.5em;
     }
 
+    main .boxes.green {
+        display: none !important;
+    }
+
     main .boxes div {
-        height: 1.75em;
-        width: 1.75em;
+        height: 2em;
+        width: 2em;
     }
 }