+
diff --git a/script.js b/script.js
index 95f0a88..ef5285f 100644
--- a/script.js
+++ b/script.js
@@ -19,6 +19,7 @@ function saveCard(btn) {
card.classList.remove('new');
card.setAttribute('draggable', true);
replaceBlock(btn.parentElement, addCardBtn);
+ addCardBtn.focus();
}
else {
cardInput.value = "";
@@ -26,12 +27,18 @@ function saveCard(btn) {
}
}
-function cancelCard(btn) {
- var newCard = getGrandParent(btn).getElementsByClassName('new')[0],
- addCardBtn = getElementFromTemplate(document.getElementById("add-card"));
+function cancelCard(btn, e=null) {
+ if (e.key == 'Escape')
+ btn = getGrandParent(btn).parentElement.getElementsByClassName('cancel-card-btn')[0];
+
+ if (e == null || e.key == 'Escape') {
+ var newCard = getGrandParent(btn).getElementsByClassName('new')[0],
+ addCardBtn = getElementFromTemplate(document.getElementById("add-card"));
- newCard.remove();
- replaceBlock(btn.parentElement, addCardBtn);
+ newCard.remove();
+ replaceBlock(btn.parentElement, addCardBtn);
+ addCardBtn.focus();
+ }
}
function addColumn(btn) {
@@ -39,30 +46,36 @@ function addColumn(btn) {
var emptyColumn = getElementFromTemplate(document.getElementById('empty-column'));
document.getElementsByTagName('main')[0].insertBefore(emptyColumn, btn);
- emptyColumn.getElementsByClassName('title')[0].firstElementChild.focus();
+ emptyColumn.getElementsByClassName('col-title')[0].focus();
}
}
function saveColumn(btn) {
var column = document.getElementsByClassName('column new')[0],
- colInput = column.getElementsByClassName('title')[0].firstElementChild,
+ colTitle = column.getElementsByClassName('col-title')[0],
addCardBtn = getElementFromTemplate(document.getElementById("add-card"));
- if (colInput.value.replace(/\s/g, '') != "") {
- colInput.readOnly = true;
+ if (colTitle.value.replace(/\s/g, '') != "") {
+ colTitle.readOnly = true;
column.classList.remove('new');
replaceBlock(btn.parentElement, addCardBtn);
+ addCardBtn.focus();
}
else {
- colInput.value = "";
- colInput.focus();
+ colTitle.value = "";
+ colTitle.focus();
}
}
-function cancelColumn(btn) {
- var newColumn = document.getElementsByClassName('column new')[0];
+function cancelColumn(btn, e) {
+ if (e.key == 'Escape')
+ btn = btn.parentElement.getElementsByClassName('cancel-card-btn')[0];
- newColumn.remove();
+ if (e == null || e.key == 'Escape') {
+ var newColumn = document.getElementsByClassName('column new')[0];
+ newColumn.remove();
+ document.getElementsByClassName('add-column')[0].focus();
+ }
}
function replaceBlock(block1, block2) {
diff --git a/styles.css b/styles.css
index 770189b..de95e5a 100644
--- a/styles.css
+++ b/styles.css
@@ -50,6 +50,12 @@ main::-webkit-scrollbar {
display: none;
}
+.container {
+ padding: 15px;
+}
+
+/* COLUMNS */
+
.column {
width: 350px;
min-width: 350px;
@@ -61,32 +67,31 @@ main::-webkit-scrollbar {
display: flex;
flex-direction: column;
+ transition: box-shadow 0.2s ease;
}
-.column:not(:last-child) {
- margin-right: 20px;
+.column:hover {
+ box-shadow: 0px 4px 4px rgba(9, 45, 66, 0.25);
}
-.col-container {
- padding: 15px;
+.column:not(:last-child) {
+ margin-right: 20px;
}
-.title {
+.col-title {
width: 100%;
box-sizing: border-box;
+ font-weight: 600;
align-self: flex-start;
}
-.title input {
- width: 100%;
- font-weight: 600;
-}
-
-.title input::placeholder {
+.col-title::placeholder {
font-weight: 400;
}
+/* CARDS */
+
.cards-wrapper {
overflow-y: auto;
align-self: stretch;
@@ -105,6 +110,7 @@ main::-webkit-scrollbar {
}
.card:not(.new):hover {
+ box-shadow: 0px 4px 4px rgba(9, 45, 66, 0.25);
cursor: move;
}
@@ -179,7 +185,6 @@ main::-webkit-scrollbar {
line-height: 25px;
}
-
.plus-icon {
font-size: 30px;
font-weight: 300;