Skip to content

Commit ccac012

Browse files
snehaljha-sfsnehaljha-sf
authored
Merge pull request #406 from snehaljha-sf/feature/W-19575480
Feature/w 19575480: dashboard layout change
2 parents 37b72c4 + 34de6bc commit ccac012

File tree

2 files changed

+235
-59
lines changed

2 files changed

+235
-59
lines changed

‎src/styles/reportGenerator.css‎

Lines changed: 155 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
text-align: center;
1010
}
1111

12+
.slds-m-around_medium {
13+
margin: 1vw;
14+
}
15+
1216
.filter-header-bar {
1317
display: flex;
1418
justify-content: flex-end;
@@ -387,7 +391,7 @@ html {
387391
.details-body {
388392
display: flex;
389393
flex-direction: row;
390-
gap: 10px;
394+
gap: 0.5vw;
391395
margin-top: 2rem;
392396
flex-wrap: wrap;
393397
}
@@ -404,7 +408,7 @@ html {
404408
flex-direction: column;
405409
gap: 10px;
406410
min-height: 14rem;
407-
min-width: 25rem;
411+
min-width: max(23.6vw, 20rem);
408412
background-color: #fff;
409413
}
410414

@@ -587,3 +591,152 @@ td {
587591
.diff-cell:hover .expandModalButton {
588592
display: block;
589593
}
594+
595+
/* === Dashboard Layout Changes === */
596+
597+
/* Two-Pane Layout */
598+
.dashboard-layout-container {
599+
display: flex;
600+
gap: 1vw;
601+
margin-top: 16px;
602+
}
603+
604+
.dashboard-layout-container.single-pane {
605+
gap: 0;
606+
}
607+
608+
.dashboard-left-pane {
609+
flex: 1;
610+
min-width: 72vw; /* Allows flex item to shrink below content size */
611+
}
612+
613+
.dashboard-layout-container.single-pane .dashboard-left-pane {
614+
flex: 1;
615+
width: 100%;
616+
}
617+
618+
.dashboard-right-pane {
619+
margin-top: 16px;
620+
}
621+
622+
.dashboard-right-pane li {
623+
margin-bottom: 1rem;
624+
}
625+
626+
.user-actions-container {
627+
background-color: #fff;
628+
border-radius: 6px;
629+
padding: 20px;
630+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
631+
top: 20px;
632+
}
633+
634+
.action-items-subtitle {
635+
color: #666;
636+
font-weight: 500;
637+
}
638+
639+
.dashboard-common-pane {
640+
display: none;
641+
}
642+
643+
/* Responsive adjustments */
644+
@media (max-width: 1200px) {
645+
.dashboard-common-pane {
646+
display: block;
647+
margin-top: 1rem;
648+
}
649+
650+
.dashboard-right-pane {
651+
display: none;
652+
}
653+
654+
.dashboard-layout-container {
655+
flex-direction: column;
656+
}
657+
658+
.dashboard-layout-container.single-pane {
659+
flex-direction: column;
660+
}
661+
662+
.dashboard-right-pane {
663+
flex: none;
664+
max-width: none;
665+
margin-top: 16px;
666+
}
667+
668+
.dashboard-right-pane li {
669+
margin-bottom: 1rem;
670+
}
671+
672+
.user-actions-container {
673+
position: static;
674+
}
675+
}
676+
677+
/* Status Legends Styling */
678+
.status-legends-container {
679+
background-color: #fff;
680+
border-radius: 6px;
681+
padding: 16px;
682+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
683+
margin-bottom: 16px;
684+
}
685+
686+
.status-legends h3 {
687+
color: #333;
688+
font-weight: 600;
689+
margin-bottom: 12px;
690+
}
691+
692+
.legend-items {
693+
display: flex;
694+
flex-direction: column;
695+
gap: 12px;
696+
}
697+
698+
.legend-item {
699+
display: flex;
700+
align-items: flex-start;
701+
gap: 12px;
702+
}
703+
704+
.legend-color {
705+
width: 16px;
706+
height: 16px;
707+
border-radius: 3px;
708+
display: inline-block;
709+
margin-top: 2px;
710+
flex-shrink: 0;
711+
}
712+
713+
.legend-content {
714+
display: flex;
715+
flex-direction: column;
716+
gap: 2px;
717+
}
718+
719+
.legend-green {
720+
background-color: #2e844a;
721+
}
722+
723+
.legend-yellow {
724+
background-color: #fe9339;
725+
}
726+
727+
.legend-red {
728+
background-color: #ea001e;
729+
}
730+
731+
.legend-text {
732+
font-size: 14px;
733+
color: #333;
734+
font-weight: 600;
735+
}
736+
737+
.legend-description {
738+
font-size: 13px;
739+
color: #666;
740+
font-weight: 400;
741+
line-height: 1.4;
742+
}

‎src/templates/dashboard.template‎

Lines changed: 80 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,76 +11,99 @@
1111
<body>
1212
<div class="slds-m-around_medium">
1313
<div class="slds-text-heading_large">{{heading}}</div>
14-
<div class="header-container">
15-
<div class="org-details-section">
16-
<div class="label-key">Org Name</div>
17-
<div class="label-value">{{org.name}}</div>
18-
</div>
19-
20-
<div class="org-details-section">
21-
<div class="label-key">Org ID</div>
22-
<div class="label-value">{{org.id}}</div>
23-
</div>
14+
15+
<!-- Two-Pane Layout Container -->
16+
<div class="dashboard-layout-container">
17+
<!-- Left Pane: Org Details, Legends, and Component Cards -->
18+
<div class="dashboard-left-pane">
19+
<!-- Org Details Section -->
20+
<div class="header-container">
21+
<div class="org-details-section">
22+
<div class="label-key">Org Name</div>
23+
<div class="label-value">{{org.name}}</div>
24+
</div>
2425

25-
<div class="org-details-section">
26-
<div class="label-key">Namespace</div>
27-
<div class="label-value">{{org.namespace}}</div>
28-
</div>
26+
<div class="org-details-section">
27+
<div class="label-key">Org ID</div>
28+
<div class="label-value">{{org.id}}</div>
29+
</div>
2930

30-
<div class="org-details-section">
31-
<div class="label-key">Data Model</div>
32-
<div class="label-value">{{org.dataModel}}</div>
33-
</div>
31+
<div class="org-details-section">
32+
<div class="label-key">Namespace</div>
33+
<div class="label-value">{{org.namespace}}</div>
34+
</div>
3435

35-
<div class="org-details-section">
36-
<c:if exp={$mode == 'assess'}>
37-
<div class="label-key">Assessment Date and Time</div>
38-
</c:if>
39-
<c:if exp={$mode == 'migrate'}>
40-
<div class="label-key">Migration Date and Time</div>
41-
</c:if>
42-
<div class="label-value">{{assessmentDate}}</div>
43-
</div>
44-
</div>
36+
<div class="org-details-section">
37+
<div class="label-key">Data Model</div>
38+
<div class="label-value">{{org.dataModel}}</div>
39+
</div>
4540

46-
<div class="details-body">
47-
<c:for items=(summaryItems) var="summary">
48-
<div class="slds-box slds-box_small slds-box_body-spacing">
49-
<div class="detail-row">
50-
<div class="detail-item slds-text-heading_medium">{{summary.name}}</div>
51-
<div class="detail-item slds-text-heading_medium">{{summary.total}}</div>
41+
<div class="org-details-section">
42+
<c:if exp={$mode == 'assess'}>
43+
<div class="label-key">Assessment Date and Time</div>
44+
</c:if>
45+
<c:if exp={$mode == 'migrate'}>
46+
<div class="label-key">Migration Date and Time</div>
47+
</c:if>
48+
<div class="label-value">{{assessmentDate}}</div>
5249
</div>
53-
<hr />
54-
<c:for items=(summary.data) var="item">
55-
<div class="detail-row">
56-
<div class="detail-item">{{item.name}}</div>
57-
<div class="(item.cssClass)">{{item.count}}</div>
50+
</div>
51+
52+
<div class="dashboard-common-pane">
53+
<c:if exp={Array.isArray($actionItems) && $actionItems.length > 0}>
54+
<div class="user-actions-container">
55+
<div class="slds-text-heading_medium slds-m-bottom_small">User Actions Required</div>
56+
<div class="slds-text-body_small slds-m-bottom_small action-items-subtitle">Action Items</div>
57+
<ul class="slds-list_dotted">
58+
<c:for items=(actionItems) var="actionItem">
59+
<li class="slds-item action-item-black">{{actionItem}}</li>
60+
</c:for>
61+
</ul>
5862
</div>
59-
</c:for>
63+
</c:if>
64+
</div>
6065

61-
<div class="detail-row card-footer">
62-
<button class="slds-button_stretch slds-button slds-button_neutral" data-summary="(summary.file)"
63-
onclick="openReport(this)">
64-
View Report
65-
</button>
66-
</div>
66+
<!-- Component Cards Section -->
67+
<div class="details-body">
68+
<c:for items=(summaryItems) var="summary">
69+
<div class="slds-box slds-box_small slds-box_body-spacing">
70+
<div class="detail-row">
71+
<div class="detail-item slds-text-heading_medium">{{summary.name}}</div>
72+
<div class="detail-item slds-text-heading_medium">{{summary.total}}</div>
73+
</div>
74+
<hr />
75+
<c:for items=(summary.data) var="item">
76+
<div class="detail-row">
77+
<div class="detail-item">{{item.name}}</div>
78+
<div class="(item.cssClass)">{{item.count}}</div>
79+
</div>
80+
</c:for>
81+
82+
<div class="detail-row card-footer">
83+
<button class="slds-button_stretch slds-button slds-button_neutral" data-summary="(summary.file)"
84+
onclick="openReport(this)">
85+
View Report
86+
</button>
87+
</div>
88+
</div>
89+
</c:for>
6790
</div>
68-
</c:for>
69-
</div>
70-
<div>
71-
<c:if exp={Array.isArray($actionItems) && $actionItems.length > 0}>
72-
<div class="slds-box slds-theme_default slds-m-top_medium">
73-
<div class="slds-text-heading_medium slds-m-bottom_small">User Action Required</div>
74-
<div class="slds-m-bottom_small">
75-
<p class="slds-m-bottom_x-small">Action Items</p>
91+
</div>
92+
93+
<!-- Right Pane: User Actions -->
94+
<div class="dashboard-right-pane">
95+
<c:if exp={Array.isArray($actionItems) && $actionItems.length > 0}>
96+
<div class="user-actions-container">
97+
<div class="slds-text-heading_medium slds-m-bottom_small">User Actions Required</div>
98+
<div class="slds-text-body_small slds-m-bottom_small action-items-subtitle">Action Items</div>
7699
<ul class="slds-list_dotted">
77100
<c:for items=(actionItems) var="actionItem">
78-
<li class="slds-item slds-text-color_destructive">{{actionItem}}</li>
101+
<li class="slds-item action-item-black">{{actionItem}}</li>
79102
</c:for>
80103
</ul>
81104
</div>
82-
</div>
83-
</c:if>
105+
</c:if>
106+
</div>
84107
</div>
85108
</div>
86109
</body>

0 commit comments

Comments
 (0)