diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts
index 548e0696..51cc1ec1 100644
--- a/sharedComponents/navigationBar.component.ts
+++ b/sharedComponents/navigationBar.component.ts
@@ -27,6 +27,7 @@ export class NavigationBarComponent {
@Input() enableSearch: boolean = false;
@Input() searchRoute: string = "/search/find";
@Input() searchPlaceHolder: string = "Search for research results";
+ @Input() showLogo: boolean = true;
keyword: string = "";
logosrc: string = "";
diff --git a/utils/full-page-slider/animation.ts b/utils/full-page-slider/animation.ts
index e97a9552..5d619e8f 100644
--- a/utils/full-page-slider/animation.ts
+++ b/utils/full-page-slider/animation.ts
@@ -5,6 +5,6 @@ export const animation = trigger('state', [
transform: 'translate(-50%, {{y}}%)'
}), {params: {y: -50}}),
transition('* => *', [
- animate('1s')
- ])
+ animate('{{time}}s')
+ ], {params: {time: 0.5}})
]);
diff --git a/utils/full-page-slider/full-page-slider.component.css b/utils/full-page-slider/full-page-slider.component.css
index 97f509a8..8bb40ca4 100644
--- a/utils/full-page-slider/full-page-slider.component.css
+++ b/utils/full-page-slider/full-page-slider.component.css
@@ -2,7 +2,85 @@ section {
position: fixed;
top:10%;
left: 0;
- height: 90%;
+ height: calc(100% - 100px);
width: 100%;
overflow: hidden;
}
+
+.menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 120px;
+ border-right: 1px solid #4687E6;
+ background-color: white;
+ z-index: 1;
+}
+
+.menu .logo {
+ position: absolute;
+ top: 5%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.menu line {
+ stroke: var(--portal-main-color);
+}
+
+.menu a.previous {
+ position: absolute;
+ top: 25%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--portal-main-color);
+}
+
+.menu a.next {
+ position: absolute;
+ top: 75%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--portal-main-color);
+}
+
+.menu nav {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.menu nav > ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.menu nav > ul > li {
+ border-radius: 100%;
+ padding: 8px;
+ border: 1px solid white;
+ margin-bottom: 15px;
+}
+
+.menu nav > ul > li > a {
+ display: block;
+ border-radius: 100%;
+ width: 16px;
+ height: 16px;
+ background-color: rgba(233, 84, 32, 0.4);
+}
+
+.menu nav > ul > li.uk-active {
+ border: 1px solid #E95420;
+ transition: border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+ -webkit-animation : border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+ -moz-animation : border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+ -o-animation : border-top-color 0.25s linear, border-right-color 0.25s linear 0.10s, border-bottom-color 0.25s linear 0.30s, border-left-color 0.25s linear 0.40s;
+}
+
+.menu nav > ul > li.uk-active > a {
+ background-color: #E95420;
+}
diff --git a/utils/full-page-slider/full-page-slider.component.ts b/utils/full-page-slider/full-page-slider.component.ts
index 1031edc6..ada107dd 100644
--- a/utils/full-page-slider/full-page-slider.component.ts
+++ b/utils/full-page-slider/full-page-slider.component.ts
@@ -4,8 +4,29 @@ import {SlideComponent} from "./slide.component";
@Component({
selector: 'fp-slider',
template: `
+
`,
styleUrls: ['full-page-slider.component.css']
})
@@ -14,6 +35,8 @@ export class FullPageSliderComponent implements AfterContentInit {
@ContentChildren(SlideComponent) slides: QueryList
;
@Input()
public initSlide = 1;
+ @Input()
+ public logoURL;
public animate: boolean = false;
public state = 0;
@@ -37,16 +60,27 @@ export class FullPageSliderComponent implements AfterContentInit {
this.setSlides(this.state);
setTimeout(() => {
this.animate = false;
- }, 1000);
+ }, 500);
} else if (event.deltaY < 0 && (this.state !== 1)) {
this.state--;
this.setSlides(this.state);
setTimeout(() => {
this.animate = false;
- }, 1000);
+ }, 500);
} else {
this.animate = false;
}
}
}
+
+ public onClick(index: number) {
+ if (!this.animate) {
+ this.animate = true;
+ this.state = index;
+ this.setSlides(this.state);
+ setTimeout(() => {
+ this.animate = false;
+ }, 500);
+ }
+ }
}