fixed borders of target areas

amcooper · Oct 30, 2020 · 0993d89 · 0993d89
1 parent 9ac307e
commit 0993d89
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/app/assets/stylesheets/components/_dnd.scss b/app/assets/stylesheets/components/_dnd.scss
@@ -91,9 +91,18 @@ audio {
   background-color: rgba(36,46,86,.4);
   margin-left: 8px;
   z-index: 100;
+  // opacity: 0;
+  // transition: .4s all;
 
 };
 
+.show-voicings {
+
+  opacity: 1;
+  transition: .4s all;
+
+}
+
 #voicings-bg {
   background-color: $alice-blue;
   padding: 8px 8px;
@@ -238,7 +247,16 @@ audio {
 }
 
 #library {
-  overflow: scroll;
+
+  display: grid;
+  grid-template-columns: auto auto;
+  padding: 32px;
+justify-items: center;
+  // text-align: center;
+  // align-self: items;
+  // align-items: center;
+  // display: inline-grid;
+  overflow-y: scroll;
   height: 80vh;
   position: relative;
   width: 100%;
@@ -458,8 +476,8 @@ margin: 0;
 
 .target-area {
   background-color: $roman-silver;
-  height: 128px;
-  border-radius: 8px;
+  height: 126px;
+  border-radius: 6px;
   margin-top: 24px;
   // left: 0px;
   margin-bottom: 24px;
@@ -482,11 +500,13 @@ margin: 0;
   padding: 0px;
   padding-top: 2px;
   // padding-left: 2px;
-  margin: 4px;
+  // margin: 4px;
+  margin-top: 3px;
+  margin-bottom: 16px;
   border-radius: 4px;
   position: relative;
   border: 1px solid $alice-blue;
-  box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
+  box-shadow: 2px 1px 4px rgba(0,0,0,0.5);
   // box-shadow: $light-shadow;
   // border: 1px solid #D0CFCE;
   z-index: 50;
@@ -499,8 +519,6 @@ margin: 0;
 
 
 .draggable-selected {
-
-
   transform: scale(1.2);
   z-index: 100;
   transition: .4s all;

diff --git a/app/javascript/components/dnd.js b/app/javascript/components/dnd.js
@@ -262,7 +262,17 @@ function handleDragStart() {
         ev.target.appendChild(el);
       }
       el.style.position = 'absolute';
-      el.style.left = ( (ev.screenX - window.screenX) - ta.getBoundingClientRect().left) - offX + "px";
+      let newLeft = ( (ev.screenX - window.screenX) - ta.getBoundingClientRect().left) - offX;
+      const leftBorder = 2;
+      const rightBorder = (ta.getBoundingClientRect().width - el.getBoundingClientRect().width) - 2;
+      if (newLeft < leftBorder) {
+        newLeft = leftBorder;
+      } else if (newLeft > rightBorder) {
+        newLeft = rightBorder;
+      }
+      el.style.left = newLeft + "px";
+      // console.log(el.style.left);
+      // console.log(ta.getBoundingClientRect().width);
 
 
        // delete underlying objects

diff --git a/app/javascript/components/new_song.js b/app/javascript/components/new_song.js
@@ -183,6 +183,9 @@ const newSong = () => {
 
         const voicingsTemp = document.querySelector('#voicings_template').content.firstElementChild.cloneNode(true);
         document.querySelector('#save-area').insertAdjacentHTML('beforebegin', voicingsTemp.outerHTML);
+         // $('#voicings-container').classList.add("show-voicings");
+        // document.querySelector('#voicings-container').style.opacity = 0;
+        // document.querySelector('#voicings-container').animate({ opacity: 1 }, 350)
         // document.querySelector("#voicings-container").addEventListener('click', hideVoicings);
 
         document.querySelector('#voicings-bg').addEventListener('click', clickBg);
@@ -467,7 +470,9 @@ const newSong = () => {
         if (event.target.id.split("-")[0] === currentChordName
           || event.target.id === 'close-voicings'
           ||  event.target.id === 'voicings-container') {
+
           $('#voicings-container').delay(50).animate({ opacity: 0 }, 350, function() { removeVoicings(v) });
+
         } else {
           v.remove();
         }

diff --git a/app/views/songs/_chord_library.html.erb b/app/views/songs/_chord_library.html.erb
@@ -1,7 +1,7 @@
 <div class="side-navbar d-flex flex-column align-items-center" id='library-container'>
         <%= image_tag('guitar-chord-hand.jpg', class: "guitar-icon") %>
         <h2 class="pb-2">Chords</h2>
-      <div id="library" class="d-flex flex-column align-items-center">
+      <div id="library">
 
     <%#= render partial: "shared/chord_searchbar" %>
       <%= hidden_field_tag :scroll_page_y, id:"scroll-page-y"  %>