From 2b442ca8b69e58832cc82b9dfe9ad8db42523b9d Mon Sep 17 00:00:00 2001 From: Jacob Herrington Date: Wed, 18 Mar 2020 16:05:33 -0500 Subject: [PATCH] Internal bug fixes and misc JS/CSS cleanup (#6684) * Remove unused CSS rules * Use bootstrap utility class over custom css * Fix grapical bug with buffer tags * Fix internal UI highlighting and misc fixes This commit is a little bit too big. It fixes a bug with the internal UI that was breaking the highlighting feature (indicates status of articles and when an AJAX request has been made). It also does some reformatting in the internal listings UI. This should make it a bit easier on anyone writing buffer updates in the listings UI. I was able to reapply some stimulus I wrote previously for this, super easy! There are also a couple of CSS classes I renamed to match Bootstrap's naming conventions. * Remove
tag * Update article_controller Stimulus test --- app/assets/stylesheets/internal/layout.scss | 43 ++++--------------- .../controllers/article_controller.test.js | 14 +++--- .../controllers/buffer_controller.test.js | 2 +- .../controllers/article_controller.js | 5 ++- .../internal/controllers/buffer_controller.js | 15 ++++++- .../articles/_individual_article.html.erb | 10 +++-- .../internal/articles/rss_articles.html.erb | 6 +-- .../classified_listings/index.html.erb | 27 +++++------- app/views/internal/configs/show.html.erb | 2 +- 9 files changed, 54 insertions(+), 70 deletions(-) diff --git a/app/assets/stylesheets/internal/layout.scss b/app/assets/stylesheets/internal/layout.scss index c2305d656..3978c4c42 100644 --- a/app/assets/stylesheets/internal/layout.scss +++ b/app/assets/stylesheets/internal/layout.scss @@ -16,54 +16,27 @@ } } -.wrapper { - display: grid; - grid-template-columns: 25% 15% 15% 15% 15% 15%; - padding: 2px; +.buffer-cell { + /* Max-width derived from width of a Bootstrap container */ + max-width: 1140px; + word-wrap: break-word; } -.grid-item { - word-wrap: break-word; -} - -.single-internal-listing { - border-bottom: 1px solid grey; - padding: 10px; -} - -.buffering-area-for-single-listing { - display: grid; - grid-template-columns: 50% 50%; - padding: 2px; -} - -.featured-bg { +.bg-featured { background: #bbffd2; } -.approved-bg { +.bg-approved { background: #92e8ae; border: 12px solid #ff9900; } -.highlighted-bg { +.bg-highlighted { background: #2effa8 !important; border: 20px solid black; } -.submitting-no-border { - background: #96f2cc !important; -} - -.highlighted-no-border { - background: #2effa8 !important; -} - -.highlighted-no-border input[type='submit'] { - display: none; -} - -.highlighted-border { +.border-highlighted { border: 20px solid black; } diff --git a/app/javascript/internal/__tests__/controllers/article_controller.test.js b/app/javascript/internal/__tests__/controllers/article_controller.test.js index e7011c9be..49800333a 100644 --- a/app/javascript/internal/__tests__/controllers/article_controller.test.js +++ b/app/javascript/internal/__tests__/controllers/article_controller.test.js @@ -5,10 +5,12 @@ import '../../__mocks__/mutationObserver'; describe('ArticleController', () => { beforeEach(() => { document.body.innerHTML = `
- - - - +
+ + + + +
`; const application = Application.start(); @@ -49,12 +51,12 @@ describe('ArticleController', () => { describe('#highlightElement', () => { it('adds a class to the controller element', () => { const button = document.querySelectorAll('button')[2]; - const element = document.querySelector("[data-controller='article']"); + const element = document.querySelector('.card-body'); button.click(); expect( - element.classList.contains('highlighted-bg', 'highlighted-border'), + element.classList.contains('bg-highlighted', 'border-highlighted'), ).toBe(true); }); }); diff --git a/app/javascript/internal/__tests__/controllers/buffer_controller.test.js b/app/javascript/internal/__tests__/controllers/buffer_controller.test.js index 0fef95860..6353d4bea 100644 --- a/app/javascript/internal/__tests__/controllers/buffer_controller.test.js +++ b/app/javascript/internal/__tests__/controllers/buffer_controller.test.js @@ -45,7 +45,7 @@ describe('BufferController', () => { button.click(); expect( - element.classList.contains('highlighted-bg', 'highlighted-border'), + element.classList.contains('bg-highlighted', 'border-highlighted'), ).toBe(true); }); }); diff --git a/app/javascript/internal/controllers/article_controller.js b/app/javascript/internal/controllers/article_controller.js index 9d515db86..e5fa340ce 100644 --- a/app/javascript/internal/controllers/article_controller.js +++ b/app/javascript/internal/controllers/article_controller.js @@ -16,9 +16,10 @@ export default class ArticleController extends Controller { } highlightElement() { - this.element.classList.add('highlighted-bg', 'highlighted-border'); + const card = this.element.querySelector('.card-body'); + card.classList.add('bg-highlighted', 'border-highlighted'); setTimeout(() => { - this.element.classList.remove('highlighted-bg'); + card.classList.remove('bg-highlighted'); }, 350); } diff --git a/app/javascript/internal/controllers/buffer_controller.js b/app/javascript/internal/controllers/buffer_controller.js index dd4013b34..386590080 100644 --- a/app/javascript/internal/controllers/buffer_controller.js +++ b/app/javascript/internal/controllers/buffer_controller.js @@ -4,19 +4,23 @@ export default class BufferController extends Controller { static targets = ['header', 'bodyText']; tagBufferUpdateConfirmed() { + this.clearPreviousBadge(); + this.headerTarget.innerHTML += 'Confirm'; } tagBufferUpdateDismissed() { + this.clearPreviousBadge(); + this.headerTarget.innerHTML += 'Dismiss'; } highlightElement() { - this.element.classList.add('highlighted-bg', 'highlighted-border'); + this.element.classList.add('bg-highlighted', 'border-highlighted'); setTimeout(() => { - this.element.classList.remove('highlighted-bg'); + this.element.classList.remove('bg-highlighted'); }, 350); } @@ -26,6 +30,13 @@ export default class BufferController extends Controller { ).length; } + clearPreviousBadge() { + const badge = this.headerTarget.querySelector('.badge'); + if (badge) { + badge.remove(); + } + } + get bufferUpdateId() { return parseInt(this.data.get('id'), 10); } diff --git a/app/views/internal/articles/_individual_article.html.erb b/app/views/internal/articles/_individual_article.html.erb index 9728c7f3f..1e3ef705c 100644 --- a/app/views/internal/articles/_individual_article.html.erb +++ b/app/views/internal/articles/_individual_article.html.erb @@ -3,11 +3,13 @@ <%= article.title %> EDIT -
"> - <% featured = article.featured ? "featured-bg" : "" %> - <% featured = article.approved ? "approved-bg" : featured %> + <% featured = article.featured ? "bg-featured" : "" %> + <% approved = article.approved ? "bg-approved" : featured %> + <% background_color = approved %> + +
"> <% if article.video %> diff --git a/app/views/internal/articles/rss_articles.html.erb b/app/views/internal/articles/rss_articles.html.erb index 822896185..89cd6dc1a 100644 --- a/app/views/internal/articles/rss_articles.html.erb +++ b/app/views/internal/articles/rss_articles.html.erb @@ -74,10 +74,10 @@ // dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard }).success(function (json) { console.log("success") - form.parents(".row").addClass("highlighted-bg") - form.parents(".row").addClass("highlighted-border") + form.parents(".row").addClass("bg-highlighted") + form.parents(".row").addClass("border-highlighted") setTimeout(function () { - form.parents(".row").removeClass("highlighted-bg") + form.parents(".row").removeClass("bg-highlighted") }, 350) }); return false; // prevents normal behaviour diff --git a/app/views/internal/classified_listings/index.html.erb b/app/views/internal/classified_listings/index.html.erb index 4f475d1f5..a6db859b2 100644 --- a/app/views/internal/classified_listings/index.html.erb +++ b/app/views/internal/classified_listings/index.html.erb @@ -47,30 +47,25 @@ <%= listing.bumped_at ? time_ago_in_words(listing.bumped_at) + " ago" : "Draft" %> - + <% if listing.last_buffered.present? %> - + Last shared: <%= listing.last_buffered.strftime("%d %B %Y") %> <% end %> -
-
-

<%= listing.title %>

-

<%= listing.processed_html&.html_safe %>

-
-
- <%= form_with url: "/internal/buffer_updates", html: { data: { action: "submit->buffer#highlightElement" } } do %> - - - -
- - <% end %> -
+
+

<%= listing.title %>

+

<%= listing.processed_html&.html_safe %>

+ <%= form_with url: "/internal/buffer_updates", html: { data: { action: "submit->buffer#highlightElement" } } do %> + + + + + <% end %>
diff --git a/app/views/internal/configs/show.html.erb b/app/views/internal/configs/show.html.erb index 43d8f3d8c..56772da11 100644 --- a/app/views/internal/configs/show.html.erb +++ b/app/views/internal/configs/show.html.erb @@ -20,7 +20,7 @@ Toggle
-
+
<%= form_for(SiteConfig.new, url: internal_config_path) do |f| %>