}
.dialog {
- display: none; /* Hidden by default */
+ display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
.dialog-content {
background: #fafafa;
margin: 15% auto; /* 15% from the top and centered */
- padding: 20px;
+ padding: 10px;
width: 80%; /* Could be more or less, depending on screen size */
overflow: hidden;
position: relative;
0 3px 1px -2px rgba(0,0,0,0.20),
0 1px 5px 0px rgba(0,0,0,0.12);
}
+
+.dialog-close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.dialog-close:hover,
+.dialog-close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
</style>
</head>
<body>
</div>
<div id="dialog" class="dialog">
-
<div class="dialog-content">
- <span class="close">×</span>
-
<p>Some text in the Modal..</p>
- </div>
+ <div class="dialog-content">
+ <span class="dialog-close">×</span>
+ <p>Some text in the Modal..</p>
+ </div>
</div>
<script>
+const dialog = document.getElementById("dialog");
+const board = document.getElementById("board");
+const cards = document.getElementsByClassName("card");
+
const drag_start = (ev) => {
ev.target.id = "selected-card";
ev.dataTransfer.setData("text/plain", ev.target.id);
data.id = null;
}
-const dialog = document.getElementById("dialog");
-
const dblclick = (ev) => {
- dialog.style.display = "block";
+ dialog.style.display = "block";
}
-window.onclick = function(event) {
+window.onclick = (event) => {
if (event.target == dialog)
dialog.style.display = "none";
}
-const board = document.getElementById("board");
-for (var i = 0; i < board.children.length; i++) {
+for (let 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;
+for (let i = 0; i < cards.length; i++) {
+ cards[i].ondblclick = dblclick;
cards[i].ondragstart = drag_start;
cards[i].draggable = true;
}
-
-
-
</script>
</body>
</html>
projects / proto / kanban.git / commitdiff