-
+
+
diff --git a/groups/script.js b/groups/script.js
index 3597a8d8..eda96790 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -15,8 +15,7 @@ import {
getUserGroupRoles,
getSearchValueFromURL,
} from './utils.js';
-const groupTabs = document.querySelector('.groups-tab');
-const tabs = document.querySelectorAll('.groups-tab div');
+const tabs = document.querySelectorAll('.Header_link');
const sections = document.querySelectorAll('.manage-groups, .create-group');
const loader = document.querySelector('.backdrop');
const userIsNotVerifiedText = document.querySelector('.not-verified-tag');
@@ -24,7 +23,27 @@ const params = new URLSearchParams(window.location.search);
const searchValue = getSearchValueFromURL();
const isDev = params.get(DEV_FEATURE_FLAG) === 'true';
const dropdownContainer = document.getElementById('dropdown_container');
+const githubAuth = document.getElementById('github_auth');
+function goToAuthPage() {
+ const authUrl = `https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97&}&state=${window.location.href}`;
+ window.open(authUrl, '_self');
+}
+
+const hamburgerDiv = document.querySelector('.hamburger');
+const navLinks = document.querySelector('.links');
+let toggle = true;
+
+hamburgerDiv.addEventListener('click', function () {
+ if (toggle) {
+ navLinks.classList.add('active');
+ toggle = false;
+ } else {
+ navLinks.classList.remove('active');
+ toggle = true;
+ }
+});
+githubAuth.addEventListener('click', goToAuthPage);
//Dropdown
const dropdownMain = document.getElementById('dropdown_main');
const dropdownTxt = document.getElementById('sortby_text');
@@ -45,6 +64,7 @@ if (searchValue) {
}
//User Data
const userSelfData = await getUserSelf();
+
let UserGroupData = await getUserGroupRoles();
/**
@@ -77,9 +97,13 @@ const createAuthorDetailsDOM = (firstName, lastName, imageUrl) => {
* GET SELF DATA
*/
const IsUserVerified = !!userSelfData.discordId;
-const IsUserArchived = userSelfData.roles.archived;
-if (!IsUserVerified || IsUserArchived) {
- userIsNotVerifiedText.classList.remove('hidden');
+const IsUserArchived = userSelfData?.roles?.archived;
+if (userSelfData.statusCode !== 401) {
+ const signInButton = document.querySelector('.sign-in-btn');
+ signInButton.style.display = 'none';
+ if (!IsUserVerified || IsUserArchived) {
+ userIsNotVerifiedText.classList.remove('hidden');
+ }
}
const memberAddRoleBody = {
userid: userSelfData?.discordId,
@@ -102,7 +126,6 @@ const renderGroups = () => {
const formattedRoleName = removeGroupKeywordFromDiscordRoleName(
item.rolename,
);
-
//If searchValue present, filter out the list
if (searchValue) {
group.style.display = formattedRoleName
@@ -190,6 +213,13 @@ tabs?.forEach((tab, index) => {
sections.forEach((section) => {
section.classList.add('hidden');
});
+ tabs.forEach((t) => {
+ if (t.classList.contains('Header_active')) {
+ t.classList.remove('Header_active');
+ } else {
+ t.classList.add('Header_active');
+ }
+ });
sections[index].classList.remove('hidden');
});
});
@@ -197,12 +227,6 @@ tabs?.forEach((tab, index) => {
/**
* FOR CHANGING TABS
*/
-groupTabs.addEventListener('click', (e) => {
- tabs.forEach((tab) => {
- tab.classList?.remove('active-tab');
- });
- if (e.target.nodeName !== 'NAV') e.target?.classList?.add('active-tab');
-});
function isRoleIdInData(data, targetRoleId) {
// Use the some() method to check if any element in data.groups has a matching roleId
return data.groups.some((group) => group.roleId === targetRoleId);
diff --git a/groups/style.css b/groups/style.css
index ad007913..678c6827 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -1,3 +1,7 @@
+:root {
+ --toastify-text-color-light: #757575;
+}
+
* {
margin: 0;
padding: 0;
@@ -123,15 +127,10 @@
align-items: center;
justify-content: center;
}
-.groups-search-input {
- height: 2rem;
- width: 90%;
- padding-left: 2px;
-}
.groups-list {
padding: 0.8rem;
list-style: none;
- height: 66vh;
+ height: 74vh;
overflow-y: scroll;
}
.groups-list::-webkit-scrollbar {
@@ -147,7 +146,7 @@
border: 1px solid var(--color-list-border);
margin-bottom: 0.6rem;
border-radius: 0.6rem;
- min-width: 12rem;
+ min-width: 40rem;
}
.groups-list li:hover {
cursor: pointer;
@@ -229,6 +228,7 @@
.btn-add-role {
margin: 5px;
+ min-width: 40rem;
}
#no-results-message {
@@ -286,11 +286,6 @@ NOT VERIFIED TEXT ABOVE
text-align: center;
}
-.dropdown {
- position: relative;
- display: inline-block;
-}
-
.dropdown-content {
display: none;
position: absolute;
@@ -299,6 +294,7 @@ NOT VERIFIED TEXT ABOVE
overflow: auto;
border: 1px solid var(--color-group-dropdown-border-color);
z-index: 1;
+ text-align: justify;
}
.dropdown-content a {
@@ -307,10 +303,6 @@ NOT VERIFIED TEXT ABOVE
display: block;
}
-.dropdown a:hover {
- background-color: var(--color-group-dropdown-border-color);
-}
-
.show_filter {
display: block;
}
@@ -319,7 +311,7 @@ NOT VERIFIED TEXT ABOVE
cursor: pointer;
}
-.task_filter-button {
+.filter-button {
width: 5rem;
height: 2rem;
border-radius: 0.27rem 0 0 0.27rem;
@@ -335,7 +327,7 @@ NOT VERIFIED TEXT ABOVE
border: 1px solid var(--color-group-dropdown-border-color);
}
-.task_filter-button:after {
+.filter-button:after {
content: '';
border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent;
@@ -343,13 +335,130 @@ NOT VERIFIED TEXT ABOVE
margin-left: 0.5rem;
}
+.sub_menu {
+ padding-top: 0.6rem;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 0 2rem;
+ border-bottom: 1px solid var(--toastify-text-color-light);
+}
+
+.Header_link {
+ padding: 0.6rem;
+ text-decoration: none;
+ font-weight: 700;
+ color: #041484;
+ cursor: pointer;
+ background: none;
+ border: none;
+ position: relative;
+ width: auto;
+}
+
+.Header_link__vertical:after {
+ content: '';
+ position: absolute;
+ height: 1rem;
+ width: 2px;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.467);
+}
+
+.Header_active {
+ color: #e30464;
+}
+
+.groups_container {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ flex-wrap: nowrap;
+ align-items: center;
+ width: 100%;
+}
+
+.search_container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ margin: 1rem 0;
+ min-width: 40rem;
+ height: 2.5rem;
+ border-radius: 5px;
+ border: 1px solid #d0d7de;
+ position: relative;
+}
+
+.tasksearch_search-button-container__sk3_F {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 10rem;
+}
+
+.tasksearch_search-button__EfOo7 {
+ width: 100%;
+ height: 2rem;
+ border-radius: 5px;
+ background-color: #fff;
+ color: #000;
+ font-weight: 700;
+ cursor: pointer;
+ border: 1px solid gray;
+ outline: none;
+}
+
+#sortby_text {
+ height: 2rem;
+ position: relative;
+ border-radius: 5px 0 0 5px;
+ background-color: #fff;
+ color: #000;
+ font-weight: 700;
+ cursor: pointer;
+ border: none;
+ outline: none;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding-left: 5px;
+}
+
+.filter_container {
+ width: 8rem;
+}
+
+.groups-search-input {
+ width: 100%;
+ height: 2rem;
+ border-radius: 0 5px 5px 0;
+ outline: none;
+ background-image: url(https://img.icons8.com/ios-filled/16/000000/search.png);
+ background-repeat: no-repeat;
+ background-position: 0.5rem;
+ padding: 0.5rem 0.5rem 0.5rem 2rem;
+ background-color: #fff;
+ border: none;
+ border-left: 1px solid #d0d7de;
+}
+
+#sortby_text:after {
+ content: '';
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 5px solid #000;
+ margin-left: 0.5rem;
+}
+
@media (max-width: 650px) {
.btn-add-role {
position: static;
- }
- .manage-groups {
- flex-direction: column-reverse;
- padding: 1.2rem;
+ min-width: 21rem;
}
.manage-groups main {
padding: unset;
@@ -357,9 +466,17 @@ NOT VERIFIED TEXT ABOVE
}
.groups-list {
- height: 54vh;
+ height: 75vh;
}
+
.group-name {
font-size: large;
}
+ .groups-list li {
+ min-width: auto;
+ }
+
+ .search_container {
+ min-width: 80%;
+ }
}
+
+
+
+
+
+
-
- Sort by
No results found.
- + +
+
+
+
+
+
+