MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

-

This commit is contained in:
Nikolaos Laskaris 2017-11-22 16:27:57 +02:00
parent 4bd813787e
commit eedc7b735b
3 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dmp-frontend/src/app/form/dynamic-form.component.css
View File

@ -32,20 +32,33 @@
}
.collapsed-div-caret{
position: absolute;
width: 120px;
left: 98%;
top: 103px;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 1.3em;
cursor: pointer;
}
.child-div-caret{
position: absolute;
left: 98%;
left: 120%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 2em;
font-size: 1.3em;
cursor: pointer;
}
.child-div-right {
overflow-y: scroll;
height: 100%;
height: calc(100% - 44px);
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: width 0.5s;
@ -58,6 +71,7 @@
}
.form-body-container{
padding-bottom: 10px;
height: calc(100vh - 85px - 32px - 138px); /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */

18
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -94,10 +94,22 @@
</div>
<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 *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
<!--
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
-->
<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
</div>
<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()">
<!--
<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
-->
<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
</div>
</div>
<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'shrink-width' }[expandedToc]" id="toc-container">
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>

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

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