Add badge for displaying amount of images in an illust
This commit is contained in:
parent
48dbc8e978
commit
2a6130b16c
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue