rework gif modal

pull/83/head
Aevann 2022-12-25 03:45:24 +02:00
parent 663541d0ce
commit e6803f93e9
9 changed files with 83 additions and 85 deletions

View File

@ -4418,10 +4418,6 @@ pre .str, code .str {
pre .com, code .com {
color: #ab4bc3;
}
.gif-categories .card {
overflow: hidden;
border: none;
}
.gif-categories img {
border-radius: 0.35rem;
width: 100%;
@ -6520,3 +6516,9 @@ div.markdown {
column-count: 11 !important;
}
}
.giphy {
overflow: hidden;
background-color: var(--gray-600);
cursor: pointer;
}

View File

@ -451,4 +451,6 @@ document.addEventListener("click", function(e){
expandDesktopImage()
else if (element.tagName == "TH")
sort_table(element)
else if (element.classList.contains('giphy'))
insertGIF(e.target.src);
});

File diff suppressed because one or more lines are too long

View File

@ -286,7 +286,7 @@
<div class="text-small font-weight-bold mt-1" id="charcount-edit-{{c.id}}" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>
<div class="comment-format">
<small class="btn btn-secondary format m-0" aria-hidden="true" onclick="commentForm('comment-edit-body-{{c.id}}');getGif()" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF"><span class="font-weight-bolder text-uppercase">GIF</span></small>
<small class="btn btn-secondary format m-0" aria-hidden="true" onclick="getGifs('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF"><span class="font-weight-bolder text-uppercase">GIF</span></small>
&nbsp;
<small class="btn btn-secondary format m-0" aria-hidden="true" onclick="loadEmojis('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></small>
&nbsp;

View File

@ -4,7 +4,7 @@
<div class="modal-header border-bottom-0 shadow-md p-3">
<div class="form-group d-flex align-items-center w-100 mb-0">
<div id="gifs-back-btn"></div>
<input autocomplete="off" type="text" class="form-control" id="gifSearch" placeholder="Search and press enter" onchange="getGif(this.value);">
<input autocomplete="off" type="text" class="form-control" id="gifSearch" placeholder="Search and press enter" onchange="searchGifs(this.value);">
<div id="gifs-cancel-btn"></div>
</div>
</div>

View File

@ -81,7 +81,7 @@
<textarea autocomplete="off" id="{{id}}-text" class="form-control rounded" aria-label="With textarea" placeholder="{{placeholder_text}}" rows="3" name="{{form_name}}" form="{{id}}-form" maxlength="{{maxlength}}">{% if contents %}{{contents}}{% endif %}</textarea>
{% if show_extras %}
<div class="d-flex">
<pre style="padding-top:0.7rem;line-height:1" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="commentForm('{{id}}-text');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</pre>
<pre style="padding-top:0.7rem;line-height:1" class="btn btn-secondary format d-inline-block m-0 font-weight-bolder text-uppercase" onclick="getGifs('{{id}}-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</pre>
&nbsp;
<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('{{id}}-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"></pre>
&nbsp;

View File

@ -186,7 +186,7 @@
<div class="text-small font-weight-bold mt-1" id="charcount-post-edit" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>
<div class="comment-format">
<button type="button" class="format btn btn-secondary"><span class="font-weight-bolder text-uppercase" onclick="commentForm('post-edit-box-{{p.id}}');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span></button>
<button type="button" class="format btn btn-secondary"><span class="font-weight-bolder text-uppercase" onclick="getGifs('post-edit-box-{{p.id}}')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span></button>
<div onclick="loadEmojis('post-edit-box-{{p.id}}')" class="format btn btn-secondary" role="button" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-edit-{{p.id}}">

View File

@ -57,7 +57,7 @@
<div class="btn btn-secondary fl-r" onclick="document.getElementById('preview').classList.toggle('d-none');">
Toggle preview
</div>
<small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="getGif();commentForm('post-text')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span></small>
<small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="getGifs('post-text')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span></small>
&nbsp;
<div onclick="loadEmojis('post-text')" class="btn btn-secondary format d-inline-block m-0" id="emoji-reply-btn" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-submit">

View File

@ -122,7 +122,7 @@
<div class="comment-format">
<label class="btn btn-secondary format d-inline-block m-0" for="gif-reply-btn-{{target_fullname}}">
<span id="gif-reply-btn-{{target_fullname}}" class="font-weight-bolder text-uppercase" onclick="commentForm('reply-form-body-{{target_fullname}}');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span>
<span id="gif-reply-btn-{{target_fullname}}" class="font-weight-bolder text-uppercase" onclick="getGifs('reply-form-body-{{target_fullname}}')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span>
</label>
&nbsp;
<div onclick="loadEmojis('reply-form-body-{{target_fullname}}')" class="btn btn-secondary format d-inline-block m-0" id="emoji-reply-btn-{{target_fullname}}" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>