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%;
}
.book__title {
.book__header {
display: grid;
font-family: poppins;
color: black;
@ -188,18 +188,33 @@ body {
align-content: center;
}
#bookTitle {
.book__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.45rem;
}
#bookDownload {
.book__download {
font-size: 1.1rem;
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 {
grid-column: 1 / 3;
margin: 10px 10px 5px;
@ -250,21 +265,6 @@ body {
-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 {
position: fixed;
z-index: 100;

View File

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