Mirror/podkop
1
0
Fork 0
mirror of https://github.com/itdoginfo/podkop.git synced 2025-12-13 15:06:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement dashboard prototype

Browse Source
This commit is contained in:
divocat
2025-10-06 03:43:55 +03:00
parent c75dd3e78b
commit aad6d8c002
35 changed files with 2014 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
fe-app-podkop/src/styles.ts
View File

@@ -23,4 +23,139 @@ export const GlobalStyles = `
#cbi-podkop:has(.cbi-tab-disabled[data-tab="basic"]) #cbi-podkop-extra {
display: none;
}
#cbi-podkop-main-_status > div {
width: 100%;
}
.pdk_dashboard-page {
width: 100%;
--dashboard-grid-columns: 4;
}
@media (max-width: 900px) {
.pdk_dashboard-page {
--dashboard-grid-columns: 2;
}
}
/*@media (max-width: 440px) {*/
/* .pdk_dashboard-page {*/
/* --dashboard-grid-columns: 1;*/
/* }*/
/*}*/
.pdk_dashboard-page__title-section {
display: flex;
align-items: center;
justify-content: space-between;
border: 2px var(--background-color-low) solid;
border-radius: 4px;
padding: 0 10px;
}
.pdk_dashboard-page__title-section__title {
color: var(--text-color-high);
font-weight: 700;
}
.pdk_dashboard-page__widgets-section {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(var(--dashboard-grid-columns), 1fr);
grid-gap: 10px;
}
.pdk_dashboard-page__widgets-section__item {
border: 2px var(--background-color-low) solid;
border-radius: 4px;
padding: 10px;
}
.pdk_dashboard-page__outbound-section {
margin-top: 10px;
border: 2px var(--background-color-low) solid;
border-radius: 4px;
padding: 10px;
}
.pdk_dashboard-page__outbound-section__title-section {
display: flex;
align-items: center;
justify-content: space-between;
}
.pdk_dashboard-page__outbound-section__title-section__title {
color: var(--text-color-high);
font-weight: 700;
}
.pdk_dashboard-page__outbound-grid {
margin-top: 5px;
display: grid;
grid-template-columns: repeat(var(--dashboard-grid-columns), 1fr);
grid-gap: 10px;
}
.pdk_dashboard-page__outbound-grid__item {
cursor: pointer;
border: 2px var(--background-color-low) solid;
border-radius: 4px;
padding: 10px;
transition: border 0.2s ease;
}
.pdk_dashboard-page__outbound-grid__item:hover {
border-color: var(--primary-color-high);
}
.pdk_dashboard-page__outbound-grid__item--active {
border-color: var(--success-color-medium);
}
.pdk_dashboard-page__outbound-grid__item__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.pdk_dashboard-page__outbound-grid__item__type {
}
.pdk_dashboard-page__outbound-grid__item__latency {
}
/* Skeleton styles*/
.skeleton {
background-color: var(--background-color-low, #e0e0e0);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.skeleton::after {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: skeleton-shimmer 1.6s infinite;
}
@keyframes skeleton-shimmer {
100% {
left: 150%;
}
}
`;