chore: update local dev environment

qlik-oss · Feb 15, 2021 · 14b7bff · 14b7bff
1 parent 871c2c3
commit 14b7bff
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/examples/dev-mashup/README.md b/examples/dev-mashup/README.md
@@ -26,3 +26,7 @@ yarn start
 ```
 
 Open you browser to http://localhost:1234
+
+## Making local changes
+
+The gitignore is setup to exclude a folder named `local-dev` in the root of this repository. So to make local changes to the mashup you can create that folder and copy all files into it.
diff --git a/examples/dev-mashup/index.html b/examples/dev-mashup/index.html
@@ -11,7 +11,14 @@
       .content {
         margin: 0 auto;
         width: 80%;
-        max-width: 800px;
+        max-width: 1200px;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .column {
+        margin: 0 auto;
+        width: 80%;
       }
 
       .object {
@@ -23,20 +30,27 @@
       .toolbar {
         background-color: white;
         margin: 12px 0px;
+        margin: 0 auto;
+        width: 70%;
+        max-width: 1200px;
       }
 
       .listbox {
         position: relative;
-        height: 352px;
+        height: 400px;
+        width: 30%;
         background-color: white;
       }
     </style>
   </head>
   <body>
+    <div class="toolbar"></div>
     <div class="content">
-      <div class="toolbar"></div>
-      <div class="object" data-type="bar"></div>
-      <div class="object" data-type="line"></div>
+      <div class="column">
+        <div class="object" data-type="bar"></div>
+        <div class="object" data-type="line"></div>
+      </div>
+      <div class="listbox"></div>
     </div>
 
     <script src="index.js"></script>

diff --git a/examples/dev-mashup/index.js b/examples/dev-mashup/index.js
@@ -19,6 +19,7 @@ function init() {
     });
 
     nebbie.selections().then((s) => s.mount(document.querySelector('.toolbar')));
+    nebbie.field('Num').then((s) => s.mount(document.querySelector('.listbox')));
 
     document.querySelectorAll('.object').forEach((el) => {
       const type = el.getAttribute('data-type');