From 1fb1735faf15e4b24c541f1c12f1a9d525a89efc Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Thu, 9 Nov 2023 21:32:29 +1300
Subject: [PATCH] design improvements

---
 app/static/scss/_typography.scss                 |  4 ++--
 app/static/structure.css                         |  4 ++--
 app/static/styles.css                            | 12 ++++++++++--
 app/static/styles.scss                           |  8 ++++++++
 app/templates/base.html                          |  2 +-
 app/templates/community/_post_teaser.html        |  3 ++-
 app/templates/community/add_post.html            |  2 +-
 app/templates/community/add_reply.html           |  2 +-
 app/templates/community/community.html           |  2 +-
 app/templates/community/continue_discussion.html |  2 +-
 app/templates/community/post.html                |  7 ++++++-
 app/templates/user/edit_profile.html             |  2 +-
 app/templates/user/edit_settings.html            |  2 +-
 app/templates/user/show_profile.html             |  2 +-
 14 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/app/static/scss/_typography.scss b/app/static/scss/_typography.scss
index c8324d72..70321ebc 100644
--- a/app/static/scss/_typography.scss
+++ b/app/static/scss/_typography.scss
@@ -147,11 +147,11 @@
 
 .fe-reply {
   position: relative;
-  top: 2px;
+  top: 1px;
 }
 
 .fe-reply::before {
-  content: "\e991";
+  content: "\e990";
 }
 
 .fe-report::before {
diff --git a/app/static/structure.css b/app/static/structure.css
index 265d3233..be979896 100644
--- a/app/static/structure.css
+++ b/app/static/structure.css
@@ -150,11 +150,11 @@ nav, etc which are used site-wide */
 
 .fe-reply {
   position: relative;
-  top: 2px;
+  top: 1px;
 }
 
 .fe-reply::before {
-  content: "\e991";
+  content: "\e990";
 }
 
 .fe-report::before {
diff --git a/app/static/styles.css b/app/static/styles.css
index 8ace3140..b328b581 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -149,11 +149,11 @@
 
 .fe-reply {
   position: relative;
-  top: 2px;
+  top: 1px;
 }
 
 .fe-reply::before {
-  content: "\e991";
+  content: "\e990";
 }
 
 .fe-report::before {
@@ -309,6 +309,14 @@ nav.navbar {
   background-color: #f8d7da;
 }
 
+.main_pane {
+  border: solid 1px #ddd;
+  border-radius: 5px;
+  background-color: white;
+  padding-top: 8px;
+  padding-bottom: 12px;
+}
+
 .community_icon {
   width: 30px;
   height: auto;
diff --git a/app/static/styles.scss b/app/static/styles.scss
index e15ff953..0518382b 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -73,6 +73,14 @@ nav.navbar {
     background-color: #f8d7da;
 }
 
+.main_pane {
+  border: solid 1px $light-grey;
+  border-radius: 5px;
+  background-color: white;
+  padding-top: 8px;
+  padding-bottom: 12px;
+}
+
 .community_icon {
   width: 30px;
   height: auto;
diff --git a/app/templates/base.html b/app/templates/base.html
index 2a74c1b8..246d090a 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -80,7 +80,7 @@
     {% endblock %}
 
     {% block content %}
-        <div id="outer_container" class="container-lg flex-shrink-0 mt-4 pt-1">
+        <div id="outer_container" class="container-lg flex-shrink-0 mt-3 pt-1">
             {% with messages = get_flashed_messages(with_categories=True) %}
             {% if messages %}
                 {% for category, message in messages %}
diff --git a/app/templates/community/_post_teaser.html b/app/templates/community/_post_teaser.html
index 29483159..eda5e76d 100644
--- a/app/templates/community/_post_teaser.html
+++ b/app/templates/community/_post_teaser.html
@@ -25,7 +25,8 @@
             </div>
             <div class="row utilities_row">
                 <div class="col-6">
-                    <a href="{{ url_for('community.show_post', post_id=post.id, _anchor='replies') }}">{{ post.reply_count }}</a> additional tools
+                    <a href="{{ url_for('community.show_post', post_id=post.id, _anchor='replies') }}"><span class="fe fe-reply"></span></a>
+                    <a href="{{ url_for('community.show_post', post_id=post.id, _anchor='replies') }}">{{ post.reply_count }}</a>
                 </div>
                 <div class="col-2">...</div>
             </div>
diff --git a/app/templates/community/add_post.html b/app/templates/community/add_post.html
index 5c6d8f87..31894f3e 100644
--- a/app/templates/community/add_post.html
+++ b/app/templates/community/add_post.html
@@ -3,7 +3,7 @@
 
 {% block app_content %}
 <div class="row">
-    <div class="col-8 position-relative">
+    <div class="col-8 position-relative main_pane">
         <h1>{{ _('Create post') }}</h1>
         <form method="post">
             {{ form.csrf_token() }}
diff --git a/app/templates/community/add_reply.html b/app/templates/community/add_reply.html
index dc384aa8..00e19274 100644
--- a/app/templates/community/add_reply.html
+++ b/app/templates/community/add_reply.html
@@ -4,7 +4,7 @@
 {% block app_content %}
 <script src="/static/js/coolfieldset.js"></script>
 <div class="row">
-    <div class="col-12 col-md-8 position-relative add_reply">
+    <div class="col-12 col-md-8 position-relative add_reply main_pane">
         <fieldset class="coolfieldset mt-4"><legend class="w-auto">Original post</legend>
             <h3>{{ post.title }}</h3>
             {{ post.body_html | safe }}
diff --git a/app/templates/community/community.html b/app/templates/community/community.html
index 7e79c7ba..34410d09 100644
--- a/app/templates/community/community.html
+++ b/app/templates/community/community.html
@@ -3,7 +3,7 @@
 
 {% block app_content %}
 <div class="row">
-    <div class="col-12 col-md-8 position-relative">
+    <div class="col-12 col-md-8 position-relative main_pane">
         {% if community.header_image() != '' %}
             <div class="community_header" style="height: 240px; background-image: url({{ community.header_image() }});">
                 <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
diff --git a/app/templates/community/continue_discussion.html b/app/templates/community/continue_discussion.html
index bed41684..ae12efd4 100644
--- a/app/templates/community/continue_discussion.html
+++ b/app/templates/community/continue_discussion.html
@@ -3,7 +3,7 @@
 
 {% block app_content %}
 <div class="row">
-    <div class="col-12 col-md-8 position-relative">
+    <div class="col-12 col-md-8 position-relative main_pane">
         {% include 'community/_post_full.html' %}
         <p><a href="{{ url_for('community.show_post', post_id=post.id, _anchor='replies') }}">Back to main discussion</a></p>
         <div class="row post_replies">
diff --git a/app/templates/community/post.html b/app/templates/community/post.html
index 1e670f74..302f7fca 100644
--- a/app/templates/community/post.html
+++ b/app/templates/community/post.html
@@ -6,18 +6,21 @@
     var toBeHidden = Array();   // this list of comment IDs will be iterated over in setupHideButtons() and the 'hide' button clicked
 </script>
 <div class="row">
-    <div class="col-12 col-md-8 position-relative">
+    <div class="col-12 col-md-8 position-relative main_pane">
         {% include 'community/_post_full.html' %}
         {% if post.comments_enabled %}
             {% if current_user.is_authenticated %}
                 {% if current_user.verified %}
                     <div class="row post_reply_form">
+                        <hr class="mt-1" />
                         <div class="col">
                             <div class="reply_form_inner">
                                 {{ render_form(form) }}
                             </div>
                         </div>
+                        {% if replies %}
                         <hr class="mt-4" />
+                        {% endif %}
                     </div>
                 {% else %}
                     <p><a href="{{ url_for('auth.validation_required') }}">{{ _('Verify your email address to comment') }}</a></p>
@@ -28,6 +31,7 @@
         {% else %}
             <p>{{ _('Comments are disabled for this post.') }}</p>
         {% endif %}
+        {% if replies %}
         <div class="row post_replies">
             <div class="col">
                 {% macro render_comment(comment) %}
@@ -93,6 +97,7 @@
                 </div>
             </div>
         </div>
+        {% endif %}
     </div>
 
     <div class="col-12 col-md-4">
diff --git a/app/templates/user/edit_profile.html b/app/templates/user/edit_profile.html
index 5c9fe213..5bc19ea2 100644
--- a/app/templates/user/edit_profile.html
+++ b/app/templates/user/edit_profile.html
@@ -3,7 +3,7 @@
 
 {% block app_content %}
     <div class="row">
-        <div class="col">
+        <div class="col main_pane">
             <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
               <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="/">{{ _('Home') }}</a></li>
diff --git a/app/templates/user/edit_settings.html b/app/templates/user/edit_settings.html
index d97e5236..81c71c71 100644
--- a/app/templates/user/edit_settings.html
+++ b/app/templates/user/edit_settings.html
@@ -3,7 +3,7 @@
 
 {% block app_content %}
     <div class="row">
-        <div class="col">
+        <div class="col main_pane">
             <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
               <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="/">{{ _('Home') }}</a></li>
diff --git a/app/templates/user/show_profile.html b/app/templates/user/show_profile.html
index fa248dc3..326ba640 100644
--- a/app/templates/user/show_profile.html
+++ b/app/templates/user/show_profile.html
@@ -3,7 +3,7 @@
 
 {% block app_content %}
 <div class="row">
-    <div class="col-8 position-relative">
+    <div class="col-8 position-relative main_pane">
         {% if user.cover_image() != '' %}
             <div class="community_header" style="height: 240px; background-image: url({{ user.cover_image() }});">
                 <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">