}
.dialog {
- display: none; /* Hidden by default */
- position: fixed; /* Stay in place */
- z-index: 1; /* Sit on top */
+ display: none;
+ position: fixed;
+ z-index: 1;
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 */
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0,0,0);
+ background-color: rgba(0,0,0,0.4);
}
.dialog-content {
background: #fafafa;
- margin: 15% auto; /* 15% from the top and centered */
+ margin: 15% auto;
padding: 10px;
- width: 80%; /* Could be more or less, depending on screen size */
+ width: 80%;
overflow: hidden;
position: relative;
display: block;
color: #555;
}
+.visible {
+ display: block;
+}
+
</style>
</head>
<body>
</div>
<script>
+'use strict';
(() => {
const drag_start = (ev) => {
ev.target.id = "selected-card";
ev.preventDefault();
const tgt = ev.target;
const data = document.getElementById(ev.dataTransfer.getData("text"));
- if (tgt.tagName == "H2") {
+ if (tgt.tagName === "H2") {
tgt.parentNode.appendChild(data);
- } else if (tgt.className == "card") {
+ } else if (tgt.classList.contains("card")) {
tgt.parentNode.insertBefore(data, tgt);
} else {
tgt.appendChild(data);
}
- data.id = null;
+ data.id = "";
}
const dblclick = (ev) => {
- dialog.style.display = "block";
+ dialog.classList.add("visible");
}
window.onclick = (ev) => {
- if (ev.target == dialog) {
- dialog.style.display = "none";
+ if (ev.target === dialog) {
+ dialog.classList.remove("visible");
}
}
projects / proto / kanban.git / commitdiff