Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved Dashboard Site Homepage #842

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

Improved Dashboard Site Homepage #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c585144
commit01
Nikhil-Kumar1 Sep 6, 2024
6b0f3db
commit2
Nikhil-Kumar1 Sep 6, 2024
8a48afe
commit03
Nikhil-Kumar1 Sep 7, 2024
39b7b98
Run prettier command
Nikhil-Kumar1 Sep 8, 2024
155495d
fixed Errors in home.test.js
Nikhil-Kumar1 Sep 11, 2024
9bbc573
fixed the responsiveness of dashboard
Nikhil-Kumar1 Sep 12, 2024
9bf4790
fixed the font weight of description and title
Nikhil-Kumar1 Sep 15, 2024
5968a40
fixed the dashboard buttons design
Nikhil-Kumar1 Sep 18, 2024
2244976
fixed the responsiveness of the super User buttons
Nikhil-Kumar1 Sep 22, 2024
24f4451
Merge branch 'Real-Dev-Squad:develop' into develop
Nikhil-Kumar1 Sep 22, 2024
69ca112
fixed the description
Nikhil-Kumar1 Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions __tests__/home/home.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,10 @@ describe('Home Page', () => {
discordUsersButton,
);
const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
expect(trimmedDiscordUsersButtonText).toBe('Discord Users');

expect(trimmedDiscordUsersButtonText).toBe(
'Discord Users\n\nManage Discord user roles and activities.',
);
});

it('should display the User Management anchor button', async () => {
Expand All @@ -364,7 +367,9 @@ describe('Home Page', () => {
userManagementButton,
);
const trimmedUserManagementButtonText = userManagementButtonText.trim();
expect(trimmedUserManagementButtonText).toBe('User Management');
expect(trimmedUserManagementButtonText).toBe(
'User Management\n\nView requests for various resources and services.',
);
});

it('should display the Sync Repo button', async () => {
Expand Down Expand Up @@ -529,7 +534,10 @@ describe('Home Page', () => {
applicationButton,
);
const trimmedApplicationButtonText = applicationButtonText.trim();
expect(trimmedApplicationButtonText).toBe('Applications');

expect(trimmedApplicationButtonText).toBe(
'Applications\n\nManage and review submitted applications.',
);
});

it('should close hamburger menu on clicking anywhere on the screen except the menu', async () => {
Expand Down
110 changes: 75 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,71 +78,111 @@
</section>

<section class="buttonSection">
<a
class="action-button element-display-remove"
href="/goal/index.html"
id="create-goal"
>
Create Goals
<a class="card" href="/goal/index.html" id="create-goal">
<h5 class="card__title">Create Goals</h5>
<p class="card__description">
Set and track goals to align efforts and measure progress.
</p>
</a>
<a class="action-button" href="/task/index.html"> Create Tasks </a>
<a class="action-button" href="/profile/index.html"> Profile </a>
<a
id="discord-user-link"
class="action-button"
href="/users/discord/index.html"
>
Discord Users

<a class="card" href="/task/index.html">
<h5 class="card__title">Create Tasks</h5>
<p class="card__description">
Define the tasks, create new tasks and track the progress.
</p>
</a>
<a class="card" href="/profile/index.html">
<h5 class="card__title">Profile</h5>
<p class="card__description">
View and edit your personal profile information.
</p>
</a>
<a id="discord-user-link" class="card" href="/users/discord/index.html">
<h5 class="card__title">Discord Users</h5>
<p class="card__description">
Manage Discord user roles and activities.
</p>
</a>
<a
id="user-management-link"
class="element-display-remove action-button"
class="element-display-remove card"
href="/users/index.html"
>
User Management
<h5 class="card__title">User Management</h5>
<p class="card__description">
View requests for various resources and services.
</p>
</a>
<a
id="requests-link"
class="action-button element-display-remove"
class="card element-display-remove"
href="/requests/index.html"
>Requests
><h5 class="card__title">Requests</h5>
<p class="card__description">Monitor and View user activity</p>
</a>
<a
id="extension-requests-link"
class="action-button element-display-remove"
class="card element-display-remove"
href="extension-requests"
>
Extension Requests
<h5 class="card__title">Extension Requests</h5>
<p class="card__description">
Submit requests for deadline extensions on tasks.
</p>
</a>
<a
id="task-requests-link"
class="action-button element-display-remove"
class="card element-display-remove"
href="task-requests"
>
Task Requests
<h5 class="card__title">Task Requests</h5>
<p class="card__description">
Request new tasks and provide task details,
</p>
</a>
<a href="/online-members/online-members.html" class="action-button">
Online Members
<a href="/online-members/online-members.html" class="card">
<h5 class="card__title">Online Members</h5>
<p class="card__description">
View the list of currently online members.
</p>
</a>
<a class="card" href="/groups/index.html">
<h5 class="card__title">Discord Groups</h5>
<p class="card__description">Manage Discord group memberships.</p>
</a>
<a class="card" href="/standup/index.html">
<h5 class="card__title">Standup Updates</h5>

<p class="card__description">Post and view daily standup updates.</p>
</a>
<a class="card" href="/identity-service-logs/index.html"
><h5 class="card__title">Identity Service Logs</h5>

<p class="card__description">
Review logs related to identity services.
</p>
</a>
<a class="action-button" href="/groups/index.html"> Discord Groups </a>
<a class="action-button" href="/standup/index.html"> Standup Updates</a>
<a class="action-button" href="/identity-service-logs/index.html"
>Identity Service Logs</a
>
<a
class="action-button element-display-remove"
class="card element-display-remove"
href="/feed/index.html"
id="create-activity-feed"
>
Activity Feed</a
<h5 class="card__title">Activity Feed</h5>
<p class="card__description">
View updates on activities and project progress.
</p></a
>
<a id="application-button" href="/applications" class="action-button">
Applications
<a id="application-button" href="/applications" class="card">
<h5 class="card__title">Applications</h5>
<p class="card__description">
Manage and review submitted applications.
</p>
</a>
<div class="button-container element-display-remove" id="sync-repo-div">
<button id="repo-sync-button" class="action-button">
<button id="repo-sync-button" class="card">
<span class="spinner"></span>
Sync Repo
<h5 class="card__title">Sync Repo</h5>
<p class="card__description">Sync repository to update the changes</p>
</button>
<div class="status" id="sync-repo-status-update"></div>
<div id="toast" class="hidden">
Expand Down
57 changes: 50 additions & 7 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body {
}

.buttonSection {
height: 80vh;
margin-top: 10px;
display: flex;
justify-content: center;
align-content: center;
Expand Down Expand Up @@ -62,7 +62,6 @@ button {
border-color: transparent;
}

/* profile section */
.profileSection {
height: 80vh;
display: flex;
Expand Down Expand Up @@ -99,9 +98,10 @@ footer {
}

.action-button {
width: 100%;
color: var(--black-color);
font-weight: 500;
font-size: larger;
font-weight: 600;
font-size: 1.1rem;
background-color: var(--white-color);
border: 2px solid var(--black-color);
border-radius: 5px;
Expand All @@ -112,13 +112,50 @@ footer {
text-decoration: none;
}

.card {
background-color: white;
text-decoration: none;
padding: 20px;
width: 280px;
border-radius: 15px;
border: 1px solid hsla(0, 0%, 92%, 1);
box-shadow: 1px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
}

.card:hover {
background-color: rgb(215, 230, 241);
transition: 0.5s ease;
}

.card__title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: hsla(0, 0%, 21%, 1);
}

.card__description {
margin-top: 0.6rem;
color: hsla(0, 0%, 21%, 0.75);
font-weight: 400;
font-size: 0.8rem;
line-height: 18px;
}

.action-button:hover,
.action-button:focus {
color: var(--white-color);
background-color: var(--blue-color);
border-color: var(--blue-color);
}

.description {
margin-top: 0.6rem;
font-weight: 400;
font-size: 0.8rem;
line-height: 18px;
}

#sync-buttons.element-display-remove {
display: none;
}
Expand All @@ -130,12 +167,13 @@ footer {
gap: 1.25rem;
margin-top: 3.12rem;
margin-bottom: 1.25rem;
padding: 0 6.25rem;
padding: 0 1.25rem;
flex-wrap: wrap;
}

#sync-buttons .button-container {
flex: 1 1 100%;
flex: 1 1 auto;

max-width: 250px;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -236,11 +274,16 @@ footer {
display: none !important;
}

@media only screen and (max-width: 600px) {
@media only screen and (max-width: 1200px) {
.buttonSection {
flex-direction: column;
height: auto;
padding: 15px;
}
.action-button {
text-align: center;
width: 100%;
padding: 10px;
font-size: medium;
}
}
Loading