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