Add key handles shadow animations

* Added key handles on enter for adding & on escape for canceling; * Key handles work on cards and columns creation; * Improve html structure; * Added animations for shadows while hovering on cards and columns.
Nagellan · Apr 25, 2019 · 6e1f85e · 6e1f85e
1 parent cd3e95c
commit 6e1f85e
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -17,29  17,29 @@
 
     <body>
         <main>
-            <button class="add-column add-btn column col-container" onclick="addColumn(this);"><span class="plus-icon"> </span> Add new column</button>
             <button class="add-column add-btn column container" onclick="addColumn(this);"><span class="plus-icon"> </span> Add new column</button>
         </main>
 
         <template id="add-card">
-            <button type="submit" class="add-card add-btn col-container" onclick="addCard(this);"><span class="plus-icon"> </span> Add a new card</button>
             <button type="submit" class="add-card add-btn container" onclick="addCard(this);"><span class="plus-icon"> </span> Add a new card</button>
         </template>
 
         <template id="save-cancel-card">
-            <div class="save-cancel-card add-btn col-container">
             <div class="save-cancel-card add-btn container">
                 <button class="save-card-btn" onclick="saveCard(this);">Save the card</button>
                 <button class="cancel-card-btn" onclick="cancelCard(this);"><div> </div></button>
             </div>
         </template>
 
         <template id="empty-card">
-            <div class="card col-container new" ondragstart="drag(event);"><input type="text" placeholder="Write the name of a card"></div>
             <div class="card container new" onkeydown="cancelCard(this, event);" ondragstart="drag(event);"><input type="text" placeholder="Write the name of a card"></div>
         </template>
 
         <template id="empty-column">
             <form class="column new" action="" onsubmit="return false" ondragover="dragOver(event)" ondrop="drop(event, this);">
-                <div class="title col-container"><input type="text" placeholder="Write the name of a column"></div>
                 <input class="col-title container" type="text" placeholder="Write the name of a column" onkeydown="cancelColumn(this, event);">
                 <div class="cards-wrapper"></div>
-                <div class="save-cancel-card add-btn col-container">
                 <div class="save-cancel-card add-btn container">
                     <button class="save-card-btn" onclick="saveColumn(this);">Save the column</button>
                     <button class="cancel-card-btn" onclick="cancelColumn(this);"><div> </div></button>
                 </div>

diff --git a/script.js b/script.js
@@ -19,50  19,63 @@ function saveCard(btn) {
         card.classList.remove('new');
         card.setAttribute('draggable', true);
         replaceBlock(btn.parentElement, addCardBtn);
         addCardBtn.focus();
     }
     else {        
         cardInput.value = "";
         cardInput.focus();
     }
 }
 
-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) {
     if (document.getElementsByClassName('column new').length == 0) {
         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
@@ -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;