Fix delete buttons issues

5 files changed, 19 insertions, 7 deletions

diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html
index 4f98baec..8d263a16 100644
--- a/tpl/default/changetag.html
+++ b/tpl/default/changetag.html
@@ -28,7 +28,7 @@
       <input type="hidden" name="token" value="{$token}">
       <div>
         <input type="submit" value="{'Rename'|t}" name="renametag">
-        <input type="submit" value="{'Delete'|t}" name="deletetag" class="button-red">
+        <input type="submit" value="{'Delete'|t}" name="deletetag" class="button button-red confirm-delete">
       </div>
     </form>
   </div>
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 63cf68ac..ed9a86ca 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -760,6 +760,7 @@ pre {
     text-decoration: none;
     vertical-align: center;
     font-weight: normal;
+    display: inline-block;
 }
 
 
@@ -767,6 +768,10 @@ pre {
     background: #ac2925;
 }
 
+.page-form .submit-buttons {
+    margin-bottom: 10px;
+}
+
 @media screen and (min-width: 64em) {
     .page-form .submit-buttons {
         position: relative;
@@ -778,6 +783,13 @@ pre {
     }
 }
 
+@media screen and (max-width: 64em) {
+    .page-form .submit-buttons .button {
+        display: block;
+        margin: auto;
+    }
+}
+
 .page-form select {
     color: #252525;
 }
diff --git a/tpl/default/editlink.html b/tpl/default/editlink.html
index b17d1038..4f10ffb2 100644
--- a/tpl/default/editlink.html
+++ b/tpl/default/editlink.html
@@ -59,11 +59,11 @@
       </div>
 
 
-      <div class="submit-buttons">
-        <input type="submit" value="{'Save'|t}" name="save_edit">
+      <div class="submit-buttons center">
+        <input type="submit" value="{'Save'|t}" name="save_edit" class="">
         {if="!$link_is_new"}
         <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-           title="" name="delete_link" class="button button-red">
+           title="" name="delete_link" class="button button-red confirm-delete">
           {'Delete'|t}
         </a>
         {/if}
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 925f6ce7..a3d40b0d 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -133,7 +133,7 @@ function toggleFold(button, description, thumb)
 /**
  * Confirmation message before deletion.
  */
-var deleteLinks = document.querySelectorAll('.delete-link');
+var deleteLinks = document.querySelectorAll('.confirm-delete');
 [].forEach.call(deleteLinks, function(deleteLink) {
     deleteLink.addEventListener('click', function(event) {
         if(! confirm('Are you sure you want to delete this link ?')) {
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 5a601d82..b490fe7c 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -199,7 +199,7 @@
                 </a>
                 {if="isLoggedIn()"}
                   <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-                     title="{'Delete'|t}" class="delete-link pure-u-0 pure-u-lg-visible">
+                     title="{'Delete'|t}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
                     <i class="fa fa-trash"></i>
                   </a>
                 {/if}
@@ -215,7 +215,7 @@
                 {/if}
                 {if="isLoggedIn()"}
                   <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-                     title="{'Delete'|t}" class="delete-link">
+                     title="{'Delete'|t}" class="delete-link confirm-delete">
                     <i class="fa fa-trash"></i>
                   </a>
                 {/if}