From c71ced076e4e0b713d428eca304f541f02c8ee6f Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sat, 23 Apr 2022 18:59:27 +0200
Subject: Doterao stil za playlist komponentu, i tabelu podataka. Dodao arhivu
 u navbar i obrisao neke stare rute.

---
 .../_elements/datatable/datatable.component.html   | 34 +++++++++-------------
 .../src/app/_elements/navbar/navbar.component.html |  6 +---
 .../app/_elements/playlist/playlist.component.css  | 10 +++++--
 .../app/_elements/playlist/playlist.component.html | 10 +++----
 4 files changed, 27 insertions(+), 33 deletions(-)

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index 8db62aff..fe359db0 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -1,18 +1,16 @@
 <div *ngIf="tableData.hasInput">
-    <div>
-        <div *ngIf="!tableData.loaded" backgroundColor="secondary" style="width: 100%; height: 100%;"
-            class="d-flex justify-content-center align-items-center">
+    <div class="text-white">
+        <div *ngIf="!tableData.loaded" style="width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center">
             <app-loading></app-loading>
         </div>
         <div *ngIf="tableData.loaded && tableData.data">
-            <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0"
-                class="d-flex flex-row justify-content-center align-items-center">
+            <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" class="d-flex flex-row justify-content-center align-items-center">
                 <div class="fs-5 mb-3">
                     Tabela {{tableData.numCols}}x{{tableData.numRows}}
                 </div>
             </div>
-            <div class="table-responsive" style="overflow: auto; border-radius: 5px;">
-                <table *ngIf="tableData.data.length > 0 && tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light">
+            <div style="border-radius: 5px; overflow-x: auto; overflow-y: hidden;">
+                <table *ngIf="tableData.data.length && tableData.data[0].length > 0" class="table table-responsive table-sm text-offwhite row-height">
                     <thead>
                         <tr>
                             <th *ngFor="let item of tableData.data[0]; let i = index">{{item}}</th>
@@ -22,21 +20,17 @@
                         <tr *ngFor="let row of tableData.data | slice:1">
                             <td *ngFor="let col of row">{{col}}</td>
                         </tr>
-                        <tr>
-                            <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 11}} redova...</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <table *ngIf="tableData.data.length > 0 && !tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light">
-                    <tbody>
-                        <tr *ngFor="let row of tableData.data">
-                            <td *ngFor="let col of row">{{col}}</td>
-                        </tr>
-                        <tr>
-                            <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 10}} redova...</td>
-                        </tr>
                     </tbody>
                 </table>
+                <tfoot>
+                    <tr>
+                        <td colspan="100" class="fs-6">
+                            <div class="footer-center">
+                                <div>+ {{tableData.numRows - 11}} redova...</div>
+                            </div>
+                        </td>
+                    </tr>
+                </tfoot>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 41105405..5390136d 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -9,9 +9,7 @@
                 <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
                 <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a>
                 </li>
-                <li><a routerLink="training" class="nav-link px-2" [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a>
-                </li>
-                <li><a routerLink="my-predictors" class="nav-link px-2" [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
+                <li><a routerLink="archive" class="nav-link px-2" [class]="(currentUrl === '/archive') ? 'text-secondary' : 'text-white'">Arhiva</a>
                 </li>
             </ul>
 
@@ -20,8 +18,6 @@
                     <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle">
                 </a>
                 <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end">
-                    <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li>
-                    <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li>
                     <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li>
                     <li>
                         <hr class="dropdown-divider">
diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css
index 7ce320d9..83448e51 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.css
+++ b/frontend/src/app/_elements/playlist/playlist.component.css
@@ -13,7 +13,7 @@
 .ns-cards {
     position: relative;
     width: 300%;
-    height: 36rem;
+    height: 26rem;
     margin-bottom: 20px;
 }
 
@@ -28,6 +28,10 @@
     cursor: pointer;
 }
 
+.ns-card:hover {
+    opacity: 1 !important;
+}
+
 input[type=radio] {
     display: none;
 }
@@ -36,7 +40,7 @@ input[type=radio] {
 #item-2:checked~.ns-cards #view-item-1,
 #item-3:checked~.ns-cards #view-item-2 {
     transform: translatex(-40%) scale(0.8);
-    opacity: 0.4;
+    opacity: 0.5;
     z-index: 0;
 }
 
@@ -44,7 +48,7 @@ input[type=radio] {
 #item-2:checked~.ns-cards #view-item-3,
 #item-3:checked~.ns-cards #view-item-1 {
     transform: translatex(40%) scale(0.8);
-    opacity: 0.4;
+    opacity: 0.5;
     z-index: 0;
 }
 
diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html
index fdb426ed..97ebe6a5 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.html
+++ b/frontend/src/app/_elements/playlist/playlist.component.html
@@ -3,17 +3,17 @@
     <input type="radio" name="slider" id="item-2" value="1" [(ngModel)]="selectedId">
     <input type="radio" name="slider" id="item-3" value="2" [(ngModel)]="selectedId">
     <div class="ns-cards">
-        <label class="ns-card bg-light overflow-auto" for="item-1" id="view-item-1">
+        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-1" id="view-item-1">
             <app-datatable [tableData]="tableDatas[0]"></app-datatable>
         </label>
-        <label class="ns-card bg-light overflow-auto" for="item-2" id="view-item-2">
+        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-2" id="view-item-2">
             <app-datatable [tableData]="tableDatas[1]"></app-datatable>
         </label>
-        <label class="ns-card bg-light overflow-auto" for="item-3" id="view-item-3">
+        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-3" id="view-item-3">
             <app-datatable [tableData]="tableDatas[2]"></app-datatable>
         </label>
     </div>
-    <div class="ns-infobox">
-        <app-item-dataset [dataset]="datasets[getIndex(selectedId)]"></app-item-dataset>
+    <div class="ns-infobox text-offwhite">
+        <h2>{{datasets[getIndex(selectedId)].name}}</h2>
     </div>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3