Skip to content

Commit

Permalink
Improve Dashboard Site Homepage (#817)
Browse files Browse the repository at this point in the history 
* commit01

* commit2

* commit03

* Run prettier command

* fixed Errors in home.test.js

* fixed the responsiveness of dashboard

* fixed the font weight of description and title

* fixed the dashboard buttons design
  • Loading branch information
@Nikhil-Kumar1
Nikhil-Kumar1 authored Sep 21, 2024
1 parent 22305a5 commit 1182360
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 34 deletions.
10 changes: 8 additions & 2 deletions __tests__/home/home.test.js
View file
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
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
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;
}
}

0 comments on commit 1182360

Please sign in to comment.