diff --git a/mixins/AnimeList.pixy b/mixins/AnimeList.pixy index 092cae7b..c7574a71 100644 --- a/mixins/AnimeList.pixy +++ b/mixins/AnimeList.pixy @@ -8,12 +8,12 @@ component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User) each item in animeListItems - .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]", draggable="true") - .anime-list-item-image-container + .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]") + .anime-list-item-image-container(draggable="true") a.anime-list-item-image-link(href=item.Anime().Link()) img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user)) - .anime-list-item-name + .anime-list-item-name(draggable="true") a(href=item.Link(viewUser.Nick))= item.Anime().Title.ByUser(user) .anime-list-item-actions @@ -40,5 +40,5 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn .anime-list-item-episodes-separator / .anime-list-item-episodes-max= item.Anime().EpisodeCountString() - .anime-list-item-rating.tip(aria-label="O: " + utils.FormatRating(item.Rating.Overall) + " | S: " + utils.FormatRating(item.Rating.Story) + " | V: " + utils.FormatRating(item.Rating.Visuals) + " | M: " + utils.FormatRating(item.Rating.Soundtrack)) - .action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= utils.FormatRating(item.Rating.Overall) + .anime-list-item-rating-container + .anime-list-item-rating.action.tip(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save", aria-label="O: " + utils.FormatRating(item.Rating.Overall) + " | S: " + utils.FormatRating(item.Rating.Story) + " | V: " + utils.FormatRating(item.Rating.Visuals) + " | M: " + utils.FormatRating(item.Rating.Soundtrack))= utils.FormatRating(item.Rating.Overall) diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 8bdbde01..1d94bbd1 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -81,13 +81,18 @@ flex 0.3 opacity 0.5 -.anime-list-item-rating +.anime-list-item-rating-container horizontal - text-align right justify-content flex-end - flex-basis 40px + flex-basis 65px flex-shrink 1 - margin-left 25px + +.anime-list-item-rating + default-transition + + :hover, + :focus + transform scale(1.5) .anime-list-item-actions display none !important diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 17a80db1..0be3c685 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -346,35 +346,39 @@ export default class AnimeNotifier { dragAndDrop() { if(location.pathname.includes("/animelist/")) { - for(let element of findAll("anime-list-item")) { + for(let listItem of findAll("anime-list-item")) { // Skip elements that have their event listeners attached already - if(element["drag-listeners-attached"]) { + if(listItem["drag-listeners-attached"]) { continue } - element.addEventListener("dragstart", evt => { - if(!element.draggable || !evt.dataTransfer) { + let name = listItem.getElementsByClassName("anime-list-item-name")[0] + let imageContainer = listItem.getElementsByClassName("anime-list-item-image-container")[0] + + let onDrag = evt => { + if(!evt.dataTransfer) { return } - let image = element.getElementsByClassName("anime-list-item-image")[0] + let image = imageContainer.getElementsByClassName("anime-list-item-image")[0] if(image) { evt.dataTransfer.setDragImage(image, 0, 0) } - let name = element.getElementsByClassName("anime-list-item-name")[0] - evt.dataTransfer.setData("text/plain", JSON.stringify({ - api: element.dataset.api, + api: listItem.dataset.api, animeTitle: name.textContent })) evt.dataTransfer.effectAllowed = "move" - }, false) + } + + name.addEventListener("dragstart", onDrag, false) + imageContainer.addEventListener("dragstart", onDrag, false) // Prevent re-attaching the same listeners - element["drag-listeners-attached"] = true + listItem["drag-listeners-attached"] = true } for(let element of findAll("tab")) {