Edit/delete button on the left-side of links.

https://github.com/sebsauvage/Shaarli/issues/5

2 files changed, 26 insertions, 7 deletions

diff --git a/inc/shaarli.css b/inc/shaarli.css
index b4d0414c..695c2a8d 100644
--- a/inc/shaarli.css
+++ b/inc/shaarli.css
@@ -67,10 +67,26 @@ h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; }
 
         }
 
-/* Edit/Delete buttons on links */
+/* Small tab on the left of each link with edit/delete buttons. */
 .button_edit, .button_delete { border-radius:0; box-shadow:none; border-style:none; border-width:0; padding:0; background:none; }
-.button_edit { margin-left:10px; }
-
+.linkeditbuttons {  
+        position:absolute; 
+        left:-1px;  
+        padding:4px 2px 2px 2px;
+        background-color:#f0f0f0;
+
+        -webkit-border-radius:0px 6px 6px 0px;
+        -moz-border-radius:0px 6px 6px 0px;
+        -o-border-radius:0px 6px 6px 0px;
+        -ms-border-radius:0px 6px 6px 0px;
+        border-radius:0px 6px 6px 0px;
+
+        -webkit-box-shadow:0px 0px 3px 0px #333333;
+        -moz-box-shadow:0px 0px 3px 0px #333333;
+        -o-box-shadow:0px 0px 3px 0px #333333;
+        -ms-box-shadow:0px 0px 3px 0px #333333;
+        box-shadow:0px 0px 3px 0px #333333;
+}
 
 #pageheader #logo{
 background-image: url('../images/logo.png');
@@ -211,6 +227,7 @@ cursor:pointer;
 }
 */
 #linklist li.private { background: url('../images/private.png') no-repeat 10px center; padding-left:60px; }
+#linklist li  {  padding-left:26px; }
 .private  .linktitle a {color:#969696;}
 .linktitle { font-size:14pt; font-weight:bold; }
 .linktitle a { text-decoration: none; color:#80AD48; }
diff --git a/tpl/linklist.html b/tpl/linklist.html
index bfb1fcda..267e13bc 100644
--- a/tpl/linklist.html
+++ b/tpl/linklist.html
@@ -32,12 +32,14 @@
         <li{if="$value.class"} class="{$value.class}"{/if}>
             <div class="thumbnail">{$value.url|thumbnail}</div>
             <div class="linkcontainer">
-                <span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title|htmlspecialchars}</a></span>
                 {if="isLoggedIn()"}
-                    <form method="GET" class="buttoneditform"><input type="hidden" name="edit_link" value="{$value.linkdate}"><input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"></form>
-                    <form method="POST" class="buttoneditform"><input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
-                    <input type="hidden" name="token" value="{$token}"><input type="hidden" name="delete_link"><input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();"></form>
+                    <div class="linkeditbuttons">
+                        <form method="GET" class="buttoneditform"><input type="hidden" name="edit_link" value="{$value.linkdate}"><input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"></form><br>
+                        <form method="POST" class="buttoneditform"><input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
+                        <input type="hidden" name="token" value="{$token}"><input type="hidden" name="delete_link"><input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();"></form>
+                    </div>
                 {/if}
+                <span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title|htmlspecialchars}</a></span>
                 <br>
                 {if="$value.description"}<div class="linkdescription"{if condition="$search_type=='permalink'"} style="max-height:none !important;"{/if}>{$value.description}</div>{/if}
                 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}