forked from mirrors/treebird
Support all attachments and CSS
FossilOrigin-Name: 61d2cd49277d5bc47f600b7b617c50dc2ae6485bd2fb31b9dc4ccc92b45cec33
This commit is contained in:
parent
a51fdb2220
commit
e00829f5d6
10 changed files with 166 additions and 37 deletions
8
Makefile
8
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
|
||||
|
|
123
dist/treebird20.css
vendored
123
dist/treebird20.css
vendored
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -20,3 +20,4 @@
|
|||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
|
7
static/attachment_audio.html
Normal file
7
static/attachment_audio.html
Normal 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
7
static/attachment_gifv.html
Normal file
|
@ -0,0 +1,7 @@
|
|||
<div class="attachment-container attachment-gifv">
|
||||
<video width="256" autoplay muted>
|
||||
<source src="%s">
|
||||
[ GIFV ]
|
||||
</video>
|
||||
%s
|
||||
</div>
|
|
@ -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
3
static/attachment_link.html
Normal 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
7
static/attachment_video.html
Normal file
|
@ -0,0 +1,7 @@
|
|||
<div class="attachment-container attachment-video">
|
||||
<video width="256" controls preload="metadata">
|
||||
<source src="%s">
|
||||
[ VIDEO ]
|
||||
</video>
|
||||
%s
|
||||
</div>
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue