smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make kiwix-serve home tiles clickable

This commit is contained in:
Emmanuel Engelhart 2021-10-30 14:07:41 +02:00 committed by renaud gaudin
parent 251f3a01ed
commit 4adad9b281
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/skin/home.css
View File

@ -141,6 +141,10 @@ body {
border-color: #acacac; border-color: #acacac;
} }
.book__link {
text-decoration: none;
}
.book__wrapper { .book__wrapper {
color: #444343; color: #444343;
height: 280px; height: 280px;

9
static/skin/index.js
View File

@ -103,7 +103,9 @@
if (sort) { if (sort) {
divTag.setAttribute('data-idx', bookOrderMap.get(id)); divTag.setAttribute('data-idx', bookOrderMap.get(id));
} }
divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img class="book__icon--image" src='${root}${iconUrl}'></div> 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' title='${title}'> <div class='book__title' title='${title}'>
<div id="bookTitle">${title}</div> <div id="bookTitle">${title}</div>
${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''} ${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''}
@ -111,7 +113,7 @@
<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>
<div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div> <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
<div class='book__links'> <a href="${root}${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<span class="download" data-link=${downloadLink} class="modal-button">Download</span>` : ''} </div></div>`; ${downloadLink ? `<div class='book__links'><span class="download" data-link=${downloadLink} class="modal-button">Download</span></div>` : ''} </div></div></a>`;
return divTag; return divTag;
} }
@ -126,7 +128,8 @@
function insertModal(button) { function insertModal(button) {
const downloadLink = button.getAttribute('data-link'); const downloadLink = button.getAttribute('data-link');
button.addEventListener('click', () => { button.addEventListener('click', (event) => {
event.preventDefault();
document.body.insertAdjacentHTML('beforeend', `<div class="modal-wrapper"> document.body.insertAdjacentHTML('beforeend', `<div class="modal-wrapper">
<div class="modal"> <div class="modal">
<div class="modal-heading"> <div class="modal-heading">