Add comment button to comment form where browser has 'Touch' event enabled
This commit is contained in:
parent
1d07c4a72e
commit
bffaac1b08
13
resources/assets/js/components.js
vendored
13
resources/assets/js/components.js
vendored
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
26
resources/assets/sass/custom.scss
vendored
26
resources/assets/sass/custom.scss
vendored
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue