Search Window refresh
This commit is contained in:
db-2001
parent
a3479bcf8b
commit
2c045740fc
@ -1,4 +1,6 @@
|
||||
let apiUri = `${window.location.protocol}//${window.location.host}/api`
|
||||
//let apiUri = `${window.location.protocol}//${window.location.host}/api`
|
||||
|
||||
let apiUri = `http://192.168.1.79:6531`;
|
||||
|
||||
// if(getCookie("apiUri") != ""){
|
||||
// apiUri = getCookie("apiUri");
|
||||
@ -150,8 +152,9 @@ async function GetRateLimits() {
|
||||
return json;
|
||||
}
|
||||
|
||||
function CreateMonitorJob(connector, internalId, language){
|
||||
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00&translatedLanguage=${language}`;
|
||||
function CreateMonitorJob(connector, internalId, language, interval, folder, chapterNo){
|
||||
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}&customFolderName=${folder}`;
|
||||
//console.log(uri);
|
||||
PostData(uri);
|
||||
}
|
||||
|
||||
|
||||
@ -68,16 +68,27 @@
|
||||
|
||||
<popup id="newMangaPopup">
|
||||
<blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
|
||||
<popup-window>
|
||||
<border-bar>
|
||||
<popup-title>Search</popup-title>
|
||||
<popup-close onclick="newMangaPopup.style.display = 'none'">×</popup-close>
|
||||
</border-bar>
|
||||
<popup-content>
|
||||
<div id="loaderdiv">
|
||||
<div id="loader"></div>
|
||||
</div>
|
||||
<div id="newMangaPopupSelector">
|
||||
<select id="newMangaConnector" />
|
||||
<select id="newMangaConnector">
|
||||
<input type="text" placeholder="Title" id="newMangaTitle" />
|
||||
<select id="newMangaTranslatedLanguage">
|
||||
<option selected="selected">en</option>
|
||||
<option>it</option>
|
||||
<option>de</option>
|
||||
<option selected="selected">EN</option>
|
||||
<option>IT</option>
|
||||
<option>DE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="newMangaResult"></div>
|
||||
</popup-content>
|
||||
</popup-window>
|
||||
</popup>
|
||||
|
||||
<popup id="settingsPopup">
|
||||
@ -294,6 +305,7 @@
|
||||
</border-bar>
|
||||
|
||||
</popup-window>
|
||||
</popup>
|
||||
</viewport>
|
||||
|
||||
<footer>
|
||||
|
||||
@ -76,11 +76,15 @@ const settingUserAgent = document.querySelector("#userAgent");
|
||||
const settingApiUri = document.querySelector("#settingApiUri");
|
||||
const settingAprilFoolsMode = document.querySelector("#aprilFoolsMode");
|
||||
const settingCSSStyle = document.querySelector('#cssStyle');
|
||||
const settingDownloadLocation = [];
|
||||
|
||||
//Search and Add
|
||||
const newMangaPopup = document.querySelector("#newMangaPopup");
|
||||
const newMangaConnector = document.querySelector("#newMangaConnector");
|
||||
const newMangaTitle = document.querySelector("#newMangaTitle");
|
||||
const newMangaResult = document.querySelector("#newMangaResult");
|
||||
const newMangaTranslatedLanguage = document.querySelector("#newMangaTranslatedLanguage");
|
||||
const newMangaLoader = document.querySelector("popup-content #loaderdiv");
|
||||
|
||||
//Jobs
|
||||
const jobsRunningTag = document.querySelector("#jobsRunningTag");
|
||||
@ -153,6 +157,9 @@ function Setup(){
|
||||
GetSettings().then((json) => {
|
||||
//console.log(json);
|
||||
settingApiUri.placeholder = apiUri;
|
||||
settingDownloadLocation.value = json.downloadLocation;
|
||||
settingUserAgent.value = json.userAgent;
|
||||
settingAprilFoolsMode.checked = json.aprilFoolsMode;
|
||||
});
|
||||
GetRateLimits().then((json) => {
|
||||
defaultRL.placeholder = json.Default + ' Requests/Minute';
|
||||
@ -290,31 +297,30 @@ function ShowNewMangaSearch(){
|
||||
newMangaTitle.value = "";
|
||||
newMangaPopup.style.display = "block";
|
||||
newMangaResult.replaceChildren();
|
||||
newMangaLoader.style.display = 'none';
|
||||
}
|
||||
|
||||
newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
|
||||
|
||||
|
||||
|
||||
|
||||
function GetNewMangaItems(){
|
||||
if(newMangaTitle.value.length < 4)
|
||||
return;
|
||||
|
||||
if(newMangaTitle.value.length < 4) {
|
||||
return;
|
||||
}
|
||||
newMangaResult.replaceChildren();
|
||||
newMangaConnector.disabled = true;
|
||||
newMangaTitle.disabled = true;
|
||||
newMangaTranslatedLanguage.disabled = true;
|
||||
newMangaLoader.style.display = 'block';
|
||||
GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => {
|
||||
//console.log(json);
|
||||
newMangaLoader.style.display = 'none';
|
||||
newMangaResult.scrollTop = 0;
|
||||
if(json.length > 0)
|
||||
newMangaResult.style.display = "flex";
|
||||
json.forEach(result => {
|
||||
var mangaElement = CreateManga(result, newMangaConnector.value)
|
||||
newMangaResult.appendChild(mangaElement);
|
||||
mangaElement.addEventListener("click", (event) => {
|
||||
ShowMangaWindow(null, result, event, true);
|
||||
});
|
||||
var searchResult = CreateSearchResult(result, newMangaConnector.value)
|
||||
newMangaResult.appendChild(searchResult);
|
||||
});
|
||||
|
||||
newMangaConnector.disabled = false;
|
||||
@ -376,6 +382,203 @@ function CreateManga(manga, connector){
|
||||
return mangaElement;
|
||||
}
|
||||
|
||||
//Returns a new "Search Result" item to display in the search window
|
||||
function CreateSearchResult(manga, connector) {
|
||||
//Create a new publication and set an internal ID
|
||||
var searchResult = document.createElement('div');
|
||||
searchResult.id = GetValidSelector(manga.internalId);
|
||||
searchResult.className = "section-item";
|
||||
|
||||
//Append the cover image to the publication
|
||||
var imageCont = document.createElement('img-container');
|
||||
|
||||
var mangaImage = document.createElement('img');
|
||||
mangaImage.src = GetCoverUrl(manga.internalId);
|
||||
imageCont.appendChild(mangaImage);
|
||||
|
||||
var connectorName = document.createElement('manga-connector');
|
||||
connectorName.innerText = connector.toUpperCase();
|
||||
connectorName.style.backgroundColor = stringToColour(connector);
|
||||
imageCont.appendChild(connectorName);
|
||||
|
||||
var chapterNo = document.createElement('span');
|
||||
chapterNo.className = 'latest-chapter-no';
|
||||
chapterNo.innerText = manga.latestChapterAvailable.toString();
|
||||
imageCont.appendChild(chapterNo);
|
||||
|
||||
searchResult.appendChild(imageCont);
|
||||
|
||||
var mangaDetails = document.createElement('div');
|
||||
mangaDetails.className = 'jobDetails';
|
||||
|
||||
var headerRow = document.createElement('header-row');
|
||||
|
||||
var mangaTitle = document.createElement('span');
|
||||
mangaTitle.innerText = manga.sortName;
|
||||
mangaTitle.className = 'mangaTitle';
|
||||
headerRow.appendChild(mangaTitle);
|
||||
|
||||
//Create the publication status indicator
|
||||
var releaseStatus = document.createElement('status-filter');
|
||||
switch(manga.releaseStatus){
|
||||
case 0:
|
||||
releaseStatus.setAttribute("release-status", "Ongoing");
|
||||
releaseStatus.innerText = "Ongoing";
|
||||
break;
|
||||
case 1:
|
||||
releaseStatus.setAttribute("release-status", "Completed");
|
||||
releaseStatus.innerText = "Completed";
|
||||
break;
|
||||
case 2:
|
||||
releaseStatus.setAttribute("release-status", "On Hiatus");
|
||||
releaseStatus.innerText = "On Hiatus";
|
||||
break;
|
||||
case 3:
|
||||
releaseStatus.setAttribute("release-status", "Cancelled");
|
||||
releaseStatus.innerText = "Cancelled";
|
||||
break;
|
||||
case 4:
|
||||
releaseStatus.setAttribute("release-status", "Upcoming");
|
||||
releaseStatus.innerText = "Upcoming";
|
||||
break;
|
||||
default:
|
||||
releaseStatus.setAttribute("release-status", "Status Unavailable");
|
||||
releaseStatus.innerText = "Status Unavailable";
|
||||
break;
|
||||
}
|
||||
headerRow.appendChild(releaseStatus);
|
||||
|
||||
mangaDetails.appendChild(headerRow);
|
||||
|
||||
//Genres
|
||||
var tagCloud = document.createElement('tag-cloud');
|
||||
manga.authors.forEach(author => {
|
||||
var authorCard = document.createElement('author-tag');
|
||||
|
||||
var personImg = document.createElement('img');
|
||||
personImg.src = 'media/person.svg';
|
||||
authorCard.appendChild(personImg);
|
||||
|
||||
var authorName = document.createElement('span');
|
||||
authorName.innerText = author;
|
||||
authorCard.appendChild(authorName);
|
||||
|
||||
tagCloud.appendChild(authorCard);
|
||||
});
|
||||
manga.tags.forEach(tag => {
|
||||
var tagElement = document.createElement('manga-tag');
|
||||
tagElement.innerText = tag;
|
||||
tagCloud.appendChild(tagElement);
|
||||
});
|
||||
mangaDetails.appendChild(tagCloud);
|
||||
|
||||
//Description
|
||||
var description = document.createElement('div');
|
||||
description.className = 'mangaDescription';
|
||||
description.innerText = manga.description;
|
||||
mangaDetails.appendChild(description);
|
||||
|
||||
searchResult.appendChild(mangaDetails);
|
||||
|
||||
//Download Settings
|
||||
var dlSett = document.createElement('div');
|
||||
dlSett.className = 'new-manga-download-settings'
|
||||
|
||||
folderRow = document.createElement('row');
|
||||
folderLabel = document.createElement('label');
|
||||
folderLabel.innerText = 'Download Path:';
|
||||
folderRow.appendChild(folderLabel);
|
||||
folderInput = document.createElement('input');
|
||||
downloadFolder = '~/' + manga.folderName + '/';
|
||||
folderInput.placeholder = downloadFolder.toString();
|
||||
folderInput.type = 'text';
|
||||
folderInput.id = manga.internalId.concat('-downloadfolder')
|
||||
folderRow.appendChild(folderInput);
|
||||
dlSett.appendChild(folderRow);
|
||||
|
||||
intervalRow = document.createElement('row');
|
||||
intervalLabel = document.createElement('label');
|
||||
intervalLabel.innerText = 'Job Interval:';
|
||||
intervalRow.appendChild(intervalLabel);
|
||||
intervalInput = document.createElement('input');
|
||||
intervalInput.placeholder = '03:00:00 (HH:MM:SS)';
|
||||
intervalInput.type = 'text';
|
||||
intervalInput.id = manga.internalId.concat('-downloadinterval')
|
||||
intervalRow.appendChild(intervalInput);
|
||||
dlSett.appendChild(intervalRow);
|
||||
|
||||
chapterRow = document.createElement('row');
|
||||
chapterLabel = document.createElement('label');
|
||||
chapterLabel.innerText = 'Download from Chapter:';
|
||||
chapterRow.appendChild(chapterLabel);
|
||||
chapterInput = document.createElement('input');
|
||||
chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString();
|
||||
chapterInput.type = 'number';
|
||||
chapterInput.id = manga.internalId.concat('-downloadchapter')
|
||||
chapterRow.appendChild(chapterInput);
|
||||
dlSett.appendChild(chapterRow);
|
||||
|
||||
dlButton = document.createElement('border-bar-button');
|
||||
if (IsInLibrary(manga.internalId)) {
|
||||
dlButton.className = 'section in-library';
|
||||
dlButton.innerText = 'In Library';
|
||||
} else {
|
||||
dlButton.className = 'section downloadManga';
|
||||
dlButton.innerText = 'Monitor Manga';
|
||||
dlButton.addEventListener('click', function() { AddManga(manga.internalId, connector) });
|
||||
}
|
||||
|
||||
|
||||
dlSett.appendChild(dlButton);
|
||||
|
||||
mangaDetails.appendChild(dlSett);
|
||||
|
||||
//Append the publication information to the publication
|
||||
//console.log(manga);
|
||||
return searchResult;
|
||||
}
|
||||
|
||||
function IsInLibrary(id) {
|
||||
matchFound = false;
|
||||
tasksContent.childNodes.forEach(publication => {
|
||||
if (id.toLowerCase().includes(publication.id.toLowerCase())) {
|
||||
console.log('Match found');
|
||||
matchFound = true;
|
||||
}
|
||||
});
|
||||
return matchFound;
|
||||
}
|
||||
|
||||
function AddManga(id, connector) {
|
||||
//console.log('Adding Manga');
|
||||
mangaID = id;
|
||||
mangaConnector = connector;
|
||||
mangaLanguage = document.getElementById('newMangaTranslatedLanguage').value.toLowerCase();
|
||||
|
||||
folderInput = document.getElementById(id.concat('-downloadfolder')).value;
|
||||
if (folderInput == null || folderInput == '') {
|
||||
mangaFolder = document.getElementById(id.concat('-downloadfolder')).placeholder;
|
||||
} else {
|
||||
mangaFolder = folderInput;
|
||||
}
|
||||
|
||||
intervalInput = document.getElementById(id.concat('-downloadinterval')).value;
|
||||
if (intervalInput == null || intervalInput == '') {
|
||||
mangaInterval = '03:00:00';
|
||||
} else {
|
||||
mangaInterval = intervalInput;
|
||||
}
|
||||
|
||||
chapterInput = document.getElementById(id.concat('-downloadchapter')).value;
|
||||
if (chapterInput == null || chapterInput == '') {
|
||||
mangaChapter = 0;
|
||||
} else {
|
||||
mangaChapter = chapterInput;
|
||||
}
|
||||
|
||||
CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
|
||||
}
|
||||
|
||||
createMonitorJobButton.addEventListener("click", () => {
|
||||
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
|
||||
UpdateJobs();
|
||||
@ -574,6 +777,7 @@ function OpenSettings(){
|
||||
settingApiUri.value = apiUri;
|
||||
settingUserAgent.value = json.userAgent;
|
||||
settingAprilFoolsMode.checked = json.aprilFoolsMode;
|
||||
settingDownloadLocation.value = json.downloadLocation;
|
||||
//console.log(json.styleSheet);
|
||||
});
|
||||
GetRateLimits().then((json) => {
|
||||
|
||||
4
Website/media/check-circle.svg
Normal file
4
Website/media/check-circle.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-check-circle" viewBox="0 0 16 16">
|
||||
|
||||
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 285 B |
3
Website/media/person.svg
Normal file
3
Website/media/person.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-person" viewBox="0 0 16 16">
|
||||
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
@ -145,6 +145,10 @@ status-filter {
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
row > status-filter {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
status-filter[release-status="Ongoing"]{
|
||||
background-color: limegreen;
|
||||
}
|
||||
@ -647,57 +651,49 @@ a:active {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
#newMangaPopup > div {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#newMangaPopup > #newMangaPopupSelector {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
margin: 80px auto 0;
|
||||
}
|
||||
|
||||
#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
}
|
||||
#newMangaPopupSelector {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
width: calc(100%-20px)
|
||||
}
|
||||
|
||||
#newMangaPopup #newMangaConnector {
|
||||
width: 100px;
|
||||
padding: 0 0 0 5px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
border: 0;
|
||||
border-right: 1px solid darkgray;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
border: 0;;
|
||||
}
|
||||
|
||||
#newMangaPopup #newMangaTitle{
|
||||
width: 445px;
|
||||
padding: 0 5px 0 5px;
|
||||
border: 0;
|
||||
margin: 0px 10px;
|
||||
padding: 5px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
outline: none;
|
||||
flex-grow: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#newMangaPopup #newMangaTranslatedLanguage {
|
||||
width: 45px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
border-left: 1px solid darkgray;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
#newMangaResult {
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin: 5px auto 0;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
width: min-content;
|
||||
max-width: 98%;
|
||||
max-height: 400px;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
blur-background {
|
||||
@ -882,6 +878,10 @@ footer-tag-popup::before{
|
||||
z-index: 201;
|
||||
}
|
||||
|
||||
popup-content #loaderdiv {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loaderText {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@ -911,6 +911,107 @@ footer-tag-popup::before{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#newMangaResult > .section-item {
|
||||
flex-direction: row;
|
||||
min-height: 300px;
|
||||
flex-grow: 0;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
img-container {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img-container > img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
manga-connector {
|
||||
display: block;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
/*Text Properties*/
|
||||
font-size:8pt;
|
||||
font-weight:bold;
|
||||
color:white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.latest-chapter-no {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background-color: var(--primary-color);;
|
||||
}
|
||||
|
||||
div.new-manga-download-settings {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.new-manga-download-settings > row {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.new-manga-download-settings > row > label {
|
||||
margin-left: 15px;
|
||||
text-wrap: nowrap;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.new-manga-download-settings > row > input {
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
border-color: lightgray;
|
||||
outline: none;
|
||||
text-align: end;
|
||||
float: right;
|
||||
width: 300px;
|
||||
}
|
||||
.new-manga-download-settings > row > input:focus {
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.section-item > .jobImage {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
@ -923,7 +1024,9 @@ footer-tag-popup::before{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: calc(100% - 15px);
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-item > .jobDetails > .jobTitle {
|
||||
@ -933,6 +1036,136 @@ footer-tag-popup::before{
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.mangaTitle {
|
||||
margin: 5px;
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
text-wrap: wrap;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
tag-cloud {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
margin-left: 10px;
|
||||
width: calc(100% - 30px);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
manga-tag {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
margin: 0 5px 8px 17px;
|
||||
padding: 0 10px 0 12px;
|
||||
background: darkslategrey;
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
manga-tag:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: -12px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent darkslategrey transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 12px 12px 12px 0;
|
||||
}
|
||||
|
||||
manga-tag:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 1px;
|
||||
float: left;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
author-tag {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
margin-left: 0px;
|
||||
margin-right: 5px;
|
||||
padding: 0 5px 0 5px;
|
||||
background: #800000;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
author-tag > img {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
float: left;
|
||||
background: #800000;
|
||||
}
|
||||
|
||||
.mangaDescription {
|
||||
font-size: 10pt;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
height: auto;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.downloadManga {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
border-bar-button.in-library {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 10pt;
|
||||
|
||||
background-color: #08962e;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
border-bar-button.in-library:hover {
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section-item > .jobDetails > .jobProgressBar {
|
||||
margin: 5px;
|
||||
height: 10px;
|
||||
@ -983,8 +1216,7 @@ footer-tag-popup::before{
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
transition: .4s; border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user