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'; statusTooltip.innerText = 'Status Unavailable';
} }
releaseStatus.appendChild(statusTooltip); //Append the tooltip to the indicator circle 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); info.appendChild(mangaName);
mangaElement.appendChild(info); mangaElement.appendChild(info);
mangaElement.appendChild(releaseStatus); //Append the release status indicator to the publication element
return mangaElement; return mangaElement;
} }

24
Website/styles/style_default.css
View File

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

24
Website/styles/style_mangahover.css
View File

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