render motds in topic and topics views

app/__init__.py

@@ -186,6 +186,7 @@ def create_app():
         return {
             'get_post_url': get_post_url,
             'get_prefers_theme': get_prefers_theme,
+            'get_motds': MOTD.get_all,
         }
 
     @app.template_filter("ts_datetime")

app/templates/common/macros.html

@@ -1,4 +1,4 @@
-{% from 'common/icons.html' import icn_image, icn_spoiler, icn_info, icn_lock, icn_warn, icn_error, icn_bookmark %}
+{% from 'common/icons.html' import icn_image, icn_spoiler, icn_info, icn_lock, icn_warn, icn_error, icn_bookmark, icn_megaphone %}
 {% macro pager(current_page, page_count) %}
 {% set left_start = [1, current_page - 5] | max %}
 {% set right_end = [page_count, current_page + 5] | min %}
@@ -61,6 +61,19 @@
 </div>
 {% endmacro %}
 
+{% macro motd(motd_obj) %}
+<div class="motd">
+  <div class="motd-icon-container contain-svg">
+  {{ icn_megaphone(80) }}
+  <i><abbr title="Message of the Day">MOTD</abbr></i>
+  </div>
+  <div class="motd-content-container">
+    <div class="motd-title">{{ motd_obj.title }}</div>
+    <div class="motd-body">{{ motd_obj.body_rendered | safe}}</div>
+  </div>
+</div>
+{% endmacro %}
+
 {% macro timestamp(unix_ts) -%}
 <span class="timestamp" data-utc="{{ unix_ts }}">{{ unix_ts | ts_datetime('%Y-%m-%d %H:%M')}} <abbr title="Server Time">ST</abbr></span>
 {%- endmacro %}

app/templates/topics/topic.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import pager, timestamp %}
+{% from 'common/macros.html' import pager, timestamp, motd %}
 {% from 'common/icons.html' import icn_lock, icn_sticky %}
 {% extends "base.html" %}
 {% block title %}browsing topic {{ topic['name'] }}{% endblock %}
@@ -27,6 +27,14 @@
   {{ infobox("This topic is locked.;Only moderators can create new threads.", InfoboxKind.INFO) }}
 {% endif %}
 
+{%- with motds = get_motds() -%}
+  {%- if motds -%}
+    {%- for motd_obj in motds -%}
+      {{- motd(motd_obj) -}}
+    {%- endfor -%}
+  {%- endif -%}
+{%- endwith -%}
+
 {% if threads_list | length == 0 %}
   <p>There are no threads in this topic.</p>
 {% else %}

app/templates/topics/topics.html

@@ -1,5 +1,5 @@
 {% from 'common/icons.html' import icn_lock %}
-{% from 'common/macros.html' import timestamp %}
+{% from 'common/macros.html' import timestamp, motd %}
 {% extends "base.html" %}
 {% block content %}
 <nav class="darkbg">
@@ -9,6 +9,13 @@
     <a class="linkbutton" href={{ url_for("mod.sort_topics") }}>Sort topics</a>
   {% endif %}
 </nav>
+{%- with motds = get_motds() -%}
+  {%- if motds -%}
+    {%- for motd_obj in motds -%}
+      {{- motd(motd_obj) -}}
+    {%- endfor -%}
+  {%- endif -%}
+{%- endwith -%}
 {% if topic_list | length == 0 %}
   <p>There are no topics.</p>
 {% else %}

data/static/css/style.css

@@ -1381,3 +1381,30 @@ footer {
   max-height: 300px;
   overflow: scroll;
 }
+
+.motd {
+  display: flex;
+  background-color: #c1ceb1;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+  padding: 10px 15px;
+  margin: 10px 0;
+}
+
+.motd-icon-container {
+  display: flex;
+  min-width: 80px;
+  padding-right: 15px;
+}
+
+.motd-content-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex-grow: 1;
+  padding-right: 25%;
+}
+
+.motd-title {
+  font-weight: bold;
+  font-size: larger;
+}

data/static/css/theme-otomotone.css

@@ -1382,6 +1382,33 @@ footer {
   overflow: scroll;
 }
 
+.motd {
+  display: flex;
+  background-color: #503250;
+  border: 2px outset #503250;
+  padding: 10px 15px;
+  margin: 10px 0;
+}
+
+.motd-icon-container {
+  display: flex;
+  min-width: 80px;
+  padding-right: 15px;
+}
+
+.motd-content-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex-grow: 1;
+  padding-right: 25%;
+}
+
+.motd-title {
+  font-weight: bold;
+  font-size: larger;
+}
+
 #topnav {
   margin-bottom: 10px;
   border: 10px solid rgb(40, 40, 40);

data/static/css/theme-peachy.css

@@ -1382,6 +1382,33 @@ footer {
   overflow: scroll;
 }
 
+.motd {
+  display: flex;
+  background-color: #f27a5a;
+  border: 1px solid black;
+  padding: 6px 8px;
+  margin: 6px 0;
+}
+
+.motd-icon-container {
+  display: flex;
+  min-width: 80px;
+  padding-right: 8px;
+}
+
+.motd-content-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex-grow: 1;
+  padding-right: 25%;
+}
+
+.motd-title {
+  font-weight: bold;
+  font-size: larger;
+}
+
 #topnav {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;

sass/_default.scss

@@ -1335,3 +1335,37 @@ $bookmark_dropdown_items_container_max_height: 300px !default;
   max-height: $bookmark_dropdown_items_container_max_height;
   overflow: scroll;
 }
+
+$motd_background_color: $ACCENT_COLOR !default;
+$motd_border: 2px outset $LIGHT !default;
+$motd_padding: $MEDIUM_PADDING $MEDIUM_BIG_PADDING !default;
+$motd_margin: $MEDIUM_PADDING 0 !default;
+.motd {
+  display: flex;
+  background-color: $motd_background_color;
+  border: $motd_border;
+  padding: $motd_padding;
+  margin: $motd_margin;
+}
+
+$motd_icon_min_width: 80px !default;
+$motd_icon_padding_right: $MEDIUM_BIG_PADDING !default;
+.motd-icon-container {
+  display: flex;
+  min-width: $motd_icon_min_width;
+  padding-right: $motd_icon_padding_right;
+}
+
+$motd_content_padding_right: 25% !default;
+.motd-content-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex-grow: 1;
+  padding-right: $motd_content_padding_right;
+}
+
+.motd-title {
+  font-weight: bold;
+  font-size: larger;
+}

sass/otomotone.scss

@@ -49,6 +49,7 @@ $crit: #d53232;
   $post_content_background: $dark_accent,
 
   $thread_info_background_color: $dark_accent,
+  $motd_background_color: $lightish_accent,
 
   $post_reactions_background: $lightish_accent,
 

sass/peachy.scss

@@ -15,6 +15,7 @@ $br: 16px;
   $usercard_border: none,
   $usercard_border_right: none,
   $thread_locked_border: 1px solid black,
+  $motd_border: 1px solid black,
 
   $SETTINGS_WIDTH: 60%,
   $PAGE_SIDE_MARGIN: 50px,