MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Full page slider add new arrows 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58955 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-06-17 14:31:31 +00:00
parent 9338c43a23
commit ddcfab668e
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
utils/full-page-slider/full-page-slider.component.css
View File

@ -1,10 +1,9 @@
section {
position: fixed;
top:10%;
left: 0;
left: 120px;
height: calc(100% - 100px);
width: 100%;
overflow: hidden;
width: calc(100% - 120px);
}
.menu {
@ -45,6 +44,17 @@ section {
color: var(--portal-main-color);
}
.menu a.previous:hover, .menu a.next:hover {
background-color: var(--portal-main-color);
border-radius: 50%;
display: flex;
padding: 5px;
}
.menu a.previous:hover path, .menu a.next:hover path {
fill: white;
}
.menu nav {
position: absolute;
top: 50%;
@ -66,7 +76,7 @@ section {
}
.menu nav > ul > li > a {
display: block;
display: table-cell;
border-radius: 100%;
width: 15px;
height: 15px;
@ -81,6 +91,6 @@ section {
-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 {
.menu nav > ul > li.uk-active > a, .menu nav > ul > li > a:hover {
background-color: #E95420;
}

25
utils/full-page-slider/full-page-slider.component.ts
View File

@ -7,12 +7,13 @@ import {SlideComponent} from "./slide.component";
<div class="menu">
<img class="logo" *ngIf="logoURL" [src]="logoURL">
<a *ngIf="state > 1" class="previous" (click)="onClick(state - 1)">
<span class="uk-icon uk-preserve">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="arrow-up">
<polygon points="10.5,4 15.37,9.4 14.63,10.08 10.5,5.49 6.37,10.08 5.63,9.4"></polygon>
<line fill="none" stroke="#000" x1="10.5" y1="16" x2="10.5" y2="5"></line>
</svg>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">
<g id="Group_3053" data-name="Group 3053" transform="translate(0)">
<path id="arrow-down-left2"
d="M10.405,11.834,2.022,3.451V7.076A1.011,1.011,0,0,1,0,7.076V1.011A1.009,1.009,0,0,1,1.011,0H7.076a1.011,1.011,0,1,1,0,2.022H3.451l8.383,8.383a1.011,1.011,0,1,1-1.429,1.429h0Z"
transform="translate(8.578 0) rotate(45)" fill="#e95420"/>
</g>
</svg>
</a>
<nav>
<ul>
@ -22,11 +23,17 @@ import {SlideComponent} from "./slide.component";
</ul>
</nav>
<a *ngIf="state < slides.length" class="next" (click)="onClick(state + 1)">
<span uk-icon="arrow-down"></span>
<svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">
<g id="Group_2442" data-name="Group 2442" transform="translate(-1221 -675)">
<path id="arrow-down-left2"
d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z"
transform="translate(1215.343 683.578) rotate(-45)" fill="#e95420"/>
</g>
</svg>
</a>
</div>
<section (wheel)="onWheel($event)">
<ng-content></ng-content>
<ng-content></ng-content>
</section>`,
styleUrls: ['full-page-slider.component.css']
})
@ -48,7 +55,7 @@ export class FullPageSliderComponent implements AfterContentInit {
setSlides(state = 1) {
this.slides.forEach((slide, index) => {
slide.state = state;
slide.y = -50 + (index + 1)*200 - state*200;
slide.y = -50 + (index + 1) * 200 - state * 200;
});
}