Fix stylings not being applied correctly in production builds

PoolPirate · Oct 1, 2022 · 2eb44a5 · 2eb44a5
1 parent e546d1b
commit 2eb44a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/Thorsight/ClientApp/src/app/modules/liquidity/liquidity.component.html b/Thorsight/ClientApp/src/app/modules/liquidity/liquidity.component.html
@@ -3,7 +3,7 @@
     <nav-component (drawerToggle)="drawer.toggle()">
       <navlink-component [route]="'overview'">Overview</navlink-component>
       <navlink-component [route]="'earnings'">Earnings</navlink-component>
-      <navlink-component [route]="''" [pushdown]="true">Change Address</navlink-component>
+      <navlink-component class="push-down" [route]="''">Change Address</navlink-component>
     </nav-component>
   </mat-drawer>
   <mat-drawer-content>

diff --git a/Thorsight/ClientApp/src/app/modules/system/profitability/profitability.component.html b/Thorsight/ClientApp/src/app/modules/system/profitability/profitability.component.html
@@ -3,7 +3,7 @@
     <nav-component (drawerToggle)="drawer.toggle()">
       <navlink-component [route]="'dashboard'">Dashboard</navlink-component>
       <navlink-component [route]="'calculator'">Calculator</navlink-component>
-      <navlink-component [route]="''" [pushdown]="true">Back to Menu</navlink-component>
+      <navlink-component class="push-down" [route]="''">Back to Menu</navlink-component>
     </nav-component>
   </mat-drawer>
   <mat-drawer-content>

diff --git a/Thorsight/ClientApp/src/app/shared/components/navbar/components/navlink.component.html b/Thorsight/ClientApp/src/app/shared/components/navbar/components/navlink.component.html
@@ -1,6 +1,7 @@
-<hr *ngIf="pushdown" class="push-down"/>
+<hr id="top-hr"/>
 
 <a [routerLink]="route">
   <ng-content></ng-content>
 </a>
-<hr *ngIf="!pushdown" />
+
+<hr id="bottom-hr"/>
diff --git a/Thorsight/ClientApp/src/app/shared/components/navbar/components/navlink.component.scss b/Thorsight/ClientApp/src/app/shared/components/navbar/components/navlink.component.scss
@@ -2,10 +2,6 @@ hr {
   margin: 0;
 }
 
-.push-down {
-  margin-top: auto;
-}
-
 a {
   display: flex;
   justify-content: center;
@@ -15,6 +11,18 @@ a {
   vertical-align: middle;
 }
 
-:host([ng-reflect-pushdown=true]) {
+:host(.push-down) {
   margin-top: auto;
 }
+
+#top-hr {
+  display: none;
+}
+
+:host(.push-down) #top-hr {
+  display: block;
+}
+
+:host(.push-down) #bottom-hr {
+  display: none;
+}