Add badge for displaying amount of images in an illust

This commit is contained in:
blankie 2023-05-05 23:28:33 +07:00
parent 48dbc8e978
commit 2a6130b16c
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
5 changed files with 56 additions and 16 deletions

View File

@ -120,6 +120,7 @@ void from_json(const nlohmann::json& j, Illust& illust) {
} else {
illust.images = {get_illust_image(illust_details)};
}
illust.page_count = to_ull(illust_details.at("page_count").get_ref<const nlohmann::json::string_t&>());
}
void from_json(const nlohmann::json& j, Illusts& illusts) {
@ -167,7 +168,8 @@ void from_json(const nlohmann::json& j, SearchResults& search_results) {
.comment = std::nullopt,
.tags = std::move(tags),
.images = {get_illust_image(i)}
.images = {get_illust_image(i)},
.page_count = i.at("pageCount").get<size_t>()
};
search_results.illusts.illusts.push_back(illust);
}

View File

@ -44,6 +44,7 @@ struct Illust {
std::optional<std::string> comment;
std::vector<Tag> tags;
std::vector<Images> images;
size_t page_count;
};
struct Illusts {

View File

@ -67,7 +67,7 @@ static inline Element generate_user_link(const httplib::Request& req, const Conf
static inline Element generate_images(const httplib::Request& req, const Config& config, const Illust& illust) {
using namespace std::string_literals;
Element div("div", {{"class", "illust"}}, {});
Element div("div", {{"class", "illustimages"}}, {});
bool show_pages = illust.images.size() > 1;
if (show_pages) {

View File

@ -8,6 +8,8 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
--background-color: black;
--text-color: white;
--illust-badge-background-color: rgba(0, 0, 0, .5);
--error-background-color: rgb(100, 0, 0);
--error-border-color: red;
--error-text-color: white;
@ -65,11 +67,11 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
margin-left: .5em;
}
/* USER ILLUSTRATIONS PAGE (and illustrations page) */
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
.grid {
gap: 1em;
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}
.grid img {
@ -79,6 +81,18 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
.grid p {
width: 15em;
}
.illustsgriditem {
position: relative;
}
.illustbadge {
position: absolute;
top: .25em;
right: .25em;
padding: .25em;
color: var(--text-color);
background-color: var(--illust-badge-background-color);
text-decoration: none !important;
}
/* ILLUSTRATIONS PAGE */
.illusttags {
@ -86,11 +100,11 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
flex-wrap: wrap;
gap: 0 1em;
}
.illust {
.illustimages {
display: grid;
text-align: center;
}
.illust .landmark {
.illustimages .landmark {
padding-top: 1em;
padding-bottom: 1em;
}

View File

@ -5,7 +5,9 @@
#include "servehelper.h"
static Element generate_pager(const Illusts& illusts, size_t page, const char* id);
static inline Element generate_content(const httplib::Request& req, const Config& config, const Illusts& illusts);
static inline Element generate_illusts_grid(const httplib::Request& req, const Config& config, const Illusts& illusts);
static inline Element generate_illusts_grid_item(const httplib::Request& req, const Config& config, const Illust& illust);
static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url);
void serve(const httplib::Request& req, httplib::Response& res, const Config& config, std::string title, Element element) {
using namespace std::string_literals;
@ -104,7 +106,7 @@ Element generate_illusts_pager(const httplib::Request& req, const Config& config
return Element("div", {{"id", id}}, {
generate_pager(illusts, page, id),
Element("br"),
generate_content(req, config, illusts),
generate_illusts_grid(req, config, illusts),
generate_pager(illusts, page, id)
});
}
@ -132,19 +134,40 @@ static Element generate_pager(const Illusts& illusts, size_t page, const char* i
});
}
static inline Element generate_content(const httplib::Request& req, const Config& config, const Illusts& illusts) {
static inline Element generate_illusts_grid(const httplib::Request& req, const Config& config, const Illusts& illusts) {
Element div("div", {{"class", "grid"}}, {});
div.nodes.reserve(illusts.illusts.size());
for (const Illust& i : illusts.illusts) {
std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(i.illust_id);
std::string image_url = proxy_image_url(config, i.images[0].thumbnail_or_original(1));
div.nodes.push_back(Element("a", {{"href", {std::move(illust_url)}}}, {
Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
Element("p", {i.title})
}));
div.nodes.push_back(generate_illusts_grid_item(req, config, i));
}
return div;
}
static inline Element generate_illusts_grid_item(const httplib::Request& req, const Config& config, const Illust& illust) {
std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(illust.illust_id);
std::string image_url = proxy_image_url(config, illust.images[0].thumbnail_or_original(1));
Element div("div", {{"class", "illustsgriditem"}}, {
Element("a", {{"href", illust_url}}, {
Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
Element("p", {illust.title})
})
});
if (illust.page_count > 1) {
div.nodes.push_back(generate_illust_badge(illust, std::move(illust_url)));
}
return div;
}
static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url) {
std::string text = std::to_string(illust.page_count) + " pages";
std::string illust_preview_url = illust_url + "?preview=1";
return Element("a", {{"class", "illustbadge"}, {"href", std::move(illust_preview_url)}}, {
std::move(text)
});
}