ui improvements

geoyogesh · Oct 5, 2020 · 81153a9 · 81153a9
1 parent 3a2a66f
commit 81153a9
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 39 deletions.
diff --git a/...p/capx/components/common/critical-lane-volume-sum/critical-lane-volume-sum.component.scss b/...p/capx/components/common/critical-lane-volume-sum/critical-lane-volume-sum.component.scss
@@ -1,7 +1,7 @@
 :host {
   position: absolute;
   right: 30px;
-  top: 60px;
+  top: 66px;
 }
 
 :host {

diff --git a/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.scss b/projects/capx/src/app/capx/components/common/svg-viewer/svg-viewer.component.scss
@@ -2,7 +2,10 @@
   display: block;
 
   .container {
-    width: calc(100vw - 18rem);
+    width: calc(100vw - 17.4rem);
     height: calc(100vh - 9rem);
+    border: 1px solid #ccc;
+    margin: 10px 0;
+    border-radius: 3px;
   }
 }
diff --git a/...tersections/conventional-junction/configuration/conventional-configuration.component.html b/...tersections/conventional-junction/configuration/conventional-configuration.component.html
@@ -10,10 +10,10 @@
           <td><img src="assets/capx/south-u-turn.png" /></td>
         </tr>
         <tr>
-          <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_right}}</div></td>
-          <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_thru}}</div></td>
-          <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_left}}</div></td>
-          <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_u}}</div></td>
+          <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_right}}</div></td>
+          <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_thru}}</div></td>
+          <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_left}}</div></td>
+          <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_u}}</div></td>
         </tr>
         <tr>
           <td class="editable"><div><input type="number" value="0" formControlName="south_bound_right"></div></td>
@@ -31,23 +31,23 @@
         <table class="config-table">
           <tr>
             <td><img src="assets/capx/east-u-turn.png" /></td>
-            <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_u}} <br/> PEPCH</div></td>
+            <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_u}} <br/> PEPCH</div></td>
             <td rowspan="2" class="editable"><div class="east-rotation"><input type="number" min="0"  max="9" value="1" formControlName="east_bound_left"></div></td>
           </tr>
           <tr>
             <td><img src="assets/capx/east-left-turn.png" /></td>
-            <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_left}} <br/> PEPCH</div></td>
+            <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_left}} <br/> PEPCH</div></td>
           </tr>
 
           <tr>
             <td><img src="assets/capx/east-thru.png" /></td>
-            <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_thru}} <br/> PEPCH</div></td>
+            <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_thru}} <br/> PEPCH</div></td>
             <td class="editable"><div class="east-rotation"><input type="number" min="0"  max="9" value="1" formControlName="east_bound_thru"></div></td>
           </tr>
 
           <tr>
             <td><img src="assets/capx/east-right-turn.png" /></td>
-            <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_right}} <br/> PEPCH</div></td>
+            <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_right}} <br/> PEPCH</div></td>
             <td class="editable"><div class="east-rotation"><input type="number" min="0"  max="9" value="1" formControlName="east_bound_right"></div></td>
           </tr>
         </table>
@@ -74,23 +74,23 @@
         <table>
           <tr>
             <td class="editable"><div class="west-rotation"><input type="number" min="0"  max="9" value="1" formControlName="west_bound_right"></div></td>
-            <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_right}}</div></td>
+            <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_right}}</div></td>
             <td><img src="assets/capx/west-right-turn.png" /></td>
           </tr>
           <tr>
             <td class="editable"><div class="west-rotation"><input type="number" min="0"  max="9" value="1" formControlName="west_bound_thru"></div></td>
-            <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_thru}}</div></td>
+            <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_thru}}</div></td>
             <td><img src="assets/capx/west-thru.png" /></td>
           </tr>
 
           <tr>
             <td rowspan="2" class="editable"><div class="west-rotation"><input type="number" min="0"  max="9" value="1" formControlName="west_bound_left"></div></td>
-            <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_left}}</div></td>
+            <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_left}}</div></td>
             <td><img src="assets/capx/west-left-turn.png" /></td>
           </tr>
 
           <tr>
-            <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_u}}</div></td>
+            <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_u}}</div></td>
             <td><img src="assets/capx/west-u-turn.png" /></td>
           </tr>
         </table>
@@ -110,10 +110,10 @@
           <td class="editable"><input type="number" min="0"  max="9" value="1" formControlName="north_bound_right"></td>
         </tr>
         <tr>
-          <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_u}} <br/> PEPCH</td>
-          <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_left}} <br/> PEPCH</td>
-          <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_thru}} <br/> PEPCH</td>
-          <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_right}} <br/> PEPCH</td>
+          <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_u}} <br/> PEPCH</td>
+          <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_left}} <br/> PEPCH</td>
+          <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_thru}} <br/> PEPCH</td>
+          <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_right}} <br/> PEPCH</td>
         </tr>
         <tr>
           <td><img src="assets/capx/north-u-turn.png" /></td>

diff --git a/...uration/partial-displaced-left-turn-intersection-north-south-configuration.component.html b/...uration/partial-displaced-left-turn-intersection-north-south-configuration.component.html
@@ -1,5 +1,5 @@
-<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="50px">
-  <table class="no-border centered-child" [formGroup]="form" fxFlexOffset="20px">
+<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
+  <table class="no-border centered-child" [formGroup]="form" fxFlexOffset="10px">
     <tr>
       <td>
         <table>
@@ -10,10 +10,10 @@
             <td><img src="assets/capx/south-u-turn.png" /></td>
           </tr>
           <tr>
-            <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_right}}</div></td>
-            <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_thru}}</div></td>
-            <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_left}}</div></td>
-            <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_u}}</div></td>
+            <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_right}}</div></td>
+            <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_thru}}</div></td>
+            <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_left}}</div></td>
+            <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_u}}</div></td>
           </tr>
           <tr>
             <td class="editable"><div><input type="number" min="0"  max="9" value="1" formControlName="south_bound_right"></div></td>
@@ -44,7 +44,7 @@
             <td class="readonly">{{form.get('north_bound_thru').value}}</td>
           </tr>
           <tr>
-            <td class="readonly">{{(capxStateService.masterParameters$ | async)!.east_bound_left + (capxStateService.masterParameters$ | async)!.north_bound_thru}} <br/> PEPCH</td>
+            <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.east_bound_left + (capxStateService.masterParameters$ | async)!.north_bound_thru}} <br/> PEPCH</td>
           </tr>
           <tr>
             <td><img src="assets/capx/north-thru.png" /></td>
@@ -63,24 +63,24 @@
           <table class="config-table">
             <tr>
               <td><img src="assets/capx/east-u-turn.png" /></td>
-              <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_u}} <br/> PEPCH</div></td>
+              <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_u}} <br/> PEPCH</div></td>
               <td class="empty-cell"></td>
             </tr>
             <tr>
               <td><img src="assets/capx/east-left-turn.png" /></td>
-              <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_left}} <br/> PEPCH</div></td>
+              <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_left}} <br/> PEPCH</div></td>
               <td class="editable"><div class="east-rotation"><input type="number" min="0"  max="9" value="1" formControlName="east_bound_left"></div></td>
             </tr>
 
             <tr>
               <td><img src="assets/capx/east-thru.png" /></td>
-              <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_thru}} <br/> PEPCH</div></td>
+              <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_thru}} <br/> PEPCH</div></td>
               <td class="editable"><div class="east-rotation"><input type="number" min="0"  max="9" value="1" formControlName="east_bound_thru"></div></td>
             </tr>
 
             <tr>
               <td><img src="assets/capx/east-right-turn.png" /></td>
-              <td class="readonly"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_right}} <br/> PEPCH</div></td>
+              <td class="readonly pepch"><div class="east-rotation">{{(capxStateService.masterParameters$ | async)!.east_bound_right}} <br/> PEPCH</div></td>
               <td class="editable"><div class="east-rotation"><input type="number" min="0"  max="9" value="1" formControlName="east_bound_right"></div></td>
             </tr>
           </table>
@@ -107,24 +107,24 @@
           <table>
             <tr>
               <td class="editable"><div class="west-rotation"><input type="number" min="0"  max="9" value="1" formControlName="west_bound_right"></div></td>
-              <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_right}}</div></td>
+              <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_right}}</div></td>
               <td><img src="assets/capx/west-right-turn.png" /></td>
             </tr>
             <tr>
               <td class="editable"><div class="west-rotation"><input type="number" min="0"  max="9" value="1" formControlName="west_bound_thru"></div></td>
-              <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_thru}}</div></td>
+              <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_thru}}</div></td>
               <td><img src="assets/capx/west-thru.png" /></td>
             </tr>
 
             <tr>
               <td class="editable"><div class="west-rotation"><input type="number" min="0"  max="9" value="1" formControlName="west_bound_left"></div></td>
-              <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_left}}</div></td>
+              <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_left}}</div></td>
               <td><img src="assets/capx/west-left-turn.png" /></td>
             </tr>
 
             <tr>
               <td class="empty-cell"></td>
-              <td class="readonly"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_u}}</div></td>
+              <td class="readonly pepch"><div class="west-rotation">PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.west_bound_u}}</div></td>
               <td><img src="assets/capx/west-u-turn.png" /></td>
             </tr>
           </table>
@@ -144,7 +144,7 @@
             <td><img src="assets/capx/south-thru.png" /></td>
           </tr>
           <tr>
-            <td class="readonly"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_thru + (capxStateService.masterParameters$ | async)!.west_bound_left}}</div></td>
+            <td class="readonly pepch"><div>PEPCH <br/> {{(capxStateService.masterParameters$ | async)!.south_bound_thru + (capxStateService.masterParameters$ | async)!.west_bound_left}}</div></td>
           </tr>
           <tr>
             <td class="readonly"><div>{{form.get('south_bound_thru').value}}</div></td>
@@ -178,10 +178,10 @@
             <td class="editable"><input type="number" min="0"  max="9" value="1" formControlName="north_bound_right"></td>
           </tr>
           <tr>
-            <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_u}} <br/> PEPCH</td>
-            <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_left}} <br/> PEPCH</td>
-            <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_thru}} <br/> PEPCH</td>
-            <td class="readonly">{{(capxStateService.masterParameters$ | async)!.north_bound_right}} <br/> PEPCH</td>
+            <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_u}} <br/> PEPCH</td>
+            <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_left}} <br/> PEPCH</td>
+            <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_thru}} <br/> PEPCH</td>
+            <td class="readonly pepch">{{(capxStateService.masterParameters$ | async)!.north_bound_right}} <br/> PEPCH</td>
           </tr>
           <tr>
             <td><img src="assets/capx/north-u-turn.png" /></td>

diff --git a/projects/capx/src/app/capx/components/junctions/junction.component.html b/projects/capx/src/app/capx/components/junctions/junction.component.html
@@ -16,7 +16,7 @@
     <clr-tab>
       <button clrTabLink>Configuration</button>
       <clr-tab-content *clrIfActive="false">
-        <div class="junction-content centered-parent">
+        <div class="junction-content centered-parent container">
           <ng-template [cdkPortalOutlet]="(configuration$ | async)" class="centered-child"></ng-template>
         </div>
       </clr-tab-content>

diff --git a/projects/capx/src/app/capx/components/junctions/junction.component.scss b/projects/capx/src/app/capx/components/junctions/junction.component.scss
@@ -3,4 +3,10 @@
   width: 100%;
   height: 100%;
   display: flow-root;
+
+  .container {
+    border: 1px solid #ccc;
+    margin: 10px 0;
+    border-radius: 3px;
+  }
 }
diff --git a/projects/capx/src/styles.scss b/projects/capx/src/styles.scss
@@ -119,6 +119,11 @@ table {
         //background-color: hsl(198, 0%, 87%);
       }
 
+      &.pepch {
+        font-size: 10px;
+        line-height: 1.4;
+      }
+
       img {
         width: 40px;
         height: 40px;
@@ -188,3 +193,8 @@ capx-svg-viewer {
     height:100%
   }
 }
+
+
+.nav {
+  box-shadow: none;
+}