Improve storage manager
- Make the thumbnails always take up the same amount of space in the layout, so that the Remove buttons line up consistently between rows. This makes it considerably easier to remove multiple entries quickly. - Make the thumbnails centered within said space, and link the entirety of that space to opening the item in a new tab. - Fix target='_blank'; I probably conflated it with __proto__ etc.main
parent
af7995df77
commit
f645febad1
|
@ -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(){
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue