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 <br> tag

* Update article_controller Stimulus test

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

app/javascript/internal/__tests__/controllers/article_controller.test.js

@@ -5,10 +5,12 @@ import '../../__mocks__/mutationObserver';
 describe('ArticleController', () => {
   beforeEach(() => {
     document.body.innerHTML = `<div data-controller="article">
-      <button data-action="article#increaseFeaturedNumber"></button>
-      <button data-action="article#decreaseFeaturedNumber"></button>
-      <button data-action="article#highlightElement"></button>
-      <input data-target="article.featuredNumber"></input>
+      <div class="card-body">
+        <button data-action="article#increaseFeaturedNumber"></button>
+        <button data-action="article#decreaseFeaturedNumber"></button>
+        <button data-action="article#highlightElement"></button>
+        <input data-target="article.featuredNumber"></input>
+      </div>
     </div>`;
 
     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);
     });
   });

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

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

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 +=
       '<span class="ml-2 badge badge-success">Confirm</span>';
   }
 
   tagBufferUpdateDismissed() {
+    this.clearPreviousBadge();
+
     this.headerTarget.innerHTML +=
       '<span class="ml-2 badge badge-danger">Dismiss</span>';
   }
 
   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);
   }

app/views/internal/articles/_individual_article.html.erb

@@ -3,11 +3,13 @@
     <a href="<%= article.path %>" target="_blank"><%= article.title %></a>
     <a class="ml-2" href="<%= article.path %>/edit" target="_blank"><span class="badge badge-success">EDIT</span></a>
   </div>
-  <div
-    class="card-body <%= "bg-danger" if !article.published? && article.published_from_feed? && !article.user&.feed_admin_publish_permission? %>">
-    <% 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 %>
+
+  <div
+    class="card-body <%= background_color %> <%= "bg-danger" if !article.published? && article.published_from_feed? && !article.user&.feed_admin_publish_permission? %>">
     <button class="btn btn-primary float-right" href="/internal/users/<%= article.user_id %>">Manage User</button>
 
     <% if article.video %>

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

app/views/internal/classified_listings/index.html.erb

@@ -47,30 +47,25 @@
         <td><%= listing.bumped_at ? time_ago_in_words(listing.bumped_at) + " ago" : "Draft" %></td>
       </tr>
       <tr>
-        <td class="border-0">
+        <td class="buffer-cell border-0" colspan="7" data-controller="buffer" data-action="load@window->buffer#autosizeBodyText">
           <button class="btn btn-secondary" data-toggle="collapse" data-target="#buffering-area-for-listing-<%= listing.id %>" aria-expanded="false" aria-controls="buffering-area-for-listing-<%= listing.id %>">
             Share to Buffer
           </button>
 
           <% if listing.last_buffered.present? %>
-            <em>
+            <em class="ml-1">
               Last shared: <%= listing.last_buffered.strftime("%d %B %Y") %>
             </em>
           <% end %>
-          <div id="buffering-area-for-listing-<%= listing.id %>" class="collapse buffer-area">
-            <div class="grid-item">
-              <p class="listing-title"><strong><%= listing.title %></strong></p>
-              <p class="listing-body"><%= listing.processed_html&.html_safe %></p>
-            </div>
-            <div class="grid-item">
-              <%= form_with url: "/internal/buffer_updates", html: { data: { action: "submit->buffer#highlightElement" } } do %>
-                <input type="hidden" name="social_channel" value="listings_twitter" />
-                <input type="hidden" name="listing_id" value="<%= listing.id %>" />
-                <textarea cols="37" rows="8" wrap="hard" name="tweet" maxlength="255">📋 New DEV Listing!&#013&#013Category: <%= listing.category %>&#013&#013<%= listing.title %>&#013&#013<% if listing.user.twitter_username? %>Posted by @<%= listing.user.twitter_username %><% end %></textarea>
-                <br>
-                <button class="btn btn-primary" data-action=>🐦 Tweet 🐦</button>
-              <% end %>
-            </div>
+          <div id="buffering-area-for-listing-<%= listing.id %>" class="collapse buffer-area mt-3">
+            <p><strong><%= listing.title %></strong></p>
+            <p><%= listing.processed_html&.html_safe %></p>
+            <%= form_with url: "/internal/buffer_updates", html: { data: { action: "submit->buffer#highlightElement" } } do %>
+              <input type="hidden" name="social_channel" value="listings_twitter" />
+              <input type="hidden" name="listing_id" value="<%= listing.id %>" />
+              <textarea class="form-control" wrap="hard" name="tweet" maxlength="255" data-target="buffer.bodyText">📋 New DEV Listing!&#013&#013Category: <%= listing.category %>&#013&#013<%= listing.title %>&#013&#013<% if listing.user.twitter_username? %>Posted by @<%= listing.user.twitter_username %><% end %></textarea>
+              <button class="btn btn-primary mt-2" data-action=>🐦 Tweet 🐦</button>
+            <% end %>
           </div>
         </td>
       </tr>

app/views/internal/configs/show.html.erb

@@ -20,7 +20,7 @@
         Toggle
       </button>
     </div>
-    <div id="siteConfigBodyContainer" class="collapse show hide" aria-labelledby="siteConfigHeader">
+    <div id="siteConfigBodyContainer" class="collapse show hide p-3" aria-labelledby="siteConfigHeader">
       <%= form_for(SiteConfig.new, url: internal_config_path) do |f| %>
 
         <div class="card mt-3">