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

Improve Dashboard Site Homepage #817

Merged
merged 8 commits into from
Sep 21, 2024
Merged

Improve Dashboard Site Homepage #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 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
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
10 changes: 8 additions & 2 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 Down Expand Up @@ -529,7 +532,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
91 changes: 62 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,21 +78,30 @@
</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"
Expand All @@ -103,9 +112,12 @@
</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">
Manage requests for various resources and services.
</p>
</a>
<a
id="extension-requests-link"
Expand All @@ -121,28 +133,49 @@
>
Task Requests
</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
50 changes: 47 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ body {
}

.buttonSection {
margin-top: 10px;
height: 80vh;
display: flex;
justify-content: center;
Expand Down Expand Up @@ -99,9 +100,10 @@ footer {
}

.action-button {
width: 350px;
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 +114,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 Down Expand Up @@ -236,11 +275,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