--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <title></title>
+ <meta charset="utf-8">
+ <style>
+html, body {
+ height: 100%;
+ font-family: sans-serif;
+ font-size: 16px;
+ background: #eeeeee;
+}
+
+h1 {
+ width: 100%;
+ text-align: center;
+ font-size: 2.0rem;
+ margin: 10px 0px 10px 0px;
+ color: #555;
+}
+
+h2 {
+ width: 100%;
+ text-align: center;
+ font-size: 1.5rem;
+ margin: 10px 0px 10px 0px;
+ color: #555;
+}
+
+.board {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.column {
+ flex: 1;
+ border-left: 1px solid #aaa;
+}
+
+.column:first-of-type {
+ border-left: none;
+}
+
+.card {
+ background: #fafafa;
+ overflow: hidden;
+ position: relative;
+ display: block;
+ margin: 10px;
+ padding: 10px;
+ border-radius: 2px;
+ box-sizing: border-box;
+ box-shadow: 0 2px 2px 0px rgba(0,0,0,0.14),
+ 0 3px 1px -2px rgba(0,0,0,0.20),
+ 0 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+hr {
+ background-color: deepskyblue;
+ height: 5px;
+}
+
+.dialog {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0,0,0); /* Fallback color */
+ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+.dialog-content {
+ background: #fafafa;
+ margin: 15% auto; /* 15% from the top and centered */
+ padding: 20px;
+ width: 80%; /* Could be more or less, depending on screen size */
+ overflow: hidden;
+ position: relative;
+ display: block;
+ border-radius: 2px;
+ box-sizing: border-box;
+ box-shadow: 0 2px 2px 0px rgba(0,0,0,0.14),
+ 0 3px 1px -2px rgba(0,0,0,0.20),
+ 0 1px 5px 0px rgba(0,0,0,0.12);
+}
+ </style>
+</head>
+<body>
+ <h1 contenteditable="true">KanBan Board</h1>
+
+ <div id="board" class="board">
+ <div class="column">
+ <h2>Backlog</h2>
+ </div>
+ <div class="column">
+ <h2>To Do</h2>
+ <div class="card">(1) this is a card with data and it is maybe long enough to wrap around in the column. perhaps a few times</div>
+ <div class="card">(2) this is a card with data</div>
+ <div class="card">(3) this is a card with data</div>
+ </div>
+ <div class="column">
+ <h2>Doing</h2>
+ <div class="card">(4) this is a <br/> card with data</div>
+ <div class="card">(5) this is a card with data</div>
+ </div>
+ <div class="column">
+ <h2>Done</h2>
+ <div class="card">(6) this is a card with data</div>
+ </div>
+ <div class="column">
+ <h2>Archive</h2>
+ </div>
+ </div>
+
+ <div id="dialog" class="dialog">
+ <div class="dialog-content">
+ <span class="close">×</span>
+ <p>Some text in the Modal..</p>
+ </div>
+ </div>
+
+ <script>
+const drag_start = (ev) => {
+ ev.target.id = "selected-card";
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dropEffect = "move";
+}
+
+const drag_over = (ev) => {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move";
+}
+
+const drag_drop = (ev) => {
+ ev.preventDefault();
+ const tgt = ev.target;
+ const data = document.getElementById(ev.dataTransfer.getData("text"));
+ if (tgt.tagName == "H2") {
+ tgt.parentNode.appendChild(data);
+ } else if (tgt.className == "card") {
+ tgt.parentNode.insertBefore(data, tgt);
+ } else {
+ tgt.appendChild(data);
+ }
+ data.id = null;
+}
+
+const dialog = document.getElementById("dialog");
+
+const dblclick = (ev) => {
+ dialog.style.display = "block";
+}
+
+window.onclick = function(event) {
+ if (event.target == dialog)
+ dialog.style.display = "none";
+}
+
+const board = document.getElementById("board");
+for (var i = 0; i < board.children.length; i++) {
+ board.children[i].ondrop = drag_drop;
+ board.children[i].ondragover = drag_over;
+}
+
+const cards = document.getElementsByClassName("card");
+for (var i = 0; i < cards.length; i++) {
+ if (cards[i].className == "card")
+ cards[i].ondblclick = dblclick;
+ cards[i].ondragstart = drag_start;
+ cards[i].draggable = true;
+}
+
+
+
+ </script>
+</body>
+</html>
projects / proto / kanban.git / commitdiff