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

Move kiwix-serve home download button at top of the tile

This commit is contained in:
Emmanuel Engelhart 2021-10-30 17:46:49 +02:00 committed by renaud gaudin
parent 4adad9b281
commit c3d2e01157
2 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
static/skin/home.css
View File

@ -147,7 +147,7 @@ body {
.book__wrapper { .book__wrapper {
color: #444343; color: #444343;
height: 280px; height: 248px;
width: 250px; width: 250px;
margin: 15px; margin: 15px;
background-color: #f7f7f7; background-color: #f7f7f7;
@ -188,11 +188,6 @@ body {
align-content: center; align-content: center;
} }
#bookSize {
font-size: 1.1rem;
margin: 3px 0;
}
#bookTitle { #bookTitle {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -200,6 +195,11 @@ body {
font-size: 1.45rem; font-size: 1.45rem;
} }
#bookDownload {
font-size: 1.1rem;
margin: 3px 0;
}
.book__description { .book__description {
grid-column: 1 / 3; grid-column: 1 / 3;
margin: 10px 10px 5px; margin: 10px 10px 5px;
@ -245,32 +245,25 @@ body {
.book__tags--wrapper { .book__tags--wrapper {
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
margin-top: auto;
margin-bottom: auto;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.book__links { #bookDownload > span {
display: flex;
text-align: end;
justify-content: flex-end;
grid-column: 2 / 3;
font-size: 1.1rem;
margin: 10px 4px;
color: #00b4e4;
}
.book__links > a, .book__links > span {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: #00b4e4;
position: relative; position: relative;
padding: 1px 6px 0; padding: 0 3px 1px;
font-family: roboto; font-family: roboto;
}
.book__links > a:hover, .book__links > span:hover {
background: #00b4e4; background: #00b4e4;
color: white; 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 {

8
static/skin/index.js
View File

@ -106,14 +106,14 @@
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' title='${title}'> <div class='book__title'>
<div id="bookTitle">${title}</div> <div id="bookTitle">${title}</div>
${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''} ${downloadLink ? `<div id="bookDownload"><span data-link="${downloadLink}" class="modal-button">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>
<div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div> <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
${downloadLink ? `<div class='book__links'><span class="download" data-link=${downloadLink} class="modal-button">Download</span></div>` : ''} </div></div></a>`; </div></div></a>`;
return divTag; return divTag;
} }
@ -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')}"] .download`); const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .modal-button`);
if (downloadButton) { if (downloadButton) {
insertModal(downloadButton); insertModal(downloadButton);
} }