glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix overflow of tooltip release-status.

Browse Source
This commit is contained in:
glax 2023-11-12 13:48:28 +01:00
parent 95876f1a53
commit 43cbb80eec
3 changed files with 94 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
Website/interaction.js
View File

@ -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);

64
Website/styles/style_default.css
View File

@ -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;

64
Website/styles/style_mangahover.css
View File

@ -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 {