Fix edit mode button

salieo · Mar 14, 2018 · c8f847e · c8f847e
1 parent 384f4e0
commit c8f847e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "author": "Salieo <[email protected]>",
     "name": "salieo.js",
     "description": "Instantly responsify your site's images.",
-    "version": "0.9.10",
+    "version": "0.9.11",
     "homepage": "https://www.salieo.com",
     "license": "MIT",
     "repository": "salieo/salieo.js",

diff --git a/src/salieo.js b/src/salieo.js
@@ -7,14 +7,14 @@ var ResizeObserver = ResizeObserver ? ResizeObserver : ResizeObserverPolyfill;
 function editMode(imgElements, cb) {
     //Add styles
     var sheet = document.createElement('style');
-    sheet.innerHTML = "svg.edit-button{width:20px;height:20px;position:absolute;top:50px;right:50px;background-color:#757575;fill:#fff;box-shadow:10px 10px 50px 0 rgba(0,0,0,.4);border:2.5px solid #fff;padding:10px;border-radius:25px;transition:all .5s ease,transform .75s cubic-bezier(0,0,.1,1);transform:scale(1)}svg.edit-button:active,svg.edit-button:focus,svg.edit-button:hover{background-color:#fff;fill:#000;cursor:pointer}a.pre-entry svg.edit-button{transform:scale(0)}";
+    sheet.innerHTML = ".edit-button{position:absolute;top:1.5em;right:1.5em;background-color:#757575;fill:#fff;box-shadow:0.5em 0.5em 2em 0 rgba(0,0,0,.4);border:2.5px solid #fff;padding:0.6em;border-radius:10em;transition:all .5s ease,transform .75s cubic-bezier(0,0,.1,1);transform:scale(1)}.edit-button:active,.edit-button:focus,.edit-button:hover{background-color:#fff;fill:#000;cursor:pointer}a.pre-entry .edit-button{transform:scale(0)}.edit-button svg{width:1.5em;height:1.5em;display:block;}";
     document.body.appendChild(sheet);
 
     //Set up edit buttons on each image element
     for(var i = 0; i < imgElements.length; i++) {
         var editButton = document.createElement("a");
-        editButton.innerHTML = "<svg class='edit-button' viewBox='0 0 24 24'><path d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z' /></svg>";
-        editButton.className = "pre-entry"; //So that the edit button is added with transform: scale(0);
+        editButton.innerHTML = "<svg viewBox='0 0 24 24'><path d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z' /></svg>";
+        editButton.className = "pre-entry edit-button"; //So that the edit button is added with transform: scale(0);
 
         if(imgElements[i].isIMG) {
             var parent = imgElements[i].element.parentNode;
@@ -36,7 +36,7 @@ function editMode(imgElements, cb) {
 		(function(editButton, currentURL) {
             //Remove the pre-entry class so the button is visible
 			setTimeout(function() {
-				editButton.setAttribute('class', '');
+				editButton.setAttribute('class', 'edit-button');
             }, 100);
 
             //Add the click handler