Top bar fix for Safari

5 years ago · e7a9c46c6b
parent facf92a645
commit e7a9c46c6b
6 changed files with 40 additions and 62 deletions
--- a/angular/index.html
+++ b/angular/index.html
@ -5,7 +5,7 @@
  <title>RTL</title>
  <base href="/rtl/">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
-<link rel="stylesheet" href="styles.5a9bc95a2a0293f04c31.css"></head>
+<link rel="stylesheet" href="styles.9c17f6ed5717c7fdd02d.css"></head>
 <body>
  <rtl-app></rtl-app>
 <script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script><script type="text/javascript" src="polyfills.418928a701f2040ada02.js"></script><script type="text/javascript" src="main.3ec1b91d75f99fb62e78.js"></script></body>
--- a/angular/styles.5a9bc95a2a0293f04c31.css
+++ b/angular/styles.5a9bc95a2a0293f04c31.css
--- a/angular/styles.9c17f6ed5717c7fdd02d.css
+++ b/angular/styles.9c17f6ed5717c7fdd02d.css
--- a/connect.js
+++ b/connect.js
@ -66,14 +66,14 @@ const setMacaroonPath = (clArgs, config) => {

 const validateConfigFile = (config) => {
  if(common.macaroon_path === '' || undefined === common.macaroon_path) {
-    errMsg = 'Please set macaroon path through environment/RTL.conf!';
+    errMsg = 'Please set macaroon path through environment or RTL.conf!';
  }
  
  if(undefined !== process.env.LND_SERVER_URL) {
    common.lnd_server_url = process.env.LND_SERVER_URL;
  } else {
    if((config.Authentication.lndServerUrl === '' ||  undefined === config.Authentication.lndServerUrl) && (config.Settings.lndServerUrl === '' ||  undefined === config.Settings.lndServerUrl)) {
-      errMsg = errMsg + '\nPlease set LND Server URL through environment/RTL.conf!';
+      errMsg = errMsg + '\nPlease set LND Server URL through environment or RTL.conf!';
    } else {
      if (config.Settings.lndServerUrl !== '' &&  undefined !== config.Settings.lndServerUrl) {
        common.lnd_server_url = config.Settings.lndServerUrl;
@ -100,7 +100,7 @@ const validateConfigFile = (config) => {
      common.lnd_config_path = config.Authentication.lndConfigPath;
    } else {
      if(upperCase(common.node_auth_type) === 'DEFAULT') {
-        errMsg = errMsg + '\nDefault Node Authentication can be set with LND Config Path only. Please set LND Config Path through environment/RTL.conf!';
+        errMsg = errMsg + '\nDefault Node Authentication can be set with LND Config Path only. Please set LND Config Path through environment or RTL.conf!';
      }    
    }
  }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -32,34 +32,6 @@
          </div>
        </mat-toolbar>
      </div>
-    
-      <!-- <div fxLayout="column" class="top-bar">
-        <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary" class="padding-gap-x sticky top-toolbar">
-          <div fxLayoutAlign="center center">
-            <button *ngIf="settings.menu === 'Vertical'" mat-icon-button (click)="sideNavToggle(sideNavigation)">
-              <mat-icon>menu</mat-icon>
-            </button>
-          </div>
-          <div>
-            <h2>Ride The Lightning <span class="font-60-percent">(Beta)</span></h2>
-          </div>
-          <div>
-            <rtl-top-menu></rtl-top-menu>
-          </div>
-        </mat-toolbar>
-        <div fxLayout="row" fxLayoutAlign="space-between center" class="bg-primary pubkey-info-top sticky" rtlClipboard [payload]="information?.identity_pubkey" (copied)="copiedText($event)">
-          <mat-icon [ngClass]="{'icon-smaller': smallScreen}">vpn_key</mat-icon>
-          <div [ngClass]="{'word-break font-9px': smallScreen, 'word-break': !smallScreen}">&nbsp;{{information?.identity_pubkey}}
-            <mat-spinner [diameter]="20" *ngIf="flgLoading[0]" class="inline-spinner foreground"></mat-spinner>
-            <mat-icon [ngClass]="{'icon-smaller cursor-pointer copy-icon-smaller': smallScreen, 'icon-small cursor-pointer copy-icon': !smallScreen}">file_copy</mat-icon><span [hidden]="!flgCopied">Copied</span>
-          </div>
-        </div>
-        <mat-toolbar color="primary" *ngIf="settings.menu === 'Horizontal'" class="padding-gap-x horizontal-nav sticky">
-          <div fxLayout="row" fxFlex="100" fxLayoutAlign="center center" class="h-100">
-            <rtl-horizontal-navigation></rtl-horizontal-navigation>
-          </div>
-        </mat-toolbar>
-      </div> -->
      <div [ngClass]="{'mt-minus-1': smallScreen, 'inner-sidenav-content': true}">
        <router-outlet></router-outlet>
      </div>
--- a/src/app/shared/theme/styles/root.scss
+++ b/src/app/shared/theme/styles/root.scss
@ -21,9 +21,10 @@ html, body {
    padding-top: 0;
    padding-bottom: 0;
  }
-  .top-toolbar {
+  .top-toolbar, .pubkey-info-top {
    left: $regular-sidenav-width;
    width: calc(100% - #{$regular-sidenav-width}) !important;
+    z-index: 9999;
  }
  .mat-sidenav-content {
    margin-left: $regular-sidenav-width !important;
@ -32,12 +33,15 @@ html, body {
    .top-toolbar, .pubkey-info-top {
      left: 0;
      width: 100% !important;
+      z-index: 9999;
+    }
+    .inner-sidenav-content {
+      top: calc(#{$toolbar-height}*2 + #{$gap} + #{$pubkey-info-height});  
    }
    .mat-sidenav-content {
-      top: calc(#{$toolbar-height} + #{$gap} + #{$pubkey-info-height} + #{$toolbar-height});
      margin-left: 0 !important;
    }
-  }  
+  }    
  &.compact {
    .sidenav{
      width: $compact-sidenav-width;
@ -49,6 +53,7 @@ html, body {
    .top-toolbar, .pubkey-info-top {
      left: $compact-sidenav-width;
      width: calc(100% - #{$compact-sidenav-width}) !important;
+      z-index: 9999;
    }    
    .mat-sidenav-content {
      margin-left: $compact-sidenav-width !important;
@ -67,15 +72,15 @@ html, body {
    .top-toolbar, .pubkey-info-top {
      left: $mini-sidenav-width;
      width: calc(100% - #{$mini-sidenav-width}) !important;
+      z-index: 9999;
    }   
    .mat-sidenav-content {
      margin-left: $mini-sidenav-width !important;
-    }
+    }    
  }      
 }

 .mat-sidenav-container .mat-sidenav-content {
-  top: calc(#{$toolbar-height} + #{$gap} + #{$pubkey-info-height});
  height: 100vh;
 }

@ -89,6 +94,16 @@ html, body {
  -ms-touch-action: auto;
 }

+.top-bar {
+  position: relative;
+  top: 0;
+  bottom:0;
+  left:0;
+  right:0;  
+  height: 0;
+  z-index: 999999;
+}
+
 .font-9px {
  font-size: 9px !important;
 }
@ -99,7 +114,7 @@ html, body {
  z-index: 9999;
 }

-.horizontal-menu {
+.horizontal-menu{
  padding: 0;
  z-index: 999;  
  position: fixed;
@ -108,31 +123,9 @@ html, body {
  overflow: visible;
 }

-.top-bar {
-  position: relative;
-  top: 0;
-  bottom:0;
-  left:0;
-  right:0;  
-  height: 0;
-}
-
-.pubkey-info-top {
-  flex-wrap: wrap;
-  top: $toolbar-height;
-  margin-top: 1px;
-  min-height: $pubkey-info-height;
-  cursor: pointer;
-  display: flex;
-  left: $regular-sidenav-width;
-  width: calc(100% - #{$regular-sidenav-width}) !important;
-  align-content: center;
-} 
-
 .inner-sidenav-content {
  position: relative;
-  // top: calc(#{$toolbar-height} + #{$gap} + #{$pubkey-info-height});
-  top: 0;
+  top: calc(#{$toolbar-height} + #{$gap} + #{$pubkey-info-height});  
  bottom:0;
  left:0;
  right:0;  
@ -780,3 +773,16 @@ a {
 .qr-border {
  border: 2px solid white;
 }
+
+.pubkey-info-top {
+  flex-wrap: wrap;
+  margin-top: 1px;
+  min-height: $pubkey-info-height;
+  cursor: pointer;
+  display: flex;
+  left: $regular-sidenav-width;
+  width: calc(100% - #{$regular-sidenav-width}) !important;
+  align-content: center;
+  z-index: 9998;
+  top: $toolbar-height;
+}