Add comment button to comment form where browser has 'Touch' event enabled

This commit is contained in:
Carly Ho 2018-12-25 15:42:12 -06:00
parent 1d07c4a72e
commit bffaac1b08
3 changed files with 44 additions and 16 deletions

View file

@ -25,6 +25,13 @@ pixelfed.readmore = () => {
});
};
try {
document.createEvent("TouchEvent");
$('body').addClass('touch');
} catch (e) {
return false;
}
window.InfiniteScroll = require('infinite-scroll');
window.filesize = require('filesize');
window.Plyr = require('plyr');
@ -137,10 +144,10 @@ window.pixelfed.copyToClipboard = (str) => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
const selected =
document.getSelection().rangeCount > 0
? document.getSelection().getRangeAt(0)
: false;
@ -162,4 +169,4 @@ $(document).ready(function() {
const warningTitleCSS = 'color:red; font-size:60px; font-weight: bold; -webkit-text-stroke: 1px black;';
const warningDescCSS = 'font-size: 18px;';
console.log('%cStop!', warningTitleCSS);
console.log("%cThis is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Pixelfed feature or \"hack\" someone's account, it is a scam and will give them access to your Pixelfed account.", warningDescCSS);
console.log("%cThis is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Pixelfed feature or \"hack\" someone's account, it is a scam and will give them access to your Pixelfed account.", warningDescCSS);

View file

@ -56,11 +56,11 @@
</div>
<div class="col-12 col-md-8 px-0 mx-0">
<div class="postPresenterLoader text-center">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
<div v-if="status.pf_type === 'photo'" class="w-100">
<photo-presenter :status="status"></photo-presenter>
<photo-presenter :status="status"></photo-presenter>
</div>
<div v-else-if="status.pf_type === 'video'" class="w-100">
@ -156,6 +156,7 @@
<input type="hidden" name="_token" value="">
<input type="hidden" name="item" :value="statusId">
<input class="form-control" name="comment" placeholder="Add a comment..." autocomplete="off">
<input type="submit" value="Send" class="btn btn-primary comment-submit" />
</form>
</div>
</div>
@ -164,10 +165,10 @@
</div>
</div>
<b-modal ref="likesModal"
<b-modal ref="likesModal"
id="l-modal"
hide-footer
centered
hide-footer
centered
title="Likes"
body-class="list-group-flush p-0">
<div class="list-group">
@ -195,10 +196,10 @@
</infinite-loading>
</div>
</b-modal>
<b-modal ref="sharesModal"
<b-modal ref="sharesModal"
id="s-modal"
hide-footer
centered
hide-footer
centered
title="Shares"
body-class="list-group-flush p-0">
<div class="list-group">
@ -281,7 +282,7 @@ export default {
$('head title').text(title);
}
},
methods: {
authCheck() {
let authed = $('body').hasClass('loggedIn');
@ -510,4 +511,4 @@ export default {
}
}
}
</script>
</script>

View file

@ -267,6 +267,26 @@ body, button, input, textarea {
.card {
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
border: none;
.comment-submit {
display: none;
position: absolute;
bottom: 12px;
right: 20px;
width: 60px;
text-align: center;
border-radius: 0 3px 3px 0;
}
}
.touch .card {
input[name="comment"] {
padding-right: 70px;
}
.comment-submit {
display: block;
}
}
.box-shadow {
@ -319,7 +339,7 @@ details summary::-webkit-details-marker {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
border-radius: 5px;
padding: .5em 1em .5em .5em;
}
}
.input-elevated::placeholder {
color: #838D99;
@ -417,7 +437,7 @@ details summary::-webkit-details-marker {
background: rgba(0,0,0,0.04);
}
.timeline-sidenav.nav-pills .nav-link.active,
.timeline-sidenav.nav-pills .nav-link.active,
.timeline-sidenav.nav-pills .show > .nav-link {
color: #08d;
background: transparent;
@ -434,4 +454,4 @@ details summary::-webkit-details-marker {
.notification-tooltip .arrow::before {
border-bottom-color:#dc3545 !important;
}
}