Duplicated ids are not allowed in a HTML doc

This commit is contained in:
Emmanuel Engelhart 2021-10-30 18:54:56 +02:00 committed by renaud gaudin
parent 98f9c57e12
commit 8f5ffc5ef5
2 changed files with 22 additions and 22 deletions

View File

@ -177,7 +177,7 @@ body {
max-height: 100%; max-height: 100%;
} }
.book__title { .book__header {
display: grid; display: grid;
font-family: poppins; font-family: poppins;
color: black; color: black;
@ -188,18 +188,33 @@ body {
align-content: center; align-content: center;
} }
#bookTitle { .book__title {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 1.45rem; font-size: 1.45rem;
} }
#bookDownload { .book__download {
font-size: 1.1rem; font-size: 1.1rem;
margin: 3px 0; margin: 3px 0;
} }
.book__download > span {
cursor: pointer;
text-decoration: none;
position: relative;
padding: 0 3px 1px;
font-family: roboto;
background: #00b4e4;
color: white;
box-shadow: 0 0 0 0;
}
.book__download > span:hover {
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
}
.book__description { .book__description {
grid-column: 1 / 3; grid-column: 1 / 3;
margin: 10px 10px 5px; margin: 10px 10px 5px;
@ -250,21 +265,6 @@ body {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
#bookDownload > span {
cursor: pointer;
text-decoration: none;
position: relative;
padding: 0 3px 1px;
font-family: roboto;
background: #00b4e4;
color: white;
box-shadow: 0 0 0 0;
}
#bookDownload > span:hover {
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
}
.modal-wrapper { .modal-wrapper {
position: fixed; position: fixed;
z-index: 100; z-index: 100;

View File

@ -106,9 +106,9 @@
divTag.innerHTML = `<a class="book__link" href="${root}${link}" data-hover="Preview"> divTag.innerHTML = `<a class="book__link" href="${root}${link}" data-hover="Preview">
<div class="book__wrapper"> <div class="book__wrapper">
<div class="book__icon"><img class="book__icon--image" src="${root}${iconUrl}"></div> <div class="book__icon"><img class="book__icon--image" src="${root}${iconUrl}"></div>
<div class="book__title"> <div class="book__header">
<div id="bookTitle">${title}</div> <div id="book__title">${title}</div>
${downloadLink ? `<div id="bookDownload"><span data-link="${downloadLink}" class="modal-button">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''} ${downloadLink ? `<div class="book__download"><span data-link="${downloadLink}">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
</div> </div>
<div class="book__description" title="${description}">${description}</div> <div class="book__description" title="${description}">${description}</div>
<div class="book__languageTag">${language.substr(0, 2).toUpperCase()}</div> <div class="book__languageTag">${language.substr(0, 2).toUpperCase()}</div>
@ -307,7 +307,7 @@
booksToDelete.forEach(book => {iso.remove(book);}); booksToDelete.forEach(book => {iso.remove(book);});
books.forEach((book) => { books.forEach((book) => {
iso.insert(generateBookHtml(book, sort)) iso.insert(generateBookHtml(book, sort))
const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .modal-button`); const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .book__download`);
if (downloadButton) { if (downloadButton) {
insertModal(downloadButton); insertModal(downloadButton);
} }