From ea61d7f909c3afbee5a75acf56322c548f92ae93 Mon Sep 17 00:00:00 2001
From: Ivan Ljubisavljevic <ivan996sk@gmail.com>
Date: Tue, 3 May 2022 18:11:19 +0200
Subject: Redizajn form dataseta #129

---
 .../src/app/_elements/folder/folder.component.css  |   2 +-
 .../form-dataset/form-dataset.component.css        |  61 +++++-------
 .../form-dataset/form-dataset.component.html       | 108 +++++++++------------
 3 files changed, 69 insertions(+), 102 deletions(-)

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 137a9643..7f1003cc 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -157,7 +157,7 @@
 
 .file-content {
     width: 100%;
-    height: 92%;
+    height: 100%;
     position: relative;
 }
 
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
index da31cfcb..7c7eb0d3 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -4,26 +4,23 @@
     position: relative;
 }
 
+.bottomBar {
+    width: 50%;
+    margin: 1rem;
+    align-items: flex-start;
+}
+
+.fileButton{
+    margin-top: 10px;
+}
+
 .file-container {
     border: 4px solid transparent;
     position: relative;
     margin-left: 3%;
-    margin-top: 3rem;
     width: 94%;
-    min-height: 300px;
-    height: 75%;
-}
-
-.fileButton {
-    position: absolute;
-    margin-top: -3rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.fileButton label {
-    margin-left: 10px;
+    min-height: 400px;
+    height: 95%;
 }
 
 .dottedClass {
@@ -31,6 +28,13 @@
     border-radius: 25px;
 }
 
+.icon-display {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(4);
+}
+
 .hidden {
     visibility: hidden;
 }
@@ -42,28 +46,7 @@
     opacity: 0;
 }
 
-.file input {
-    border-radius: 4px;
-    margin-top: -15px;
-    width: 100%;
-    height: 100%;
-}
-
-.icon-display {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(4);
-}
-
-.bottomBar {
-    width: 50%;
-    margin: 1rem;
-    align-items: flex-start;
-}
-
-#bottomButton {
-    background-color: var(--ns-bg-dark-100);
-    width: 10%;
-    height: 65%;
+.file-container input{
+    border-radius: 5px;
+    left: 0%;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
index 0ecb3d30..ee65bdc6 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,74 +1,58 @@
 <div class="folderBox">
 
-    <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
-        
-        <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
-        
-        <div class="fileButton">   
-                <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
-                <label>{{filename}}</label>
-        </div>
-                
-        <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file"  accept=".csv">
-        
-        
-        <div class="mt-5 datatable">
-            <app-datatable [tableData]="tableData"></app-datatable>
-        </div>
-        
-        
-    </div>
-    
-
-    
-    
-
-    <div class="bottomBar">
-        <div class="row">
-            <div class="col-sm">
-                <div role="group">
-                    <div class="row">
-                        <mat-form-field class="example-full-width" appearance="fill">
-                            <mat-label>Naziv</mat-label>
-                            <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" >
-                            <!--[formControl]="nameFormControl"-->
-
-                            <mat-error *ngIf="nameFormControl.hasError('required')">
-                                Naziv je <strong>obavezan</strong>
-                            </mat-error>
-                        </mat-form-field>
+    <div class="row">
+        <div class="bottomBar">
+            <div class="row">
+                <div class="col-sm mb-3">
+                    <div class="fileButton">   
+                        <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
+                        <label>{{filename}}</label>
                     </div>
                 </div>
-            </div>
-            <div class="col-sm mb-3">
-
-                <!--<input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
-                -->
-            </div>
-            <div class="col-sm">
 
-
-
-                <mat-form-field appearance="fill">
-                    <mat-label>Delimiter</mat-label>
-                    <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()" value=",">
-                        <mat-option *ngFor="let option of delimiterOptions" [value]="option">
-                            {{ option }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
+                <div class="col-sm">
+                    <div role="group">
+                        <div class="row">
+                            <mat-form-field class="example-full-width" appearance="fill">
+                                <mat-label>Naziv</mat-label>
+                                <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" >
+                                
+
+                                <mat-error *ngIf="nameFormControl.hasError('required')">
+                                    Naziv je <strong>obavezan</strong>
+                                </mat-error>
+                            </mat-form-field>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm">
+                    <mat-form-field appearance="fill">
+                        <mat-label>Delimiter</mat-label>
+                        <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()" value=",">
+                            <mat-option *ngFor="let option of delimiterOptions" [value]="option">
+                                {{ option }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-
+    
+    <div class="row">
+        <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
+            
+            <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
+            
+            <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file"  accept=".csv">
+            
+            <div class="mt-5 datatable">
+                <app-datatable [tableData]="tableData"></app-datatable>
+            </div>
+            
+            
+        </div>
     </div>
 
-
-    <!--
-    <div class="d-flex flex-row align-items-center justify-content-center w-100 my-2">
-        <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button>
-    </div>
--->
 </div>
\ No newline at end of file
-- 
cgit v1.2.3