[NewsUpdates] Tweak the news section (#843)

app/javascript/src/javascripts/news_updates.js

@@ -3,18 +3,33 @@ import LStorage from "./utility/storage";
 let NewsUpdate = {};
 
 NewsUpdate.initialize = function () {
-  if (!$("#news").length) {
-    return;
-  }
+  if (!$("#news").length) return;
   const key = parseInt($("#news").data("id"), 10);
 
-  $("#news").on("click", function () {
-    $("#news").toggleClass("open");
+  // Toggle news section open and closed
+  let newsOpen = false;
+  $("#news-header, #news-show").on("click", (event) => {
+    event.preventDefault();
+    console.log("click");
+
+    newsOpen = !newsOpen;
+    $("#news").toggleClass("open", newsOpen);
+    $("#news-show").text(newsOpen ? "Hide" : "Show");
+
+    return false; // Prevent triggering both elements at once
   });
-  $("#news-closebutton").on("click", function () {
+
+  // Dismiss the news section
+  $("#news-dismiss").on("click", (event) => {
+    event.preventDefault();
+
     $("#news").hide();
     LStorage.Site.NewsID = key;
+
+    return false;
   });
+
+  // Show if there are new news updates
   if (LStorage.Site.NewsID < key) {
     $("#news").show();
   }

app/javascript/src/styles/common/news.scss

@@ -1,26 +1,47 @@
 
 
-div#news {
-  max-height: 1rem;
+div#page div#news {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+
+  padding: 0;
+  margin-top: -0.5em;
+  border-radius: 0 0 6px 6px;
+
+  max-height: 2rem;
   overflow-y: hidden;
   user-select: none;
   position: relative;
-
-  &:hover {
-    cursor: pointer;
-  }
+  text-align: unset;
 
   &.open {
     max-height: none;
   }
 
-  .newsbody {
-    margin-top: 5px;
+  #news-header {
+    display: block;
+    box-sizing: border-box;
+
+    cursor: pointer;
+    width: 100%;
+    text-align: center;
+    padding: 0.5rem 0.5rem 0;
   }
 
-  .closebutton {
+  #news-body {
+    display: block;
+    box-sizing: border-box;
+
+    margin-top: 5px;
+    max-width: 800px;
+    padding: 0 0.5rem 0.5rem;
+  }
+
+  #news-dismiss {
     position: absolute;
     right: 0.5rem;
+    top: 0.25rem;
 
     cursor: pointer;
     font-size: 1.15rem;

app/views/news_updates/_notice.erb

@@ -1,10 +1,9 @@
 <% if news_update.present? %>
   <div class="ui-state-highlight site-notice" style="display: none;" id="news" data-id="<%= news_update.id %>">
-    <div id="news-closebutton" class="closebutton">Dismiss</div>
-    <h6>News - <%= news_update.created_at.strftime("%b %d, %Y") %>
-      (<%= time_ago_in_words_tagged news_update.created_at %>)
-      <span id="news-showtext" class="showtext">Click to show.</span>
+    <a href="" id="news-dismiss" title="Dismiss"><i class="fas fa-times"></i></a>
+    <h6 id="news-header">News: <%= news_update.created_at.strftime("%b %d, %Y") %>
+      <a href="" id="news-show">Show</a>
     </h6>
-    <div class="newsbody dtext-container"><%= format_text(news_update.message) %></div>
+    <div id="news-body" class="dtext-container"><%= format_text(news_update.message) %></div>
   </div>
 <% end %>