fixed example

sean-codes · Nov 17, 2017 · 882c748 · 882c748
1 parent e2fb83a
commit 882c748
Show file tree

Hide file tree

Showing 10 changed files with 689 additions and 410 deletions.
diff --git a/dist/scripts.js b/dist/scripts.js
diff --git a/dist/styles.css b/dist/styles.css
diff --git a/dist/styles.min.css b/dist/styles.min.css
diff --git a/dist/styles.scss b/dist/styles.scss
@@ -0,0 +1,162 @@
+$color-font: #000;
+$color-border: #CDCDCD;
+$color-background: #FFF;
+$color-selected: rgba(0, 0, 0, 0.1);
+$whitespace: 10px;
+
+html, body{
+   padding:0px;
+   margin:0px;
+   height:100%;
+}
+
+body *, body *:after, body, *:before{
+   font-family: 'Karla', sans-serif;
+   color:$color-font;
+   box-sizing:border-box;
+   display:block;
+   padding:0px;
+   margin:0px;
+   background:none;
+   border:none;
+}
+script, style{ display:none; }
+
+kanban{
+   width:100%;
+   height:100%;
+   background: $color-background;
+   display:flex;
+   overflow:auto;
+   lane{
+      flex:1;
+      min-width:200px;
+      border-right:1px solid $color-border;
+      display:flex;
+      flex-direction: column;
+      user-select:none;
+      &:last-of-type{
+         border-right:none;
+      }
+      lane-title{
+         padding:$whitespace;
+         text-align:center;
+         user-select:none;
+         white-space:nowrap;
+      }
+
+      lane-cards{
+         flex:1;
+         overflow:auto;
+         card{
+            border:0.1px solid transparent;
+            user-select:none;
+            position:relative;
+
+            &.held{
+               visibility:hidden;
+               &:after{
+                  visibility:visible;
+                  content: '';
+                  background:$color-selected;
+                  position:absolute;
+                  top:0px; left:0px;
+                  width:100%; height:100%;
+               }
+            }
+         }
+      }
+
+      &.collapse{
+         max-width:40px;
+         min-width:40px;
+
+         lane-title{
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+            min-height:100%;
+            height:100%;
+            flex:1;
+         }
+
+         lane-cards{
+            display:none;
+         }
+      }
+   }
+
+   ghost{
+      border:0.1px solid transparent;
+      user-select:none;
+      position:fixed;
+      top:0px;
+      left:0px;
+      pointer-events:none;
+      z-index:1000;
+      opacity:0.5;
+   }
+}
+
+// User styles
+#myKanBan{
+   height:100%;
+   //max-height:400px;
+   //max-width:625px;
+   //margin:40px auto;
+   box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
+
+   lane lane-title{
+      background:#333;
+      color:#FFF;
+   }
+}
+card, ghost{
+
+   mycard-container{
+      width:100%;
+      height:100%;
+      padding:$whitespace;
+      padding-bottom:0px;
+      overflow:hidden;
+
+      mycard-content {
+         border-radius:3px;
+         overflow:hidden;
+      }
+
+      mycard-title {
+         background:#444;
+         color:#FFF;
+         padding:$whitespace;
+         button{
+            display:inline;
+            float:right;
+            padding:0px 5px;
+            &:hover{
+               background:$color-selected;
+            }
+         }
+      }
+
+      mycard-text {
+         position:relative;
+         padding:$whitespace*2 $whitespace;
+         font-size:0.8em;
+         color:#FFF;
+
+      }
+
+      .bg-green{
+         background:#33A852;
+      }
+      .bg-blue{
+         background:#5FC3EB;
+      }
+      .bg-orange{
+         background:#ffb440;
+      }
+      .bg-red{
+         background:	#ff4747;
+      }
+   }
+}
diff --git a/example/basic.html b/example/basic.html
@@ -1,12 +1,12 @@
 <!doctype html>
 <html>
    <head>
-      <link rel="stylesheet" href="../dist/styles.css">
+      <link rel="stylesheet" href="../dist/styles.min.css">
    </head>
    <body>
       <div id="myKanBan"></div>
 
-      <script src="../dist/scripts.js.min"></script>
+      <script src="../dist/scripts.min.js"></script>
       <script>
          document.body.onload = function() {
             // User Code