mirrors
/
treebird
0
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Support all attachments and CSS 

FossilOrigin-Name: 61d2cd49277d5bc47f600b7b617c50dc2ae6485bd2fb31b9dc4ccc92b45cec33
This commit is contained in:
nekobit 2022-05-16 16:41:58 +00:00
parent a51fdb2220
commit e00829f5d6
10 changed files with 166 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Makefile
View File

@ -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

123
dist/treebird20.css vendored
View File

@ -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

40
src/attachments.c
View File

@ -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 ? "<div class=\"sensitive-contain sensitive\"></div>" : "");
}
else {
s = easprintf(&att_html, attachment_str,
sensitive ? "sensitive" : "",
att->url);
}
if (str_size) *str_size = s;
return att_html;
}

1
static/account_sidebar.html
View File

@ -20,3 +20,4 @@
</tr>
</table>
</div>

7
static/attachment_audio.html Normal file
View File

@ -0,0 +1,7 @@
<div class="attachment-container attachment-audio">
<!-- Here even if not sensitive -->
<div class="sensitive-placeholder %s"></div>
<audiowidth="256" controls preload="metadata">
<source src="%s">
</video>
</div>

7
static/attachment_gifv.html Normal file
View File

@ -0,0 +1,7 @@
<div class="attachment-container attachment-gifv">
<video width="256" autoplay muted>
<source src="%s">
[ GIFV ]
</video>
%s
</div>

5
static/attachment_image.html
View File

@ -1,3 +1,4 @@
<div class="attachment-container">
<img class="%s" width="256" src="%s">
<div class="attachment-container attachment-img">
<img width="256" src="%s">
%s
</div>

3
static/attachment_link.html Normal file
View File

@ -0,0 +1,3 @@
<div class="attachment-container attachment-link %s">
<a href="%s">Attachment</a>
</div>

7
static/attachment_video.html Normal file
View File

@ -0,0 +1,7 @@
<div class="attachment-container attachment-video">
<video width="256" controls preload="metadata">
<source src="%s">
[ VIDEO ]
</video>
%s
</div>

2
static/post.html
View File

@ -15,7 +15,7 @@
<input type="file" name="file" tabindex="4" multiple>
</div>
<div class="statusfooter-right">
<input type="submit" value="Post" tabindex="2" class="btn">
<input type="submit" value="Post" tabindex="2" class="btn post-btn">
</div>
</div>
</div>