Fix suggested tweets UI (#5380)

* Remove console log

* Update suggest tweets layout

These changes reflect a specific request from Michael to fix the layout
of suggested tweets, including the expected border animation that occurs
on form submits for articles

* Add labels for suggested tweets
This commit is contained in:
Jacob Herrington 2020-01-07 10:00:48 -06:00 committed by Ben Halpern
parent 252027ad9c
commit 44403eba89
2 changed files with 46 additions and 24 deletions

View file

@ -18,7 +18,6 @@
url: $(this).attr('action'), //sumbits it to the given url of the form
data: valuesToSubmit,
}).success(function (json) {
console.log("success")
form.parents(".card").addClass("highlighted-bg")
form.parents(".card").addClass("highlighted-border")
setTimeout(function () {
@ -31,6 +30,18 @@
$('.card').on("submit", "form", submitForms)
$('.buffer-area').on("submit", "form", submitForms)
function tagSuggestedTweet(event) {
var updateId = $(this).data("id");
var updateElement = $(`#suggested-tweet-${updateId}`)
if (event.target.classList.contains('buffer-confirm')) {
updateElement.find('.card-header h2').append('<span class="ml-2 badge badge-success">Confirm</span>')
} else if (event.target.classList.contains('buffer-dismiss')) {
updateElement.find('.card-header h2').append('<span class="ml-2 badge badge-danger">Dismiss</span>')
}
}
$('.buffer-form').on("submit", tagSuggestedTweet);
imageUploadButt = document.getElementById('image-upload-button')
imageUpload = document.getElementById('image-upload')
imageUploadSubmit = document.getElementById('image-upload-submit')

View file

@ -47,29 +47,40 @@
<summary style="font-size: 1.3em; cursor: pointer;">Suggested tweets (<%= @pending_buffer_updates.size %>)</summary>
<% @pending_buffer_updates.each do |buffer_update| %>
<% next unless buffer_update.article %>
<div class="row">
<h2><%= buffer_update.article.title %></h2>
<h4>Score: <%= buffer_update.article.score %></h4>
<hr />
<%= HTML_Truncator.truncate(buffer_update.article.processed_html, 50, ellipsis: '<a class="comment-read-more" href="' + buffer_update.article.path + '">... Read Entire Post</a>').html_safe %>
<hr />
<code><b><%= Tag.find_by(id: buffer_update.tag_id)&.name || buffer_update.social_service_name %>:</b></code>
<form action="/internal/buffer_updates/<%= buffer_update.id %>" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
<input type="hidden" name="_method" value="patch" />
<input type="hidden" name="status" value="confirmed" />
<textarea name="body_text" style="height: 100px"><%= buffer_update.body_text %></textarea>
<br />
<button value="confirmed" name="status" class="btn btn-success">confirm</button>
</form>
<form action="/internal/buffer_updates/<%= buffer_update.id %>" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
<input type="hidden" name="_method" value="patch" />
<input type="hidden" name="status" value="dismissed" />
<button value="dismissed" name="status" class="btn btn-danger">dismiss</button>
</form>
<div class="card my-3" id="suggested-tweet-<%= buffer_update.id %>">
<div class="card-header">
<h2 class="my-0"><%= buffer_update.article.title %></h2>
</div>
<div class="card-body">
<h4>Score: <%= buffer_update.article.score %></h4>
<div class="blockquote">
<%= HTML_Truncator.truncate(buffer_update.article.processed_html, 50, ellipsis: '<a class="comment-read-more" href="' + buffer_update.article.path + '">... Read Entire Post</a>').html_safe %>
</div>
<hr />
<code><b><%= Tag.find_by(id: buffer_update.tag_id)&.name || buffer_update.social_service_name %>:</b></code>
<form action="/internal/buffer_updates/<%= buffer_update.id %>" accept-charset="UTF-8" method="post" class="buffer-form buffer-confirm" data-id="<%= buffer_update.id %>">
<div class="form-group">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
<input type="hidden" name="_method" value="patch" />
<input type="hidden" name="status" value="confirmed" />
<textarea name="body_text" style="height: 100px"><%= buffer_update.body_text %></textarea>
</div>
<button value="confirmed" name="status" class="btn btn-success">Confirm</button>
</form>
<form action="/internal/buffer_updates/<%= buffer_update.id %>" accept-charset="UTF-8" method="post" class="buffer-form buffer-dismiss" data-id="<%= buffer_update.id %>">
<div class="form-group">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
<input type="hidden" name="_method" value="patch" />
<input type="hidden" name="status" value="dismissed" />
</div>
<button value="dismissed" name="status" class="btn btn-danger">Dismiss</button>
</form>
</div>
</div>
<% end %>
</details>