Fix : fixed the broken UI of discord users in mobile view with some UI enhancements.

style.css

@@ -10,6 +10,7 @@
   --blue-color: #1d1283;
   --success-color: green;
   --failure-color: #f44336;
+  --link-color: #4d4dff;
 }
 
 body {

users/discord/App.js

@@ -38,6 +38,23 @@ const handleTabNavigation = async (e) => {
 };
 
 const handleUserSelected = (e) => {
+  const userDetailsSection = document.querySelector('.user_details_section');
+  const overlay = document.getElementById('overlay');
+
+  if (window.innerWidth < 600) {
+    overlay.style.display = 'block';
+    userDetailsSection.style.display = 'block';
+    document.body.style.overflow = 'hidden';
+
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        overlay.style.display = 'none';
+        userDetailsSection.style.display = 'none';
+        document.body.style.overflow = 'auto';
+      }
+    });
+  }
+
   const selectedUserId =
     e.target?.getAttribute('data_key') ||
     e.target.parentElement?.getAttribute('data_key');
@@ -46,7 +63,6 @@ const handleUserSelected = (e) => {
     showUser = usersData[activeTab]?.findIndex(
       (user) => user.id === selectedUserId,
     );
-    rerender(App(), window['root']);
   }
 };
 

users/discord/components/TabsSection.js

@@ -9,7 +9,7 @@ export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
         'span',
         {
           data_key: `${tabItem.id}`,
-          class: `tab ${activeTab === tabItem.id ? 'active_tab' : ''}`,
+          class: `tab ${activeTab === tabItem.id ? 'active_tab_link' : ''}`,
         },
         [tabItem.display_name],
       );

users/discord/components/UserDetailsSection.js

@@ -2,35 +2,46 @@
 const { createElement } = react;
 
 export const UserDetailsSection = ({
-  user: { first_name, username, discordId, discordJoinedAt },
+  user: { first_name, username, discordId, discordJoinedAt, picture },
 }) => {
   return createElement('section', { class: 'user_details_section' }, [
-    createElement('div', { class: 'user_details_field' }, [
-      createElement('span', {}, ['Name: ']),
-      createElement('span', {}, [first_name]),
-    ]),
-    createElement('div', { class: 'user_details_field' }, [
-      createElement('span', {}, ['Username: ']),
-      createElement('span', {}, [username]),
-    ]),
-    createElement('div', { class: 'user_details_field' }, [
-      createElement('span', {}, ['Discord ID: ']),
-      createElement('span', {}, [discordId]),
-    ]),
-    createElement('div', { class: 'user_details_field' }, [
-      createElement('span', {}, ['Joined RDS server on: ']),
-      createElement('span', {}, [new Date(discordJoinedAt).toUTCString()]),
-    ]),
-    createElement('div', { class: 'user_details_field' }, [
-      createElement('span', {}, ['User Management: ']),
+    createElement('span', { class: 'profile_pic_container' }, [
       createElement(
-        'a',
-        {
-          target: '_bllank',
-          href: `${USER_MANAGEMENT_URL}${username}`,
-        },
-        [`${USER_MANAGEMENT_URL}${username}`],
+        'img',
+        { src: picture?.url ?? dummyPicture },
+        { class: 'profile_pic' },
       ),
     ]),
+    createElement('div', { class: 'user_details_container' }, [
+      createElement('div', { class: 'user_details_field' }, [
+        createElement('span', { class: 'user_info' }, ['Name : ']),
+        createElement('span', {}, [first_name]),
+      ]),
+      createElement('div', { class: 'user_details_field' }, [
+        createElement('span', { class: 'user_info' }, ['Username : ']),
+        createElement('span', {}, [username]),
+      ]),
+      createElement('div', { class: 'user_details_field' }, [
+        createElement('span', { class: 'user_info' }, ['Discord ID : ']),
+        createElement('span', {}, [discordId]),
+      ]),
+      createElement('div', { class: 'user_details_field' }, [
+        createElement('span', { class: 'user_info' }, [
+          'Joined RDS server on : ',
+        ]),
+        createElement('span', {}, [new Date(discordJoinedAt).toUTCString()]),
+      ]),
+      createElement('div', { class: 'user_details_field' }, [
+        createElement('span', { class: 'user_info' }, ['User Management : ']),
+        createElement(
+          'a',
+          {
+            target: '_bllank',
+            href: `${USER_MANAGEMENT_URL}${username}`,
+          },
+          [`${USER_MANAGEMENT_URL}${username}`],
+        ),
+      ]),
+    ]),
   ]);
 };

users/discord/index.html

@@ -9,10 +9,24 @@
     <title>Discord Users | Real Dev Squad</title>
   </head>
   <body>
+    <div class="overlay" id="overlay"></div>
     <header class="header">
       <h1>Discord Users</h1>
     </header>
     <div id="root"></div>
+    <footer>
+      <p class="info-repo">
+        The contents of this website are deployed from this
+        <a
+          class="info-repo-link"
+          href="https://github.com/Real-Dev-Squad/website-dashboard"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open sourced repo
+        </a>
+      </p>
+    </footer>
   </body>
   <script src="utils/react.js"></script>
   <script src="/constants.js"></script>

users/discord/style.css

@@ -2,6 +2,17 @@
   --light-gray: #d4d4d478;
 }
 
+.overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0 0 0 / 66%);
+  z-index: 999;
+}
+
 .header {
   background-color: var(--blue-color);
   text-align: center;
@@ -15,7 +26,7 @@ main {
   grid-template-areas:
     'tab tab '
     'aside details';
-  height: 100vh;
+  height: 80vh;
 }
 
 .users_section {
@@ -36,6 +47,12 @@ main {
   cursor: pointer;
 }
 
+.active_tab_link {
+  color: var(--blue-color);
+  font-weight: 600;
+  border-bottom: 3px solid var(--blue-color);
+}
+
 .active_tab {
   border: 2px solid gray;
 }
@@ -45,7 +62,7 @@ main {
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-block: 0.5rem;
+  margin-bottom: 10px;
   width: 100%;
   background-color: var(--light-gray);
   cursor: pointer;
@@ -59,18 +76,122 @@ main {
 }
 
 .user_details_section {
-  grid-area: details;
-  padding: 1rem;
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 3rem;
   margin: 0 1rem;
   background-color: var(--light-gray);
 }
 
+.user_details_container {
+  width: 60%;
+  overflow-wrap: break-word;
+}
+
+.profile_pic_container {
+  height: 35%;
+  flex: 0 0 25%;
+  text-align: center;
+}
+
+.profile_pic_container img {
+  width: 55%;
+  height: auto;
+  border-radius: 50%;
+}
+
 .user_details_field {
   padding: 0.5rem;
 }
+
+.user_details_field a {
+  color: var(--link-color);
+}
+
+.user_info {
+  color: var(--blue-color);
+}
+
 .no_user_found {
   width: 100vw;
   text-align: center;
   font-size: larger;
   padding: 2rem;
 }
+
+/* MEDIA QUERY */
+
+@media only screen and (max-width: 600px) {
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .active_tab {
+    border: none;
+  }
+
+  .users_section {
+    width: 95%;
+  }
+
+  .user_details_section {
+    display: none;
+    background: white;
+    position: absolute;
+    top: 20rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: auto;
+    z-index: 1000;
+    padding: 2rem 0;
+    border-radius: 1rem;
+  }
+
+  .profile_pic_container {
+    display: block;
+  }
+
+  .profile_pic_container img {
+    width: 35%;
+    margin-bottom: 1rem;
+  }
+
+  .user_details_container {
+    margin: auto;
+    width: 80%;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .user_details_section {
+    width: 90%;
+  }
+
+  .user_details_container {
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 900px) {
+  .user_details_section {
+    flex-direction: column;
+    align-items: center;
+    padding-top: 0;
+  }
+
+  .profile_pic_container img {
+    width: 30%;
+  }
+
+  .user_details_container {
+    width: 90%;
+  }
+}
+
+@media only screen and (min-width: 900px) and (max-width: 1200px) {
+  .profile_pic_container img {
+    width: 80%;
+  }
+}