Update comment reply css + clear preview as well (#158)
This basically extends the CSS changes from https://github.com/themotte/rDrama/pull/150 to also cover comment _replies_ and then updates the JS from https://github.com/themotte/rDrama/pull/153 to also reset the comment reply preview div back to default after posting the comment reply.
This commit is contained in:
parent
b5b1f79394
commit
defe23ea16
13 changed files with 36 additions and 19 deletions
|
@ -357,12 +357,12 @@ a.visited,
|
|||
display: block;
|
||||
}
|
||||
|
||||
.comment-section div[id^="form-preview-"] {
|
||||
.comment-section div[id^="form-preview-"], div[id^="reply-edit-"] {
|
||||
border: 1px dashed black;
|
||||
border-radius: 0.35em;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.comment-section div[id^="form-preview-"] p.preview-msg {
|
||||
.comment-section div[id^="form-preview-"] p.preview-msg, div[id^="reply-edit-"] p.preview-msg {
|
||||
color: gray;
|
||||
}
|
||||
|
|
|
@ -214,7 +214,20 @@ function comment_edit(id){
|
|||
xhr.send(form)
|
||||
}
|
||||
|
||||
|
||||
function post_comment(fullname){
|
||||
const previewPlaceholderHTML= '<p class="preview-msg">Comment preview</p>';
|
||||
function reset_preview(element_id) {
|
||||
try {
|
||||
document.getElementById(element_id).innerHTML = previewPlaceholderHTML;
|
||||
} catch (e) {
|
||||
// We fail silently if the element doesnt exist
|
||||
if (!e instanceof TypeError) {
|
||||
throw(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const btn = document.getElementById('save-reply-to-'+fullname)
|
||||
btn.disabled = true
|
||||
btn.classList.add('disabled');
|
||||
|
@ -265,7 +278,11 @@ function post_comment(fullname){
|
|||
|
||||
// clear comment textarea, and preview.
|
||||
bodyEl.value = '';
|
||||
document.getElementById('form-preview-'+id).innerHTML = '<p class="preview-msg">Comment preview</p>';
|
||||
// when called from top-level comment, clear top-level preview
|
||||
reset_preview('form-preview-'+id);
|
||||
// when called from comment reply, clear comment reply preview
|
||||
reset_preview('reply-edit-'+id);
|
||||
|
||||
}
|
||||
else {
|
||||
if (data && data["error"]) document.getElementById('toast-post-error-text').innerText = data["error"];
|
||||
|
|
|
@ -16,14 +16,14 @@
|
|||
{% if v %}
|
||||
<style>:root{--primary:#{{v.themecolor}}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=58">
|
||||
{% if v.css %}
|
||||
<link rel="stylesheet" href="/@{{v.username}}/css">
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
{% endif %}
|
||||
|
||||
</head>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<style>:root{--primary:#{{v.themecolor}}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=58">
|
||||
{% if v.css %}
|
||||
<link rel="stylesheet" href="/@{{v.username}}/css">
|
||||
{% endif %}
|
||||
|
|
|
@ -567,7 +567,7 @@
|
|||
<a id="save-reply-to-{{c.fullname}}" class="btn btn-primary ml-2 fl-r commentmob" onclick="post_comment('{{c.fullname}}', '{{c.post.id}}')"role="button">Comment</a>
|
||||
<a role="button" onclick="document.getElementById('reply-to-{{c.id}}').classList.add('d-none')" class="btn btn-link text-muted ml-auto cancel-form fl-r commentmob">Cancel</a>
|
||||
</form>
|
||||
<div id="reply-edit-{{c.id}}" class="preview mb-3 mt-5"></div>
|
||||
<div id="reply-edit-{{c.id}}" class="preview mb-3 mt-5"><p class="preview-msg">Comment preview</p></div>
|
||||
<div class="form-text text-small p-0 m-0"><a href="/formatting" {% if v and v.newtab and not g.webview %}target="_blank"{% endif %}>Formatting help</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -842,7 +842,7 @@
|
|||
<script src="/assets/js/vendor/purify.min.js?v=251"></script>
|
||||
<script src="/assets/js/vendor/marked.min.js?v=251"></script>
|
||||
<script src="/assets/js/marked.custom.js?v=252"></script>
|
||||
<script src="/assets/js/comments_v.js?v=267"></script>
|
||||
<script src="/assets/js/comments_v.js?v=268"></script>
|
||||
<script src="/assets/js/award_modal.js?v=1"></script>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
@ -9,14 +9,14 @@
|
|||
{% if v %}
|
||||
<style>:root{--primary:#{{v.themecolor}}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=58">
|
||||
{% if v.css %}
|
||||
<link rel="stylesheet" href="/@{{v.username}}/css">
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
{% endif %}
|
||||
|
||||
{% if request.path == '/catalog' %}
|
||||
|
|
|
@ -7,14 +7,14 @@
|
|||
{% if v %}
|
||||
<style>:root{--primary:#{{v.themecolor}}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=58">
|
||||
{% if v.css %}
|
||||
<link rel="stylesheet" href="/@{{v.username}}/css">
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
{% endif %}
|
||||
|
||||
<div class="row justify-content-around">
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
|
||||
</head>
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
|
||||
</head>
|
||||
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<style>:root{--primary:#{{v.themecolor}}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=58">
|
||||
{% if v.css and not request.path.startswith('/settings/css') %}
|
||||
<link rel="stylesheet" href="/@{{v.username}}/css">
|
||||
{% endif %}
|
||||
|
|
|
@ -40,11 +40,11 @@
|
|||
{% if v %}
|
||||
<style>:root{--primary:#{{v.themecolor}}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=58">
|
||||
{% else %}
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
{% endif %}
|
||||
</head>
|
||||
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
|
||||
</head>
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
||||
<link rel="stylesheet" href="/assets/css/main.css?v=250">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=57">
|
||||
<link rel="stylesheet" href="/assets/css/{{config('DEFAULT_THEME')}}.css?v=58">
|
||||
|
||||
</head>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue