diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a01fee7be..c34673c07 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -35,7 +35,12 @@ const routes: Routes = [ ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], + imports: [RouterModule.forRoot(routes, { + // preloadingStrategy: PreloadAllModules, + scrollPositionRestoration: 'top', + onSameUrlNavigation: 'reload', + // relativeLinkResolution: 'corrected' + })], exports: [RouterModule] }) export class AppRoutingModule { } diff --git a/src/app/pages/methodology/methodology.component.html b/src/app/pages/methodology/methodology.component.html index 5e5d2f91c..4f7cba8ec 100644 --- a/src/app/pages/methodology/methodology.component.html +++ b/src/app/pages/methodology/methodology.component.html @@ -1,347 +1,271 @@ -
+
-
- -
-

Coming soon....

+
+

+ Overview +

+
+
+
+
+
+ +
+
+ Starting from existing
research-related data sources +
+
+
+
+ +
+
+
+
+ +
+
+ build an open, global
and trusted Research graph +
+
+
+
+
+
+ +
+
+ we perform Statistical Analysis and produce + Open Science Indicators +
+
+
+
+ +
+
+ furthermore Network
Analysis producing + Collaboration Indicators +
+
+
+
+ +
+
+ Often combine with external data + (patents, social, company) and + perform Impact Analysis to + produce Innovation Indicators +
+
+
+
+
+ +
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ +
+ +
+ +
+

+ Terminology and construction +

+
+ + + + + + + +
    + + +
  • + + + + + + + + + + + + + + + + + + + + + +
    Research Outcomes +
    There are currently four different types of research outcomes in the OpenAIRE Research + Graph: +
    +
      +
    • Publication
      • +
    • Dataset
      • +
    • Software
      • +
    • Other Research Product
      • +
    +
    + OpenAIRE deduplicates (merges) different records of research outcomes and keeps the metadata of all + instances. +
    +
    PublicationResearch outcomes intended for human reading (published articles, pre-prints, conference papers, + presentations, technical reports, etc.) +
    Dataset +

    Research data

    +

    Granularity is not defined by OpenAIRE, it reflects the granularity supported by + the sources from which the description of the dataset has been collected.

    +
    SoftwareSource code or software package developed and/or used in a research context
    Other Research ProductAnything that does not fall in the previous categories (e.g. workflow, methods, protocols)
    +
    + + More information for OpenAIRE Research Graph. +
    +
    • + + + + +
+ +
+
+
diff --git a/src/app/pages/methodology/methodology.component.ts b/src/app/pages/methodology/methodology.component.ts index a7da9d431..66afb2d06 100644 --- a/src/app/pages/methodology/methodology.component.ts +++ b/src/app/pages/methodology/methodology.component.ts @@ -1,4 +1,6 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-methodology', @@ -7,5 +9,35 @@ import { Component, ViewEncapsulation } from '@angular/core'; encapsulation: ViewEncapsulation.None }) -export class MethodologyPageComponent { +export class MethodologyPageComponent implements OnInit, OnDestroy { + + private subscriptions: any[] = []; + + constructor(private route: ActivatedRoute) { + } + + ngOnInit(): void { + this.subscriptions.push(this.route.fragment.subscribe(fragment => { + setTimeout(() => { + this.goTo(fragment); + }, 100); + })); + } + + goTo(id: string) { + const yOffset = -100; + const element = document.getElementById(id); + if (element) { + const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset; + window.scrollTo({top: y, behavior: 'smooth'}); + } + } + + ngOnDestroy(): void { + this.subscriptions.forEach(subscription => { + if (subscription instanceof Subscription) { + subscription.unsubscribe(); + } + }); + } } diff --git a/src/app/shared/topmenu/top-menu.component.html b/src/app/shared/topmenu/top-menu.component.html index a89eeece0..6b31853cf 100644 --- a/src/app/shared/topmenu/top-menu.component.html +++ b/src/app/shared/topmenu/top-menu.component.html @@ -14,20 +14,20 @@ @@ -90,20 +90,20 @@
@@ -115,6 +115,31 @@
+
+ +
+ + + + + +
+
@@ -145,10 +170,26 @@ OA in Europe + + + + +
  • - + +
    • diff --git a/src/assets/css/os-observatory-custom.css b/src/assets/css/os-observatory-custom.css index dd6659a20..f3f2e7bc2 100644 --- a/src/assets/css/os-observatory-custom.css +++ b/src/assets/css/os-observatory-custom.css @@ -2,6 +2,9 @@ :root { --primary-color: #EC4386; + /*fixme I need a pinkish color*/ + /*--primary-color-background: #eff6e6;*/ + --primary-color-background: #F6D6E5; --secondary-color: #CA4D9A; --link-color: #EC4386; @@ -29,6 +32,8 @@ --journal-background-color: #FBE8B1; --policies-color: #639C66; --policies-background-color: #D4ECD6; + + --muted-color: #4d4d4d; } html { @@ -48,6 +53,11 @@ h3 { font-size: 24px; } +.uk-h6, h6 { + font-size: 18px; + font-weight: 400; +} + .uk-flex-space-between { justify-content: space-between; } @@ -96,6 +106,10 @@ h3 { z-index: 10000; } +.uk-text-muted { + color: var(--muted-color) !important; +} + /*#sect-overview, #sect-tabs {*/ /*padding: 20px 0;*/ /*}*/ @@ -1058,6 +1072,514 @@ hr.entitiesDivider { border: 1px solid var(--journal-color); } +/*********************************/ + +/********* MENU ********/ + +.uk-navbar-dropdown { + width: 280px; + padding: 25px 0px; +} + +.uk-navbar-dropdown-nav > li { + padding: 0px 25px; +} + +.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover { + color: #212121; +} + +.uk-navbar-dropdown-nav > li:hover { + color: #212121; + background: var(--primary-color-background) 0% 0% no-repeat padding-box; + opacity: 1; +} + + +/*********************************/ + + +/**************** OFF-Canvas menu ****************/ + +.custom-offcanvas-close { + position: relative; + right: 0; + top: 0; +} + +.uk-offcanvas-bar-light { + text-transform: uppercase; +} + +.uk-offcanvas-bar-light { + position: absolute; + top: 0; + bottom: 0; + left: -270px; + box-sizing: border-box; + width: 270px; + padding: 20px 20px; + background: #fff; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.uk-nav-sub a { + padding: 2px 15px; +} + +.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a { + color: #333; +} + +.uk-nav-default .uk-nav-sub a:hover { + color: var(--secondary-color); +} + +.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover, +.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus, +.uk-offcanvas-bar-light .uk-nav-default > li > a:active { + color: var(--secondary-color); +} + +.uk-offcanvas-bar-animation { + transition: left 0.3s ease-out; +} + +@media (min-width: 960px) { + .uk-offcanvas-bar-light { + left: -350px; + width: 350px; + padding: 40px 40px; + } +} + +.uk-offcanvas-flip .uk-offcanvas-bar-light { + left: auto; + right: -270px; +} + +.uk-offcanvas-flip .uk-offcanvas-bar-animation { + transition-property: right; +} + +.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light { + left: auto; + right: 0; +} + +@media (min-width: 960px) { + .uk-offcanvas-flip .uk-offcanvas-bar-light { + right: -350px; + } +} + +.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light { + left: auto; + right: 0; +} + +.uk-offcanvas-reveal .uk-offcanvas-bar-light { + left: 0; +} + +.uk-open > .uk-offcanvas-bar-light { + left: 0; +} + +.uk-close::after { + opacity: 0 !important; + color: #fff; + content: ''; + font-family: "Material Icons"; +} + +/********************************************/ + + +/********* METHODOLOGY ********/ + +/********* Terminology ********/ + +.terminologySection table { + font-size: 14px; + background-color: #FFFFFF; + width:100%; + table-layout: fixed; + overflow-wrap: break-word; +} + +.terminologySection table th { + width: 20%; +} + +.terminologySection table th, .terminologySection table td { + border: 1px solid #DEDEDE; + padding: 25px 40px; + vertical-align: top; + text-align: start; +} + +.terminologySection table th.important { + background-color: var(--primary-color-background); +} + +.terminologySection ul.portal-circle { + list-style: none; + padding-left: 40px; + font-family: "Open Sans", sans-serif; +} + +.terminologySection ul.portal-circle li { + margin: 0 0 2px 0; + position: relative; +} + +.terminologySection ul.portal-circle li:before { + content: ""; + border: 5px var(--primary-color) solid !important; + border-radius: 50px; + line-height: 21px; + margin-left: -20px; + position: absolute; + top: 7px; +} + +@media only screen and (max-width: 959px) { + /*.terminologySection table th {*/ + /*width: 50%;*/ + /*}*/ + + .terminologySection ul.portal-circle { + padding-left: 20px; + } +} + +/********* Overview ********/ + +@media only screen and (min-width: 640px) { + .how .first > div:first-child { + position: relative; + } + + .how .first > div:first-child:after { + content: "we"; + text-align: center; + padding-bottom: 5%; + position: absolute; + background-image: url("../img/methodology/arrows/1.svg"); + right: -21%; + top: 33%; + width: 20%; + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + } + + .how .second > div:first-child { + position: relative; + padding: 0 22% 0 22%; + } + + .how .second > div:first-child:after { + content: "and"; + text-align: center; + padding-bottom: 5%; + position: absolute; + background-image: url("../img/methodology/arrows/2.svg"); + right: -10%; + top: 31%; + width: 30%; + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + } + + .how .third { + position: relative; + } + + .how .third > div:first-child { + padding: 0 12% 0 12%; + } + + .how .third:after { + content: "on which"; + padding-right: 30%; + padding-top: 5%; + padding-bottom: 5%; + position: absolute; + background-image: url("../img/methodology/arrows/3.svg"); + bottom: 6%; + left: 6%; + transform: translateY(100%); + width: 55%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .fourth { + padding: 10% 3% 0 3%; + } + + .how .fourth > div:first-child { + position: relative; + padding: 0 15% 0 15%; + } + + .how .fourth> div:first-child:after { + content: "and"; + text-align: center; + padding-bottom: 5%; + position: absolute; + background-image: url("../img/methodology/arrows/4.svg"); + left: -18%; + top: 35%; + width: 30%; + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + } + + .how .fifth { + padding: 10% 2% 0 2%; + } + + .how .fifth > div:first-child { + position: relative; + } + + .how .fifth > div:first-child:after { + content: "We"; + text-align: center; + padding-bottom: 5%; + position: absolute; + background-image: url("../img/methodology/arrows/5.svg"); + left: -35%; + top: 36%; + width: 30%; + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + } + + .how .sixth { + padding: 10% 5% 0 0; + } + + .how .sixth > div:first-child { + padding: 0 15% 0 15%; + } + + .how .final { + padding: 10% 20% 0 20%; + } + + .how .final > div:first-child { + position: relative; + } + + .how .final img { + display: block; + margin-left: auto; + margin-right: auto; + } + + .how .final > div:first-child:before { + content: ""; + position: absolute; + background-image: url("../img/methodology/arrows/6.svg"); + left: -20%; + /*top: -20%;*/ + /*height: 70%;*/ + top: -8%; + height: 42%; + /*width: 30%;*/ + width: 34%; + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + } + + .how .final > div:first-child:after { + content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; + position: absolute; + background-image: url("../img/methodology/circle.png"); + /*right: -220px;*/ + /*top: -20%;*/ + right: -203px; + top: -8%; + width: 300px; + padding: 8% 0 5% 220px; + background-size: contain; + background-repeat: no-repeat; + background-position: bottom center; + } +} + +@media only screen and (min-width: 960px) { + .how .third:after { + bottom: -6%; + } +} + +@media only screen and (min-width: 1200px) { + .how .third:after { + bottom: -10%; + left: 25%; + width: 25%; + } +} + +@media only screen and (max-width: 639px) { + .how .first { + position: relative; + padding-bottom: 30%; + } + + .how .first:after { + content: "we"; + text-align: center; + padding: 25px 105px 25px 0; + position: absolute; + background-image: url("../img/methodology/arrows/3.svg"); + /*left: 26%;*/ + left: 33%; + top: 72%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .second { + position: relative; + padding: 0 15% 30% 15%; + } + + .how .second:after { + content: "and"; + text-align: center; + padding: 25px 105px 25px 0; + position: absolute; + background-image: url("../img/methodology/arrows/3.svg"); + /*left: 25%;*/ + left: 32%; + top: 70%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .third { + position: relative; + padding: 0 5% 30% 5%; + } + + .how .third:after { + content: "on which"; + text-align: center; + padding: 25px 105px 25px 0; + position: absolute; + background-image: url("../img/methodology/arrows/3.svg"); + /*left: 17%;*/ + left: 27%; + top: 75%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .fourth { + position: relative; + padding: 0 0 30% 0; + } + + .how .fourth > div:first-child { + padding: 0 10% 0 10%; + } + + .how .fourth:after { + content: "and"; + text-align: center; + padding: 25px 105px 25px 0; + position: absolute; + background-image: url("../img/methodology/arrows/3.svg"); + /*left: 26%;*/ + left: 32%; + top: 79%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .fifth { + position: relative; + padding: 0 2% 30% 2%; + } + + .how .fifth:after { + content: "We"; + text-align: center; + padding: 25px 105px 25px 0; + position: absolute; + background-image: url("../img/methodology/arrows/3.svg"); + /*left: 27%;*/ + left: 33%; + top: 76%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .sixth { + padding: 0 5% 30% 0; + } + + .how .sixth > div:first-child { + padding: 0 15% 0 15%; + } + + .how .final { + padding: 20% 0 20% 0; + } + + .how .final > div:first-child { + position: relative; + } + + .how .final > div:first-child:before { + content: ""; + position: absolute; + background-image: url("../img/methodology/arrows/6.svg"); + left: 32%; + /*top: -80%;*/ + /*height: 70%;*/ + top: -37%; + height: 33%; + width: 30%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .how .final > div:first-child:after { + content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; + position: absolute; + background-image: url("../img/methodology/circle.png"); + /*left: -62%;*/ + /*top: 85%;*/ + left: -52%; + top: 91%; + width: 300px; + padding: 12% 0 0 70%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } +} + + /*********************************/ /********* MOBILE ********/ diff --git a/src/assets/img/methodology/1.png b/src/assets/img/methodology/1.png new file mode 100644 index 000000000..1bef17de0 Binary files /dev/null and b/src/assets/img/methodology/1.png differ diff --git a/src/assets/img/methodology/2.png b/src/assets/img/methodology/2.png new file mode 100644 index 000000000..86d6af671 Binary files /dev/null and b/src/assets/img/methodology/2.png differ diff --git a/src/assets/img/methodology/3.png b/src/assets/img/methodology/3.png new file mode 100644 index 000000000..c34c5a554 Binary files /dev/null and b/src/assets/img/methodology/3.png differ diff --git a/src/assets/img/methodology/4.png b/src/assets/img/methodology/4.png new file mode 100644 index 000000000..50872b7ef Binary files /dev/null and b/src/assets/img/methodology/4.png differ diff --git a/src/assets/img/methodology/5.png b/src/assets/img/methodology/5.png new file mode 100644 index 000000000..5681590ff Binary files /dev/null and b/src/assets/img/methodology/5.png differ diff --git a/src/assets/img/methodology/6.png b/src/assets/img/methodology/6.png new file mode 100644 index 000000000..2df751f8b Binary files /dev/null and b/src/assets/img/methodology/6.png differ diff --git a/src/assets/img/methodology/Asset 1.png b/src/assets/img/methodology/Asset 1.png new file mode 100644 index 000000000..047775fed Binary files /dev/null and b/src/assets/img/methodology/Asset 1.png differ diff --git a/src/assets/img/methodology/arrow.svg b/src/assets/img/methodology/arrow.svg new file mode 100644 index 000000000..025a6d815 --- /dev/null +++ b/src/assets/img/methodology/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/methodology/arrows/1.svg b/src/assets/img/methodology/arrows/1.svg new file mode 100755 index 000000000..579a2cbfe --- /dev/null +++ b/src/assets/img/methodology/arrows/1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/img/methodology/arrows/2.svg b/src/assets/img/methodology/arrows/2.svg new file mode 100755 index 000000000..579a2cbfe --- /dev/null +++ b/src/assets/img/methodology/arrows/2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/img/methodology/arrows/3.svg b/src/assets/img/methodology/arrows/3.svg new file mode 100755 index 000000000..a25d31fc7 --- /dev/null +++ b/src/assets/img/methodology/arrows/3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/methodology/arrows/4.svg b/src/assets/img/methodology/arrows/4.svg new file mode 100755 index 000000000..1c41b7e92 --- /dev/null +++ b/src/assets/img/methodology/arrows/4.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/img/methodology/arrows/5.svg b/src/assets/img/methodology/arrows/5.svg new file mode 100755 index 000000000..1c41b7e92 --- /dev/null +++ b/src/assets/img/methodology/arrows/5.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/img/methodology/arrows/6.svg b/src/assets/img/methodology/arrows/6.svg new file mode 100755 index 000000000..3a36bc822 --- /dev/null +++ b/src/assets/img/methodology/arrows/6.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/methodology/circle.png b/src/assets/img/methodology/circle.png new file mode 100644 index 000000000..39d13993e Binary files /dev/null and b/src/assets/img/methodology/circle.png differ