Import book tiles

Tries to copy the same design of tiles as main page with javascript enabled
This commit is contained in:
Nikhil Tanwar 2023-02-13 04:35:53 +05:30
parent dca47d35f7
commit 6071b98fb7
2 changed files with 42 additions and 7 deletions

View File

@ -19,16 +19,24 @@ std::string HTMLDumper::dumpPlainHTML() const
{
kainjow::mustache::list booksData;
for ( const auto& bookId : library->getBooksIds() ) {
const auto bookEx = library->getBookById(bookId);
const auto bookName = bookEx.getName();
const auto bookObj = library->getBookById(bookId);
const auto bookTitle = bookObj.getTitle();
const auto bookDescription = bookObj.getDescription();
const auto langCode = bookObj.getCommaSeparatedLanguages();
const auto bookIconUrl = rootLocation + "/catalog/v2/illustration/" + bookId + "/?size=48";
std::string faviconAttr = "style=background-image:url(" + bookIconUrl + ")";
booksData.push_back(kainjow::mustache::object{
{"name", bookName}
{"title", bookTitle},
{"description", bookDescription},
{"langCode", langCode},
{"faviconAttr", faviconAttr}
});
}
return render_template(
RESOURCE::templates::no_js_library_page_html,
kainjow::mustache::object{
{"root", rootLocation},
{"books", booksData }
}
);

View File

@ -29,12 +29,39 @@
font-family: "roboto";
src: url("{{root}}/skin/fonts/Roboto.ttf?KIWIXCACHEID") format("truetype");
}
.book__list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.book__wrapper:hover {
transform: scale(1.0);
}
</style>
</head>
<body>
VERY REAL TEST :))))))))
<div class="kiwixHomeBody">
<div class="book__list">
{{#books}}
<div>{{name}}</div>
<div class="book__wrapper">
<a class="book__link" href="#" title="Preview" aria-label="Preview">
<div class="book__link__wrapper">
<div class="book__icon" {{faviconAttr}}></div>
<div class="book__header">
<div id="book__title">{{title}}</div>
</div>
<div class="book__description" title="{{description}}">{{description}}</div>
</div>
</a>
<div class="book__languageTag" {{languageAttr}}>{{langCode}}</div>
<div class="book__tags"><div class="book__tags--wrapper">TO DO: TAGS</div>
</div>
</div>
{{/books}}
</div>
</div>
</body>
</html>