Use new news style

app/javascript/src/javascripts/news_updates.js

@@ -2,28 +2,25 @@ import LS from './local_storage'
 
 let NewsUpdate = {};
 
-NewsUpdate.initialize = function() {
-  if (!$("#news-updates").length) {
+NewsUpdate.initialize = function () {
+  if (!$("#news").length) {
     return;
   }
+  const key = parseInt($("#news").data("id"), 10);
 
-  var key = $("#news-updates").data("id").toString();
-
-  if (LS.get("news-ticker") === key) {
-    $("#news-updates").hide();
-  } else {
-    $("#news-updates").show();
-
-    $("#close-news-ticker-link").on("click.danbooru", function(e) {
-      $("#news-updates").hide();
-      LS.put("news-ticker", key);
-
-      return false;
-    });
+  $('#news').on('click', function () {
+    $('#news').toggleClass('open');
+  });
+  $('#news-closebutton').on('click', function () {
+    $('#news').hide();
+    LS.put('hide_news_notice', key.toString());
+  });
+  if (parseInt(LS.get("hide_news_notice") || 0, 10) !== key) {
+    $("#news").show();
   }
-}
+};
 
-$(function() {
+$(function () {
   NewsUpdate.initialize();
 });
 

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

@@ -1,5 +1,34 @@
 @import "../base/005_vars.scss";
 
+div#news {
+  max-height: 1rem;
+  overflow-y: hidden;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.open {
+    max-height: none;
+  }
+
+  .newsbody {
+    margin-top: 5px;
+  }
+
+  .closebutton {
+    float: right;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 14pt;
+    font-weight: bold;
+    color: white;
+    vertical-align: center;
+    margin-top: -3px;
+  }
+}
+
 div#news-updates {
   padding: 5px;
   background: $news-background;

app/models/news_update.rb

@@ -7,7 +7,7 @@ class NewsUpdate < ApplicationRecord
 
   def self.recent
     @recent_news ||= Cache.get('recent_news', 1.day) do
-      self.order('created_at desc').first(5)
+      self.order('id desc').first(1)
     end
   end
 

app/views/layouts/default.html.erb

@@ -108,7 +108,16 @@
   </noscript>
 </head>
 <%= tag.body **body_attributes(CurrentUser.user) do %>
-  <%= render "news_updates/listing" %>
+  <% if Danbooru.config.beta_notice %>
+  <div id="news-updates">
+    <ul>
+      <li>
+        <h1>Please make sure to check out the <a href="/wiki_pages/e621:beta_rules">beta rules</a> before proceeding
+          to use this site.</h1>
+      </li>
+    </ul>
+  </div>
+  <% end %>
 
   <header id="top">
     <h1><%= link_to Danbooru.config.app_name, "/" %></h1>
@@ -125,6 +134,8 @@
   </header>
 
   <div id="page">
+    <%= render "news_updates/listing" %>
+
     <% if CurrentUser.user.is_banned? %>
       <%= render "users/ban_notice" %>
     <% end %>

app/views/news_updates/_listing.html.erb

@@ -1,13 +1,10 @@
-<% cache("news-updates", :expires_in => 1.hour) do %>
-  <% if NewsUpdate.recent.any? %>
-    <div id="news-updates" data-id="<%= NewsUpdate.recent.first.try(:id) %>" style="display: none;">
-      <ul>
-        <% NewsUpdate.recent.each do |news_update| %>
-          <li><%= news_update.created_at.strftime("%b %d") %>: <%= news_update.message.html_safe %></li>
-        <% end %>
-      </ul>
-
-      <a href="#" id="close-news-ticker-link">close</a>
-    </div>
-  <% end %>
+<% if NewsUpdate.recent.present? %>
+  <div class="ui-state-highlight site-notice" style="display: none;" id="news" data-id="<%= NewsUpdate.recent[0].id %>">
+    <div id="news-closebutton" class="closebutton">Dismiss</div>
+    <h6><%= link_to("News", news_updates_path) %> - <%= NewsUpdate.recent[0].created_at.strftime("%b %d, %Y") %>
+      (<%= time_ago_in_words NewsUpdate.recent[0].created_at %> ago)
+      <span id="news-showtext" class="showtext">Click to show.</span>
+    </h6>
+    <div class="newsbody"><%= format_text(NewsUpdate.recent[0].message) %></div>
+  </div>
 <% end %>

app/views/news_updates/edit.html.erb

@@ -3,7 +3,7 @@
     <h1>Edit Update</h1>
 
     <%= simple_form_for(@news_update) do |f| %>
-      <%= f.input :message, :hint => "Use HTML for formatting", :input_html => {:size => "30x5"} %>
+      <%= f.input :message, :hint => "Use DText for formatting", :input_html => {:size => "30x5"} %>
       <%= f.button :submit, "Submit" %>
     <% end %>
   </div>

app/views/news_updates/new.html.erb

@@ -3,7 +3,7 @@
     <h1>New Update</h1>
 
     <%= simple_form_for(@news_update) do |f| %>
-      <%= f.input :message, :hint => "Use HTML for formatting", :input_html => {:size => "30x5"} %>
+      <%= f.input :message, :hint => "Use DText for formatting", :input_html => {:size => "30x5"} %>
       <%= f.button :submit, "Submit" %>
     <% end %>
   </div>

config/danbooru_default_config.rb

@@ -289,6 +289,10 @@ fart'
       1_000
     end
 
+    def beta_notice
+      false
+    end
+
     # Maximum size of an upload. If you change this, you must also change
     # `client_max_body_size` in your nginx.conf.
     def max_file_size