Change CSS classes
This commit is contained in:
parent
b277d0274c
commit
e83a44d7b5
|
@ -58,8 +58,8 @@ static inline Element generate_user_link(const httplib::Request& req, const Conf
|
||||||
std::string profile_picture = proxy_image_url(config, illust.user_profile_pictures.thumbnail_or_original().url);
|
std::string profile_picture = proxy_image_url(config, illust.user_profile_pictures.thumbnail_or_original().url);
|
||||||
std::string user_link = get_origin(req, config) + "/users/" + std::to_string(illust.user_id);
|
std::string user_link = get_origin(req, config) + "/users/" + std::to_string(illust.user_id);
|
||||||
|
|
||||||
return Element("a", {{"class", "usermetadata"}, {"href", std::move(user_link)}}, {
|
return Element("a", {{"class", "user_metadata"}, {"href", std::move(user_link)}}, {
|
||||||
Element("img", {{"class", "profilepicture small"}, {"loading", "lazy"}, {"src", std::move(profile_picture)}}, {}),
|
Element("img", {{"class", "user_profile_picture small"}, {"loading", "lazy"}, {"src", std::move(profile_picture)}}, {}),
|
||||||
Element("b", {illust.user_display_name})
|
Element("b", {illust.user_display_name})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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", "illustimages"}}, {});
|
Element div("div", {{"class", "illust-images"}}, {});
|
||||||
bool show_pages = illust.images.size() > 1;
|
bool show_pages = illust.images.size() > 1;
|
||||||
|
|
||||||
if (show_pages) {
|
if (show_pages) {
|
||||||
|
@ -176,7 +176,7 @@ static inline Element generate_description(const httplib::Request& req, const Co
|
||||||
}
|
}
|
||||||
|
|
||||||
static inline Element generate_illust_tags(const httplib::Request& req, const Config& config, const Illust& illust) {
|
static inline Element generate_illust_tags(const httplib::Request& req, const Config& config, const Illust& illust) {
|
||||||
Element div("div", {{"class", "illusttags"}}, {});
|
Element div("div", {{"class", "illust-tags"}}, {});
|
||||||
|
|
||||||
if (illust.ai_generated) {
|
if (illust.ai_generated) {
|
||||||
div.nodes.push_back(Element("b", {"AI-Generated "}));
|
div.nodes.push_back(Element("b", {"AI-Generated "}));
|
||||||
|
|
|
@ -58,13 +58,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
|
/* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
|
||||||
.grid p {
|
.illusts_grid p {
|
||||||
width: 15em;
|
width: 15em;
|
||||||
}
|
}
|
||||||
.illustsgriditem {
|
.illusts_grid-illust {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.illustbadge {
|
.illusts_grid-illust_badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .25em;
|
top: .25em;
|
||||||
right: .25em;
|
right: .25em;
|
||||||
|
@ -73,48 +73,50 @@
|
||||||
background-color: var(--illust-badge-background-color);
|
background-color: var(--illust-badge-background-color);
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
.illustbadge.ai {
|
.illusts_grid-illust_badge.ai {
|
||||||
background-color: var(--illust-badge-ai-background-color);
|
background-color: var(--illust-badge-ai-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ILLUSTRATIONS PAGE */
|
/* USER PAGE AND ILLUSTRATIONS PAGE */
|
||||||
.profilepicture.small {
|
.user_profile_picture {
|
||||||
|
margin-right: .5em;
|
||||||
|
width: 5em;
|
||||||
|
height: 5em;
|
||||||
|
}
|
||||||
|
.user_metadata {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: .5em;
|
||||||
|
}
|
||||||
|
.user_profile_picture.small {
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
}
|
}
|
||||||
.illustimages {
|
|
||||||
|
/* ILLUSTRATIONS PAGE */
|
||||||
|
.illust-images {
|
||||||
display: grid;
|
display: grid;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.illustimages .landmark {
|
.illust-images .landmark {
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
.illusttags {
|
.illust-tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0 1em;
|
gap: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* USER PAGE */
|
/* USER PAGE */
|
||||||
.profilecover {
|
.user-cover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
.profilepicture {
|
|
||||||
margin-right: .5em;
|
|
||||||
width: 5em;
|
|
||||||
height: 5em;
|
|
||||||
}
|
|
||||||
.usermetadata {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SEARCH RESULTS PAGE */
|
/* SEARCH RESULTS PAGE */
|
||||||
.searchsuggestions {
|
.search_results-suggestions {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
|
|
|
@ -121,7 +121,7 @@ static inline Element generate_search_suggestions(const httplib::Request& req, c
|
||||||
|
|
||||||
Element details("details", {
|
Element details("details", {
|
||||||
Element("summary", {"Search suggestions"}),
|
Element("summary", {"Search suggestions"}),
|
||||||
Element("ul", {{"class", "searchsuggestions"}}, ul_nodes)
|
Element("ul", {{"class", "search_results-suggestions"}}, ul_nodes)
|
||||||
});
|
});
|
||||||
if (open_by_default) {
|
if (open_by_default) {
|
||||||
details.attributes.push_back({"open", ""});
|
details.attributes.push_back({"open", ""});
|
||||||
|
|
|
@ -11,15 +11,15 @@ Element generate_user_header(const User& user, const Config& config) {
|
||||||
std::string cover_original = proxy_image_url(config, user.cover_images->original_or_thumbnail().url);
|
std::string cover_original = proxy_image_url(config, user.cover_images->original_or_thumbnail().url);
|
||||||
std::string cover_thumbnail = proxy_image_url(config, user.cover_images->thumbnail_or_original().url);
|
std::string cover_thumbnail = proxy_image_url(config, user.cover_images->thumbnail_or_original().url);
|
||||||
header.nodes.push_back(Element("a", {{"href", std::move(cover_original)}}, {
|
header.nodes.push_back(Element("a", {{"href", std::move(cover_original)}}, {
|
||||||
Element("img", {{"class", "profilecover"}, {"loading", "lazy"}, {"src", std::move(cover_thumbnail)}}, {})
|
Element("img", {{"class", "user-cover"}, {"loading", "lazy"}, {"src", std::move(cover_thumbnail)}}, {})
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
std::string profile_picture_original = proxy_image_url(config, user.profile_pictures.original_or_thumbnail().url);
|
std::string profile_picture_original = proxy_image_url(config, user.profile_pictures.original_or_thumbnail().url);
|
||||||
std::string profile_picture_thumbnail = proxy_image_url(config, user.profile_pictures.thumbnail_or_original().url);
|
std::string profile_picture_thumbnail = proxy_image_url(config, user.profile_pictures.thumbnail_or_original().url);
|
||||||
header.nodes.push_back(Element("div", {{"class", "usermetadata"}}, {
|
header.nodes.push_back(Element("div", {{"class", "user_metadata"}}, {
|
||||||
Element("a", {{"href", std::move(profile_picture_original)}}, {
|
Element("a", {{"href", std::move(profile_picture_original)}}, {
|
||||||
Element("img", {{"class", "profilepicture"}, {"loading", "lazy"}, {"src", std::move(profile_picture_thumbnail)}}, {})
|
Element("img", {{"class", "user_profile_picture"}, {"loading", "lazy"}, {"src", std::move(profile_picture_thumbnail)}}, {})
|
||||||
}),
|
}),
|
||||||
Element("div", {
|
Element("div", {
|
||||||
Element("p", {Element("b", {user.display_name}), " (@", user.username, ")"}),
|
Element("p", {Element("b", {user.display_name}), " (@", user.username, ")"}),
|
||||||
|
|
|
@ -157,7 +157,7 @@ static Element generate_pager(const Illusts& illusts, size_t page, const char* i
|
||||||
}
|
}
|
||||||
|
|
||||||
static inline Element generate_illusts_grid(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 illusts_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) {
|
||||||
|
@ -171,7 +171,7 @@ static inline Element generate_illusts_grid_item(const httplib::Request& req, co
|
||||||
std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(illust.illust_id);
|
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).url);
|
std::string image_url = proxy_image_url(config, illust.images[0].thumbnail_or_original(1).url);
|
||||||
|
|
||||||
Element div("div", {{"class", "illustsgriditem"}}, {
|
Element div("div", {{"class", "illusts_grid-illust"}}, {
|
||||||
Element("a", {{"href", illust_url}}, {
|
Element("a", {{"href", illust_url}}, {
|
||||||
Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
|
Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
|
||||||
Element("p", {illust.title})
|
Element("p", {illust.title})
|
||||||
|
@ -186,7 +186,7 @@ static inline Element generate_illusts_grid_item(const httplib::Request& req, co
|
||||||
}
|
}
|
||||||
|
|
||||||
static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url) {
|
static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url) {
|
||||||
const char* css_class = !illust.ai_generated ? "illustbadge" : "illustbadge ai";
|
const char* css_class = !illust.ai_generated ? "illusts_grid-illust_badge" : "illusts_grid-illust_badge ai";
|
||||||
|
|
||||||
if (illust.page_count > 1) {
|
if (illust.page_count > 1) {
|
||||||
return Element("a", {{"class", css_class}, {"href", illust_url + "?preview=1"}}, {
|
return Element("a", {{"class", css_class}, {"href", illust_url + "?preview=1"}}, {
|
||||||
|
|
Loading…
Reference in New Issue