Added some finishing touches to the dashboard(enhanced responsiveness for mobile devices). Working on responivesness for tablets

Author: Programming-Sai

src/app/admin/dashboard/dashboard.module.css

@@ -110,23 +110,18 @@
 
 
 
-@media screen and (max-width:480px) {
-    .topContainer{
-        flex-direction: column;
-    }
-}
-
 .secondRow {
     display: grid;
     width: 100%;
     gap: 20px;
     grid-template-columns: repeat(3, 1fr);
     grid-template-areas: 
       "a a b"
-      "e d b"
-      "c f f"
-      "c h g"
+      "c d b"
+      "f f f"
+      "e h h"
       "i i g"
+      "i i g"   
 ; 
     grid-auto-rows: 200px auto fit-content;
     margin-top: 20px;
@@ -173,7 +168,8 @@
 
 .card6{
     grid-area: f;
-    height: 400px;
+    height: 480px;
+    padding: 20px 100px !important;
 }
 
 .card7{
@@ -185,11 +181,55 @@
 
 .card8{
     grid-area: h;
-    display: none !important;
+    width: 100%;
+    height: 400px;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start; 
 }
 
 
 .card9{
     grid-area: i;
     height: 500px;
 }
+
+
+
+@media screen and (max-width:640px) {
+    .container{
+        width: 100%;
+        left: 0;
+        
+    }
+    .topContainer{
+        flex-direction: column;
+    }
+    .card6{
+        padding: 10px !important;
+    }
+
+    .card{
+        width: 100% !important;
+    }
+    
+    .card5{
+        width: 400px !important;
+    } 
+
+    .secondRow {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: column;
+    }   
+}
+
+@media screen and (max-width:480px) {
+
+    .card5{
+        width: 340px !important;
+    }
+}

src/app/admin/dashboard/page.jsx

@@ -6,26 +6,21 @@ import Card from '@/components/card/Card';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEarth, faNewspaper, faStopwatch, faTv } from '@fortawesome/free-solid-svg-icons';
 import PopularPosts from '@/components/popularposts/PopularPosts';
-import { PostPerformanceChart, GrowthRateChart, ContentEngagementChart, TrafficSourcesChart  } from '@/components/charts/Charts';
+import { PostPerformanceChart, GrowthRateChart, ContentEngagementChart, TrafficSourcesChart, SEOMetrics  } from '@/components/charts/Charts';
 import AdminCommentsSection from '@/components/admincommentssection/AdminCommentsSection';
 import AdminRecentPosts from '@/components/adminrecentpost/AdminRecentPosts';
 import ServerStatus from '@/components/serverstatus/ServerStatus';
+import Glow from '@/components/glow/Glow';
 
 
 
 const DashBoard = () => {
   const { toggleSidePane } = useContext(ThemeContext);
 
-  const circumference = 2 * Math.PI * 36;
 
-
-
-  
   return (
-    <div className={`${styles.container} ${toggleSidePane ? styles.active : ''}`} style={toggleSidePane ? {'--left': '80px', zIndex:10} : {'--left': '250px', zIndex:10}}>
+    <div className={`${styles.container} ${toggleSidePane ? styles.active : ''}`} style={toggleSidePane ? {'--left': '80px', zIndex:10} : {'--left': '240px', zIndex:10}}>
 
-
-
       <div className={styles.topContainer}>
           <Card className={styles.cardTop} justify={'space-between'}>
             <div className={styles.text}>
@@ -76,16 +71,13 @@ const DashBoard = () => {
           </Card>
       </div>
 
-
-
-
-
       <div className={styles.secondRow}>
           <Card className={`${styles.card} ${styles.card1}`}>
               <PostPerformanceChart />
           </Card>
+          
 
-          <PopularPosts className={`${styles.card} ${styles.card2}`} borderRad='5px' marginBlock='0' isOutline='0' />
+          <PopularPosts glow={false} imageWidth={10} className={`${styles.card} ${styles.card2}`} borderRad='5px' marginBlock='0' isOutline='0' />
 
 
           <Card className={`${styles.card} ${styles.card3}`}>
@@ -109,7 +101,7 @@ const DashBoard = () => {
           </Card>
 
           <Card className={`${styles.card} ${styles.card8}`}>
-              Number of Drafts, Published and Scheduled OR Popular Posts
+             <SEOMetrics />
           </Card>
 
           <Card className={`${styles.card} ${styles.card9}`}>

src/app/admin/globals.css

@@ -4,7 +4,6 @@
     color: var(--text-color);
     width: 100vw;
     overflow: hidden;
-    /* overflow: scroll; */
 }
 
 .wrapper{

src/app/globals.css

@@ -10,7 +10,7 @@
     --back-color: rgba(6,120,11,0.6);
     --footer-bg: rgba(217, 217, 217, 0.43);
     --brightness: 0.2;
-    --alpha: 0.5;
+    --alpha: 0.3;
 }
 
 .dark{
@@ -43,11 +43,11 @@ body, html {
     height: 100%;
     min-height: 100vh;
     scroll-behavior: smooth;
-    font-family: 'Open Sans', sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    font-family: 'Merriweather', Georgia, serif;
+body, html, h1, h2, h3, h4, h5, h6 {
+    font-family: 'Open Sans', sans-serif;
+
 }
 
 a, li {

src/components/admincommentssection/admincommentssection.module.css

@@ -17,6 +17,9 @@
     padding: 8px;
     text-align: left;
   }
+  .commentsTable thead{
+    background-color: var(--back-color);
+}
 
   .commentsTable th {
     font-weight: bold;

src/components/adminrecentpost/AdminRecentPosts.jsx

@@ -65,6 +65,9 @@ const AdminRecentPosts = () => {
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentSlide((prevSlide) => (prevSlide + 1) % totalSlides);
+      if (currentSlide === totalSlides-1){
+        sliderData.push(sliderData.shift())
+      }
     }, 5000); 
 
     return () => clearInterval(interval); 

src/components/adminrecentpost/adminrecentpost.module.css

@@ -16,7 +16,7 @@
 }
 
 .sliderItems{
-    width: 400px;
+    width: 380px;
     height: 100%;
     position: relative;
     justify-content: flex-start;
@@ -137,4 +137,33 @@
       transform: scale(1);
     }
   }
-  
+  
+
+@media screen and (max-width:640px) {
+    .sliderItems{
+        width: 400px;
+    }
+}
+
+@media screen and (max-width:480px) {
+    .sliderItems{
+        width: 340px;
+    }
+    .textContainer h4, .textContainer p:first-child, .textContainer{
+        width: 105%;
+    }
+    .stats {
+        display: grid;  
+        grid-template-columns: repeat(3, 1fr); 
+        gap: 10px;  
+        width: 10%;  
+    }
+
+    .stat {
+        width: 90px; 
+    }
+    .stat:last-child {
+        grid-column: span 5;
+        width: 93.5%;
+    }
+}

src/components/card/card.module.css

@@ -8,6 +8,10 @@
     transition: all 0.9s ease;
 }
 
+.container::-webkit-scrollbar{
+    width: 10px;
+}
+
 
 .container:hover{
     border: 1px solid var(--border-color);