refactor gh-pages example and readme

ivosdc · ivosdc · commit b607840b99ac · 2021-03-07T22:04:18.000+01:00
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Allows CRUD-operations for Object-Arrays.
 ## Install
 
 ```
-npm install svelte-generic-crud-table
+npm install svelte-generic-crud-table --save-dev
 ```
 
 
@@ -42,7 +42,8 @@ Only wanted keys of your source array have to be mapped by columns_settings *nam
             {name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
             {name: 'name', show: true, edit: true, width: '150px', tooltip: true},
             {name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},
-            {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML'}        ],
+            {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
+        ],
         details_text: 'detail'   // replace the standard icon with an text-link
     }
 ```
diff --git a/dist/global.css b/dist/global.css
@@ -64,3 +64,16 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+
+pre {
+    background: #f4f4f4;
+    border-left: 3px solid #f36d33;
+    color: #666;
+    page-break-inside: avoid;
+    font-family: monospace;
+    overflow: auto;
+    padding: 1em;
+    display: block;
+    word-wrap: break-word;
+    width: fit-content;
+}
diff --git a/dist/index.html b/dist/index.html
@@ -12,18 +12,35 @@
 <body>
 <h1>&lt;crud-table&gt;&lt;/crud-table&gt;</h1>
 <p>Agnostic web-component for object-arrays with CRUD functionality.</p>
-<span style="background-color: #dddddd; padding: 0.4em; display:inline-block">&gt; npm install svelte-generic-crud-table</span>
+<span style="background-color: #dddddd; padding: 0.4em; display:inline-block">&gt; npm install svelte-generic-crud-table --save-dev</span>
 <p></p>
+<blockquote><pre><code>
+const table_config = {
+    name: 'Awesome',
+    options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
+    columns_setting: [
+        {name: 'id', show: false, edit: true, width: '0px'},
+        {name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
+        {name: 'name', show: true, edit: true, width: '150px', tooltip: true},
+        {name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},
+        {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
+    ],
+    details_text: 'detail'   // replace the standard icon with an text-link
+}
+</code></pre></blockquote>
 <hr>
 <crud-table></crud-table>
 <hr>
 </span style="text-align: right"><a href="https://ivolution.one">ivolution.one product - MIT License</a>
 <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7V5M288MUT7GE&source=url">donate
 </a></p>
 <img src="https://travis-ci.com/ivosdc/svelte-generic-crud-table.svg?branch=master">
-<a rel="noopener noreferrer" href='https://coveralls.io/github/ivosdc/svelte-generic-crud-table?branch=master'><img src='https://coveralls.io/repos/github/ivosdc/svelte-generic-crud-table/badge.svg?branch=master' alt='Coverage Status' /></a>
+<a rel="noopener noreferrer" href='https://coveralls.io/github/ivosdc/svelte-generic-crud-table?branch=master'><img
+        src='https://coveralls.io/repos/github/ivosdc/svelte-generic-crud-table/badge.svg?branch=master'
+        alt='Coverage Status'/></a>
 
-<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7V5M288MUT7GE&source=url" target="_blank">
+<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7V5M288MUT7GE&source=url"
+      target="_blank">
     <img src="https://github.com/ivosdc/svelte-generic-crud-table/raw/master/assets/donate.gif" title="donate">
 </a></p>
 </body>
diff --git a/dist/test-data.js b/dist/test-data.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-generic-crud-table",
-  "version": "1.5.70",
+  "version": "1.5.71",
   "description": "<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB",
   "main": "dist/build/crud-table.js",
   "module": "dist/build/crud-table.mjs",
diff --git a/src/SvelteGenericCrudTable.svelte b/src/SvelteGenericCrudTable.svelte
@@ -175,7 +175,7 @@
         let targetElem = event.target;
         element.style.backgroundColor = 'white';
         element.style.width = event.target.width;
-        element.style.maxWidth = '33%';
+        element.style.maxWidth = '25%';
         element.style.padding = '3px'
         element.style.position = 'fixed';
         element.style.border = 'solid 1px black'

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "svelte-generic-crud-table",`
`3`		`- "version": "1.5.70",`
	`3`	`+ "version": "1.5.71",`
`4`	`4`	`"description": "<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB",`
`5`	`5`	`"main": "dist/build/crud-table.js",`
`6`	`6`	`"module": "dist/build/crud-table.mjs",`