fix(*): update articles page

HoseaCodes · Feb 11, 2024 · 71240ed · 71240ed
1 parent 8dc0aab
commit 71240ed
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/src/Components/Skeleton/skeleton.css b/src/Components/Skeleton/skeleton.css
@@ -68,7 +68,8 @@
   width: 50%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.2);
-  transform: skewX(-20deg);
+  border-radius: 5%;
+  /* transform: skewX(-20deg); */
   box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.05);
 }
 

diff --git a/src/Components/Skeleton/skeletonBlog.jsx b/src/Components/Skeleton/skeletonBlog.jsx
@@ -1,27 +1,31 @@
 import React from 'react';
 import SkeletonElement from './skeletonElement';
 import Shimmer from './shimmer';
+import Skeleton from "react-loading-skeleton";
 
 const SkeletonBlog = () => {
     return (
-        <div className="skeleton-wrapper skeleton-blog col-lg-11 ">
-          <div style={{display: 'flex'}}>
-            <div className="article-card">
-                <SkeletonElement type="avatar"/>
+      <div className="skeleton-wrapper skeleton-blog col-lg-11 ">
+        <div style={{ display: "flex" }}>
+          <div className="article-card">
+            <div style={{display: 'flex', flexDirection: 'column', alignItems: 'baseline', justifyContent: 'flex-start'}}>
+              <SkeletonElement type="avatar" />
+              <Skeleton width={100} />
             </div>
+          </div>
 
-            <div className='article-content'>
-                <SkeletonElement type="title" />
-                <SkeletonElement type="text" />
-                <SkeletonElement type="text" />
-                <SkeletonElement type="text" />
-                <SkeletonElement type="text" />
-                <SkeletonElement type="text" />
-            </div>
+          <div className="article-content">
+            <SkeletonElement type="title" />
+            <SkeletonElement type="text" />
+            <SkeletonElement type="text" />
+            <SkeletonElement type="text" />
+            <SkeletonElement type="text" />
+            <SkeletonElement type="text" />
           </div>
-            <Shimmer/>
         </div>
-    )
+        <Shimmer />
+      </div>
+    );
 }
 
 export default SkeletonBlog;
diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx
@@ -38,7 +38,8 @@ const ArticleItem = () => {
                 user.name !== "" && 
                 <SideBar className='d-none d-lg-block'/>
             }
-            <MainContainer viewComment={viewComment} setViewComment={setViewComment}  user={user} articles={articles} timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
+            <MainContainer viewComment={viewComment} setViewComment={setViewComment}  user={user} articles={articles} 
+            timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
             <RightColumn setViewComment={setViewComment} viewComment={viewComment} user={user} articles={articles}/>
           </main>
         </>