Fix : fixed the broken UI of discord users in mobile view with some U…

…I enhancements. (#551) * fix : fix the broken UI of discord users in mobile view * style : Modified style.css * Update UserDetailsSection.js * Tests: Added tests --------- Co-authored-by: Achintya Chatterjee <[email protected]>
Real-Dev-Squad · Oct 14, 2023 · 1494836 · 1494836
1 parent c01e989
commit 1494836
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 31 deletions.
diff --git a/__tests__/users/App.test.js b/__tests__/users/App.test.js
@@ -86,4 +86,65 @@ describe('App Component', () => {
     const url = await page.url();
     expect(url).toContain('?tab=verified');
   });
+
+  it('should not display user details section initially when window width is less than 600 pixels', async () => {
+    await page.setViewport({ width: 599, height: 768 });
+
+    await page.waitForSelector('.user_details_section');
+
+    const userDetailsSection = await page.$('.user_details_section');
+    const overlay = await page.$('#overlay');
+
+    const userDetailsSectionStyle = await page.evaluate((element) => {
+      return getComputedStyle(element).display;
+    }, userDetailsSection);
+
+    const overlayStyle = await page.evaluate((element) => {
+      return getComputedStyle(element).display;
+    }, overlay);
+
+    expect(overlayStyle).toBe('none');
+    expect(userDetailsSectionStyle).toBe('none');
+  });
+
+  it('should display user details section when clicking on user_card', async () => {
+    await page.setViewport({ width: 599, height: 768 });
+
+    await page.click('.user_card');
+
+    const userDetailsSection = await page.$('.user_details_section');
+    const overlay = await page.$('#overlay');
+
+    const userDetailsSectionStyle = await page.evaluate((element) => {
+      return getComputedStyle(element).display;
+    }, userDetailsSection);
+
+    const overlayStyle = await page.evaluate((element) => {
+      return getComputedStyle(element).display;
+    }, overlay);
+
+    expect(overlayStyle).toBe('block');
+    expect(userDetailsSectionStyle).toBe('block');
+  });
+
+  it('should hide user details section when clicking on the overlay', async () => {
+    await page.setViewport({ width: 599, height: 768 });
+
+    const userDetailsSection = await page.$('.user_details_section');
+    const overlay = await page.$('#overlay');
+
+    expect(overlay).toBeDefined();
+    await page.click('#overlay', { offset: { x: 10, y: 10 } });
+
+    const userDetailsSectionStyle = await page.evaluate((element) => {
+      return getComputedStyle(element).display;
+    }, userDetailsSection);
+
+    const overlayStyle = await page.evaluate((element) => {
+      return getComputedStyle(element).display;
+    }, overlay);
+
+    expect(userDetailsSectionStyle).toBe('none');
+    expect(overlayStyle).toBe('none');
+  });
 });
diff --git a/style.css b/style.css
@@ -12,6 +12,7 @@
   --failure-color: #f44336;
   --lightblue-color: #0d6efd;
   --lightgray-color: #d7d6d6;
+  --link-color: #4d4dff;
 }
 
 body {

diff --git a/users/discord/App.js b/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']);
   }
 };
 

diff --git a/users/discord/components/TabsSection.js b/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],
       );

diff --git a/users/discord/components/UserDetailsSection.js b/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: '_blank',
+            href: `${USER_MANAGEMENT_URL}${username}`,
+          },
+          [`${USER_MANAGEMENT_URL}${username}`],
+        ),
+      ]),
+    ]),
   ]);
 };
diff --git a/users/discord/index.html b/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>

diff --git a/users/discord/style.css b/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%;
+  }
+}