--

dmp-frontend/src/app/app.component.css

@@ -36,9 +36,15 @@
     cursor: pointer;
 }
 
+.navbar {
+    -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
+    -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
+    box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
+    margin-bottom: 5px;
+}
 
-.navbar-title
+
-{
+.navbar-title {
     position: absolute;
     width: 100%;
     left: 0;

dmp-frontend/src/app/app.component.html

@@ -1,6 +1,6 @@
 
 <div>
-  <nav class="navbar navbar-default">
+  <nav class="navbar navbar-default shadowed">
     <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
 

dmp-frontend/src/app/form/dynamic-form.component.css

@@ -1,3 +1,11 @@
+.hide{
+    display:none;
+}
+
+.show {
+    display:block;
+}
+
 .btncustom{
     background-color:#337ab7;
     color:white;
@@ -5,27 +13,78 @@
 }
 
 .parent-div {
-    height: calc(100vh - 80px);
+    height: calc(100vh - 65px); /* is height of window  minus heigh of header bar */
     width:100%;
 }
 
 
 
 .child-div-left{
+
+    -webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
+
+    padding:0px;
     height: 100%;
+    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
+    transition: 0.5s;
+}
+
+.child-div-caret{
+    position: absolute;
+    left: 98%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    font-size: 2em;
+    cursor: pointer;
+    
 }
 
 .child-div-right {
     overflow-y: scroll;
     height: 100%;
+    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
+    transition: 0.5s;
+    transition: visibility 0s, opacity 0.5s linear;
 }
 
 
 .form-body-container{
-    height: calc(100vh - 80px - 130px);
+    padding-bottom: 10px;
+    height: calc(100vh - 85px - 138px);  /* is height of window minus heigh of app header bar minus height of form footer bar */
     overflow-y:scroll; 
 }
 
-.form-footer-container {
+.form-footer-seperator{
-    height: 130px;
+
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgb(112, 112, 112);
+
+    /*
+    -webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
+    */
+
+    /*border-width: thin;*/
+    width:100%;
+}
+
+.form-footer-container {
+
+    /*
+    -webkit-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
+    -moz-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
+    box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
+    */
+
+    height: 138px;
+}
+
+.progress{
+    margin-top: 8px;
+    margin-bottom: 0px;
 }

dmp-frontend/src/app/form/dynamic-form.component.html

@@ -1,9 +1,7 @@
 <div class="parent-div">
 		
 		
-			<div class="col-md-8 col-sm-9 child-div-left" >
+			<div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
-				
-		
 				
 				<div class="col-md-12 form-body-container" id="form-container">
 		
@@ -38,8 +36,20 @@
 					</form>
 				</div>
 			
+
+				<div class="col-md-12 form-footer-seperator" >
+				</div>
+
+			
 				<div class="col-md-12 form-footer-container" >
 					
+						<div >
+							<div class="progress">
+								<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
+								<!-- {{dirtyValues}}% -->
+								</div>
+							</div>
+						</div>
 		
 					<div>
 						<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveFinalize();">Save</button>
@@ -90,7 +100,12 @@
 		
 
 
-			<div class="col-md-4  col-sm-3 child-div-right" id="toc-container">
+			<div class="child-div-caret" (click)="toggleTOC()">
+				<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ></i>
+			</div>
+
+
+			<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'hide' }[expandedToc]" id="toc-container">
 				<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 			</div>
 				

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -61,7 +61,6 @@ export class DynamicFormComponent implements OnInit {
   private fragment: string;
   xml2jsonOBJ: any;
 
-  expandedForm : boolean = false;
   expandedToc : boolean = true;
 
 
@@ -295,4 +294,9 @@ export class DynamicFormComponent implements OnInit {
     this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function.....
   }
 
+  toggleTOC(){
+    console.log("toggling toc")
+    this.expandedToc = !this.expandedToc;
+  }
+
 }

dmp-frontend/src/app/form/tableOfContents/toc.component.css

@@ -1,3 +1,10 @@
 .cursor-hand{
     cursor: pointer;
 }
+
+.toc-toggler {
+    position: absolute;
+    left: 0%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}

dmp-frontend/src/app/form/tableOfContents/toc.component.html

@@ -1,43 +1,43 @@
-<body data-spy="scroll" data-target="#toc">
+    <body data-spy="scroll" data-target="#toc">
-    <nav id="toc" data-toggle="toc">
+        <nav id="toc" data-toggle="toc">
-        <ul class="nav flex-column">
+            <ul class="nav flex-column">
-            <li class="nav-item">              
+                <li class="nav-item">              
-                    <div  *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
+                        <div  *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
-                            <ul>
+                                <ul>
-                                <li>
+                                    <li>
-                                    <a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
+                                        <a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
-                                    <ul *ngFor="let field of group.groupFields">
+                                        <ul *ngFor="let field of group.groupFields">
-                                        <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
+                                            <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
-                                            <a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
+                                                <a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
-                                        </li>
+                                            </li>
-                                    </ul>
+                                        </ul>
-                                </li>
+                                    </li>
             
-                            </ul>
+                                </ul>
-                    </div>
+                        </div>
                     
 
 
                     
-                <!-- <div *ngFor="let group of dataModel.groups">
+                    <!-- <div *ngFor="let group of dataModel.groups">
-                    <ul>
+                        <ul>
-                        <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
+                            <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
-                            <ul *ngFor="let field of group.groupFields">
+                                <ul *ngFor="let field of group.groupFields">
-                                <li *ngIf="field.visible == 'true'">
+                                    <li *ngIf="field.visible == 'true'">
-                                    <a class="nav-link" href="#field.key">{{field.label}}</a>
+                                        <a class="nav-link" href="#field.key">{{field.label}}</a>
-                                </li>
+                                    </li>
-                            </ul>
+                                </ul>
-                        </li>
+                            </li>
 
-                    </ul>
+                        </ul>
 
 
-                </div> -->
+                    </div> -->
 
 
 
 
-            </li>
+                </li>
-        </ul>
+            </ul>
-    </nav>
+        </nav>
-</body>
+    </body>

dmp-frontend/src/app/services/login/token.service.ts

@@ -83,6 +83,7 @@ export class TokenService {
 
 
   logout(){
+    debugger;
     //set the log out actions here
     this.setLoggedIn(false);
     this.setEmail(null);

dmp-frontend/src/app/services/rest-base.ts

@@ -18,6 +18,7 @@ export class RestBase {
     
 
     
+    
     /*
     protocol: string = "http";
     hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";//
@@ -33,7 +34,6 @@ export class RestBase {
     webappname: string = "dmp-backend";
 
     
-    
     proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";
     loginPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/login/";
     restPath: string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/rest/";