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 {
|
} else {
|
||||||
illust.images = {get_illust_image(illust_details)};
|
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) {
|
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,
|
.comment = std::nullopt,
|
||||||
.tags = std::move(tags),
|
.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);
|
search_results.illusts.illusts.push_back(illust);
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,6 +44,7 @@ struct Illust {
|
||||||
std::optional<std::string> comment;
|
std::optional<std::string> comment;
|
||||||
std::vector<Tag> tags;
|
std::vector<Tag> tags;
|
||||||
std::vector<Images> images;
|
std::vector<Images> images;
|
||||||
|
size_t page_count;
|
||||||
};
|
};
|
||||||
|
|
||||||
struct Illusts {
|
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) {
|
static inline Element generate_images(const httplib::Request& req, const Config& config, const Illust& illust) {
|
||||||
using namespace std::string_literals;
|
using namespace std::string_literals;
|
||||||
|
|
||||||
Element div("div", {{"class", "illust"}}, {});
|
Element div("div", {{"class", "illustimages"}}, {});
|
||||||
bool show_pages = illust.images.size() > 1;
|
bool show_pages = illust.images.size() > 1;
|
||||||
|
|
||||||
if (show_pages) {
|
if (show_pages) {
|
||||||
|
|
|
@ -8,6 +8,8 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
||||||
--background-color: black;
|
--background-color: black;
|
||||||
--text-color: white;
|
--text-color: white;
|
||||||
|
|
||||||
|
--illust-badge-background-color: rgba(0, 0, 0, .5);
|
||||||
|
|
||||||
--error-background-color: rgb(100, 0, 0);
|
--error-background-color: rgb(100, 0, 0);
|
||||||
--error-border-color: red;
|
--error-border-color: red;
|
||||||
--error-text-color: white;
|
--error-text-color: white;
|
||||||
|
@ -65,11 +67,11 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
||||||
margin-left: .5em;
|
margin-left: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* USER ILLUSTRATIONS PAGE (and illustrations page) */
|
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
|
||||||
.grid {
|
.grid {
|
||||||
|
gap: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 1em;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.grid img {
|
.grid img {
|
||||||
|
@ -79,6 +81,18 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
||||||
.grid p {
|
.grid p {
|
||||||
width: 15em;
|
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 */
|
/* ILLUSTRATIONS PAGE */
|
||||||
.illusttags {
|
.illusttags {
|
||||||
|
@ -86,11 +100,11 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0 1em;
|
gap: 0 1em;
|
||||||
}
|
}
|
||||||
.illust {
|
.illustimages {
|
||||||
display: grid;
|
display: grid;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.illust .landmark {
|
.illustimages .landmark {
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,9 @@
|
||||||
#include "servehelper.h"
|
#include "servehelper.h"
|
||||||
|
|
||||||
static Element generate_pager(const Illusts& illusts, size_t page, const char* id);
|
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) {
|
void serve(const httplib::Request& req, httplib::Response& res, const Config& config, std::string title, Element element) {
|
||||||
using namespace std::string_literals;
|
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}}, {
|
return Element("div", {{"id", id}}, {
|
||||||
generate_pager(illusts, page, id),
|
generate_pager(illusts, page, id),
|
||||||
Element("br"),
|
Element("br"),
|
||||||
generate_content(req, config, illusts),
|
generate_illusts_grid(req, config, illusts),
|
||||||
generate_pager(illusts, page, id)
|
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"}}, {});
|
Element div("div", {{"class", "grid"}}, {});
|
||||||
|
|
||||||
div.nodes.reserve(illusts.illusts.size());
|
div.nodes.reserve(illusts.illusts.size());
|
||||||
for (const Illust& i : illusts.illusts) {
|
for (const Illust& i : illusts.illusts) {
|
||||||
std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(i.illust_id);
|
div.nodes.push_back(generate_illusts_grid_item(req, config, i));
|
||||||
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})
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return div;
|
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