Api-Mgmt Design
MODIFY
src/app/admin/create-developer/client-mapping.component.html
src/app/admin/create-developer/client-mapping.component.html
<div class="client-container">
- <h4>Available Clients</h4>
+ <div class="container-header"><mat-icon>people</mat-icon> Available Clients</div>
<div
cdkDropList
#availableClientList="cdkDropList"
</div>
<div class="client-container">
- <h4>Assigned Clients</h4>
+ <div class="container-header"><mat-icon>how_to_reg</mat-icon> Assigned Clients</div>
<div
cdkDropList
#assignedClientList="cdkDropList"

MODIFY
src/app/admin/create-developer/client-mapping.component.scss
src/app/admin/create-developer/client-mapping.component.scss
vertical-align: top;
}
+.container-header {
+ padding: 8px;
+ color: #ffffff;
+ font-weight: 300;
+ font-size: 17pt;
+ border-bottom: 1px solid var(--e2e-bg-color);
+ background-color: var(--e2e-bg-color);
+ border-bottom: 3px solid #06618e;
+ display: flex;
+ justify-items: baseline;
+}
+
+.container-header mat-icon {
+ margin-top: 1px;
+ margin-right: 7px;
+}
+
.client-list {
border: solid 1px #ccc;
min-height: 60px;
background-color: #f5faff;
- border-radius: 4px;
overflow: hidden;
display: block;
}

MODIFY
src/app/app.component.html
src/app/app.component.html
-<app-pas-header></app-pas-header>
+<app-pas-header id="pas-header"></app-pas-header>
+
+<div id="menu-spacer"></div>
<div class="router-outlet-wrapper">
<router-outlet></router-outlet>

MODIFY
src/app/app.component.scss
src/app/app.component.scss
.router-outlet-wrapper {
- margin-left: 25px;
+ padding-left: 110px;
+ padding-top: 70px;
+}
+
+#pas-header {
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 1;
+}
+
+#menu-spacer {
+ background-color: var(--e2e-bg-color);
+ bottom: 0;
+ left: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: fixed;
+ top: 60px;
+ width: 75px;
+ box-shadow: 0px 1px 1px 2px rgba(230,230,230,1);
}

MODIFY
src/styles.scss
src/styles.scss
@@ -38,6 +38,7 @@ h1, h2, h3 {
}
h1 {
+ font-size: 20pt;
font-weight: 300;
}

Api-Mgmt Design