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

Merge pull request #32 from db-2001/persistent-release-status

Browse Source 
Move release-status to top right and keep visible
This commit is contained in:
Glax 2023-11-03 09:50:24 +01:00 committed by GitHub
commit ddee459aa2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Website/interaction.js
View File

@ -219,10 +219,10 @@ function CreateManga(manga, connector){
statusTooltip.innerText = 'Status Unavailable';
}
releaseStatus.appendChild(statusTooltip); //Append the tooltip to the indicator circle
mangaName.appendChild(releaseStatus); //Append the release status indicator to the info block
info.appendChild(mangaName);
mangaElement.appendChild(info);
mangaElement.appendChild(releaseStatus); //Append the release status indicator to the publication element
return mangaElement;
}

24
Website/styles/style_default.css
View File

@ -251,13 +251,16 @@ publication-name{
}
publication-status {
display: inline-block;
display:block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 5px;
position: relative;
vertical-align: middle;
position: absolute;
top: 5px;
right: 5px;
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
}
publication-status:hover > status-tooltip {
@ -269,8 +272,8 @@ status-tooltip {
position: absolute;
/*Position*/
left: -50px ;
bottom: 150%;
left: 150%;
bottom: -75%;
z-index: 3;
/*Text Properties*/
@ -284,17 +287,20 @@ status-tooltip {
width:100px;
background-color: black;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 1px;
}
status-tooltip::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
border-color: transparent black transparent transparent;
}
publication img {

24
Website/styles/style_mangahover.css
View File

@ -252,13 +252,16 @@ publication-name{
}
publication-status {
display: inline-block;
display:block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 5px;
position: relative;
vertical-align: middle;
position: absolute;
top: 5px;
right: 5px;
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
}
publication-status:hover > status-tooltip {
@ -270,8 +273,8 @@ status-tooltip {
position: absolute;
/*Position*/
left: -50px ;
bottom: 150%;
left: 150%;
bottom: -75%;
z-index: 3;
/*Text Properties*/
@ -285,17 +288,20 @@ status-tooltip {
width:100px;
background-color: black;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 1px;
}
status-tooltip::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
border-color: transparent black transparent transparent;
}