minor adjustements to padding and headers

polypheny · Mar 25, 2024 · 9442c1f · 9442c1f
1 parent 74dd63e
commit 9442c1f
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 38 deletions.
diff --git a/src/app/components/breadcrumb/breadcrumb.component.html b/src/app/components/breadcrumb/breadcrumb.component.html
@@ -4,7 +4,7 @@
 
             <c-col md="6" class="d-flex align-items-center">
                 <c-breadcrumb
-                        class="m-0 py-3"
+                        class="m-0 py-3 ms-3"
                         style="--cil-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);">
                     <li *ngFor="let b of breadcrumbs" class="breadcrumb-item">
                         <ng-container *ngIf="b.routerLink">

diff --git a/src/app/components/graph/graph.component.ts b/src/app/components/graph/graph.component.ts
@@ -21,8 +21,6 @@ export class GraphComponent implements OnInit, OnChanges {
     _colorList;
     @Input() colorList: Array<string>;
 
-    //@Input() config?:any;
-
     _min: number;
     @Input() min: number;
 
@@ -60,9 +58,6 @@ export class GraphComponent implements OnInit, OnChanges {
                     labelString: ''
                 },
                 ticks: {
-                    //values are set by updateOptions()
-                    //suggestedMin: 0,
-                    //suggestedMax: 0
                 }
             },
             x: {
@@ -109,7 +104,6 @@ export class GraphComponent implements OnInit, OnChanges {
      * other variables depend on it
      */
     ngOnChanges(changes: SimpleChanges) {
-        console.log(changes)
         if (changes['chartType']) {
             this.setChartType(changes['chartType'].currentValue);
         }
@@ -217,7 +211,7 @@ export class GraphComponent implements OnInit, OnChanges {
                 return this.arr[this.nextIndex - 1];
             }
         }
-    });
+    })
 
 }
 

diff --git a/src/app/components/left-sidebar/left-sidebar.component.html b/src/app/components/left-sidebar/left-sidebar.component.html
@@ -54,8 +54,7 @@
                          [treeDragEnabled]="node.allowDrag()">
                         <span *ngIf="node.data.icon" class="algSymbol"
                               [ngClass]="[node.data.icon, 'sidebarIcon']"></span>
-                        <span *ngIf="node.data.algSymbol" [innerHTML]="node.data.algSymbol"
-                              class="algSymbol"></span>
+                        <span *ngIf="node.data.algSymbol" [innerHTML]="node.data.algSymbol" class="algSymbol"></span>
                         <span class="title" [innerHTML]="node.data.name"></span>
                     </div>
                 </div>

diff --git a/src/app/components/left-sidebar/left-sidebar.component.scss b/src/app/components/left-sidebar/left-sidebar.component.scss
@@ -29,12 +29,17 @@
 
 .separator, .separator .sidebarIcon {
   background: transparent !important;
-  //color: #6c757d !important; /* from bootstrap .text-muted */
   font-size: 0.75em;
   text-transform: uppercase;
   box-shadow: none;
   cursor: default;
-  margin-top: 1em;
+  margin-top: 2em;
+  font-weight: bold;
+
+  &:hover {
+    background: transparent;
+    color: white !important;
+  }
 }
 
 .schema-button {

diff --git a/src/app/containers/default-layout/default-layout.component.html b/src/app/containers/default-layout/default-layout.component.html
@@ -1,10 +1,10 @@
 <div class="min-vh-100 max-vh-100 wrapper d-flex flex-column overflow-hidden w-100">
-    <c-navbar class="position-sticky w-100 z-3" expand="lg">
+    <c-navbar class="position-sticky w-100 z-3 border-bottom" expand="lg">
         <c-container fluid>
             <a [routerLink]="'/'" cNavbarBrand>
                 <img ngSrc="assets/img/brand/logo.svg" alt="Polypheny Logo" height="50" width="200">
             </a>
-            <div class="ms-auto justify-content-end" #collapseRef="cCollapse" navbar cCollapse>
+            <div class="ms-auto justify-content-end me-3" #collapseRef="cCollapse" navbar cCollapse>
                 <c-navbar-nav>
                     <c-nav-item>
                         <a cNavLink [routerLink]="['/views/monitoring']" routerLinkActive="active">

diff --git a/src/app/containers/default-layout/default-layout.component.scss b/src/app/containers/default-layout/default-layout.component.scss
@@ -34,6 +34,8 @@
   overflow: hidden;
 }
 
-
+.nav-item {
+  padding: 0 0.1rem;
+}
 
 
diff --git a/src/app/views/adapters/adapters.component.html b/src/app/views/adapters/adapters.component.html
@@ -83,11 +83,11 @@ <h2>Adapters</h2>
 
         </c-col>
         <c-col size="1" [lg]="6" class="fixed-height fixed-width add-adapter-wrapper">
-            <button cButton color="primary" *ngIf="type === 'source'" class="add-adapter"
+            <button cButton color="primary" *ngIf="type === 'source'" class="add-btn"
                     [routerLink]="['./addSource']">
                 <i class="fa fa-plus"></i>
             </button>
-            <button cButton color="primary" *ngIf="type === 'store'" class="add-adapter" [routerLink]="['./addStore']">
+            <button cButton color="primary" *ngIf="type === 'store'" class="add-btn" [routerLink]="['./addStore']">
                 <i class="fa fa-plus"></i>
             </button>
         </c-col>

diff --git a/src/app/views/adapters/adapters.component.scss b/src/app/views/adapters/adapters.component.scss
@@ -92,12 +92,6 @@
   flex: 0;
 }
 
-.add-adapter {
-  width: 50px;
-  height: 50px;
-  margin-top: 90px;
-  flex: 0;
-}
 
 .center {
   text-align: center;

diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
@@ -72,16 +72,15 @@ export class DashboardComponent implements OnInit, OnDestroy {
         this.max = 0;
         this._crud.getDashboardDiagram(new MonitoringRequest(interval)).subscribe(
             res => {
-                console.log(res);
                 this.dashboardInformation = <DashboardData>res;
 
                 if (this.dashboardInformation != null || this.diagramCounter > 120) {
                     clearInterval(this.diagramInterval);
-                    console.log(this.dashboardInformation)
-                    Object.entries(this.dashboardInformation).forEach(
-                        ([key, {"left": dql, "right": dml}]) => {
 
-                            this.labels.push(key);
+                    Object.entries(this.dashboardInformation).forEach(
+                        ([key, {'left': dql, 'right': dml}]) => {
+                            const timestamp = key && key.length > 10 ? key.substring(0, key.length - 10) : key;
+                            this.labels.push(timestamp);
                             this.dataDml.push(dml);
                             this.dataDql.push(dql);
 

diff --git a/src/app/views/query-interfaces/query-interfaces.component.html b/src/app/views/query-interfaces/query-interfaces.component.html
@@ -72,7 +72,7 @@ <h2>Query Interfaces</h2>
         </c-col>
 
         <c-col size="1" class="fixed-height">
-            <button cButton color="primary" style="margin-top: 90px" [routerLink]="['./add']">
+            <button cButton color="primary" class="add-btn" [routerLink]="['./add']">
                 <i class="fa fa-plus"></i>
             </button>
         </c-col>

diff --git a/src/app/views/schema-editing/schema-editing.component.html b/src/app/views/schema-editing/schema-editing.component.html
@@ -3,10 +3,13 @@
     <app-edit-entity [currentRoute]="currentRoute"></app-edit-entity>
 </div>
 
-<ng-container class="pt-3" *ngIf="currentRoute()?.trim() === ''">
-    <h1>Namespaces</h1>
-    <p>Select an item from the left sidebar to edit its entities.</p>
-    <br>
+<c-container class="pt-3 px-3" *ngIf="currentRoute()?.trim() === ''">
+    <c-row>
+        <h1>Namespaces</h1>
+        <p>Select an item from the left sidebar to edit its entities.</p>
+        <br>
+    </c-row>
+
 
     <c-row>
         <c-col lg="6" class="fixed-width">
@@ -84,4 +87,4 @@ <h1>Namespaces</h1>
             </c-card>
         </c-col>
     </c-row>
-</ng-container>
+</c-container>
diff --git a/src/app/views/table-view/table-view.component.html b/src/app/views/table-view/table-view.component.html
@@ -1,10 +1,10 @@
-<ng-container *ngIf="fullName()">
+<c-container class="px-3" *ngIf="fullName()">
     <h5>{{ fullName() }}</h5>
     <br>
-</ng-container>
+</c-container>
 <app-reload-button [loading]="loading()" [condition]="entity()" [action]="this.reload"></app-reload-button>
-<div class="w-100">
+<div class="w-100 px-3">
     <app-data-view class="w-100 overflow-x-auto" [result]="$result()" [loading]="loading()" [config]="entityConfig()"
                    [$entity]="entity"></app-data-view>
 </div>
-<p class="pt-3" *ngIf="!entity()">Please select an entity in the left sidebar to view its data.</p>
+<p class="pt-3 px-3" *ngIf="!entity()">Please select an entity in the left sidebar to view its data.</p>
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
@@ -45,3 +45,11 @@ audio, video {
 .bg-footer {
   background-color: $footer-bg;
 }
+
+
+.add-btn {
+  width: 50px;
+  height: 50px;
+  margin-top: 90px;
+  flex: 0;
+}