From 43cbb80eec8c0ad0db1dbbdf2e019ab9ec15a19a Mon Sep 17 00:00:00 2001 From: glax Date: Sun, 12 Nov 2023 13:48:28 +0100 Subject: [PATCH] Fix overflow of tooltip release-status. --- Website/interaction.js | 40 +++++++++--------- Website/styles/style_default.css | 64 +++++++++++++++++------------ Website/styles/style_mangahover.css | 64 +++++++++++++++++------------ 3 files changed, 94 insertions(+), 74 deletions(-) diff --git a/Website/interaction.js b/Website/interaction.js index 2f56385..e523692 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -198,27 +198,27 @@ function CreateManga(manga, connector){ //Create the publication status indicator var releaseStatus = document.createElement('publication-status'); - var statusTooltip = document.createElement('status-tooltip'); - if (manga.releaseStatus == 0) { - releaseStatus.style.backgroundColor = 'limegreen'; - statusTooltip.innerText = "Ongoing" - }else if(manga.releaseStatus == 1){ - releaseStatus.style.backgroundColor = 'blueviolet'; - statusTooltip.innerText = "Completed" - } else if (manga.releaseStatus == 2) { - releaseStatus.style.backgroundColor = 'darkorange'; - statusTooltip.innerText = "On Hiatus" - } else if (manga.releaseStatus == 3) { - releaseStatus.style.backgroundColor = 'firebrick'; - statusTooltip.innerText = "Cancelled" - } else if (manga.releaseStatus == 4) { - releaseStatus.style.backgroundColor = 'aqua'; - statusTooltip.innerText = "Upcoming"; - } else { - releaseStatus.style.backgroundColor = 'gray'; - statusTooltip.innerText = 'Status Unavailable'; + releaseStatus.setAttribute("release-status", manga.releaseStatus); + switch(manga.releaseStatus){ + case 0: + releaseStatus.setAttribute("release-status", "Ongoing"); + break; + case 1: + releaseStatus.setAttribute("release-status", "Completed"); + break; + case 2: + releaseStatus.setAttribute("release-status", "On Hiatus"); + break; + case 3: + releaseStatus.setAttribute("release-status", "Cancelled"); + break; + case 4: + releaseStatus.setAttribute("release-status", "Upcoming"); + break; + default: + releaseStatus.setAttribute("release-status", "Status Unavailable"); + break; } - releaseStatus.appendChild(statusTooltip); //Append the tooltip to the indicator circle info.appendChild(mangaName); mangaElement.appendChild(info); diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css index cedc263..f875cb4 100644 --- a/Website/styles/style_default.css +++ b/Website/styles/style_default.css @@ -265,45 +265,55 @@ publication-status { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px; } -publication-status:hover > status-tooltip { - visibility: visible; -} - -status-tooltip { - visibility: hidden; +publication-status::after { + content: attr(release-status); position: absolute; + top: 0; + right: 0; + + visibility: hidden; - /*Position*/ - left: 150%; - bottom: -75%; - z-index: 3; - /*Text Properties*/ font-size:10pt; font-weight:bold; color:white; text-align: center; - padding: 5px 5px; /*Size*/ - width:100px; - background-color: black; + padding: 3px 8px; border-radius: 6px; - border-style: solid; - border-color: black; - border-width: 1px; + border: 0px; + background-color: inherit; } -status-tooltip::after { - content: " "; - position: absolute; - top: 50%; - right: 100%; /* To the left of the tooltip */ - margin-top: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent black transparent transparent; - } +publication-status:hover::after{ + visibility:visible; +} + + +publication-status[release-status="Ongoing"]{ + background-color: limegreen; +} + +publication-status[release-status="Completed"]{ + background-color: blueviolet; +} + +publication-status[release-status="On Hiatus"]{ + background-color: darkorange; +} + +publication-status[release-status="Cancelled"]{ + background-color: firebrick; +} + +publication-status[release-status="Upcoming"]{ + background-color: aqua; +} + +publication-status[release-status="Status Unavailable"]{ + background-color: gray; +} publication img { position: absolute; diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css index 39f2511..f0a5838 100644 --- a/Website/styles/style_mangahover.css +++ b/Website/styles/style_mangahover.css @@ -266,45 +266,55 @@ publication-status { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px; } -publication-status:hover > status-tooltip { - visibility: visible; -} - -status-tooltip { - visibility: hidden; +publication-status::after { + content: attr(release-status); position: absolute; + top: 0; + right: 0; + + visibility: hidden; - /*Position*/ - left: 150%; - bottom: -75%; - z-index: 3; - /*Text Properties*/ font-size:10pt; font-weight:bold; color:white; text-align: center; - padding: 5px 5px; /*Size*/ - width:100px; - background-color: black; + padding: 3px 8px; border-radius: 6px; - border-style: solid; - border-color: black; - border-width: 1px; + border: 0px; + background-color: inherit; } -status-tooltip::after { - content: " "; - position: absolute; - top: 50%; - right: 100%; /* To the left of the tooltip */ - margin-top: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent black transparent transparent; - } +publication-status:hover::after{ + visibility:visible; +} + + +publication-status[release-status="Ongoing"]{ + background-color: limegreen; +} + +publication-status[release-status="Completed"]{ + background-color: blueviolet; +} + +publication-status[release-status="On Hiatus"]{ + background-color: darkorange; +} + +publication-status[release-status="Cancelled"]{ + background-color: firebrick; +} + +publication-status[release-status="Upcoming"]{ + background-color: aqua; +} + +publication-status[release-status="Status Unavailable"]{ + background-color: gray; +} publication-details {