Project

General

Profile

« Previous | Next » 

Revision 60843

Added the new methodology page

View differences:

modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.ts
1
import { Component, ViewEncapsulation } from '@angular/core';
1
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
2
import { ActivatedRoute } from '@angular/router';
3
import { Subscription } from 'rxjs';
2 4

  
3 5
@Component({
4 6
  selector: 'app-methodology',
......
7 9
  encapsulation: ViewEncapsulation.None
8 10
})
9 11

  
10
export class MethodologyPageComponent {
12
export class MethodologyPageComponent implements OnInit, OnDestroy {
13

  
14
  private subscriptions: any[] = [];
15

  
16
  constructor(private route: ActivatedRoute) {
17
  }
18

  
19
  ngOnInit(): void {
20
    this.subscriptions.push(this.route.fragment.subscribe(fragment => {
21
      setTimeout(() => {
22
        this.goTo(fragment);
23
      }, 100);
24
    }));
25
  }
26

  
27
  goTo(id: string) {
28
    const yOffset = -100;
29
    const element = document.getElementById(id);
30
    if (element) {
31
      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
32
      window.scrollTo({top: y, behavior: 'smooth'});
33
    }
34
  }
35

  
36
  ngOnDestroy(): void {
37
    this.subscriptions.forEach(subscription => {
38
      if (subscription instanceof Subscription) {
39
        subscription.unsubscribe();
40
      }
41
    });
42
  }
11 43
}
modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.html
1
<section class="section greySection" id="sect-overview">
1
<section class="section greySection terminologySection">
2 2

  
3
  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
4

  
5
    <div style="min-height: 500px;">
6
      <h4>Coming soon....</h4>
3
  <div id="how" class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
4
    <h2 class="uk-text-center">
5
      Overview
6
    </h2>
7
    <div class="uk-margin-large-top">
8
      <div class="how uk-h6">
9
        <div class="uk-flex uk-flex-wrap">
10
          <div class="uk-width-1-3@s first uk-text-muted">
11
            <div>
12
              <img src="../../../assets/img/methodology/1.png">
13
            </div>
14
            <div class="uk-text-center">
15
              <span class="uk-text-bold uk-text-uppercase">Starting</span> from existing<br>research-related data sources
16
            </div>
17
          </div>
18
          <div class="uk-width-1-3@s second uk-text-muted">
19
            <div>
20
              <img src="../../../assets/img/methodology/2.png">
21
            </div>
22
          </div>
23
          <div class="uk-width-1-3@s third uk-text-muted">
24
            <div>
25
              <img src="../../../assets/img/methodology/3.png">
26
            </div>
27
            <div class="uk-text-center">
28
              build an open, global<br>and trusted Research graph
29
            </div>
30
          </div>
31
        </div>
32
        <div class="uk-flex uk-flex-wrap">
33
          <div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
34
            <div>
35
              <img src="../../../assets/img/methodology/4.png">
36
            </div>
37
            <div class="uk-text-center">
38
              we perform <span class="uk-text-bold uk-text-uppercase">Statistical Analysis</span> and produce
39
              <span class="portal-color">Open Science Indicators</span>
40
            </div>
41
          </div>
42
          <div class="uk-width-1-3@s fifth uk-text-muted">
43
            <div>
44
              <img src="../../../assets/img/methodology/5.png">
45
            </div>
46
            <div class="uk-text-center">
47
              furthermore <span class="uk-text-bold uk-text-uppercase">Network<br>Analysis</span> producing
48
              <span class="portal-color">Collaboration Indicators</span>
49
            </div>
50
          </div>
51
          <div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
52
            <div>
53
              <img src="../../../assets/img/methodology/6.png">
54
            </div>
55
            <div class="uk-text-center">
56
              Often combine with external data
57
              (patents, social, company) and
58
              perform <span class="uk-text-bold uk-text-uppercase">Impact Analysis</span> to
59
              produce <span class="portal-color">Innovation Indicators</span>
60
            </div>
61
          </div>
62
        </div>
63
        <div class="final uk-text-muted">
64
          <div>
65
            <img src="../../../assets/img/methodology/Asset%201.png">
66
          </div>
67
        </div>
68
      </div>
7 69
    </div>
70
  </div>
8 71

  
72
</section>
9 73

  
10
    <!--&lt;!&ndash;Introduction&ndash;&gt;-->
11
    <!--<div class="">-->
12
      <!--<h2>Introduction</h2>-->
74
<section class="section greySection terminologySection" id="sect-tabs">
13 75

  
14
      <!--<div class="md-card uk-margin-bottom">-->
15
        <!--<div class="md-card-content large-padding">-->
16
          <!--<p>-->
17
            <!--This document describes the methodology , terms, and definitions of the indicators presented in Open Science Observatory.-->
18
            <!--The Open Science Observatory combines data gathered from OpenAIRE and other data sources to develop and operate an-->
19
            <!--interactive and dynamic portal, which informs users via rich visualizations and reports on different Open Science-->
20
            <!--aspects and facets in Europe. The Observatory is an extendable monitor portal with indicators on open science and-->
21
            <!--the framework uptake by national and sectoral set.-->
22
          <!--</p>-->
23
          <!--<p>-->
24
            <!--The dynamic <strong>Open Science Observatory</strong> leverages existing information collected by OpenAIRE and-->
25
            <!--<strong>at little additional cost or effort, produces and reports value added metrics</strong> regarding Open Science-->
26
            <!--trends and evolution for Horizon 2020 and other funding sources. The goal is to provide an EU Open Science Observatory-->
27
            <!--as key OpenAIRE product, and employing open metrics based on open data gathered by OpenAire to measure the openness-->
28
            <!--of publications and data on various aspects (e.g., gold/green/fair), the metadata completeness, the regional or-->
29
            <!--thematic distributions and will test out preliminary metrics for their FAIRness. This will ensure that research can-->
30
            <!--be evaluated at the right level (including article-level metrics and altmetrics), in an <strong>open and transparent-->
31
            <!--manner</strong>. Such services will deliver accurate metrics for European Research and enable informed recommendations-->
32
            <!--to high-level decision makers.-->
33
          <!--</p>-->
34
        <!--</div>-->
35
      <!--</div>-->
76
  <div id="terminology" class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
77
    <h2 class="uk-text-center">
78
      Terminology and construction
79
    </h2>
80
    <div class="uk-margin-large-top">
36 81

  
37
    <!--</div>-->
82
      <!--LAPTOP & PAD LANDSCAPE-->
83
      <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#terminology_tabbed',animation: 'slide-bottom'}">
84
        <li class="uk-active" aria-expanded="true"><a>Entities</a></li>
85
        <li aria-expanded="false"><a>Attributes of Entities</a></li>
86
      </ul>
38 87

  
39
    <!--&lt;!&ndash;Methodological Approach and Indicators&ndash;&gt;-->
40
    <!--<div class="">-->
41
      <!--<h2>Methodological Approach and Indicators</h2>-->
88
      <!--MOBILE & PAD PORTRAIT-->
89
      <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#terminology_tabbed',animation: 'slide-bottom'}">
90
        <li class="uk-active" aria-expanded="true"><a>Entities</a></li>
91
        <li aria-expanded="false"><a>Attributes of Entities</a></li>
92
      </ul>
42 93

  
43
      <!--<div class="md-card uk-margin-bottom">-->
44
        <!--<div class="md-card-content large-padding">-->
45
          <!--<p>-->
46
            <!--Monitoring and evaluating the advancements, trends and impact of OS in Europe is recognised as one of the most-->
47
            <!--important steps towards the realisation of the EOSC vision. The implementation of the Open Science Observatory-->
48
            <!--follows the guidelines and <a target="_blank" href="https://eoscpilot.eu/wp3-policy/eosc-open-science-monitor-specifications/methodological-approach-monitoring-open-science">-->
49
            <!--methodological approach</a> which was specified by the EOSCPilot project and more specifically the-->
50
            <!--<a target="_blank" href="https://eoscpilot.eu/content/d32-eosc-open-science-monitor-specifications">EOSCpilot Open Science Monitor Framework (EOSCpilot OSMF)</a>.-->
51
            <!--It aimed to build a model and initial high-level specifications for providing useful analytics to researchers as well-->
52
            <!--as enabling research performing and funding organizations within EOSC to monitor and gain insights about the OS movement,-->
53
            <!--regardless of their service management systems and the technology behind them. The six core steps of the specified methodology are:-->
54
          <!--</p>-->
55
          <!--<ul style="font-style: italic">-->
56
            <!--<li>Step 1. Identification of the Open Science Activities;</li>-->
57
            <!--<li>Step 2. Policy-driven derivation of monitoring targets;</li>-->
58
            <!--<li>Step 3. Identification of the main Open Science Resources and Indicators;</li>-->
59
            <!--<li>Step 4. Design of monitoring processes, tasks and workflows;</li>-->
60
            <!--<li>Step 5. Modelling and implementation of the framework;</li>-->
61
            <!--<li>Step 6. Continuous validation of the monitoring targets;</li>-->
62
          <!--</ul>-->
94
      <ul id="terminology_tabbed" class="uk-switcher">
63 95

  
64
          <!--<p>-->
65
            <!--<span style="font-style: italic">Step 1. Identification of the Open Science Activities:</span> The first step addresses the need to identify-->
66
            <!--which parts of the OS lifecycle are of interest in the monitoring process. These can include the conceptualization-->
67
            <!--of a research task, the data and literature collection, the analysis and development of the research output, the-->
68
            <!--publication, the review and evaluation of the research result as well as the reuse and reproducibility of results-->
69
            <!--by the scientific community. These phases entail different open access practices and elements which are being considered-->
70
            <!--by the monitor, with a special focus on the policies that these elements fall under.-->
71
          <!--</p>-->
72
          <!--<p>-->
73
            <!--<span style="font-style: italic">Step 2. Policy-driven derivation of monitoring targets:</span> The proposed monitoring-->
74
            <!--framework adopts a policy-driven approach for deriving high level objectives, i.e., target dimensions to be measured-->
75
            <!--in the monitoring process. Policies on Open Access at different levels, such as the international, national and-->
76
            <!--regional levels, as well as micro policies are considered as primary sources for deriving more concrete measurable-->
77
            <!--targets (e.g., Openness, FAIRness, etc.) that should be monitored in the framework. Furthermore, monitoring targets-->
78
            <!--can be organised into more specialised sub-targets, to measure more specific aspects of OS. For example, a policy-->
79
            <!--recommendation stating that research data repositories should follow a data archiving plan indicates the monitoring-->
80
            <!--target for long-term preservation of OS artefacts monitored by a set of indicators, such as whether an organization-->
81
            <!--applies such a plan, or the period (e.g., months, years) for which preservation is guaranteed.-->
82
          <!--</p>-->
83
          <!--<p>-->
84
            <!--<span style="font-style: italic">Step 3. Identification of the main Open Science Resources and Indicators:</span>-->
85
            <!--In the next step, the monitoring targets are being mapped to OS elements they apply to, as well as to indicators-->
86
            <!--that quantify these targets. OS elements are well-defined artefacts of OS practices, such as publication in open-->
87
            <!--access journals, research data made available in open access repositories, open source software, open educational-->
88
            <!--material, etc. In the context of this framework, these elements are called OS resources to state the importance-->
89
            <!--of their contribution for the development of the “Open Science World”.-->
90
          <!--</p>-->
91
          <!--<p>-->
92
            <!--<span style="font-style: italic">Step 4. Design of monitoring processes, tasks and workflows:</span> Each indicator-->
93
            <!--must be associated with a set of processes, which are employed for the collection of data, the validation and-->
94
            <!--scoring of metrics (e.g., combination and aggregation of metrics for deriving an accumulated score for a target-->
95
            <!--dimension), the visualization of the results, and so on. These processes must be well documented in the form of-->
96
            <!--workflows and tasks, to be performed for the collection and quantification of the indicators.-->
97
          <!--</p>-->
98
          <!--<p>-->
99
            <!--<span style="font-style: italic">Step 5. Modelling and implementation of the framework:</span> The next step-->
100
            <!--involves the detailed design, implementation, and customization of the framework, which includes the design of-->
101
            <!--the functionality at its whole, as well as all added value services offered by the framework.-->
102
          <!--</p>-->
103
          <!--<p>-->
104
            <!--<span style="font-style: italic">Step 6. Continuous validation of the monitoring targets:</span> The last step-->
105
            <!--follows the operation of the OS monitoring framework and refers to the continuous validation and refinement of-->
106
            <!--the monitoring methodology (i.e., targets and indicators) and results in EOSC. Α monitoring process, to be effective,-->
107
            <!--must adapt to new OS practices and new policies, validating and readjusting its target goals as well as the indicators-->
108
            <!--for their evaluation.-->
109
          <!--</p>-->
96
        <!--OVERVIEW tab-->
97
        <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
98
          <table>
99
            <tr>
100
              <th class="important">Research Outcomes</th>
101
              <td>
102
                <div>There are currently four different types of research outcomes in the OpenAIRE Research
103
                  Graph:
104
                </div>
105
                <ul class="portal-circle">
106
                  <li>Publication</li>
107
                  <li>Dataset</li>
108
                  <li>Software</li>
109
                  <li>Other Research Product</li>
110
                </ul>
111
                <div class="uk-margin-small-top">
112
                  OpenAIRE deduplicates (merges) different records of research outcomes and keeps the metadata of all
113
                  instances.
114
                </div>
115
              </td>
116
            </tr>
117
            <tr>
118
              <th>Publication</th>
119
              <td>Research outcomes intended for human reading (published articles, pre-prints, conference papers,
120
                presentations, technical reports, etc.)
121
              </td>
122
            </tr>
123
            <tr>
124
              <th>Dataset</th>
125
              <td>
126
                <p>Research data</p>
127
                <p>Granularity is not defined by OpenAIRE, it reflects the granularity supported by
128
                  the sources from which the description of the dataset has been collected.</p>
129
              </td>
130
            </tr>
131
            <tr>
132
              <th>Software</th>
133
              <td>Source code or software package developed and/or used in a research context</td>
134
            </tr>
135
            <tr>
136
              <th>Other Research Product</th>
137
              <td>Anything that does not fall in the previous categories (e.g. workflow, methods, protocols)</td>
138
            </tr>
139
          </table>
140
          <div class="uk-text-small uk-margin-small-top">
141
            <img src="../../../assets/img/Open_Research_Graph.svg" style="opacity: 0.4">
142
            <span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a
143
              href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span>
144
          </div>
145
        </li>
110 146

  
111
          <!--<p>-->
112
            <!--<strong>The Open Science Observatory of the OpenAIRE is the first implementation</strong> of these specifications-->
113
            <!--and it aspires to become a dynamic tool in the future, with benefits both to the organisations using it to measure-->
114
            <!--the OA levels of implementation and impact to their community and for the High Level Stakeholders which are the-->
115
            <!--European Union’s Legal Entities and Bodies, including the Member States and their respective Units. Gaps, implications-->
116
            <!--and new ways of performing OS are among the elements that could be identified through OA Open Science Observatory-->
117
            <!--which could then be easily incorporated within the stakeholders’ scope and strategic planning for OS.-->
118
          <!--</p>-->
119
        <!--</div>-->
120
      <!--</div>-->
147
        <!--OPEN SCIENCE tab-->
148
        <li aria-hidden="true" style="animation-duration: 200ms;">
149
          <table>
150
            <tr>
151
              <th>Organization & Country</th>
152
              <td>
153
                <p><span class="uk-text-bold">For research outcomes:</span> the affiliated organizations of its
154
                  authors (and their country)</p>
155
                <p><span class="uk-text-bold">For projects:</span> the organizations participating in the project
156
                  (i.e. beneficiaries of the grant) and
157
                  their countries
158
                </p>
159
                <p>
160
                  <span class="uk-text-bold">Country code mapping: </span>
161
                  <a href="https://api.openaire.eu/vocabularies/dnet:countries" target="_blank">
162
                    https://api.openaire.eu/vocabularies/dnet:countries</a>
163
                </p>
164
              </td>
165
            </tr>
166
            <tr>
167
              <th>Type</th>
168
              <td>
169
                <p>The sub-type of a research outcome (e.g., a publication can be a pre-print, conference proceeding,
170
                  article,
171
                  etc.)</p>
172
                <p><span class="uk-text-bold">Resource type mapping: </span>
173
                  <a href="https://api.openaire.eu/vocabularies/dnet:result_typologies" target="_blank">https://api.openaire.eu/vocabularies/dnet:result_typologies</a>
174
                  (click on the code to see the specific types for each result type)
175
                </p>
176
              </td>
177
            </tr>
178
            <tr>
179
              <th>Access mode</th>
180
              <td>
181
                <p>The best available (across all instances) access rights of a research outcome</p>
182
                <p>Types: open, restricted, closed, embargo (= closed for a specific period of time, then open)</p>
183
                <p><span class="uk-text-bold">Note:</span> definition of <span class="uk-text-bold">restricted</span>
184
                  may vary by data source.</p>
185
              </td>
186
            </tr>
187
            <tr>
188
              <th>PID (persistent identifier)</th>
189
              <td>
190
                <p>A long-lasting reference to a resource</p>
191
                <p><span class="uk-text-bold">Types: </span> <a
192
                  href="http://api.openaire.eu/vocabularies/dnet:pid_types" target="_blank">http://api.openaire.eu/vocabularies/dnet:pid_types</a>
193
                </p>
194
              </td>
195
            </tr>
196
            <tr>
197
              <th>Context</th>
198
              <td>Related research community, initiative or infrastructure</td>
199
            </tr>
200
            <tr>
201
              <th>Journal</th>
202
              <td>The scientific journal an article is published in.</td>
203
            </tr>
204
            <tr>
205
              <th>Publisher</th>
206
              <td>The publisher of the venue (journal, book, etc.) of a research outcome</td>
207
            </tr>
208
            <tr>
209
              <th class="important">Content Providers (Datasources)</th>
210
              <td>
211
                <p>The different data sources ingested in the OpenAIRE Research Graph.</p>
212
                <div class="uk-text-bold">Content Provider Types:</div>
213
                <ul class="portal-circle">
214
                  <li>Repositories</li>
215
                  <li>Open Access Publishers & Journals</li>
216
                  <li>Aggregators</li>
217
                  <li>Entity Registries</li>
218
                  <li>Journal Aggregators</li>
219
                  <li>CRIS (Current Research Information System)</li>
220
                </ul>
221
              </td>
222
            </tr>
223
            <tr>
224
              <th>Repositories</th>
225
              <td>Information systems where scientists upload the bibliographic metadata and payloads of their
226
                research outcomes (e.g. PDFs of their scientific articles, CSVs of their data, archive with their
227
                software), due to obligations from their organizations, their funders, or due to community practices
228
                (e.g. ArXiv, Europe PMC, Zenodo).
229
              </td>
230
            </tr>
231
            <tr>
232
              <th>Open Access Publishers & Journals</th>
233
              <td>Information systems of open access publishers or relative journals, which offer bibliographic
234
                metadata and PDFs of their published articles.
235
              </td>
236
            </tr>
237
            <tr>
238
              <th>Aggregators</th>
239
              <td>Information systems that collect descriptive metadata about research products from multiple sources
240
                in order to enable cross-data source discovery of given research products (e,g, DataCite,
241
                BASE, DOAJ).
242
              </td>
243
            </tr>
244
            <tr>
245
              <th>Entity Registries</th>
246
              <td>Information systems created with the intent of maintaining authoritative registries of given
247
                entities in the scholarly communication, such as OpenDOAR for the institutional repositories, re3data
248
                for the data repositories, CORDA and other funder databases for projects and funding information.
249
              </td>
250
            </tr>
251
            <tr>
252
              <th>CRIS (Current Research Information System)</th>
253
              <td>Information systems adopted by research and academic organizations to keep track of their research
254
                administration records and relative results; examples of CRIS content are articles or datasets funded
255
                by projects, their principal investigators, facilities acquired thanks to funding, etc.
256
              </td>
257
            </tr>
258
          </table>
259
          <div class="uk-text-small uk-margin-small-top">
260
            <img src="../../../assets/img/Open_Research_Graph.svg" style="opacity: 0.4">
261
            <span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a
262
              href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span>
263
          </div>
264
        </li>
121 265

  
122
    <!--</div>-->
266
      </ul>
123 267

  
124
    <!--&lt;!&ndash;Indicators&ndash;&gt;-->
125
    <!--<div class="">-->
126
      <!--<h2>Indicators</h2>-->
268
    </div>
269
  </div>
127 270

  
128
      <!--<div class="md-card uk-margin-bottom">-->
129
        <!--<div class="md-card-content large-padding">-->
130

  
131
          <!--<div class="">-->
132
            <!--<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#tabs',animation: 'slide-bottom'}">-->
133
              <!--<li class="uk-active" aria-expanded="true"><a href="#">Terms and definitions</a></li>-->
134
              <!--<li aria-expanded="false"><a href="#">Continent overview</a></li>-->
135
              <!--<li aria-expanded="false"><a href="#">COuntry page</a></li>-->
136
            <!--</ul>-->
137

  
138
            <!--<ul id="tabs" class="uk-switcher">-->
139

  
140
              <!--&lt;!&ndash;OVERVIEW tab&ndash;&gt;-->
141
              <!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">-->
142
                <!--<div class="uk-margin">-->
143

  
144
                  <!--&lt;!&ndash;Terms and definitions&ndash;&gt;-->
145
                  <!--<div>-->
146
                    <!--&lt;!&ndash;<h3>Terms and definitions</h3>&ndash;&gt;-->
147
                    <!--<dl>-->
148
                      <!--<dt>Publication</dt>-->
149
                      <!--<dd>a scientific publication</dd>-->
150

  
151
                      <!--<dt>Repository</dt>-->
152
                      <!--<dd>a repository of publications</dd>-->
153

  
154
                      <!--<dt>Dataset</dt>-->
155
                      <!--<dd>a dataset, usually associated with a publication</dd>-->
156

  
157
                      <!--<dt>Software</dt>-->
158
                      <!--<dd>software (e.g., open source), usually associated with a publication/dataset</dd>-->
159

  
160
                      <!--<dt>Other Research Products</dt>-->
161
                      <!--<dd>Other research outputs (e.g., dissemination or educational material) associated with a publication, dataset or software.</dd>-->
162

  
163
                      <!--<dt>Journal</dt>-->
164
                      <!--<dd>a scientific journal where authors publish their results in the form of publications</dd>-->
165

  
166
                      <!--<dt>Policy</dt>-->
167
                      <!--<dd>an Open Science mandate that organizations follow in order to engage in Open Science best practices</dd>-->
168

  
169
                      <!--<dt>Organization</dt>-->
170
                      <!--<dd>an academic institution, company, or any other legal entity with the context of OpenAIRE</dd>-->
171

  
172
                      <!--<dt>Vocabularies</dt>-->
173
                      <!--<dd>used in the Observatory are described in <a target="_blank" href="http://api.openaire.eu/vocabularies">http://api.openaire.eu/vocabularies</a></dd>-->
174
                    <!--</dl>-->
175
                  <!--</div>-->
176

  
177
                <!--</div>-->
178
              <!--</li>-->
179

  
180
              <!--&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;-->
181
              <!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
182
                <!--<div class="uk-margin">-->
183

  
184
                  <!--&lt;!&ndash;Continent overview&ndash;&gt;-->
185
                  <!--<div>-->
186
                    <!--&lt;!&ndash;<h3>Continent overview</h3>&ndash;&gt;-->
187
                    <!--<dl>-->
188
                      <!--<dt>Number of OA publications</dt>-->
189
                      <!--<dd>The total number of open access publications currently in OpenAIRE, along with the percentage they represent with respect to the total number of publications.</dd>-->
190

  
191
                      <!--<dt>Number of OA datasets</dt>-->
192
                      <!--<dd>The total number of open access datasets currently in OpenAIRE, along with the percentage they represent with respect to the total number of datasets.</dd>-->
193

  
194
                      <!--<dt>Number of OA repositories</dt>-->
195
                      <!--<dd>The total number of open access repositories currently in OpenAIRE.</dd>-->
196

  
197
                      <!--<dt>Number of OA journals</dt>-->
198
                      <!--<dd>The total number of open access journals currently in OpenAIRE, along with the percentage they represent with respect to the total number of journals. Source: DOAJ.</dd>-->
199

  
200
                      <!--<dt>Number of organizations with OA policies</dt>-->
201
                      <!--<dd>The total number of organizations in OpenAIRE that have Open Access policies associated with them. Source: RoarMap.</dd>-->
202
                    <!--</dl>-->
203

  
204
                    <!--&lt;!&ndash;Overview&ndash;&gt;-->
205
                    <!--<div>-->
206
                      <!--<h4>Overview</h4>-->
207
                      <!--<p>Each table row refers to a country. For each country, the table shows <span style="font-style: italic">total numbers of OA repositories,-->
208
          <!--journals, policies, publications, datasets, software and other research products.</span><br>-->
209
                        <!--The total numbers and percentages are computed as described in the continent overview.-->
210
                      <!--</p>-->
211
                    <!--</div>-->
212

  
213
                    <!--&lt;!&ndash;Open Science&ndash;&gt;-->
214
                    <!--<div>-->
215
                      <!--<h4>Open Science</h4>-->
216
                      <!--<p>Open science related resources, specifically OA publications, datasets, software and other research products.</p>-->
217
                    <!--</div>-->
218

  
219
                  <!--</div>-->
220

  
221
                <!--</div>-->
222
              <!--</li>-->
223

  
224
              <!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
225
                <!--<div class="uk-margin">-->
226

  
227
                  <!--&lt;!&ndash;Country page&ndash;&gt;-->
228
                  <!--<div>-->
229
                    <!--&lt;!&ndash;<h3>Country page</h3>&ndash;&gt;-->
230

  
231
                    <!--&lt;!&ndash;Country overview&ndash;&gt;-->
232
                    <!--<div>-->
233
                      <!--<h4>Country overview</h4>-->
234
                      <!--<dl>-->
235
                        <!--<dt>Number of OA publications</dt>-->
236
                        <!--<dd>The total number of open access publications currently in OpenAIRE for this country, along with the-->
237
                          <!--percentage they represent with respect to the total number of publications of this country.</dd>-->
238

  
239
                        <!--<dt>Number of OA datasets</dt>-->
240
                        <!--<dd>The total number of open access datasets currently in OpenAIRE for this country, along with the percentage-->
241
                          <!--they represent with respect to the total number of datasets of this country.-->
242
                        <!--</dd>-->
243

  
244
                        <!--<dt>Number of OA repositories</dt>-->
245
                        <!--<dd>The total number of open access repositories currently in OpenAIRE for this country.</dd>-->
246

  
247
                        <!--<dt>Number of OA journals</dt>-->
248
                        <!--<dd>The total number of open access journals currently in OpenAIRE for this country, along with the percentage-->
249
                          <!--they represent with respect to the total number of journals. Source: DOAJ.</dd>-->
250

  
251
                        <!--<dt>Number of organizations with OA policies</dt>-->
252
                        <!--<dd>The total number of organizations in OpenAIRE for this country that have Open Access policies associated-->
253
                          <!--with them. Source: RoarMap.</dd>-->
254
                      <!--</dl>-->
255
                    <!--</div>-->
256

  
257
                    <!--&lt;!&ndash;Info Box&ndash;&gt;-->
258
                    <!--<div>-->
259
                      <!--<h4>Info Box</h4>-->
260
                      <!--<dl>-->
261
                        <!--<dt>R&D Expenditure</dt>-->
262
                        <!--<dd>The total R&D expenditure for this country since 2008. Source: Eurostat.</dd>-->
263

  
264
                        <!--<dt>Funding sources</dt>-->
265
                        <!--<dd></dd>-->
266

  
267
                        <!--<dt>Funding Organizations</dt>-->
268
                        <!--<dd></dd>-->
269

  
270
                        <!--<dt>Organizations funded by the European Commission since 2013</dt>-->
271
                        <!--<dd>The total number of organizations in this country that have participated/participate in a project that was/is-->
272
                          <!--funded by the European Commission.</dd>-->
273
                      <!--</dl>-->
274
                    <!--</div>-->
275

  
276
                    <!--&lt;!&ndash;Green vs. Gold&ndash;&gt;-->
277
                    <!--<div>-->
278
                      <!--<h4>Green vs. Gold</h4>-->
279
                      <!--<dl>-->
280
                        <!--<dt>Green vs Gold Publications</dt>-->
281
                        <!--<dd>The line shows the evolution of the total number of publications that have been published through a green-->
282
                          <!--open access route, vs the total number of publications that have been published through a gold open access route.</dd>-->
283

  
284
                        <!--<dt>Gold Open Access</dt>-->
285
                        <!--<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total-->
286
                          <!--count of gold open access publications.</dd>-->
287

  
288
                        <!--<dt>Green Open Access</dt>-->
289
                        <!--<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total-->
290
                          <!--count of green open access publications. </dd>-->
291
                      <!--</dl>-->
292
                    <!--</div>-->
293

  
294
                    <!--&lt;!&ndash;EU Funded Open Science&ndash;&gt;-->
295
                    <!--<div>-->
296
                      <!--<h4>EU Funded Open Science</h4>-->
297
                      <!--<dl>-->
298
                        <!--<dt>Publications vs Datasets vs Software</dt>-->
299
                        <!--<dd>The chart shows a per-year count and comparison of open access publications, datasets and software for this country.</dd>-->
300

  
301
                        <!--<dt>Organizations</dt>-->
302
                        <!--<dd>This table shows all organizations from this country, along with the total number of publications, datasets and-->
303
                          <!--software that have authors that are affiliated with each organization. The rows can be ordered by any of the three numbers.</dd>-->
304

  
305
                        <!--<dt>Repositories</dt>-->
306
                        <!--<dd>This table shows all repositories from this country, along with the total number of publications, datasets-->
307
                          <!--and software that reside in each repository. The rows can be ordered by any of the three numbers.</dd>-->
308
                      <!--</dl>-->
309
                    <!--</div>-->
310

  
311
                    <!--&lt;!&ndash;Funding Sources&ndash;&gt;-->
312
                    <!--<div>-->
313
                      <!--<h4>Funding Sources</h4>-->
314
                      <!--<dl>-->
315
                        <!--<dt>Publications vs Datasets vs Software</dt>-->
316
                        <!--<dd>This chart shows colored horizontal bars representing total number of publications, datasets and software-->
317
                          <!--for each funder organization associated with this country.</dd>-->
318
                      <!--</dl>-->
319
                    <!--</div>-->
320

  
321
                    <!--&lt;!&ndash;Project Performance&ndash;&gt;-->
322
                    <!--<div>-->
323
                      <!--<h4>Project Performance</h4>-->
324
                      <!--<dl>-->
325
                        <!--<dt>Top 10 Projects by publications / datasets / software</dt>-->
326
                        <!--<dd>A ranking of the top 10 projects in descending order of their associated publication/dataset/software count.-->
327
                          <!--Publication/dataset/software count is computed as the total number of publications/datasets/software that have-->
328
                          <!--been funded by a project.</dd>-->
329
                      <!--</dl>-->
330
                    <!--</div>-->
331

  
332

  
333
                  <!--</div>-->
334

  
335
                <!--</div>-->
336
              <!--</li>-->
337
            <!--</ul>-->
338
          <!--</div>-->
339

  
340

  
341
        <!--</div>-->
342
      <!--</div>-->
343

  
344
    <!--</div>-->
345

  
346
  </div>
347 271
</section>
modules/open-science-observatory-ui/trunk/src/app/shared/topmenu/top-menu.component.html
14 14

  
15 15
            <ul class="uk-navbar-nav">
16 16
              <li>
17
                <a class="" href="#">
17
                <a class="" href="#offcanvas-nav" uk-toggle>
18 18
                  <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
19 19
                  </div>
20 20
                </a>
21
                <div class="uk-navbar-dropdown">
22
                  <ul class="uk-nav uk-navbar-dropdown-nav">
23
                    <li class="uk-active"><a routerLink="/home">Home</a></li>
24
                    <li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>
25
                    <!--<li class="uk-active"><a href="#">About</a></li>-->
26
                    <li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
27
                    <!--<li class="uk-nav-divider"></li>-->
28
                    <!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->
29
                  </ul>
30
                </div>
21
                <!--<div class="uk-navbar-dropdown">-->
22
                  <!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
23
                    <!--<li class="uk-active"><a routerLink="/home">Home</a></li>-->
24
                    <!--<li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>-->
25
                    <!--&lt;!&ndash;<li class="uk-active"><a href="#">About</a></li>&ndash;&gt;-->
26
                    <!--<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>-->
27
                    <!--&lt;!&ndash;<li class="uk-nav-divider"></li>&ndash;&gt;-->
28
                    <!--&lt;!&ndash;<li class="uk-active"><a routerLink="/home">Sign In</a></li>&ndash;&gt;-->
29
                  <!--</ul>-->
30
                <!--</div>-->
31 31
              </li>
32 32
            </ul>
33 33

  
......
90 90
          <div class="uk-navbar-right">
91 91
            <ul class="uk-navbar-nav">
92 92
              <li>
93
                <a class="" href="#">
93
                <a class="" href="#offcanvas-nav" uk-toggle>
94 94
                  <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
95 95
                  </div>
96 96
                </a>
97
                <div class="uk-navbar-dropdown">
98
                  <ul class="uk-nav uk-navbar-dropdown-nav">
99
                    <li class="uk-active"><a routerLink="/home">Home</a></li>
100
                    <li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>
101
                    <!--<li class="uk-active"><a href="#">About</a></li>-->
102
                    <li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
103
                    <!--<li class="uk-nav-divider"></li>-->
104
                    <!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->
105
                  </ul>
106
                </div>
97
                <!--<div class="uk-navbar-dropdown">-->
98
                  <!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
99
                    <!--<li class="uk-active"><a routerLink="/home">Home</a></li>-->
100
                    <!--<li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>-->
101
                    <!--&lt;!&ndash;<li class="uk-active"><a href="#">About</a></li>&ndash;&gt;-->
102
                    <!--<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>-->
103
                    <!--&lt;!&ndash;<li class="uk-nav-divider"></li>&ndash;&gt;-->
104
                    <!--&lt;!&ndash;<li class="uk-active"><a routerLink="/home">Sign In</a></li>&ndash;&gt;-->
105
                  <!--</ul>-->
106
                <!--</div>-->
107 107
              </li>
108 108
            </ul>
109 109

  
......
115 115

  
116 116
    </div>
117 117

  
118
    <div id="offcanvas-nav" class="tm-mobile uk-hidden@m" uk-offcanvas="flip: true; overlay: true;">
119
      <!--<div class="uk-offcanvas-bar">-->
120
      <div class="uk-offcanvas-bar-light">
118 121

  
122
        <button class="uk-offcanvas-close" type="button" uk-close></button>
123

  
124
        <ul class="uk-nav uk-nav-default">
125
          <li [routerLinkActive]="['uk-active']"><a routerLink="/home" [routerLinkActive]="['uk-active']" class="uk-offcanvas-close custom-offcanvas-close">Home</a></li>
126
          <li [routerLinkActive]="['uk-active']"><a [routerLink]="['/overview', 'europe']" [routerLinkActive]="['uk-active']" class="uk-offcanvas-close custom-offcanvas-close">OA in Europe</a></li>
127
          <li class="uk-parent" [routerLinkActive]="['uk-active']">
128
            <a href="#">Methodology</a>
129
            <ul class="uk-nav-sub">
130
              <li><a routerLink="/methodology" routerLinkActive="uk-active" class="uk-offcanvas-close custom-offcanvas-close">Overview</a></li>
131
              <li><a routerLink="/methodology" fragment="terminology" routerLinkActive="uk-active" class="uk-offcanvas-close custom-offcanvas-close">Terminology and construction</a></li>
132
            </ul>
133
          </li>
134
          <!--<li class="uk-nav-header">Header</li>-->
135
          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>-->
136
          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>-->
137
          <!--<li class="uk-nav-divider"></li>-->
138
          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>-->
139
        </ul>
140

  
141
      </div>
142
    </div>
143

  
119 144
    <!--LAPTOP & PAD LANDSCAPE-->
120 145
    <div class="uk-visible@m">
121 146
      <a *ngIf="environmentName==='beta'" href="/"><img alt="BETA" class="large-beta-indication" src="../../../assets/img/beta_flag.svg"></a>
......
145 170
                    OA in Europe
146 171
                  </a>
147 172
                </li>
173
                <!--<li class="uk-parent" [routerLinkActive]="['uk-active']">-->
174
                  <!--<a routerLink="/methodology" [routerLinkActive]="['uk-active']">-->
175
                    <!--Methodology-->
176
                  <!--</a>-->
177
                <!--</li>-->
148 178
                <li class="uk-parent" [routerLinkActive]="['uk-active']">
149
                  <a routerLink="/methodology" [routerLinkActive]="['uk-active']">
179
                  <a href="#" class="" aria-expanded="false">
150 180
                    Methodology
151 181
                  </a>
182
                  <div class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" style="top: 80px; left: 106.55px;" id="methodology" uk-toggle>
183
                    <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
184
                      <div class="uk-first-column">
185
                        <ul class="uk-nav uk-navbar-dropdown-nav">
186
                          <!--<li><a [routerLink]="['/support/faqs']" routerLinkActive="uk-active">FAQs</a></li>-->
187
                          <li><a routerLink="/methodology" routerLinkActive="uk-active">Overview</a></li>
188
                          <li><a routerLink="/methodology" fragment="terminology" routerLinkActive="uk-active">Terminology and construction</a></li>
189
                        </ul>
190
                      </div>
191
                    </div>
192
                  </div>
152 193
                </li>
153 194
                <!--<li class="uk-parent" [routerLinkActive]="['uk-active']">-->
154 195
                  <!--<a routerLink="/home" [routerLinkActive]="['uk-active']">-->
modules/open-science-observatory-ui/trunk/src/app/app-routing.module.ts
35 35
];
36 36

  
37 37
@NgModule({
38
  imports: [RouterModule.forRoot(routes)],
38
  imports: [RouterModule.forRoot(routes, {
39
    // preloadingStrategy: PreloadAllModules,
40
    scrollPositionRestoration: 'top',
41
    onSameUrlNavigation: 'reload',
42
    // relativeLinkResolution: 'corrected'
43
  })],
39 44
  exports: [RouterModule]
40 45
})
41 46
export class AppRoutingModule { }
modules/open-science-observatory-ui/trunk/src/assets/css/os-observatory-custom.css
2 2

  
3 3
:root {
4 4
  --primary-color: #EC4386;
5
  /*fixme I need a pinkish color*/
6
  /*--primary-color-background: #eff6e6;*/
7
  --primary-color-background: #F6D6E5;
5 8
  --secondary-color: #CA4D9A;
6 9

  
7 10
  --link-color: #EC4386;
......
29 32
  --journal-background-color: #FBE8B1;
30 33
  --policies-color: #639C66;
31 34
  --policies-background-color: #D4ECD6;
35

  
36
  --muted-color: #4d4d4d;
32 37
}
33 38

  
34 39
html {
......
48 53
  font-size: 24px;
49 54
}
50 55

  
56
.uk-h6, h6 {
57
  font-size: 18px;
58
  font-weight: 400;
59
}
60

  
51 61
.uk-flex-space-between {
52 62
  justify-content: space-between;
53 63
}
......
96 106
  z-index: 10000;
97 107
}
98 108

  
109
.uk-text-muted {
110
  color: var(--muted-color) !important;
111
}
112

  
99 113
/*#sect-overview, #sect-tabs {*/
100 114
  /*padding: 20px 0;*/
101 115
/*}*/
......
1060 1074

  
1061 1075
/*********************************/
1062 1076

  
1077
/********* MENU ********/
1078

  
1079
.uk-navbar-dropdown {
1080
  width: 280px;
1081
  padding: 25px 0px;
1082
}
1083

  
1084
.uk-navbar-dropdown-nav > li {
1085
  padding: 0px 25px;
1086
}
1087

  
1088
.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover {
1089
  color: #212121;
1090
}
1091

  
1092
.uk-navbar-dropdown-nav > li:hover {
1093
  color: #212121;
1094
  background: var(--primary-color-background) 0% 0% no-repeat padding-box;
1095
  opacity: 1;
1096
}
1097

  
1098

  
1099
/*********************************/
1100

  
1101

  
1102
/**************** OFF-Canvas menu ****************/
1103

  
1104
.custom-offcanvas-close {
1105
  position: relative;
1106
  right: 0;
1107
  top: 0;
1108
}
1109

  
1110
.uk-offcanvas-bar-light {
1111
  text-transform: uppercase;
1112
}
1113

  
1114
.uk-offcanvas-bar-light {
1115
  position: absolute;
1116
  top: 0;
1117
  bottom: 0;
1118
  left: -270px;
1119
  box-sizing: border-box;
1120
  width: 270px;
1121
  padding: 20px 20px;
1122
  background: #fff;
1123
  overflow-y: auto;
1124
  -webkit-overflow-scrolling: touch;
1125
}
1126

  
1127
.uk-nav-sub a {
1128
  padding: 2px 15px;
1129
}
1130

  
1131
.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a {
1132
  color: #333;
1133
}
1134

  
1135
.uk-nav-default .uk-nav-sub a:hover {
1136
  color: var(--secondary-color);
1137
}
1138

  
1139
.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover,
1140
.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus,
1141
.uk-offcanvas-bar-light .uk-nav-default > li > a:active {
1142
  color: var(--secondary-color);
1143
}
1144

  
1145
.uk-offcanvas-bar-animation {
1146
  transition: left 0.3s ease-out;
1147
}
1148

  
1149
@media (min-width: 960px) {
1150
  .uk-offcanvas-bar-light {
1151
    left: -350px;
1152
    width: 350px;
1153
    padding: 40px 40px;
1154
  }
1155
}
1156

  
1157
.uk-offcanvas-flip .uk-offcanvas-bar-light {
1158
  left: auto;
1159
  right: -270px;
1160
}
1161

  
1162
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
1163
  transition-property: right;
1164
}
1165

  
1166
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
1167
  left: auto;
1168
  right: 0;
1169
}
1170

  
1171
@media (min-width: 960px) {
1172
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
1173
    right: -350px;
1174
  }
1175
}
1176

  
1177
.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
1178
  left: auto;
1179
  right: 0;
1180
}
1181

  
1182
.uk-offcanvas-reveal .uk-offcanvas-bar-light {
1183
  left: 0;
1184
}
1185

  
1186
.uk-open > .uk-offcanvas-bar-light {
1187
  left: 0;
1188
}
1189

  
1190
.uk-close::after {
1191
  opacity: 0 !important;
1192
  color: #fff;
1193
  content: '';
1194
  font-family: "Material Icons";
1195
}
1196

  
1197
/********************************************/
1198

  
1199

  
1200
/********* METHODOLOGY ********/
1201

  
1202
/********* Terminology ********/
1203

  
1204
.terminologySection table {
1205
  font-size: 14px;
1206
  background-color: #FFFFFF;
1207
  width:100%;
1208
  table-layout: fixed;
1209
  overflow-wrap: break-word;
1210
}
1211

  
1212
.terminologySection table th {
1213
  width: 20%;
1214
}
1215

  
1216
.terminologySection table th, .terminologySection table td {
1217
  border: 1px solid #DEDEDE;
1218
  padding: 25px 40px;
1219
  vertical-align: top;
1220
  text-align: start;
1221
}
1222

  
1223
.terminologySection table th.important {
1224
  background-color: var(--primary-color-background);
1225
}
1226

  
1227
.terminologySection ul.portal-circle {
1228
  list-style: none;
1229
  padding-left: 40px;
1230
  font-family: "Open Sans", sans-serif;
1231
}
1232

  
1233
.terminologySection ul.portal-circle li {
1234
  margin: 0 0 2px 0;
1235
  position: relative;
1236
}
1237

  
1238
.terminologySection ul.portal-circle li:before {
1239
  content: "";
1240
  border: 5px var(--primary-color) solid !important;
1241
  border-radius: 50px;
1242
  line-height: 21px;
1243
  margin-left: -20px;
1244
  position: absolute;
1245
  top: 7px;
1246
}
1247

  
1248
@media only screen and (max-width: 959px) {
1249
  /*.terminologySection table th {*/
1250
    /*width: 50%;*/
1251
  /*}*/
1252

  
1253
  .terminologySection ul.portal-circle {
1254
    padding-left: 20px;
1255
  }
1256
}
1257

  
1258
/********* Overview ********/
1259

  
1260
@media only screen and (min-width: 640px) {
1261
  .how .first > div:first-child {
1262
    position: relative;
1263
  }
1264

  
1265
  .how .first > div:first-child:after {
1266
    content: "we";
1267
    text-align: center;
1268
    padding-bottom: 5%;
1269
    position: absolute;
1270
    background-image: url("../img/methodology/arrows/1.svg");
1271
    right: -21%;
1272
    top: 33%;
1273
    width: 20%;
1274
    background-size: contain;
1275
    background-repeat: no-repeat;
1276
    background-position: bottom center;
1277
  }
1278

  
1279
  .how .second > div:first-child {
1280
    position: relative;
1281
    padding: 0 22% 0 22%;
1282
  }
1283

  
1284
  .how .second > div:first-child:after {
1285
    content: "and";
1286
    text-align: center;
1287
    padding-bottom: 5%;
1288
    position: absolute;
1289
    background-image: url("../img/methodology/arrows/2.svg");
1290
    right: -10%;
1291
    top: 31%;
1292
    width: 30%;
1293
    background-size: contain;
1294
    background-repeat: no-repeat;
1295
    background-position: bottom center;
1296
  }
1297

  
1298
  .how .third {
1299
    position:  relative;
1300
  }
1301

  
1302
  .how .third > div:first-child {
1303
    padding: 0 12% 0 12%;
1304
  }
1305

  
1306
  .how .third:after {
1307
    content: "on which";
1308
    padding-right: 30%;
1309
    padding-top: 5%;
1310
    padding-bottom: 5%;
1311
    position: absolute;
1312
    background-image: url("../img/methodology/arrows/3.svg");
1313
    bottom: 6%;
1314
    left: 6%;
1315
    transform: translateY(100%);
1316
    width: 55%;
1317
    background-size: contain;
1318
    background-repeat: no-repeat;
1319
    background-position: center;
1320
  }
1321

  
1322
  .how .fourth {
1323
    padding: 10% 3% 0 3%;
1324
  }
1325

  
1326
  .how .fourth > div:first-child {
1327
    position:  relative;
1328
    padding: 0 15% 0 15%;
1329
  }
1330

  
1331
  .how .fourth> div:first-child:after {
1332
    content: "and";
1333
    text-align: center;
1334
    padding-bottom: 5%;
1335
    position: absolute;
1336
    background-image: url("../img/methodology/arrows/4.svg");
1337
    left: -18%;
1338
    top: 35%;
1339
    width: 30%;
1340
    background-size: contain;
1341
    background-repeat: no-repeat;
1342
    background-position: bottom center;
1343
  }
1344

  
1345
  .how .fifth {
1346
    padding: 10% 2% 0 2%;
1347
  }
1348

  
1349
  .how .fifth > div:first-child {
1350
    position:  relative;
1351
  }
1352

  
1353
  .how .fifth > div:first-child:after {
1354
    content: "We";
1355
    text-align: center;
1356
    padding-bottom: 5%;
1357
    position: absolute;
1358
    background-image: url("../img/methodology/arrows/5.svg");
1359
    left: -35%;
1360
    top: 36%;
1361
    width: 30%;
1362
    background-size: contain;
1363
    background-repeat: no-repeat;
1364
    background-position: bottom center;
1365
  }
1366

  
1367
  .how .sixth {
1368
    padding: 10% 5% 0 0;
1369
  }
1370

  
1371
  .how .sixth > div:first-child {
1372
    padding: 0 15% 0 15%;
1373
  }
1374

  
1375
  .how .final {
1376
    padding: 10% 20% 0 20%;
1377
  }
1378

  
1379
  .how .final > div:first-child {
1380
    position: relative;
1381
  }
1382

  
1383
  .how .final img {
1384
    display: block;
1385
    margin-left: auto;
1386
    margin-right: auto;
1387
  }
1388

  
1389
  .how .final > div:first-child:before {
1390
    content: "";
1391
    position: absolute;
1392
    background-image: url("../img/methodology/arrows/6.svg");
1393
    left: -20%;
1394
    /*top: -20%;*/
1395
    /*height: 70%;*/
1396
    top: -8%;
1397
    height: 42%;
1398
    /*width: 30%;*/
1399
    width: 34%;
1400
    background-size: contain;
1401
    background-repeat: no-repeat;
1402
    background-position: bottom center;
1403
  }
1404

  
1405
  .how .final > div:first-child:after {
1406
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1407
    position: absolute;
1408
    background-image: url("../img/methodology/circle.png");
1409
    /*right: -220px;*/
1410
    /*top: -20%;*/
1411
    right: -203px;
1412
    top: -8%;
1413
    width: 300px;
1414
    padding: 8% 0 5% 220px;
1415
    background-size: contain;
1416
    background-repeat: no-repeat;
1417
    background-position: bottom center;
1418
  }
1419
}
1420

  
1421
@media only screen and (min-width: 960px) {
1422
  .how .third:after {
1423
    bottom: -6%;
1424
  }
1425
}
1426

  
1427
@media only screen and (min-width: 1200px) {
1428
  .how .third:after {
1429
    bottom: -10%;
1430
    left: 25%;
1431
    width: 25%;
1432
  }
1433
}
1434

  
1435
@media only screen and (max-width: 639px) {
1436
  .how .first {
1437
    position: relative;
1438
    padding-bottom: 30%;
1439
  }
1440

  
1441
  .how .first:after {
1442
    content: "we";
1443
    text-align: center;
1444
    padding: 25px 105px 25px 0;
1445
    position: absolute;
1446
    background-image: url("../img/methodology/arrows/3.svg");
1447
    /*left: 26%;*/
1448
    left: 33%;
1449
    top: 72%;
1450
    background-size: contain;
1451
    background-repeat: no-repeat;
1452
    background-position: center;
1453
  }
1454

  
1455
  .how .second {
1456
    position: relative;
1457
    padding: 0 15% 30% 15%;
1458
  }
1459

  
1460
  .how .second:after {
1461
    content: "and";
1462
    text-align: center;
1463
    padding: 25px 105px 25px 0;
1464
    position: absolute;
1465
    background-image: url("../img/methodology/arrows/3.svg");
1466
    /*left: 25%;*/
1467
    left: 32%;
1468
    top: 70%;
1469
    background-size: contain;
1470
    background-repeat: no-repeat;
1471
    background-position: center;
1472
  }
1473

  
1474
  .how .third {
1475
    position:  relative;
1476
    padding: 0 5% 30% 5%;
1477
  }
1478

  
1479
  .how .third:after {
1480
    content: "on which";
1481
    text-align: center;
1482
    padding: 25px 105px 25px 0;
1483
    position: absolute;
1484
    background-image: url("../img/methodology/arrows/3.svg");
1485
    /*left: 17%;*/
1486
    left: 27%;
1487
    top: 75%;
1488
    background-size: contain;
1489
    background-repeat: no-repeat;
1490
    background-position: center;
1491
  }
1492

  
1493
  .how .fourth {
1494
    position:  relative;
1495
    padding: 0 0 30% 0;
1496
  }
1497

  
1498
  .how .fourth > div:first-child {
1499
    padding: 0 10% 0 10%;
1500
  }
1501

  
1502
  .how .fourth:after {
1503
    content: "and";
1504
    text-align: center;
1505
    padding: 25px 105px 25px 0;
1506
    position: absolute;
1507
    background-image: url("../img/methodology/arrows/3.svg");
1508
    /*left: 26%;*/
1509
    left: 32%;
1510
    top: 79%;
1511
    background-size: contain;
1512
    background-repeat: no-repeat;
1513
    background-position: center;
1514
  }
1515

  
1516
  .how .fifth {
1517
    position:  relative;
1518
    padding: 0 2% 30% 2%;
1519
  }
1520

  
1521
  .how .fifth:after {
1522
    content: "We";
1523
    text-align: center;
1524
    padding: 25px 105px 25px 0;
1525
    position: absolute;
1526
    background-image: url("../img/methodology/arrows/3.svg");
1527
    /*left: 27%;*/
1528
    left: 33%;
1529
    top: 76%;
1530
    background-size: contain;
1531
    background-repeat: no-repeat;
1532
    background-position: center;
1533
  }
1534

  
1535
  .how .sixth {
1536
    padding: 0 5% 30% 0;
1537
  }
1538

  
1539
  .how .sixth > div:first-child {
1540
    padding: 0 15% 0 15%;
1541
  }
1542

  
1543
  .how .final {
1544
    padding: 20% 0 20% 0;
1545
  }
1546

  
1547
  .how .final > div:first-child {
1548
    position: relative;
1549
  }
1550

  
1551
  .how .final > div:first-child:before {
1552
    content: "";
1553
    position: absolute;
1554
    background-image: url("../img/methodology/arrows/6.svg");
1555
    left: 32%;
1556
    /*top: -80%;*/
1557
    /*height: 70%;*/
1558
    top: -37%;
1559
    height: 33%;
1560
    width: 30%;
1561
    background-size: contain;
1562
    background-repeat: no-repeat;
1563
    background-position: center;
1564
  }
1565

  
1566
  .how .final > div:first-child:after {
1567
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1568
    position: absolute;
1569
    background-image: url("../img/methodology/circle.png");
1570
    /*left: -62%;*/
1571
    /*top: 85%;*/
1572
    left: -52%;
1573
    top: 91%;
1574
    width: 300px;
1575
    padding: 12% 0 0 70%;
1576
    background-size: contain;
1577
    background-repeat: no-repeat;
1578
    background-position: center;
1579
  }
1580
}
1581

  
1582

  
1583
/*********************************/
1584

  
1063 1585
/********* MOBILE ********/
1064 1586
@media only screen and (max-width: 960px) {
1065 1587

  
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff