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:
painejohn 2022-08-10 07:04:54 -04:00 committed by GitHub
parent b5b1f79394
commit defe23ea16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 36 additions and 19 deletions

View file

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

View file

@ -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"];

View file

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

View file

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

View file

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

View file

@ -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' %}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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