From 57159bf523bc6a934a843409491cb9deca9c7e73 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Fri, 10 Nov 2017 15:57:08 +0200
Subject: [PATCH] fixed scrollers on form container

---
 .../src/app/form/dynamic-form.component.css   |  32 ++---
 .../src/app/form/dynamic-form.component.html  | 133 ++++++++++--------
 .../src/app/form/dynamic-form.component.ts    |   2 +-
 dmp-frontend/src/index.html                   |   2 +-
 4 files changed, 87 insertions(+), 82 deletions(-)

diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index f5621e21c..81e4095c2 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -4,36 +4,28 @@
     margin-top:15px;
 }
 
-
-
-.styled-scrollbar::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	background-color: #F5F5F5;
-	border-radius: 10px;
-}
-
-.styled-scrollbar::-webkit-scrollbar-thumb {
-	border-radius: 10px;
-	background-image: -webkit-gradient(linear,
-            left bottom,
-            left top,
-            color-stop(0.44, rgb(122,153,217)),
-            color-stop(0.72, rgb(73,125,189)),
-            color-stop(0.86, rgb(28,58,148)));
-}
-
 .parent-div {
     height: calc(100vh - 80px);
     width:100%;
 }
 
+
+
 .child-div-left{
-    overflow-y: scroll;
     height: 100%;
 }
 
 .child-div-right {
     overflow-y: scroll;
     height: 100%;
+}
+
+
+.form-body-container{
+    height: calc(100vh - 80px - 130px);
+    overflow-y:scroll; 
+}
+
+.form-footer-container {
+    height: 130px;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index b8eb81c32..b27256a19 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,83 +1,96 @@
 <div class="parent-div">
 
 
-	<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" id="form-container">
+	<div class="col-md-8 col-sm-9 child-div-left" >
+		
+
 			
-		<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+		<div class="col-md-12 form-body-container" id="form-container">
 
-			<div *ngFor = "let section of dataModel.sections; let i = index;">							
-					<div *ngIf="section.groupFields.length>0 else sectionHeader">												
-							<div  *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
-							<div *ngFor="let group of section.groupFields">
-									<div *ngIf="shouldIShow(group);"	>	
-								<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
-									</div>
-							</div>					
-						
+			<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
+					
+				<div *ngFor = "let section of dataModel.sections; let i = index;">							
+						<div *ngIf="section.groupFields.length>0 else sectionHeader">												
+								<div  *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
+								<div *ngFor="let group of section.groupFields">
+										<div *ngIf="shouldIShow(group);"	>	
+									<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
+										</div>
+								</div>					
+							
+					</div>
+					<ng-template *ngIf="shouldIShow(section);" #sectionHeader>     
+						<h2>{{section.title}}</h2>
+					</ng-template>			
+				</div>		
+	
+				<div *ngFor="let field of dataModel.fields">
+					<div [formGroup]="form" class="form-group">
+						<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
+					</div>
 				</div>
-				<ng-template *ngIf="shouldIShow(section);" #sectionHeader>     
-					<h2>{{section.title}}</h2>
-				</ng-template>			
-			</div>		
-
-			<div *ngFor="let field of dataModel.fields">
-				<div [formGroup]="form" class="form-group">
-					<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
-				</div>
-			</div>
-
-			<!-- <div *ngFor="let group of dataModel.groups">
-				<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
-			</div> -->
+	
+				<!-- <div *ngFor="let group of dataModel.groups">
+					<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
+				</div> -->
+	
+	
+			</form>
+		</div>
+	
+		<div class="col-md-12 form-footer-container" >
+			
 
 			<div>
-				<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid">Save</button>
+				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" (click)="SaveFinalize();">Save</button>
 				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" data-toggle="modal" data-target="#confirmModal">Finalize</button>
 			</div>
-
+	
 			<div *ngIf="payLoad" class="form-row">
 				<strong>Saved the following values</strong><br>{{payLoad}}
 			</div>
-
-		</form>
-		<p>Form value: {{ form.value | json }}</p>
-
-
-
-		<div class="text-center">
-			<!-- pagination -->
-			<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
-				<li [ngClass]="{disabled:pagination.currentPage === 1}">
-					<a (click)="setPage(1)" class="cursor-link" >First</a>
-				</li>
-				<li [ngClass]="{disabled:pagination.currentPage === 1}">
-					<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
-				</li>
-				<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
-					<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
-				</li>
-				<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-					<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
-				</li>
-				<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-					<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
-				</li>
-			</ul>
-		</div>
-
-		<div >
-			<div class="progress">
-				<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
-					{{dirtyValues}}%
-				</div>
+	
+			<!--
+			<p>Form value: {{ form.value | json }}</p>
+			-->
+	
+			
+			<div class="text-center">
+				<!-- pagination -->
+				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
+					<li [ngClass]="{disabled:pagination.currentPage === 1}">
+						<a (click)="setPage(1)" class="cursor-link" >First</a>
+					</li>
+					<li [ngClass]="{disabled:pagination.currentPage === 1}">
+						<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
+					</li>
+					<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
+						<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
+					</li>
+					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+						<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
+					</li>
+					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+						<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
+					</li>
+				</ul>
 			</div>
+
+
 		</div>
 
+
+		
+
+
+		
+
+
 	</div>	
 
 
 
-	<div class="col-md-4  col-sm-3 child-div-right styled-scrollbar" id="toc-container">
+	<div class="col-md-4  col-sm-3 child-div-right" id="toc-container">
 		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 	</div>
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 5a9bcc2f9..4f9f60e05 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -196,7 +196,7 @@ export class DynamicFormComponent implements OnInit {
 
       var formScroller = new PerfectScrollbar("#form-container");
       var tocScroller = new PerfectScrollbar("#toc-container");
-      debugger;
+      
   }
 
   scrollToElemID(elemID) {
diff --git a/dmp-frontend/src/index.html b/dmp-frontend/src/index.html
index 834cd2240..26b0a0150 100644
--- a/dmp-frontend/src/index.html
+++ b/dmp-frontend/src/index.html
@@ -39,7 +39,7 @@
 		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 
-		<!-- Customized scrollbars -->
+		<!-- Customized scrollbars source: https://github.com/utatti/perfect-scrollbar -->
 		<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
 		<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>