Bug fixes and new styling for the news page

app/main/routes.py

@@ -28,7 +28,7 @@ def faq():
 @login_required
 def dashboard():
     users = [
-        u.to_json_serializeable(filter_by_privacy_settings=True, include_avatar_relationship=True) for u
+        u.to_json_serializeable(filter_by_privacy_settings=True) for u
         in User.query.filter(User.is_public == True, User.id != current_user.id).all()
     ]
     return render_template('main/dashboard.html.j2', title='Dashboard', users=users)

app/static/js/RessourceLists/PublicUserList.js

@@ -47,7 +47,7 @@ class PublicUserList extends RessourceList {
       return {
         'id': user.id,
         'member-since': user.member_since,
-        'avatar': user.avatar ? `/profile/${user.id}/avatars/${user.avatar.id}` : '/static/images/user_avatar.png',
+        'avatar': user.avatar ? `/profile/${user.id}/avatar` : '/static/images/user_avatar.png',
         'username': user.username,
         'full-name': user.full_name ? user.full_name : '',
         'location': user.location ? user.location : '',

app/templates/admin/edit_user.html.j2

@@ -11,16 +11,16 @@
 
     <div class="col s12">
       <form method="POST">
-        {{ edit_general_settings_form.hidden_tag() }}
+        {{ edit_profile_settings_form.hidden_tag() }}
         <div class="card">
           <div class="card-content">
             <span class="card-title">General settings</span>
-            {{ wtf.render_field(edit_general_settings_form.username, material_icon='person') }}
-            {{ wtf.render_field(edit_general_settings_form.email, material_icon='email') }}
+            {{ wtf.render_field(edit_profile_settings_form.username, material_icon='person') }}
+            {{ wtf.render_field(edit_profile_settings_form.email, material_icon='email') }}
           </div>
           <div class="card-action">
             <div class="right-align">
-              {{ wtf.render_field(edit_general_settings_form.submit, material_icon='send') }}
+              {{ wtf.render_field(edit_profile_settings_form.submit, material_icon='send') }}
             </div>
           </div>
         </form>

app/templates/main/dashboard.html.j2

@@ -44,7 +44,6 @@
     </div>
     <div class="col s12" id="social">
       <h3>Social</h3>
-      <div class="col s12">
       <div class="card">
         <div class="card-content">
           <span class="card-title">Other users and groups</span>
@@ -52,8 +51,6 @@
           <div class="public-user-list no-autoinit"></div>
         </div>
       </div>
-      </div>
-      <div class="col s12">
       <div class="card">
         <div class="card-content">
           <span class="card-title">Public corpora</span>
@@ -61,6 +58,14 @@
         </div>
       </div>
     </div>
+    <div class="fixed-action-btn direction-top active" style="bottom:45px; right:24px;">
+      <a id="news-feature-discovery" class="waves-effect waves-light btn btn-floating"><i class="material-icons">mail</i></a>
+    </div>
+    <div class="tap-target" data-target="news-feature-discovery" style="background-color:#1A5C89">
+      <div class="tap-target-content">
+        <h5>Title</h5>
+        <p>A bunch of text</p>
+      </div>
     </div>
   </div>
 </div>

app/templates/main/news.html.j2

@@ -10,7 +10,6 @@
   
     <div class="col s12">
       <div id="aggregated-news"></div>
-
       <div class="card" id="april-2022-update">
         <div class="card-content">
           <span class="card-title">April 2022 update</span>
@@ -199,22 +198,30 @@
 
   function mastodonStatusToHtml(status) {
     return htmlString = `
-      <div class="card white-text" style="background-color:#5D50E7;">
+      <div class="row">
+        <div class="col s11">
+          <div class="card white-text" style="background-color:#5D50E7; border-radius:10px;">
             <div class="card-content">
               <span class="card-title">New Actitvity on Mastodon</span>
               ${status.content}
             </div>
           </div>
+        </div>
+        <div class="col s1">
+          <img src="https://joinmastodon.org/logos/logo-purple.svg" alt="Mastodon" class="responsive-img hide-on-small-only" style="width:70%; margin-top:30px;">
+        </div>
     `.trim();
   }
   function bisBlogsEntryToHtml(entry) {
-    return `
+    let bisBlogHTMLElement = document.createElement('div');
+    bisBlogHTMLElement.classList.add('row');
+    bisBlogHTMLElement.innerHTML = `
         <div class="row">
           <div class="col s1">
-          <img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img">
+            <img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img hide-on-small-only" style="width:70%; margin-top:40px;">
           </div>
           <div class="col s11">
-          <div class="card" style="background-color: #14f5b4;">
+            <div class="card" style="background-color: #A5BDCC; border-radius:10px;">
               <div class="card-content">
                 <span class="card-title">${entry.title['#text']}</span>
                 ${entry.content['#text']}
@@ -223,6 +230,11 @@
           </div>
         </div>
       `.trim();
+    let bisBlogImages = bisBlogHTMLElement.querySelectorAll('img');
+    bisBlogImages.forEach((img) => {
+      img.classList.add('responsive-img');
+    });
+    return bisBlogHTMLElement.outerHTML;
   }
 
   let aggregatedNewsElement = document.querySelector('#aggregated-news');

app/templates/profile/profile.html.j2

@@ -22,7 +22,7 @@
               <div class="col s7">
                 <div class="row">
                   <div class="col s12">
-                    <h3 style="float:left">{{ user.username }}<span class="new badge green" id="public-information-badge" data-badge-caption="custom caption" style="margin-top:20px;"></span></h3>
+                    <h3 style="float:left">{{ user.username }}<span class="new badge green" id="public-information-badge" data-badge-caption="" style="margin-top:20px;"></span></h3>
                   </div>
                   <div class="col 12">
                     {% if user.show_last_seen %}
@@ -82,8 +82,8 @@
                 {% endif %}
                 <p></p>
                 <br>
-                {% if current_user.is_authenticated and current_user.id == user.id %}
-                <a class="waves-effect waves-light btn-small" href="{{ url_for('.edit_profile', user_id=user.id) }}">Edit profile</a>
+                {% if current_user.is_authenticated and current_user.hashid == user.id %}
+                <a class="waves-effect waves-light btn-small" href="{{ url_for('.edit_profile', user_id=current_user.id) }}">Edit profile</a>
                 {% endif %}
               </div>
             </div>
@@ -115,8 +115,7 @@
 {{ super() }}
 <script>
 let publicInformationBadge = document.querySelector('#public-information-badge');
-
-if ("{{ user }}" == "{{ current_user }}") {
+if ("{{ user.id }}" == "{{ current_user.hashid }}") {
   if ("{{ user.is_public }}" == "True") {
     publicInformationBadge.dataset.badgeCaption = 'Your profile is public';
     publicInformationBadge.classList.add('green');