[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

utils/full-page-slider/full-page-slider.component.css

@@ -1,10 +1,9 @@
 section {
   position: fixed;
   top:10%;
-  left: 0;
+  left: 120px;
   height: calc(100% - 100px);
-  width: 100%;
+  width: calc(100% - 120px);
-  overflow: hidden;
 }
 
 .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;
 }

utils/full-page-slider/full-page-slider.component.ts

@@ -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 xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">
-          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="arrow-up">
+          <g id="Group_3053" data-name="Group 3053" transform="translate(0)">
-            <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>
+            <path id="arrow-down-left2"
-            <line fill="none" stroke="#000" x1="10.5" y1="16" x2="10.5" y2="5"></line>
+                  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"
-          </svg>
+                  transform="translate(8.578 0) rotate(45)" fill="#e95420"/>
-        </span>
+          </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;
     });
   }