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

fixed font and other minor issues in title cards

This commit is contained in:
Manan Jethwani 2021-06-26 21:10:00 +05:30 committed by Emmanuel Engelhart
parent c1868e22f4
commit 736841818d
2 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/skin/home.css
View File

@ -66,7 +66,7 @@ body {
} }
.book { .book {
text-decoration: none; border-color: #acacac;
} }
.book__wrapper { .book__wrapper {
@ -74,8 +74,8 @@ body {
height: 280px; height: 280px;
width: 250px; width: 250px;
margin: 15px; margin: 15px;
background-color: #fcfcfc; background-color: #fbfbfb;
box-shadow: 0 0 5px #acacac; border: 1px solid #ececec;
border-radius: 3px; border-radius: 3px;
display: grid; display: grid;
grid-template-columns: 65px 1fr; grid-template-columns: 65px 1fr;
@ -91,14 +91,20 @@ body {
.book__icon { .book__icon {
display: flex; display: flex;
align-items: center; align-items: center;
align-content: center;
justify-content: center;
margin: 10px 0 0 10px; margin: 10px 0 0 10px;
} }
.book__title { .book__title {
display: block; display: grid;
font-family: poppins; font-family: poppins;
color: black; color: black;
margin: 10px 10px 0 0; padding: 12px 10px 0 2px;
width: 100%;
height: 100%;
align-items: center;
align-content: center;
} }
#bookSize { #bookSize {
@ -108,10 +114,9 @@ body {
#bookTitle { #bookTitle {
overflow: hidden; overflow: hidden;
display: -webkit-box; white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.45rem; font-size: 1.45rem;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.book__description { .book__description {
@ -146,11 +151,20 @@ body {
.book__tags { .book__tags {
display: flex; display: flex;
text-align: end; text-align: end;
font-size: 1.1rem;
justify-content: flex-end;
color: #909090;
font-family: roboto;
margin-right: 10px; margin-right: 10px;
margin-top: 10px; margin-top: 10px;
justify-content: flex-end; overflow: hidden;
font-family: roboto; }
color: #909090;
.book__tags--wrapper {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.book__links { .book__links {
@ -159,7 +173,7 @@ body {
justify-content: flex-end; justify-content: flex-end;
grid-column: 2 / 3; grid-column: 2 / 3;
font-size: 1.1rem; font-size: 1.1rem;
margin: 10px; margin: 10px 4px;
color: #00b4e4; color: #00b4e4;
} }
@ -167,7 +181,8 @@ body {
text-decoration: none; text-decoration: none;
color: #00b4e4; color: #00b4e4;
position: relative; position: relative;
padding: 2px 6px 0; padding: 1px 6px 0;
font-family: roboto;
} }
.book__links > a::after { .book__links > a::after {
@ -182,7 +197,7 @@ body {
background: #00b4e4; background: #00b4e4;
color: white; color: white;
z-index: -1; z-index: -1;
transition: transform 0.3s; transition: transform 0.2s;
} }
.book__links > a:hover::after { .book__links > a:hover::after {
@ -193,10 +208,6 @@ body {
color: white; color: white;
} }
.book__links > span {
color: #31353e;
}
.fadeOut { .fadeOut {
position: fixed; position: fixed;
display: none; display: none;

9
static/skin/index.js
View File

@ -44,7 +44,7 @@
const humanFriendlySize = (fileSize) => { const humanFriendlySize = (fileSize) => {
if (fileSize === 0) { if (fileSize === 0) {
return 'unkown'; return '';
} }
const units = ['bytes', 'kB', 'MB', 'GB', 'TB']; const units = ['bytes', 'kB', 'MB', 'GB', 'TB'];
let quotient = Math.floor(Math.log10(fileSize) / 3); let quotient = Math.floor(Math.log10(fileSize) / 3);
@ -94,6 +94,7 @@
} catch { } catch {
downloadLink = ''; downloadLink = '';
} }
humanFriendlyZimSize = humanFriendlySize(zimSize);
const divTag = document.createElement('div'); const divTag = document.createElement('div');
divTag.setAttribute('class', 'book'); divTag.setAttribute('class', 'book');
@ -103,13 +104,13 @@
} }
divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div> divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
<div class='book__title' title='${title}'> <div class='book__title' title='${title}'>
<div id='bookSize'>${humanFriendlySize(zimSize)}</div>
<div id="bookTitle">${title}</div> <div id="bookTitle">${title}</div>
${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</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'>${tagHtml}</div> <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
<div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>&nbsp;|&nbsp;${downloadLink ? `<a href="${downloadLink}" data-hove="Download" download>Download</a>` : `<span>Download</span>`} </div></div>`; <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<a href="${downloadLink}" data-hove="Download" download>Download</a>` : ''} </div></div>`;
return divTag; return divTag;
} }