Skip to content

Commit 52dcdda

Browse files
bukhosi-eugene-mpandebukhosi-eugene-mpande
committed
addition of topbar to admin page and update to notifications styling
1 parent 4b9d50f commit 52dcdda

File tree

19 files changed

+235
-229
lines changed

19 files changed

+235
-229
lines changed

‎src/client/src/app.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,92 @@
2222
.roboto {
2323
font-family: 'Roboto', sans-serif;
2424
}
25+
26+
.task {
27+
position: relative;
28+
color: #2e2e2f;
29+
background-color: #fff;
30+
padding: 1rem;
31+
border-radius: 8px;
32+
box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
33+
margin-bottom: 1rem;
34+
border: 3px dashed transparent;
35+
}
36+
37+
.task:hover {
38+
box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
39+
border-color: rgba(162, 179, 207, 0.2) !important;
40+
}
41+
42+
.task p {
43+
font-size: 15px;
44+
margin: 1.2rem 0;
45+
}
46+
47+
.tag {
48+
border-radius: 100px;
49+
padding: 4px 13px;
50+
font-size: 12px;
51+
color: #ffffff;
52+
background-color: var(--primary);
53+
}
54+
55+
.tags {
56+
width: 100%;
57+
display: flex;
58+
align-items: center;
59+
justify-content: space-between;
60+
}
61+
62+
.options {
63+
background: transparent;
64+
border: 0;
65+
color: #c4cad3;
66+
font-size: 17px;
67+
}
68+
69+
.options svg {
70+
fill: #9fa4aa;
71+
}
72+
73+
.stats {
74+
position: relative;
75+
width: 100%;
76+
color: #9fa4aa;
77+
font-size: 12px;
78+
display: flex;
79+
align-items: center;
80+
justify-content: space-between;
81+
}
82+
83+
.stats div {
84+
margin-right: 1rem;
85+
height: 20px;
86+
display: flex;
87+
align-items: center;
88+
}
89+
90+
.stats svg {
91+
margin-right: 5px;
92+
height: 100%;
93+
stroke: #9fa4aa;
94+
}
95+
96+
.viewer span {
97+
height: 30px;
98+
background-color: var(--primary);
99+
margin-right: -10px;
100+
border-radius: 50%;
101+
border: 1px solid #fff;
102+
display: grid;
103+
align-items: center;
104+
text-align: center;
105+
font-weight: bold;
106+
color: #fff;
107+
padding: 2px;
108+
}
109+
110+
.viewer span svg {
111+
stroke: #fff;
112+
}
113+

‎src/client/src/lib/components/admin/+Admins.svelte

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@
4141
</script>
4242

4343
<section class="container mx-auto my-2 px-4">
44-
<div class="flex items-center overflow-x-auto whitespace-nowrap py-4">
45-
<Breadcrumb aria-label="Default breadcrumb example">
46-
<BreadcrumbItem href="/" home>Home</BreadcrumbItem>
47-
<BreadcrumbItem href="/admins">Admins</BreadcrumbItem>
48-
</Breadcrumb>
49-
</div>
50-
5144
<div class="sm:flex sm:items-center sm:justify-between">
5245
<div>
5346
<div class="flex items-center gap-x-3">

‎src/client/src/lib/components/admin/+Lectures.svelte

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@
4141
</script>
4242

4343
<section class="container mx-auto my-2 px-4">
44-
<div class="flex items-center overflow-x-auto whitespace-nowrap py-4">
45-
<Breadcrumb aria-label="Default breadcrumb example">
46-
<BreadcrumbItem href="/" home>Home</BreadcrumbItem>
47-
<BreadcrumbItem href="/lecturers">Lecturers</BreadcrumbItem>
48-
</Breadcrumb>
49-
</div>
50-
5144
<div class="sm:flex sm:items-center sm:justify-between">
5245
<div>
5346
<div class="flex items-center gap-x-3">

‎src/client/src/lib/components/admin/+Students.svelte

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@
4141
</script>
4242

4343
<section class="container mx-auto my-2 px-4">
44-
<div class="flex items-center overflow-x-auto whitespace-nowrap py-4">
45-
<Breadcrumb aria-label="Default breadcrumb example">
46-
<BreadcrumbItem href="/" home>Home</BreadcrumbItem>
47-
<BreadcrumbItem href="/students">Students</BreadcrumbItem>
48-
</Breadcrumb>
49-
</div>
50-
5144
<div class="sm:flex sm:items-center sm:justify-between">
5245
<div>
5346
<div class="flex items-center gap-x-3">

‎src/client/src/lib/components/universal/+Announcements.svelte

Lines changed: 3 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,6 @@
11
<script lang="ts">
2-
const announcements = [
3-
{
4-
date: '10 Oct',
5-
heading: 'Campus Safety Drill',
6-
announcement:
7-
'A campus-wide safety drill will be conducted on October 15th at 10 AM. All students and staff are required to participate. Please review the safety procedures and follow instructions during the drill.',
8-
image:
9-
'https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'
10-
},
11-
{
12-
date: '12 Oct',
13-
heading: 'New Library Hours',
14-
announcement:
15-
'Starting October 20th, the university library will have extended hours. It will now be open from 8 AM to 12 AM, Monday through Friday, and 9 AM to 10 PM on weekends.',
16-
image:
17-
'https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'
18-
},
19-
{
20-
date: '15 Oct',
21-
heading: 'Guest Lecture Series',
22-
announcement:
23-
'We are excited to announce a new guest lecture series starting October 25th. Prominent speakers from various fields will be sharing their insights. All students and faculty are encouraged to attend.',
24-
image:
25-
'https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'
26-
}
27-
];
2+
import AnnouncementCard from '$lib/components/utils/universal/cards/+AnnCard.svelte';
3+
export let announcements;
284
</script>
295

306
<div class="bg-lightBgColor dark:bg-gray-800">
@@ -34,39 +10,6 @@
3410
</h1>
3511
</div>
3612
{#each announcements as announcement}
37-
<article class="flex bg-lightBgColor py-2 transition hover:shadow-xl dark:bg-gray-800">
38-
<div class="rotate-180 p-2 [writing-mode:_vertical-lr] dark:text-gray-300">
39-
<time
40-
datetime="2022-10-10"
41-
class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900 dark:text-gray-300"
42-
>
43-
<span class="w-px flex-1 bg-gray-900/10 dark:bg-gray-400"></span>
44-
<span>{announcement.date}</span>
45-
</time>
46-
</div>
47-
48-
<div class="flex flex-1 flex-col justify-between dark:bg-gray-800">
49-
<div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
50-
<a href="/">
51-
<h3 class="font-bold uppercase text-gray-900 dark:text-gray-300">
52-
{announcement.heading}
53-
</h3>
54-
</a>
55-
56-
<p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-700 dark:text-gray-300">
57-
{announcement.announcement}
58-
</p>
59-
</div>
60-
61-
<div class="sm:flex sm:items-end sm:justify-end">
62-
<a
63-
href="/"
64-
class="block bg-green-400 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400"
65-
>
66-
Read Full Announcement
67-
</a>
68-
</div>
69-
</div>
70-
</article>
13+
<AnnouncementCard date={announcement.date} heading={announcement.heading} announcement={announcement.announcement}/>
7114
{/each}
7215
</div>

‎src/client/src/lib/components/universal/+Construction.svelte

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,10 @@
77
<h1
88
class="mb-4 text-center text-4xl font-bold text-gray-700 dark:text-white md:text-5xl lg:text-6xl"
99
>
10-
Site is under maintenance
10+
Site is under contruction
1111
</h1>
1212
<p class="mb-8 text-center text-lg text-gray-500 dark:text-gray-300 md:text-xl lg:text-2xl">
1313
We're working hard to improve the user experience. Stay tuned!
1414
</p>
15-
<div class="flex space-x-4">
16-
<a
17-
href="/student"
18-
class="rounded bg-gray-800 px-6 py-3 font-bold text-white hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600"
19-
>Go Back Home</a
20-
>
21-
</div>
2215
</div>
2316
</body>

‎src/client/src/lib/components/utils/+SideBar.svelte renamed to ‎src/client/src/lib/components/utils/admin/+SideBar.svelte

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import Logo from '$lib/images/class-connect-logo.png';
3-
import Home from '$lib/images/homeIcon.svg';
43
import BullHorn from '$lib/images/bullhorn.svg';
54
import Clipboard from '$lib/images/clipboard.svg';
65
import Landmark from '$lib/images/landmark.svg';
@@ -9,53 +8,41 @@
98
import Settings from '$lib/images/gear.svg';
109
import Users from '$lib/images/users.svg';
1110
12-
const user = {
13-
name: 'Eugene',
14-
email: '[email protected]',
15-
avatar:
16-
'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'
17-
};
18-
1911
const nav_links = [
20-
{
21-
icon: Home,
22-
name: 'Home',
23-
href: '/'
24-
},
2512
{
2613
icon: BullHorn,
2714
name: 'Announcements',
28-
href: '/announcements'
15+
href: '/admin/announcements'
2916
},
3017
{
3118
icon: Clipboard,
3219
name: 'Activities',
33-
href: '/activities'
20+
href: '/admin/activities'
3421
},
3522
{
3623
icon: Landmark,
3724
name: 'Organisation',
38-
href: '/organisation'
25+
href: '/admin/organisation'
3926
},
4027
{
4128
icon: Lecturers,
4229
name: 'Lecturers',
43-
href: '/lecturers'
30+
href: '/admin/lecturers'
4431
},
4532
{
4633
icon: Student,
4734
name: 'Students',
48-
href: '/students'
35+
href: '/admin/students'
4936
},
5037
{
5138
icon: Users,
5239
name: 'Admins',
53-
href: '/admins'
40+
href: '/admin/admins'
5441
},
5542
{
5643
icon: Settings,
5744
name: 'Settings',
58-
href: '/settings'
45+
href: '/admin/settings'
5946
}
6047
];
6148
</script>
@@ -70,23 +57,15 @@
7057
</div>
7158
</a>
7259

73-
<div class="-mx-2 mt-2 flex flex-col items-center">
74-
<a href="/profile">
75-
<img class="mx-2 h-24 w-24 rounded-full object-cover" src={user.avatar} alt="avatar" />
76-
</a>
77-
<h4 class="mx-2 mt-2 font-medium text-gray-800 dark:text-gray-200">{user.name}</h4>
78-
<p class="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{user.email}</p>
79-
</div>
80-
8160
<div class="mt-6 flex flex-1 flex-col justify-between">
8261
<nav>
83-
{#each nav_links as { icon, name, href }}
62+
{#each nav_links as link}
8463
<a
8564
class="mt-5 flex transform items-center rounded-lg px-4 py-2 text-gray-600 transition-colors duration-300 hover:bg-primary-300 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-green-400 dark:hover:text-gray-800"
86-
{href}
65+
href={link.href}
8766
>
88-
<img class="h-5 w-5 dark:text-gray-300" src={icon} alt={name} />
89-
<span class="mx-4 font-medium">{name}</span>
67+
<img class="h-5 w-5 dark:text-gray-300" src={link.icon} alt={link.name} />
68+
<span class="mx-4 font-medium">{link.name}</span>
9069
</a>
9170
{/each}
9271
</nav>

‎src/client/src/lib/components/utils/universal/cards/+AnnCard.svelte

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
export let date;
3+
export let heading;
4+
export let announcement;
5+
6+
</script>
7+
8+
<div class="task m-2">
9+
<div class="tags">
10+
<span class="tag">{heading}</span>
11+
<button class="options">
12+
<svg xml:space="preserve" viewBox="0 0 41.915 41.916" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" fill="#000000"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M11.214,20.956c0,3.091-2.509,5.589-5.607,5.589C2.51,26.544,0,24.046,0,20.956c0-3.082,2.511-5.585,5.607-5.585 C8.705,15.371,11.214,17.874,11.214,20.956z"></path> <path d="M26.564,20.956c0,3.091-2.509,5.589-5.606,5.589c-3.097,0-5.607-2.498-5.607-5.589c0-3.082,2.511-5.585,5.607-5.585 C24.056,15.371,26.564,17.874,26.564,20.956z"></path> <path d="M41.915,20.956c0,3.091-2.509,5.589-5.607,5.589c-3.097,0-5.606-2.498-5.606-5.589c0-3.082,2.511-5.585,5.606-5.585 C39.406,15.371,41.915,17.874,41.915,20.956z"></path> </g> </g> </g></svg>
13+
</button>
14+
</div>
15+
<p>{announcement}</p>
16+
<div class="stats">
17+
<div>
18+
<div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" d="M12 8V12L15 15"></path> <circle stroke-width="2" r="9" cy="12" cx="12"></circle> </g></svg>{date}</div>
19+
</div>
20+
</div>
21+
</div>

‎src/client/src/routes/admin/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import SideBar from '$lib/components/utils/+SideBar.svelte';
2+
import SideBar from '$lib/components/utils/admin/+SideBar.svelte';
33
import { Navbar, Input } from 'flowbite-svelte';
44
import {
55
SearchOutline,

‎src/client/src/routes/admin/activities/+page.svelte

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<script lang="ts">
2-
import SideBar from '$lib/components/utils/+SideBar.svelte';
3-
import Activities from '$lib/components/admin/+Activities.svelte';
2+
import SideBar from '$lib/components/utils/admin/+SideBar.svelte';
3+
import Activities from '$lib/components/universal/+Activities.svelte';
4+
import TopBar from '$lib/components/utils/+TopBar.svelte';
45
</script>
56

67
<main>
78
<div class="flex">
89
<div>
910
<SideBar />
1011
</div>
11-
<div class="w-full bg-lightBgColor px-4 dark:bg-gray-800">
12-
<Activities />
12+
<div class="flex-1">
13+
<TopBar />
14+
<div class="w-full bg-lightBgColor px-4 dark:bg-gray-800">
15+
<Activities />
16+
</div>
1317
</div>
1418
</div>
1519
</main>

0 commit comments

Comments
 (0)