From e00829f5d6a977c5cc023ae0b8ab59aa55b4ac8b Mon Sep 17 00:00:00 2001 From: nekobit Date: Mon, 16 May 2022 16:41:58 +0000 Subject: [PATCH] Support all attachments and CSS FossilOrigin-Name: 61d2cd49277d5bc47f600b7b617c50dc2ae6485bd2fb31b9dc4ccc92b45cec33 --- Makefile | 8 +++ dist/treebird20.css | 123 ++++++++++++++++++++++++++--------- src/attachments.c | 40 +++++++++++- static/account_sidebar.html | 1 + static/attachment_audio.html | 7 ++ static/attachment_gifv.html | 7 ++ static/attachment_image.html | 5 +- static/attachment_link.html | 3 + static/attachment_video.html | 7 ++ static/post.html | 2 +- 10 files changed, 166 insertions(+), 37 deletions(-) create mode 100644 static/attachment_audio.html create mode 100644 static/attachment_gifv.html create mode 100644 static/attachment_link.html create mode 100644 static/attachment_video.html diff --git a/Makefile b/Makefile index 347ff4b..b44a214 100644 --- a/Makefile +++ b/Makefile @@ -46,6 +46,14 @@ $(PAGES_DIR)/attachments.chtml: $(PAGES_DIR)/attachments.html ./filec $< data_attachments_html > $@ $(PAGES_DIR)/attachment_image.chtml: $(PAGES_DIR)/attachment_image.html ./filec $< data_attachment_image_html > $@ +$(PAGES_DIR)/attachment_video.chtml: $(PAGES_DIR)/attachment_video.html + ./filec $< data_attachment_video_html > $@ +$(PAGES_DIR)/attachment_link.chtml: $(PAGES_DIR)/attachment_link.html + ./filec $< data_attachment_link_html > $@ +$(PAGES_DIR)/attachment_audio.chtml: $(PAGES_DIR)/attachment_audio.html + ./filec $< data_attachment_audio_html > $@ +$(PAGES_DIR)/attachment_gifv.chtml: $(PAGES_DIR)/attachment_gifv.html + ./filec $< data_attachment_gifv_html > $@ $(PAGES_DIR)/emoji_reactions.chtml: $(PAGES_DIR)/emoji_reactions.html ./filec $< data_emoji_reactions_html > $@ $(PAGES_DIR)/emoji_reaction.chtml: $(PAGES_DIR)/emoji_reaction.html diff --git a/dist/treebird20.css b/dist/treebird20.css index 3263b27..ccf9faa 100644 --- a/dist/treebird20.css +++ b/dist/treebird20.css @@ -107,9 +107,9 @@ table.ui-table td border-top-left-radius: 5px; border-top-right-radius: 5px; border-top: 2px solid #fff; - background: linear-gradient(#fafafa, #f3f3f3); + background: linear-gradient(#fbfbfb, #ececef); width: 1000px; - border-bottom: 2px solid #cacaca; + border-bottom: 2px solid #bfbfc4; z-index: 999; } @@ -301,27 +301,22 @@ table.present th, table.present td text-decoration: none; } -.btn:hover -{ - background: linear-gradient(#aa0000, #600000); - border-color: #400000; - color: #fff; - cursor: pointer; -} - +.btn:hover, .btn:active { - background: linear-gradient(#600000, #aa0000); - border-color: #400000; + background: linear-gradient(#606060, #d3d3d3); + box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2); color: #fff; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; } .btn.active { - background: initial; - background-color: #eeaaaa; - border-color: #cc0000; + background: linear-gradient(#606060, #d3d3d3); + box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2); + color: #fff; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); } .btn-disabled @@ -340,19 +335,29 @@ table.present th, table.present td background: #f3f3f3; } - input[type=button], input[type=submit] { border: 1px solid #cacaca; padding: 3px 15px; } +.post-btn +{ + background: linear-gradient(#aa0000, #900000); + padding: 2px 25px 3px !important; + font-size: 15px; + border-radius: 4px; + border: none !important; + color: #fff; +} + + + .sidebarbtn { display: block; - margin: 9px 12px 9px 12px; - padding: 4px 8px; - border-radius: 4px; + margin: 7px 0 7px 0; + padding: 6px 18px; font-size: 14px; text-transform: uppercase; color: #505050; @@ -361,6 +366,7 @@ input[type=button], input[type=submit] .sidebarbtn:hover { background: linear-gradient(#606060, #d3d3d3); + box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2); color: #fff; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); } @@ -391,6 +397,11 @@ input[type=button], input[type=submit] background-color: #dadada; } +.sidebar-login +{ + padding: 18px; +} + /**************************** * Notifications * ***************************/ @@ -416,6 +427,7 @@ input[type=button], input[type=submit] .notification-compact { min-width: 100%; + padding: 3px; } .notification-compact p @@ -537,8 +549,8 @@ svg.in-reply-to-icon .notification-regular, .scrobble { - padding: 6px 2px 0 6px; - border-bottom: 1px solid #cacaca !important; + padding: 10px 4px 0 10px; + border-bottom: 1px dashed #cacaca; width: 100%; border-spacing: 0px; } @@ -555,7 +567,8 @@ svg.in-reply-to-icon padding-top: 0; } -.status .profile-picture +.status .profile-picture, +.account-sidebar .acct-pfp { display: inline-block; width: 52px; @@ -786,7 +799,6 @@ svg.in-reply-to-icon **********************/ .header-btn { - display: inline-block; padding: 8px 15px; margin: 0; background: inherit; @@ -795,6 +807,13 @@ svg.in-reply-to-icon font-size: 14px; } +/* Make inline when not in table */ +.account .header-btn, +.status .header-btn +{ + display: inline-block; +} + .header-btn .btn-content { color: #000; @@ -883,7 +902,7 @@ svg.in-reply-to-icon overflow: auto; } -.acct-pfp +.account .acct-pfp { position: absolute; display: inline; @@ -948,6 +967,38 @@ svg.in-reply-to-icon text-shadow: 0px 0px 5px #000; } +.account-sidebar .acct-pfp, +.account-sidebar .username +{ + vertical-align: top; +} + +.account-sidebar .username +{ + position: relative; + top: 5px; + margin-left: 5px; +} + +.account-sidebar .acct-stats +{ + width: 100%; + table-layout: fixed; +} + +.account-sidebar +{ + padding: 7px 7px 3px; + background-color: #e4e4ea; + border-bottom: 1px dashed #cacaca; +} + +.account-sidebar .header-btn +{ + padding: 4px; + border-radius: 4px; +} + .follow-btn { margin-left: auto; @@ -1181,21 +1232,31 @@ svg.in-reply-to-icon .attachment-container { - z-index: 3; + position: relative; + z-index: 1; display: inline-block; overflow: hidden; } -.sensitive +.sensitive-contain.sensitive { - z-index: 2; - filter: blur(16px); - transition: filter .4s; + background: #000; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; } -.sensitive:hover +.sensitive.attachment-link::after, +.sensitive.attachment-audio::after { - filter: none; + content: " (Sensitive)"; +} + +.attachment-container:hover .sensitive +{ + display: none; } .statusbox textarea diff --git a/src/attachments.c b/src/attachments.c index 2c0bd10..c755d30 100644 --- a/src/attachments.c +++ b/src/attachments.c @@ -25,6 +25,10 @@ // Pages #include "../static/attachments.chtml" #include "../static/attachment_image.chtml" +#include "../static/attachment_gifv.chtml" +#include "../static/attachment_video.chtml" +#include "../static/attachment_link.chtml" +#include "../static/attachment_audio.chtml" struct attachments_args { @@ -117,10 +121,40 @@ void cleanup_media_ids(struct session* ssn, char** media_ids) char* construct_attachment(mstdnt_bool sensitive, struct mstdnt_attachment* att, int* str_size) { char* att_html; + size_t s; + const char* attachment_str; + if (!att) return NULL; - size_t s = easprintf(&att_html, data_attachment_image_html, - sensitive ? "sensitive" : "", - att->url); + switch (att->type) + { + case MSTDNT_ATTACHMENT_IMAGE: + attachment_str = data_attachment_image_html; break; + case MSTDNT_ATTACHMENT_GIFV: + attachment_str = data_attachment_gifv_html; break; + case MSTDNT_ATTACHMENT_VIDEO: + attachment_str = data_attachment_video_html; break; + case MSTDNT_ATTACHMENT_AUDIO: + attachment_str = data_attachment_audio_html; break; + case MSTDNT_ATTACHMENT_UNKNOWN: // Fall through + default: + attachment_str = data_attachment_link_html; break; + } + + // Images/visible content displays sensitive placeholder after + if (att->type == MSTDNT_ATTACHMENT_IMAGE || + att->type == MSTDNT_ATTACHMENT_GIFV || + att->type == MSTDNT_ATTACHMENT_VIDEO) + { + s = easprintf(&att_html, attachment_str, + att->url, + sensitive ? "
" : ""); + } + else { + s = easprintf(&att_html, attachment_str, + sensitive ? "sensitive" : "", + att->url); + } + if (str_size) *str_size = s; return att_html; } diff --git a/static/account_sidebar.html b/static/account_sidebar.html index 89fcd89..6c6e3a2 100644 --- a/static/account_sidebar.html +++ b/static/account_sidebar.html @@ -20,3 +20,4 @@ + diff --git a/static/attachment_audio.html b/static/attachment_audio.html new file mode 100644 index 0000000..013fecd --- /dev/null +++ b/static/attachment_audio.html @@ -0,0 +1,7 @@ +
+ +
+ + + +
diff --git a/static/attachment_gifv.html b/static/attachment_gifv.html new file mode 100644 index 0000000..d07f8a1 --- /dev/null +++ b/static/attachment_gifv.html @@ -0,0 +1,7 @@ +
+ + %s +
diff --git a/static/attachment_image.html b/static/attachment_image.html index 19d7a8e..7c8457e 100644 --- a/static/attachment_image.html +++ b/static/attachment_image.html @@ -1,3 +1,4 @@ -
- +
+ + %s
diff --git a/static/attachment_link.html b/static/attachment_link.html new file mode 100644 index 0000000..f55b136 --- /dev/null +++ b/static/attachment_link.html @@ -0,0 +1,3 @@ +
+ Attachment +
diff --git a/static/attachment_video.html b/static/attachment_video.html new file mode 100644 index 0000000..7230dce --- /dev/null +++ b/static/attachment_video.html @@ -0,0 +1,7 @@ +
+ + %s +
diff --git a/static/post.html b/static/post.html index f7a3b17..2e1190f 100644 --- a/static/post.html +++ b/static/post.html @@ -15,7 +15,7 @@
- +