orus-dev/sentryx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Even better dashboard

Browse Source
This commit is contained in:
selimaj-dev
2025-07-11 03:07:53 +02:00
parent 83fb523efa
commit c077b8c16f
11 changed files with 281 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/dashboard.css
+128 -68
View File
@@ -1,95 +1,155 @@
body {
background-color: #111526;
background-color: #f1f5f9;
margin: 0;
color: #0f172a;
}
.sidebar-container {
margin-top: 20px;
display: flex;
gap: 20px;
}
.dashboard-container {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
width: 100%;
padding-right: 25px;
}
.summary-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
width: 100%;
}
.summary-card {
box-sizing: border-box;
height: 100px;
background-color: #fff;
padding: 1.5rem;
border-radius: 10px;
display: flex;
align-items: center;
width: 100%;
}
.summary-card h3 {
font-size: x-large;
margin: 0;
}
.container {
display: grid;
grid-template-columns: 400px 2fr 1.6fr;
.summary-card p {
margin: 0;
}
.summary-card svg {
margin-left: auto;
}
#online {
color: #16a34a;
}
#issues {
color: rgb(234, 71, 12);
}
#cpu {
color: rgb(37, 99, 235);
}
#ram {
color: rgb(147, 51, 234);
}
.summary-card p {
color: black;
}
.overview-container {
display: flex;
gap: 20px;
}
.left_container {
display: grid;
grid-template-rows: 200px 450px 230px;
gap: 20px;
padding-top: 20px;
}
#top_container,
#mid_container,
#bottom_container {
.performance-card {
background-color: #fff;
box-sizing: border-box;
background-color: #171b2e;
border-radius: 20px;
padding: 1.5rem;
border-radius: 10px;
width: 100%;
padding: 30px;
}
.right_container {
display: grid;
gap: 20px;
padding-top: 20px;
padding-right: 20px;
max-height: calc(100vh - 40px);
}
@media (max-width: 1300px) {
.summary-container {
grid-template-columns: repeat(2, 1fr);
}
.right_box {
box-sizing: border-box;
padding: 30px;
background-color: #171b2e;
border-radius: 20px;
width: 100%;
height: 100%;
overflow: auto;
}
@media (max-width: 1000px) {
.container {
display: flex;
.overview-container {
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
}
#sidebar {
display: none;
height: 150px;
border-radius: 20px;
}
.right_container {
padding-top: 10px;
aspect-ratio: 1 / 1;
width: 100%;
.dashboard-container {
padding-left: 25px;
}
}
.line-chart {
.search-container {
display: flex;
background-color: #fff;
box-sizing: border-box;
padding: 1.5rem;
border-radius: 10px;
width: 100%;
height: 100%;
gap: 10px;
}
.line-chart-svg {
.search-input input {
appearance: auto;
background-color: #fff;
border: 1px solid rgb(226, 232, 240);
border-radius: 6px;
box-sizing: border-box;
color: rgb(2, 8, 23);
cursor: auto;
display: flex;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 14px;
font-weight: 400;
line-height: 20px;
height: 40px;
width: 100%;
height: 100%;
display: block;
padding: 8px 12px 8px 40px;
margin: 0;
text-align: start;
}
.line-chart .fill {
background: linear-gradient(to right, red, yellow);
-webkit-mask: url(#svg-path);
mask: url(#svg-path);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
.search-input input:focus {
border-color: rgb(0, 0, 0);
border-width: 2px;
outline: none;
}
.line-chart .line {
stroke-width: 1px;
.search-input {
position: relative;
width: 100%;
}
.search-input svg {
position: absolute;
top: 12px;
left: 12px;
}
.search-container button {
background-color: transparent;
border: 1px solid currentColor;
border-radius: 6px;
outline: none;
white-space: nowrap;
font-weight: bold;
}
assets/font.css
+64 -52
View File
@@ -1,79 +1,91 @@
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-family: "Roboto";
src: url("assets/font/Roboto-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-family: "Roboto";
src: url("assets/font/Roboto-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-family: "Roboto";
src: url("assets/font/Roboto-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
font-family: "Roboto";
src: url("assets/font/Roboto-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('assets/font/Roboto_Condensed-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-family: "Roboto Condensed";
src: url("assets/font/Roboto_Condensed-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('assets/font/Roboto_Condensed-ExtraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-family: "Roboto Condensed";
src: url("assets/font/Roboto_Condensed-ExtraLightItalic.ttf")
format("truetype");
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-family: "Roboto";
src: url("assets/font/Roboto-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-family: "Roboto";
src: url("assets/font/Roboto-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-family: "Roboto";
src: url("assets/font/Roboto-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-family: "Roboto";
src: url("assets/font/Roboto-SemiBoldItalic.ttf") format("truetype");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-family: "Roboto";
src: url("assets/font/Roboto-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('assets/font/Roboto-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
font-family: "Roboto";
src: url("assets/font/Roboto-ExtraBoldItalic.ttf") format("truetype");
font-weight: 800;
font-style: italic;
}
body {
font-family: 'Roboto', 'Roboto Condensed', sans-serif;
font-weight: normal;
font-style: normal;
color: #ffffff;
font-family: "Roboto", "Roboto Condensed", sans-serif;
font-weight: normal;
font-style: normal;
color: black;
}
.line-chart {
width: 100%;
height: 100%;
}
.line-chart-svg {
width: 100%;
height: 100%;
display: block;
}
assets/sidebar.css
+6 -6
View File
@@ -1,10 +1,10 @@
#sidebar {
box-sizing: border-box;
background-color: #171b2e;
width: 400px;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
width: 300px;
height: calc(100vh - 40px);
border-radius: 20px;
margin-left: 25px;
padding: 20px;
}
@@ -28,7 +28,7 @@
.sidebar-item p {
text-decoration: none;
color: #fff;
color: #0f172a;
font: inherit;
font-size: larger;
font-weight: bold;
assets/sidebar/dashboard-selected.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000" class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 487 B

After

Width:  |  Height:  |  Size: 487 B

assets/sidebar/dashboard.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 435 B

assets/sidebar/home-selected.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000" class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 512 B

After

Width:  |  Height:  |  Size: 512 B

assets/sidebar/home.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 449 B