From b03918ab5cdb1cf54f3de61e3f3eae4d36543631 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Wed, 1 Nov 2023 19:06:47 -0400 Subject: [PATCH 1/4] Initial feature --- Website/interaction.js | 33 ++++++++++++++++++++ Website/styles/style_default.css | 47 ++++++++++++++++++++++++++++ Website/styles/style_mangahover.css | 48 +++++++++++++++++++++++++++++ 3 files changed, 128 insertions(+) diff --git a/Website/interaction.js b/Website/interaction.js index 5b55dd6..5161828 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -163,19 +163,52 @@ function GetNewMangaItems(){ //Returns a new "Publication" Item to display in the jobs section function CreateManga(manga, connector){ + //Create a new publication and set an internal ID var mangaElement = document.createElement('publication'); mangaElement.id = GetValidSelector(manga.internalId); + + //Append the cover image to the publication var mangaImage = document.createElement('img'); mangaImage.src = GetCoverUrl(manga.internalId); mangaElement.appendChild(mangaImage); + +//Append the publication information to the publication + console.log(manga); var info = document.createElement('publication-information'); var connectorName = document.createElement('connector-name'); connectorName.innerText = connector; connectorName.className = "pill"; connectorName.style.backgroundColor = stringToColour(connector); info.appendChild(connectorName); + var mangaName = document.createElement('publication-name'); mangaName.innerText = manga.sortName; + + //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.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); return mangaElement; diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css index 19c0f52..4f4e67c 100644 --- a/Website/styles/style_default.css +++ b/Website/styles/style_default.css @@ -250,6 +250,53 @@ publication-name{ font-weight: bold; } +publication-status { + display: inline-block; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 5px; + position: relative; + vertical-align: middle; +} + +publication-status:hover > status-tooltip { + visibility: visible; +} + +status-tooltip { + visibility: hidden; + position: absolute; + + /*Position*/ + left: -50px ; + bottom: 150%; + 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; + border-radius: 6px; +} + +status-tooltip::after { + content: " "; + position: absolute; + top: 100%; /* At the bottom of the tooltip */ + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: black transparent transparent transparent; + } + publication img { position: absolute; top: 0; diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css index 949a185..2390c0d 100644 --- a/Website/styles/style_mangahover.css +++ b/Website/styles/style_mangahover.css @@ -251,6 +251,54 @@ publication-name{ font-weight: bold; } +publication-status { + display: inline-block; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 5px; + position: relative; + vertical-align: middle; +} + +publication-status:hover > status-tooltip { + visibility: visible; +} + +status-tooltip { + visibility: hidden; + position: absolute; + + /*Position*/ + left: -50px ; + bottom: 150%; + 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; + border-radius: 6px; +} + +status-tooltip::after { + content: " "; + position: absolute; + top: 100%; /* At the bottom of the tooltip */ + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: black transparent transparent transparent; + } + + publication-details { display: flex; flex-direction: column; From 53bb83faca30b7401eecf9699752f5604c61d1c4 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Wed, 1 Nov 2023 19:47:21 -0400 Subject: [PATCH 2/4] Moved tooltip to right for better readability --- Website/styles/style_default.css | 13 +++++++------ Website/styles/style_mangahover.css | 13 +++++++------ 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css index 4f4e67c..f4f6fa8 100644 --- a/Website/styles/style_default.css +++ b/Website/styles/style_default.css @@ -269,8 +269,8 @@ status-tooltip { position: absolute; /*Position*/ - left: -50px ; - bottom: 150%; + left: 150% ; + bottom: -50%; z-index: 3; /*Text Properties*/ @@ -279,6 +279,7 @@ status-tooltip { color:white; text-align: center; padding: 5px 5px; + vertical-align: middle; /*Size*/ width:100px; @@ -289,12 +290,12 @@ status-tooltip { 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 { diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css index 2390c0d..d9afb52 100644 --- a/Website/styles/style_mangahover.css +++ b/Website/styles/style_mangahover.css @@ -270,8 +270,8 @@ status-tooltip { position: absolute; /*Position*/ - left: -50px ; - bottom: 150%; + left: 150% ; + bottom: -50%; z-index: 3; /*Text Properties*/ @@ -280,6 +280,7 @@ status-tooltip { color:white; text-align: center; padding: 5px 5px; + vertical-align: middle; /*Size*/ width:100px; @@ -290,12 +291,12 @@ status-tooltip { 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; } From 54731e74e32f2f0561c122eae7beaddeff730d17 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Wed, 1 Nov 2023 19:58:38 -0400 Subject: [PATCH 3/4] Revert "Moved tooltip to right for better readability" This reverts commit 53bb83faca30b7401eecf9699752f5604c61d1c4. --- Website/styles/style_default.css | 13 ++++++------- Website/styles/style_mangahover.css | 13 ++++++------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css index f4f6fa8..4f4e67c 100644 --- a/Website/styles/style_default.css +++ b/Website/styles/style_default.css @@ -269,8 +269,8 @@ status-tooltip { position: absolute; /*Position*/ - left: 150% ; - bottom: -50%; + left: -50px ; + bottom: 150%; z-index: 3; /*Text Properties*/ @@ -279,7 +279,6 @@ status-tooltip { color:white; text-align: center; padding: 5px 5px; - vertical-align: middle; /*Size*/ width:100px; @@ -290,12 +289,12 @@ status-tooltip { status-tooltip::after { content: " "; position: absolute; - top: 50%; - right: 100%; /* To the left of the tooltip */ - margin-top: -5px; + top: 100%; /* At the bottom of the tooltip */ + left: 50%; + margin-left: -5px; border-width: 5px; border-style: solid; - border-color: transparent black transparent transparent; + border-color: black transparent transparent transparent; } publication img { diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css index d9afb52..2390c0d 100644 --- a/Website/styles/style_mangahover.css +++ b/Website/styles/style_mangahover.css @@ -270,8 +270,8 @@ status-tooltip { position: absolute; /*Position*/ - left: 150% ; - bottom: -50%; + left: -50px ; + bottom: 150%; z-index: 3; /*Text Properties*/ @@ -280,7 +280,6 @@ status-tooltip { color:white; text-align: center; padding: 5px 5px; - vertical-align: middle; /*Size*/ width:100px; @@ -291,12 +290,12 @@ status-tooltip { status-tooltip::after { content: " "; position: absolute; - top: 50%; - right: 100%; /* To the left of the tooltip */ - margin-top: -5px; + top: 100%; /* At the bottom of the tooltip */ + left: 50%; + margin-left: -5px; border-width: 5px; border-style: solid; - border-color: transparent black transparent transparent; + border-color: black transparent transparent transparent; } From 830252c8a7afd85a006101a01709c7b7954b2afd Mon Sep 17 00:00:00 2001 From: db-2001 Date: Wed, 1 Nov 2023 20:01:28 -0400 Subject: [PATCH 4/4] Removed console logging --- Website/interaction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Website/interaction.js b/Website/interaction.js index 5161828..c4b6fe8 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -173,7 +173,7 @@ function CreateManga(manga, connector){ mangaElement.appendChild(mangaImage); //Append the publication information to the publication - console.log(manga); + //console.log(manga); var info = document.createElement('publication-information'); var connectorName = document.createElement('connector-name'); connectorName.innerText = connector;