ui improvments

Author: civilcoder55

src/lib/CollectorBot/handler.py

@@ -92,7 +92,10 @@ def __send_notification(post):
             channel_layer.group_send)(
             "notifier",
             {"type": "send.notification", "id": str(post.id),
-             "thumnail_photo": post.thumnail_photo, "title": post.title})
+             "thumnail_photo": post.thumnail_photo, "title": post.title,
+             "created_at": post.created_at.strftime('%b %d, %Y'),
+             "author_screen_name": post.author_screen_name,
+             "rtl": post.rtl})
 
     @classmethod
     def __add_post_to_user(cls, post, user_id):

src/static/css/main-light.css

@@ -686,6 +686,57 @@ ul {
     margin-top: 0;
   }
 }
+
+.author__block__rtl {
+  display: block;
+  position: relative;
+  padding-right: 100px;
+}
+.author__block__rtl .author__avatar {
+  left: unset;
+  right: 0;
+}
+.author__block__rtl .author__name {
+  text-align: right;
+}
+.author__block__rtl .author__description {
+  text-align: right;
+}
+
+.author__block {
+  display: block;
+  position: relative;
+  padding-left: 100px;
+}
+.author__avatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+}
+
+.author__name {
+  display: block;
+  font-size: 16px;
+  color: #222831;
+  line-height: 22px;
+  letter-spacing: 0.4px;
+  margin-bottom: 5px;
+  font-family: "cairo-semibold";
+}
+
+.author__description {
+  word-wrap: break-word;
+  margin-top: 15px;
+  margin-bottom: 0;
+  width: 100%;
+  font-size: 16px;
+  line-height: 26px;
+  color: #222831;
+}
+
 .comments {
   padding-top: 20px;
   margin-top: 50px;

src/static/css/main.css

@@ -695,6 +695,57 @@ ul {
     margin-top: 0;
   }
 }
+
+.author__block__rtl {
+  display: block;
+  position: relative;
+  padding-right: 100px;
+}
+.author__block__rtl .author__avatar {
+  left: unset;
+  right: 0;
+}
+.author__block__rtl .author__name {
+  text-align: right;
+}
+.author__block__rtl .author__description {
+  text-align: right;
+}
+
+.author__block {
+  display: block;
+  position: relative;
+  padding-left: 100px;
+}
+.author__avatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+}
+
+.author__name {
+  display: block;
+  font-size: 16px;
+  color: #fff;
+  line-height: 22px;
+  letter-spacing: 0.4px;
+  margin-bottom: 5px;
+  font-family: "cairo-semibold";
+}
+
+.author__description {
+  word-wrap: break-word;
+  margin-top: 15px;
+  margin-bottom: 0;
+  width: 100%;
+  font-size: 16px;
+  line-height: 26px;
+  color: #fff;
+}
+
 .comments {
   padding-top: 20px;
   margin-top: 50px;
@@ -714,6 +765,7 @@ ul {
   align-items: flex-end;
   margin-top: 30px;
 }
+
 .comments__autor {
   display: block;
   position: relative;

src/static/js/main.js

@@ -146,11 +146,10 @@ $(document).ready(function () {
     return false;
   }
 
-  document.querySelectorAll(".description-block").forEach((e) => {
+  document.querySelectorAll(".author__description").forEach((e) => {
     if (isUnicode(e.innerText)) {
       e.style.direction = "rtl";
+      document.querySelector(".author__block").classList.add("author__block__rtl");
     }
   });
 });
-
-

src/static/js/ws.js

@@ -7,7 +7,6 @@ socket.onopen = function open() {
 socket.onmessage = function recieve(message) {
   const data = JSON.parse(message.data);
   const post = data.event;
-  console.log(post);
   $.notifyClose();
   $.notify(
     {
@@ -38,9 +37,10 @@ socket.onmessage = function recieve(message) {
                 ${post.thumnail_photo}
               </div>
               <div class="post__meta">
-                <span>now</span>
+                  <span>${post.created_at}</span>
+                  <span>author : ${post.author_screen_name}</span>
               </div>
-              <h3 class="post__title">${post.title}</h3>
+              <h3 class="post__title" ${post.rtl ? 'style="direction: rtl; text-align: right;"' : ""}">${post.title}</h3>
               <div class="post__wrap">
                 <a href="/post/${post.id}" class="post__link">Read more</a>
                 <div class="post__comments">

src/templates/posts/post.html

@@ -38,11 +38,11 @@
   <div class="container">
     <div class="row">
       <div class="col-12">
-        <div class="comments__autor" style="height: unset; padding-right:100px">
-          <img class="comments__avatar" src="{{post.author_photo}}" alt="" style="width: 88px;height:88px">
-          <span class="comments__name"><a href="https://twitter.com/{{post.author_screen_name}}"
+        <div class="author__block">
+          <img class="author__avatar" src="{{post.author_photo}}" alt="">
+          <span class="author__name"><a href="https://twitter.com/{{post.author_screen_name}}"
               target="_blank">{{post.author_name}}</a></span>
-          <p class="comments__text description-block">{{post.author_describtion}}</p></span></span>
+          <p class="author__description">{{post.author_describtion}}</p></span></span>
         </div>
       </div>
       <div class="col-12" style="margin-top: 50px;">