fixing some issues

SlimElement.js

@@ -3,7 +3,7 @@
 
         (function() {
 
-            var css = 'slim-component { all: inherit; }',
+            var css = 'slim-component, s-repeat { all: inherit; padding: 0; margin: 0; background: none; }',
                 head = document.head || document.getElementsByTagName('head')[0],
                 style = document.createElement('style');
 

example/Kanban/KanbanDemo.html

@@ -6,13 +6,13 @@
 
     <script src="../../SlimElement.js"></script>
     <script src="KanbanModel.js"></script>
-    <script src="kanban-column.js"></script>
-    <script src="kanban-item.js"></script>
     <script src="../../components/s-repeat.js"></script>
     <script src="../../components/s-container.js"></script>
 
 
     <link rel="import" href="kanban-app.html" />
+    <link rel="import" href="kanban-column.html" />
+    <link rel="import" href="kanban-item.html" />
     <!--<link rel="import" href="kanban-list.html" />-->
     <!--<link rel="import" href="kanban-item.html" />-->
 
@@ -21,29 +21,12 @@
         body, html {
             width: 100%;
             height: 100%;
+            margin: 0;
+            padding: 0;
         }
 
-        kanban-app {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-            width: 100%;
-        }
-
-        slim-element {
-            display: inline-block;
-        }
-
-        kanban-list {
-            background-color: #afafaf;
-            display: block;
-            float: left;
-            text-align: center;
-            width: 10em;
-            flex-direction: column;
-            align-items: center;
-            margin: 0 1em 1em 0
+        * {
+            box-sizing: content-box;
         }
 
     </style>

example/Kanban/kanban-app.html

@@ -14,4 +14,15 @@
     })
 
 
-</script>
+</script>
+
+<style>
+    kanban-app {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: flex-start;
+        justify-content: space-between;
+        width: 100%;
+    }
+</style>

example/Kanban/kanban-column.html

@@ -0,0 +1,40 @@
+<script>
+;(function(){
+
+
+    Slim('kanban-column', class extends SlimBaseElement {
+
+
+        get template() {
+            return `<span bind>[[data.name]]</span><kanban-item slim-repeat="myTasks"></kanban-item>`
+        }
+
+        onAdded() {
+            console.log(this.myTasks)
+        }
+
+        get myTasks() {
+            return this.model.getTasks(this.data.name)
+        }
+
+
+    })
+
+
+
+
+})()
+</script>
+
+<style>
+    kanban-column {
+        display: inline-flex;
+        flex-direction: column;
+        height: 100%;
+        width: 15em;
+        padding: 1em;
+        background: antiquewhite;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

example/Kanban/kanban-item.html

@@ -0,0 +1,54 @@
+<script>
+
+;(function(){
+
+
+    Slim('kanban-item', class extends SlimBaseElement {
+
+
+
+        get template() {
+            return `
+<div>
+    <div class="title"><span bind>[[data.title]]</span></div>
+    <div class="description" bind>[[data.description]]</div>
+</div>`
+        }
+
+
+
+
+
+
+    })
+
+
+
+
+})()
+
+
+</script>
+
+<style>
+    kanban-item {
+        display: inline-flex;
+        background: white;
+        width: 100%;
+        padding: 0.5em;
+        border-radius: 1em;
+        margin-bottom: 1em;
+        justify-content: center;
+    }
+
+    kanban-item div {
+        width: 100%;
+    }
+
+    kanban-item .title {
+        display: block;
+        font-size: 1.3em;
+        width: 100%;
+        text-align: center;
+    }
+</style>