About Page (How it works). Polishing UI. When click red dots navigate to more info tab. Sharpening images.
This commit is contained in:
parent
1528b91736
commit
615d30b977
|
|
@ -151,25 +151,25 @@
|
|||
<div class="col-12" style="margin-top: 121px; ">
|
||||
|
||||
<div style="position: relative;" id="lifecycle-img-container">
|
||||
<img id="img-coloured" class="image-coloured" src="../assets/img/lifecycle_full_color.png" style="width: 100%; height: auto; display: block;" alt="">
|
||||
<img class="image-grey" src="../assets/img/lifecycle_full_color.png" style="width: 100%; height: auto; display: block;" alt="">
|
||||
|
||||
<img class="preface-img" src="../assets/img/lifecycle_full_color.png" alt="">
|
||||
<img id="img-coloured" class="image-coloured img-sharp" src="../assets/img/lifecycle_full_color.png" alt="Dmp Lifecycle">
|
||||
<img class="image-grey img-sharp" src="../assets/img/lifecycle_full_color.png" alt="Dmp Lifecycle">
|
||||
<!-- <img class="preface-img" src="../assets/img/lifecycle_full_color.png" alt=""> -->
|
||||
|
||||
<!-- EDITORS-DRAFT -->
|
||||
<div class="red-dot" data-clip-mode="clip-draft" style="top:24.7%; left: 23.5%; cursor: pointer;">
|
||||
<div class="red-dot navigate-dot" data-navigate-to="multiple-navigation-1" data-clip-mode="clip-draft" style="top:24.7%; left: 23.5%; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- VALIDATED -->
|
||||
<div class="red-dot" data-clip-mode="clip-validated" style="top:19%; left: 56.5% ; cursor: pointer;">
|
||||
<div class="red-dot navigate-dot" data-navigate-to="navigation-tab-2" data-clip-mode="clip-validated" style="top:19%; left: 56.5% ; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- FINALIZED -->
|
||||
<div class="red-dot" data-clip-mode="clip-finalized" style="top:39%; right: 19.7%; cursor: pointer;">
|
||||
<div class="red-dot navigate-dot" data-navigate-to="navigation-tab-3" data-clip-mode="clip-finalized" style="top:39%; right: 19.7%; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
<!-- DMP -->
|
||||
<div class="red-dot" data-clip-mode="clip-dmp" style="top:67%; right: -0.3%; cursor: pointer;">
|
||||
<div class="red-dot navigate-dot" data-navigate-to="navigation-tab-4" data-clip-mode="clip-dmp" style="top:67%; right: -0.3%; cursor: pointer;">
|
||||
<div class="inner-red-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,33 +177,33 @@
|
|||
|
||||
</div>
|
||||
<div class="col-12" style="margin-top: 121px; ">
|
||||
<div class="options-menu">
|
||||
<div class="options-menu" id="options-menu">
|
||||
|
||||
<div class="row">
|
||||
<!-- tab naviggation -->
|
||||
<div class="col-7">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" id="multiple-navigation-1" data-img-fragment href="#create_and_add">Create & Add</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-validated-is" href="#validate">Validate</a>
|
||||
<a class="nav-link" data-toggle="tab" id="navigation-tab-2" data-img-fragment="img-fragment-validated-is" href="#validate">Validate</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-finalized-is" href="#finalize">Finalize</a>
|
||||
<a class="nav-link" data-toggle="tab" id="navigation-tab-3" data-img-fragment="img-fragment-finalized-is" href="#finalize">Finalize</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-dmp-out" href="#dmp">Ma-Dmp Outputs</a>
|
||||
<a class="nav-link" data-toggle="tab" id="navigation-tab-4" data-img-fragment="img-fragment-dmp-out" href="#dmp">Ma-Dmp Outputs</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane show active" id="create_and_add">
|
||||
<small>
|
||||
<div class="nav-tab-inner-text">
|
||||
Argos consists of two main editors: the DMP editor and the Dataset editor.
|
||||
Both editors integrate OpenAIRE and ESOC APIs to ease the writing process and
|
||||
help create links with other outputs. Also, the editors incorporate a mechanism
|
||||
to enable compliance with the RDA DMP Common Standard.
|
||||
</small>
|
||||
to enable compliance with the <span style="color: #23BCBA;">RDA DMP Common Standard</span>.
|
||||
</div>
|
||||
|
||||
<!-- nested naviation -->
|
||||
<ul class="nav nav-pills" style="padding-top: 2em;">
|
||||
<li class="nav-item">
|
||||
|
|
@ -216,22 +216,22 @@
|
|||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane show active" id="dmp_editor_pane">
|
||||
<small>
|
||||
<div class="nav-tab-inner-text">
|
||||
The DMP editor embeds the Dataset editor to provide a holistic view of a project's
|
||||
scope, beneficiaries and data activities. Therefore, it guides users step-by-step
|
||||
into adding appropriate administrative information, selecting templates that
|
||||
correspond to research needs and requirements, and describing data activities.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="dataset_editor_pane">
|
||||
<small>
|
||||
<div class="nav-tab-inner-text">
|
||||
The Dataset editor concers information that is solely for datasets, such as how Open
|
||||
and FAIR principles have been applied to them throughout data management activities.
|
||||
It is the place to select RDM templates and start answering data questions. Moreover,
|
||||
the Dataset editor can be used independently at any time when new data are produced
|
||||
throughout a project lifetime. That allows users to quickly describe their new data and
|
||||
link them to existing DMPs in their dashboard.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -239,15 +239,15 @@
|
|||
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="validate">
|
||||
<small>
|
||||
<div class="nav-tab-inner-text">
|
||||
Information contained in DMPs should be validated before being published.
|
||||
Validation at this stage checks for mandatory fields in the DMP and reports back
|
||||
when necessary information has not been provided by the user. Once the user
|
||||
add all necessary information, validation is successful.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="finalize">
|
||||
<small>
|
||||
<div class="nav-tab-inner-text">
|
||||
DMPs finalization is the process of locking working drafts of DMPs and publishing
|
||||
them, either just on the Argos platform or on Zenodo where they alse get DOI.
|
||||
It is possible for datasets contained in DMPs to be finalized independently. That
|
||||
|
|
@ -255,41 +255,45 @@
|
|||
of sensitive content. Before publishing DMPs, sensitive datasets can be detached
|
||||
from its core. That way data descriptions are equally protected form being openly
|
||||
shared along with the DMP content.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade " id="dmp">
|
||||
<small>
|
||||
<div role="tabpanel" class="tab-pane fade" id="dmp">
|
||||
<div class="nav-tab-inner-text">
|
||||
Argos ma-DMP outputs carry rich information that exceeds metadata provided in
|
||||
DMPs whey they are created and deposited as plain texts. Argos applies the RDA
|
||||
DMP Common Standard to comply with global practices on the machine-actinability.
|
||||
This is important for two reasons:
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<ol style="list-style-type: lower-roman;">
|
||||
<li>It enables researchers to switch platforms at anytime and seamlessly work</li>
|
||||
<li>Adds to the Scholarly Communication ecology and pushes for best practices
|
||||
<div class="row pt-2 nav-tab-inner-text">
|
||||
<div class="col-auto" style="width:2.5em;color: #129D99;">I.</div>
|
||||
<div class="col">It enables researchers to switch platforms at anytime and seamlessly work</div>
|
||||
</div>
|
||||
<div class="row nav-tab-inner-text pt-4">
|
||||
<div class="col-auto " style="width:2.5em;color: #129D99;">II.</div>
|
||||
<div class="col">Adds to the Scholarly Communication ecology and pushes for best practices
|
||||
in neighbour areas to keep up pace, e.g. deposit in repositories and
|
||||
classification of DMPs as data management plans and not as publications,
|
||||
</li>
|
||||
</ol>
|
||||
classification of DMPs as data management plans and not as publications,</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Images -->
|
||||
<div class="col">
|
||||
<img src="../assets/img/dmp_out.png" class="img-fragment-step" id="img-fragment-dmp-out" alt="">
|
||||
<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1" id="img-fragment-dmp-editor" alt="">
|
||||
<img src="../assets/img/4_dataset_editor.png" class="img-fragment-step" id="img-fragment-dataset-editor" alt="">
|
||||
<img src="../assets/img/6_validated_is.png" class="img-fragment-step" id="img-fragment-validated-is" alt="">
|
||||
<img src="../assets/img/8_finalized_is.png" class="img-fragment-step" id="img-fragment-finalized-is" alt="">
|
||||
<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1 img-sharp" id="img-fragment-dmp-editor" alt="DMP editor">
|
||||
<img src="../assets/img/dmp_out.png" class="img-fragment-step img-sharp" id="img-fragment-dmp-out" alt="DMP outputs">
|
||||
<img src="../assets/img/4_dataset_editor.png" class="img-fragment-step img-sharp" id="img-fragment-dataset-editor" alt="Dataset editor">
|
||||
<img src="../assets/img/6_validated_is.png" class="img-fragment-step img-sharp" id="img-fragment-validated-is" alt="Validated DMP">
|
||||
<img src="../assets/img/8_finalized_is.png" class="img-fragment-step img-sharp" id="img-fragment-finalized-is" alt="Finalized DMP">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-small">
|
||||
<div class="container-small" style="margin-top: 7em;">
|
||||
|
||||
<div class="col pt-5 pb-3">
|
||||
<div class="col pt-5 pb-3" >
|
||||
<div class="row title-5">Argos in the OpenAIRE ecosystem</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -382,26 +386,35 @@
|
|||
</div>
|
||||
<div class="container-small">
|
||||
|
||||
<p class="mt-3 pt-4"><b>Useful Resources</b></p>
|
||||
<p>
|
||||
<ul style="padding-bottom: 4em;">
|
||||
<li>
|
||||
<p class="mt-3 pt-4" style="font-weight: bolder;" >Useful Resources</p>
|
||||
<div class="resources-list">
|
||||
<div class="row">
|
||||
<div class="col-auto" style="padding-top: .5em;">
|
||||
<div class="blue-dot"></div>
|
||||
</div>
|
||||
<div class="col p-0">
|
||||
Argos RDA output adoption:
|
||||
<br>
|
||||
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
|
||||
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" >
|
||||
<div class="col-auto" style="padding-top: .5em;">
|
||||
<div class="blue-dot"></div>
|
||||
</div>
|
||||
<div class="col p-0">
|
||||
Webinar:
|
||||
<br>
|
||||
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
|
||||
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
|
||||
</a>
|
||||
(starts at 30:15)
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -385,7 +385,7 @@ hr {
|
|||
}
|
||||
|
||||
|
||||
/* ABOUT HOW IT WORKDS PAGE REDESIGN */
|
||||
/* ABOUT HOW-IT-WORKDS PAGE REDESIGN */
|
||||
|
||||
.red-dot{
|
||||
width: 27px;
|
||||
|
|
@ -405,9 +405,6 @@ hr {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* .tooltip{
|
||||
background-color: red;
|
||||
} */
|
||||
.tooltip >.tooltip-inner {
|
||||
padding: 2em;
|
||||
background-color: #FFF;
|
||||
|
|
@ -444,15 +441,22 @@ border-bottom-color: #fff;
|
|||
}
|
||||
|
||||
.image-coloured {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
/* position: absolute; */
|
||||
clip-path: polygon(0% 0%);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms 50ms ease-in-out;
|
||||
}
|
||||
|
||||
.image-grey {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
|
@ -470,7 +474,7 @@ border-bottom-color: #fff;
|
|||
clip-path: polygon(80.26% 0.0%, 80.13% 100.0%, 100.00% 100.0%, 100.0% 0.0%);
|
||||
}
|
||||
|
||||
.preface-img{
|
||||
/* .preface-img{
|
||||
width: 100%; height: auto; display: block; z-index: 2;
|
||||
position: absolute;
|
||||
top:0;
|
||||
|
|
@ -482,7 +486,7 @@ border-bottom-color: #fff;
|
|||
transition-duration: 300ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
|
@ -499,6 +503,7 @@ border-bottom-color: #fff;
|
|||
margin-bottom: 1.2em;
|
||||
}
|
||||
.options-menu .nav-tabs .nav-item .nav-link{
|
||||
font-weight: normal;
|
||||
border-radius: 0px !important;
|
||||
padding: 0.2rem 0rem !important;
|
||||
}
|
||||
|
|
@ -507,9 +512,10 @@ border-bottom-color: #fff;
|
|||
}
|
||||
|
||||
.options-menu .nav-tabs .nav-link.active{
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
font-weight: bold;
|
||||
border-left:0px!important;
|
||||
border-top:0px !important;
|
||||
border-right:0px !important;
|
||||
}
|
||||
|
||||
.options-menu .nav-tabs .nav-link:hover:not(.active){
|
||||
|
|
@ -533,6 +539,8 @@ border-bottom-color: #fff;
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
.options-menu .nav-pills .nav-link{
|
||||
padding: .3rem 1.3rem !important;
|
||||
font-weight: normal;
|
||||
border-radius: 40px;
|
||||
border: 1px solid #1A1A1A;
|
||||
color: #1A1A1A;
|
||||
|
|
@ -541,6 +549,7 @@ border-bottom-color: #fff;
|
|||
}
|
||||
.options-menu .nav-pills .nav-link.active{
|
||||
background-color: #129D99;
|
||||
font-weight: bold;
|
||||
color: #F9FBFC;
|
||||
border: 1px solid transparent;
|
||||
opacity: 1;
|
||||
|
|
@ -550,7 +559,9 @@ border-bottom-color: #fff;
|
|||
}
|
||||
|
||||
.img-fragment-step{
|
||||
width: auto; max-height:23em;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height:23em;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms 50ms ease-out;
|
||||
|
|
@ -561,4 +572,31 @@ border-bottom-color: #fff;
|
|||
}
|
||||
.opacity-1{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab-inner-text{
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0px;
|
||||
color: #1A1A1A;
|
||||
opacity: 1;
|
||||
}
|
||||
.resources-list{
|
||||
margin-bottom: 9em;
|
||||
}
|
||||
/* .resources-list li::marker{
|
||||
font-size: 1.5em;
|
||||
color: #23BCBA;
|
||||
} */
|
||||
.blue-dot{
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
background-color: #23BCBA;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
.img-sharp{
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
/* END OF ABOUT HOW-IT-WORKDS PAGE REDESIGN */
|
||||
|
|
@ -9,7 +9,6 @@ jQuery(function(){
|
|||
const mutationObserver = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(mutation=>{
|
||||
if(mutation.attributeName === 'class'){//class changed
|
||||
// console.log(mutation);
|
||||
const isActive = mutation.target.className.includes('active');
|
||||
const target_image_id = mutation.target.attributes['data-img-fragment'].value;
|
||||
|
||||
|
|
@ -48,7 +47,8 @@ jQuery(function(){
|
|||
current_mode = mode;
|
||||
|
||||
$img_coloured.addClass(mode);
|
||||
$img_preface.addClass('opacity-0');
|
||||
// $img_preface.addClass('opacity-0');
|
||||
$img_coloured.addClass('opacity-1');
|
||||
|
||||
$action_dots.each(function(){
|
||||
if($(this).attr('data-clip-mode') != mode){
|
||||
|
|
@ -64,33 +64,42 @@ jQuery(function(){
|
|||
$lifecycle_img_container.on('mouseleave', function(){
|
||||
if(current_mode){
|
||||
const mode = current_mode;
|
||||
$img_coloured.removeClass(mode);
|
||||
$img_preface.removeClass('opacity-0');
|
||||
|
||||
|
||||
//give animation time to complete
|
||||
setTimeout(() => {
|
||||
$img_coloured.removeClass(mode);
|
||||
$action_dots.each(function(){
|
||||
$(this).removeClass('d-none');
|
||||
});
|
||||
}, 300);
|
||||
$img_coloured.removeClass('opacity-1');
|
||||
// $img_preface.removeClass('opacity-0');
|
||||
|
||||
$action_dots.each(function(){
|
||||
$(this).removeClass('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
current_mode = null;
|
||||
});
|
||||
|
||||
// $('[data-img-fragment]').each(function(){
|
||||
// console.log($(this).attr('data-img-fragment'));
|
||||
// })
|
||||
|
||||
$("[data-img-fragment]").each(function(){
|
||||
const nodeElement = $(this)[0];
|
||||
|
||||
mutationObserver.observe(nodeElement ,{attributes:true});
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$('.navigate-dot').on('click', function(){
|
||||
|
||||
|
||||
// mutationObserver.observe($("[data-img-fragment]")[1] ,{attributes:true});
|
||||
|
||||
|
||||
const navigate_to = $(this).attr('data-navigate-to');
|
||||
|
||||
if(navigate_to){
|
||||
const $navigate_to = $('#'+navigate_to);
|
||||
$navigate_to.click();
|
||||
const offset = $('#options-menu').offset().top - 120;
|
||||
window.scrollTo({top:offset, behavior:'smooth'})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue