Updated markup styled and js

samrith-s · Dec 3, 2018 · 3e00b05 · 3e00b05
1 parent 5ccfdc4
commit 3e00b05
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 8 deletions.
diff --git a/demo/src/demo.js b/demo/src/demo.js
@@ -1,2 +1,3 @@
-import TaskRunner from 'concurrent-tasks';
 import './prism';
+
+import './examples/basic-taskrunner';
diff --git a/demo/src/demo.scss b/demo/src/demo.scss
@@ -6,7 +6,9 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
+    color: #333;
     font-size: 14px;
+    line-height: 1.47;
     font-family: sans-serif;
 }
 
@@ -29,6 +31,55 @@ h6 {
     margin: 0 0 10px;
 }
 
+code {
+    padding: 2px;
+    background: rgba(1, 1, 1, 0.08);
+    color: rgba(255, 0, 100, 1);
+}
+
+pre > code {
+    display: block;
+    padding: 10px;
+    border-radius: 5px;
+    overflow-x: auto;
+}
+
+.hide {
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+.show {
+    opacity: 1;
+    transition: opacity 0.5s ease;
+}
+
+.or {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 25px 0;
+    opacity: 0.25;
+
+    &:before,
+    &:after {
+        content: '';
+        display: block;
+        flex-shrink: 1;
+        width: 100%;
+        height: 1px;
+        background: #333;
+    }
+
+    &:before {
+        margin: 0 10px 0 0;
+    }
+
+    &:after {
+        margin: 0 0 0 10px;
+    }
+}
+
 .main-heading {
     margin: 0 0 30px;
 }
@@ -45,6 +96,16 @@ h6 {
     padding: 0 0 20px;
 }
 
+.console {
+    margin: 0 0 10px;
+    padding: 10px 20px;
+    background: #333;
+    color: #fefefe;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 12px;
+    border-radius: 5px;
+}
+
 .use-cases {
     &__list {
         margin: 0;

diff --git a/demo/src/index.html b/demo/src/index.html
@@ -19,7 +19,7 @@
                 <h1>Concurrent Tasks</h1>
                 <p class="short-description">
                     A simple task runner which will run tasks in parallel while
-                    maintaining limits.
+                    maintaining concurrency limits.
                 </p>
             </div>
 
@@ -42,21 +42,19 @@ <h1>Concurrent Tasks</h1>
                 <heading class="title">Getting Started</heading>
                 <article class="getting-started__npm">
                     Using NPM
-                    <pre>npm i concurrent-tasks</pre>
-                    or Yarn
-                    <pre>yarn add concurrent-tasks</pre>
+                    <pre><code>npm i concurrent-tasks</code></pre>
                 </article>
-
+                <div class="or">OR</div>
                 <article class="getting-started__umd">
                     Add as a script file
+                    <pre><code>&lt;script src="https://unpkg.com/concurrent-tasks/umd/concurrent-tasks.min.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
                 </article>
             </article>
 
             <article class="block examples">
-                <heading class="title">Examples:</heading>
+                <heading class="title">Simple task runner:</heading>
 
                 <article class="example">
-                    <h5>Simplest task runner:</h5>
                     <pre class="line-numbers">
                     <code class="language-javascript">
                         import TaskRunner from 'concurrent-tasks'
@@ -73,6 +71,22 @@ <h5>Simplest task runner:</h5>
                 </pre>
                 </article>
             </article>
+
+            <article class="block live-examples">
+                <heading class="title">Live examples</heading>
+
+                <article class="example" id="example-1">
+                    <h3>Basic task runner with a 1000 tasks</h3>
+                    <div class="console">
+                        <div class="console__on-start">
+                            Click the button to start the task runner!
+                        </div>
+                        <div class="console__on-done"></div>
+                        <div class="console__on-end"></div>
+                    </div>
+                    <button class="btn">Add 1000 Tasks</button>
+                </article>
+            </article>
         </main>
     </body>
 </html>