Fixed UI issues with clarity upgrade

Elite-Kode · Jan 16, 2020 · eaf36dc · eaf36dc
1 parent 283b698
commit eaf36dc
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 22 deletions.
diff --git a/server/modules/eddn/index.js b/server/modules/eddn/index.js
@@ -57,7 +57,7 @@ sock.on('message', topic => {
         case journal.schemaId[1]:
             // journal.trackSystem(message.message);
             // journal.trackSystemV3(message.message);
-            // journal.trackSystemV4(message.message, message.header);
+            journal.trackSystemV4(message.message, message.header);
             // journal.display();
             break;
         // case Outfitting.schemaId:

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -12,10 +12,10 @@
             <a routerLink="/bgsbot" routerLinkActive="active" class="nav-link"><span class="nav-text">BGSBot</span></a>
         </div>
         <div class="header-actions">
-            <a routerLink="/tick" routerLinkActive="active" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-bottom-right nav-link">
+            <a routerLink="/tick" routerLinkActive="active" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-bottom-right nav-link tick-link">
                 <div class="tick">
                     <clr-icon shape="clock"></clr-icon>
-                    <span class="nav-text">{{tick.time}}</span>
+                    <span class="nav-text tick-time">{{tick.time}}</span>
                 </div>
                 <span class="tooltip-content">Last Tick (UTC)</span>
             </a>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -28,11 +28,20 @@
         transform: unset !important;
         margin-left: 24px !important;
     }
+
     .nav-text {
         position: relative;
     }
 }
 
+.tick-link {
+    padding: 0.75rem 0 0 0!important;
+}
+
+.tick-time {
+    padding: 0 1rem;
+}
+
 .theme-selector {
     cursor: pointer;
 }
@@ -42,10 +51,12 @@
         clr-icon {
             margin-left: 16px !important;
         }
+
         .nav-text {
             padding: 0 16px;
         }
     }
+
     .theme-selector {
         width: 1.5rem !important;
     }
@@ -62,10 +73,16 @@
         background-color: rgba(255, 255, 255, 0.6);
         z-index: 590;
     }
+
     .flex {
         display: flex;
     }
+
     .full-width {
         width: 100%;
     }
+
+    clr-date-container.clr-form-control {
+        padding-left: 0.25rem;
+    }
 }
diff --git a/src/app/main/factions/faction-view.component.html b/src/app/main/factions/faction-view.component.html
@@ -116,12 +116,20 @@ <h3>Conflicts</h3>
         Faction not in conflict anywhere
     </ng-template>
 
-    <div class="date-filter">
-        <h3>Date Filter</h3>
-        <label>From</label>
-        <input type="date" [clrDate]="fromDateFilter" (clrDateChange)="fromDateChange($event)">
-        <label>To</label>
-        <input type="date" [clrDate]="toDateFilter" (clrDateChange)="toDateChange($event)">
+    <h3>Date Filter</h3>
+    <div class="clr-row">
+        <form clrForm clrLayout="row">
+            <clr-date-container>
+                <label>From</label>
+                <input type="date" [clrDate]="fromDateFilter" (clrDateChange)="fromDateChange($event)">
+            </clr-date-container>
+        </form>
+        <form clrForm clrLayout="row">
+            <clr-date-container>
+                <label>To</label>
+                <input type="date" [clrDate]="toDateFilter" (clrDateChange)="toDateChange($event)">
+            </clr-date-container>
+        </form>
     </div>
     <div class="card">
         <div class="card-block">

diff --git a/src/app/main/systems/system-view.component.html b/src/app/main/systems/system-view.component.html
@@ -131,13 +131,20 @@ <h6>Conflict Status: {{conflict.status}}</h6>
         No Conflicts in system
     </ng-template>
 
-
-    <div class="date-filter">
-        <h3>Date Filter</h3>
-        <label>From</label>
-        <input type="date" [clrDate]="fromDateFilter" (clrDateChange)="fromDateChange($event)">
-        <label>To</label>
-        <input type="date" [clrDate]="toDateFilter" (clrDateChange)="toDateChange($event)">
+    <h3>Date Filter</h3>
+    <div class="clr-row">
+        <form clrForm clrLayout="row">
+            <clr-date-container>
+                <label>From</label>
+                <input type="date" [clrDate]="fromDateFilter" (clrDateChange)="fromDateChange($event)">
+            </clr-date-container>
+        </form>
+        <form clrForm clrLayout="row">
+            <clr-date-container>
+                <label>To</label>
+                <input type="date" [clrDate]="toDateFilter" (clrDateChange)="toDateChange($event)">
+            </clr-date-container>
+        </form>
     </div>
     <div class="card">
         <div class="card-block">

diff --git a/src/app/tick/tick.component.html b/src/app/tick/tick.component.html
@@ -1,11 +1,19 @@
 <div class="content-area">
     <h1>Tick</h1>
-    <div class="date-filter">
-        <h3>Date Filter</h3>
-        <label>From</label>
-        <input type="date" [clrDate]="fromDateFilter" (clrDateChange)="fromDateChange($event)">
-        <label>To</label>
-        <input type="date" [clrDate]="toDateFilter" (clrDateChange)="toDateChange($event)">
+    <h3>Date Filter</h3>
+    <div class="clr-row">
+        <form clrForm clrLayout="row">
+            <clr-date-container>
+                <label>From</label>
+                <input type="date" [clrDate]="fromDateFilter" (clrDateChange)="fromDateChange($event)">
+            </clr-date-container>
+        </form>
+        <form clrForm clrLayout="row">
+            <clr-date-container>
+                <label>To</label>
+                <input type="date" [clrDate]="toDateFilter" (clrDateChange)="toDateChange($event)">
+            </clr-date-container>
+        </form>
     </div>
     <clr-datagrid [clrDgLoading]="loading">
         <clr-dg-column>Tick At (UTC)</clr-dg-column>