diff --git a/src/manage-storage.js b/src/manage-storage.js index 1d3bb08..fe6c9e7 100644 --- a/src/manage-storage.js +++ b/src/manage-storage.js @@ -52,12 +52,13 @@ function manage_storage(){ var $tr = $(E("tr")).appendTo($table); var $img = $(E("img")).attr({src: imgSrc}); - var $remove = $(E("button")).text("Remove"); + var $remove = $(E("button")).text("Remove").addClass("remove-button"); var href = "#" + k.replace("image#", "local:"); - var $link = $(E("a")).attr({href: href, target: "__blank"}); - $link.append($img); - $link.append($(E("span")).text("View")); - $(E("td")).append($link).appendTo($tr); + var $open_link = $(E("a")).attr({href: href, target: "_blank"}).text("Open"); + var $thumbnail_open_link = $(E("a")).attr({href: href, target: "_blank"}).addClass("thumbnail-container"); + $thumbnail_open_link.append($img); + $(E("td")).append($thumbnail_open_link).appendTo($tr); + $(E("td")).append($open_link).appendTo($tr); $(E("td")).append($remove).appendTo($tr); $remove.click(function(){ diff --git a/styles/layout.css b/styles/layout.css index 7b69519..3aab2f1 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -344,17 +344,25 @@ html, body, .jspaint { overflow: auto; display: block; } -.storage-manager a > img { - max-width: 100px; - max-height: 100px; - vertical-align: middle; - margin: 5px; +.storage-manager .thumbnail-container { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; } -.storage-manager a > span, -.storage-manager a > img, +.storage-manager .thumbnail-container > img { + max-width: 64px; + max-height: 64px; + flex: 0 0 auto; +} +.storage-manager .thumbnail-container, .storage-manager p { margin: 5px; } +.storage-manager .remove-button { + margin-left: 15px; +} ::before, ::after { pointer-events: none;