adjust blog icon web view-css

Bardala · Nov 17, 2023 · 0409b8a · 0409b8a
1 parent 23b2af2
commit 0409b8a
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 39 deletions.
diff --git a/backend/src/dataStore/sql/SqlDataStore.class.ts b/backend/src/dataStore/sql/SqlDataStore.class.ts
@@ -98,7 +98,7 @@ export class SqlDataStore implements DataStoreDao {
 
   async infiniteScroll(memberId: string, pageSize: number, offset: number): Promise<Blog[]> {
     const query = `
-    SELECT blogs.*, SUBSTRING(blogs.content, 1, 500) AS content FROM blogs
+    SELECT blogs.*, SUBSTRING(blogs.content, 1, 1000) AS content FROM blogs
     WHERE blogs.spaceId IN (
       SELECT spaceId FROM members WHERE memberId = ? AND NOT spaceId = '1' 
     )
@@ -118,7 +118,7 @@ export class SqlDataStore implements DataStoreDao {
     ]);
     const blogs = rows as Blog[];
     blogs.forEach(blog => {
-      blog.content = blog.content.replace(/[#*`]/g, '');
+      blog.content = blog.content;
     });
     return blogs;
   }
@@ -472,7 +472,7 @@ export class SqlDataStore implements DataStoreDao {
 
   async getBlogs(spaceId: string, pageSize: number, offset: number): Promise<Blog[]> {
     const query = `
-    SELECT blogs.*, SUBSTRING(blogs.content, 1, 500) AS content FROM blogs
+    SELECT blogs.*, SUBSTRING(blogs.content, 1, 1000) AS content FROM blogs
     WHERE blogs.spaceId = ?
     ORDER BY blogs.timestamp DESC
     LIMIT ? OFFSET ?
@@ -500,7 +500,7 @@ export class SqlDataStore implements DataStoreDao {
 
   async getUserBlogs(userId: string, pageSize: number, offset: number): Promise<Blog[]> {
     const query = `
-    SELECT blogs.*, SUBSTRING(blogs.content, 1, 500) AS content
+    SELECT blogs.*, SUBSTRING(blogs.content, 1, 1000) AS content
     FROM blogs
     JOIN spaces ON blogs.spaceId = spaces.id
     WHERE blogs.userId = ? AND spaces.status = 'public'

diff --git a/frontend/src/components/BlogIcon.tsx b/frontend/src/components/BlogIcon.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { isArabic } from '../utils/assists';
 import { LikeBlogButton } from './LikeBlogButton';
+import { MyMarkdown } from './MyMarkdown';
 
 export const BlogIcon: React.FC<{ post: Blog }> = ({ post }) => {
   return (
@@ -33,7 +34,17 @@ export const BlogIcon: React.FC<{ post: Blog }> = ({ post }) => {
         </div>
 
         <div className="blog-excerpt">
-          <p className={isArabic(post.content) ? 'arabic' : ''}>{post.content}</p>
+          <div
+            style={{
+              direction: isArabic(post.content) ? 'rtl' : 'ltr',
+              textAlign: isArabic(post.content) ? 'right' : 'left',
+              unicodeBidi: isArabic(post.content) ? 'embed' : 'normal',
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            <MyMarkdown markdown={post.content} />
+          </div>
+          {/* <p className={isArabic(post.content) ? 'arabic' : ''}>{post.content} </p> */}
         </div>
       </div>
     </div>

diff --git a/frontend/src/hooks/useProfileData.ts b/frontend/src/hooks/useProfileData.ts
@@ -61,6 +61,7 @@ export const useGetAllMissedMsgs = () => {
 
   const query = useQuery<AllUnReadMsgsRes, ApiError>(key, getAllUnReadMsgsApi(), {
     enabled: !!currUser?.jwt,
+    refetchOnWindowFocus: 'always',
   });
 
   return { missedMsgs: query.data?.numberOfMsgs };

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -12,7 +12,6 @@ export const Home = () => {
   return (
     <div className="home">
       <main>
-        {error && <p className="error">{error?.message}</p>}
         {!!feeds?.length && (
           <>
             <BlogList posts={feeds} />

diff --git a/frontend/src/styles/blogDetails.css b/frontend/src/styles/blogDetails.css
@@ -37,6 +37,12 @@
   padding: 16px;
 }
 
+.blog-content img {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
 #read-blog {
   margin-bottom: 100px;
 }

diff --git a/frontend/src/styles/blogList.css b/frontend/src/styles/blogList.css
@@ -9,7 +9,7 @@
 
 .blog-preview {
     /* grid: 2fr 1fr; */
-    padding: 15px;
+    padding: 4px;
     border: 1px solid #ddd;
     border-radius: 8px;
     background: #fafafa;
@@ -56,7 +56,7 @@ time {
     font-weight: 600;
     margin-bottom: 5px;
     padding: 5px;
-    display: block;
+    /* display: block; */
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
@@ -67,6 +67,12 @@ time {
     -webkit-box-orient: vertical;
 }
 
+.blog-excerpt p * {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+}
+
 .blog-excerpt .arabic {
     direction: rtl;
     text-align: right;
@@ -149,28 +155,8 @@ time {
 }
 
 @media screen and (max-width: 600px) {
-    .blog-list {
-        grid-template-columns: 1fr;
-    }
-
     .blog-preview {
-        margin-left: 16px;
-        margin-right: 16px;
-    }
-
-    .blog-header h2 {
-        font-size: 16px;
-    }
-
-    .blog-preview .blog-meta {
-        font-size: 12px;
-    }
-
-    .blog-meta * {
-        font-size: 4px;
-    }
-
-    .blog-excerpt p {
-        font-size: 14px;
+        margin-left: 4px;
+        margin-right: 4px;
     }
 }
diff --git a/frontend/src/styles/user-profile.css b/frontend/src/styles/user-profile.css
@@ -52,7 +52,6 @@
 }
 
 .user-information {
-  width: 300px;
   border: 1px solid #ccc;
   border-radius: 10px;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
@@ -127,7 +126,6 @@
   box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
 }
 
-/* User space link */
 .space-link {
   display: flex;
   align-items: center;
@@ -138,7 +136,6 @@
   color: var(--primary);
 }
 
-/* User space link hover effect */
 .space-link:hover {
   background-color: #f2f2f2;
 }
@@ -155,11 +152,7 @@
     gap: 20px;
   }
 
-  .user-profile h1 {
-    font-size: 24px;
-  }
-
-  .user-profile h2 {
-    font-size: 18px;
+  .user-profile .blog-list {
+    grid-template-columns: 1fr;
   }
 }