Open news items on a separate page

CHANGES.rst

@@ -104,6 +104,8 @@ Improvements
 - Show the Indico version in the footer again (:issue:`4558`)
 - Event managers can upload a custom Book of Abstract PDF (:issue:`3039`,
   :pr:`4577`)
+- Display each news item on a separate page instead of together with all the
+  other news items (:pr:`4587`)
 
 Bugfixes
 ^^^^^^^^

indico/modules/categories/templates/display/sidebar.html

@@ -44,7 +44,7 @@ <h2 class="icon-bullhorn">{% trans %}News{% endtrans %}</h2>
         <ul class="main-page-list">
             {% for news in news_list %}
                 <li>
-                    <a class="title" href="{{ url_for('news.display', _anchor="news-{}".format(news.id)) }}">
+                    <a class="title" href="{{ news.url }}">
                         {{ news.title }}
                     </a>
                     <span class="timing">

indico/modules/news/blueprint.py

@@ -7,13 +7,15 @@
 
 from __future__ import unicode_literals
 
-from indico.modules.news.controllers import RHCreateNews, RHDeleteNews, RHEditNews, RHManageNews, RHNews, RHNewsSettings
+from indico.modules.news.controllers import (RHCreateNews, RHDeleteNews, RHEditNews, RHManageNews, RHNews, RHNewsItem,
+                                             RHNewsSettings)
 from indico.web.flask.wrappers import IndicoBlueprint
 
 
 _bp = IndicoBlueprint('news', __name__, template_folder='templates', virtual_template_folder='news')
 
-_bp.add_url_rule('/news', 'display', RHNews)
+_bp.add_url_rule('/news/', 'display', RHNews)
+_bp.add_url_rule('/news/<int:news_id>', 'display_item', RHNewsItem)
 _bp.add_url_rule('/admin/news/', 'manage', RHManageNews)
 _bp.add_url_rule('/admin/news/settings', 'settings', RHNewsSettings, methods=('GET', 'POST'))
 _bp.add_url_rule('/admin/news/create', 'create_news', RHCreateNews, methods=('GET', 'POST'))

indico/modules/news/controllers.py

@@ -39,6 +39,14 @@ def _process(self):
         return WPNews.render_template('news.html', news=news, _is_new=self._is_new)
 
 
+class RHNewsItem(RH):
+    def _process_args(self):
+        self.item = NewsItem.get_or_404(request.view_args['news_id'])
+
+    def _process(self):
+        return WPNews.render_template('news_item.html', item=self.item)
+
+
 class RHManageNewsBase(RHAdminBase):
     pass
 

indico/modules/news/models/news.py

@@ -12,6 +12,7 @@
 from indico.util.date_time import now_utc
 from indico.util.locators import locator_property
 from indico.util.string import format_repr, return_ascii
+from indico.web.flask.util import url_for
 
 
 class NewsItem(db.Model):
@@ -48,6 +49,10 @@ def locator(self):
     def anchor(self):
         return 'news-{}'.format(self.id)
 
+    @property
+    def url(self):
+        return url_for('news.display_item', self)
+
     @return_ascii
     def __repr__(self):
         return format_repr(self, 'id', _text=self.title)

indico/modules/news/templates/_news.html

@@ -0,0 +1,14 @@
+{%- macro render_news_item(item, is_new=false, show_permalink=true) -%}
+    <div class="news-item" id="{{ item.anchor }}">
+        <div class="right news-item-info">
+            <span class="date-time">{{ item.created_dt|format_date(timezone=session.tzinfo) }}</span>
+        </div>
+        <h2 {% if show_permalink %}data-permalink="{{ item.url }}"{% endif %}>
+            {{ item.title }}
+            {% if is_new %}<i class="icon-new new-label"></i>{% endif %}
+        </h2>
+        <div class="content">
+            {{ item.content | sanitize_html }}
+        </div>
+    </div>
+{%- endmacro -%}

indico/modules/news/templates/news.html

@@ -1,4 +1,5 @@
 {% extends 'layout/base.html' %}
+{% from 'news/_news.html' import render_news_item %}
 
 {% block page_class %}fixed-width-standalone-page{% endblock %}
 
@@ -8,17 +9,6 @@
 
 {% block content %}
     {% for item in news %}
-        <div class="news-item" id="{{ item.anchor }}">
-            <div class="right news-item-info">
-                <span class="date-time">{{ item.created_dt|format_date(timezone=session.tzinfo) }}</span>
-            </div>
-            <h2 data-anchor="{{ item.anchor }}">
-                {{ item.title }}
-                {% if _is_new(item) %}<i class="icon-new new-label"></i>{% endif %}
-            </h2>
-            <div class="content">
-                {{ item.content | sanitize_html }}
-            </div>
-        </div>
+        {{ render_news_item(item, is_new=_is_new(item)) }}
     {% endfor %}
 {% endblock %}

indico/modules/news/templates/news_item.html

@@ -0,0 +1,10 @@
+{% extends 'news/news.html' %}
+{% from 'news/_news.html' import render_news_item %}
+
+{% block title %}
+    {% trans %}News{% endtrans %}
+{% endblock %}
+
+{% block content %}
+    {{ render_news_item(item, show_permalink=false) }}
+{% endblock %}

indico/web/client/js/jquery/utils/declarative.js

@@ -341,12 +341,13 @@ import {$T} from '../../utils/i18n';
   }
 
   function setupAnchorLinks() {
-    $('[data-anchor]').each(function() {
-      var $elem = $(this);
-      var fragment = $elem.data('anchor');
+    $('[data-anchor], [data-permalink]').each(function() {
+      const $elem = $(this);
+      const fragment = $elem.data('anchor');
+      const permalink = $elem.data('permalink');
       $('<a>', {
         class: 'anchor-link',
-        href: '#' + fragment,
+        href: permalink || `#${fragment}`,
         title: $elem.data('anchor-text') || $T.gettext('Direct link to this item'),
       })
         .html('&para;')

indico/web/client/styles/partials/_links.scss

@@ -39,7 +39,8 @@ a.discreet-link {
   }
 }
 
-[data-anchor]:hover {
+[data-anchor]:hover,
+[data-permalink]:hover {
   .anchor-link {
     opacity: 1;
   }