MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

About Page (How it works). Polishing UI. When click red dots navigate to more info tab. Sharpening images.

This commit is contained in:
Kristian Ntavidi 2021-03-10 18:43:49 +02:00
parent 1528b91736
commit 615d30b977
3 changed files with 135 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
dmp-frontend/src/assets/splash/about/how-it-works.html
View File

@ -151,25 +151,25 @@
<div class="col-12" style="margin-top: 121px; "> <div class="col-12" style="margin-top: 121px; ">
<div style="position: relative;" id="lifecycle-img-container"> <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 --> <!-- 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 class="inner-red-dot"></div>
</div> </div>
<!-- VALIDATED --> <!-- 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 class="inner-red-dot"></div>
</div> </div>
<!-- FINALIZED --> <!-- 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 class="inner-red-dot"></div>
</div> </div>
<!-- DMP --> <!-- 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 class="inner-red-dot"></div>
</div> </div>
</div> </div>
@ -177,33 +177,33 @@
</div> </div>
<div class="col-12" style="margin-top: 121px; "> <div class="col-12" style="margin-top: 121px; ">
<div class="options-menu"> <div class="options-menu" id="options-menu">
<div class="row"> <div class="row">
<!-- tab naviggation -->
<div class="col-7"> <div class="col-7">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <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> <a class="nav-link active" data-toggle="tab" id="multiple-navigation-1" data-img-fragment href="#create_and_add">Create & Add</a>
</li> </li>
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane show active" id="create_and_add"> <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. 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 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 help create links with other outputs. Also, the editors incorporate a mechanism
to enable compliance with the RDA DMP Common Standard. to enable compliance with the <span style="color: #23BCBA;">RDA DMP Common Standard</span>.
</small> </div>
<!-- nested naviation --> <!-- nested naviation -->
<ul class="nav nav-pills" style="padding-top: 2em;"> <ul class="nav nav-pills" style="padding-top: 2em;">
<li class="nav-item"> <li class="nav-item">
@ -216,22 +216,22 @@
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane show active" id="dmp_editor_pane"> <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 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 scope, beneficiaries and data activities. Therefore, it guides users step-by-step
into adding appropriate administrative information, selecting templates that into adding appropriate administrative information, selecting templates that
correspond to research needs and requirements, and describing data activities. correspond to research needs and requirements, and describing data activities.
</small> </div>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="dataset_editor_pane"> <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 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. 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, 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 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 throughout a project lifetime. That allows users to quickly describe their new data and
link them to existing DMPs in their dashboard. link them to existing DMPs in their dashboard.
</small> </div>
</div> </div>
</div> </div>
@ -239,15 +239,15 @@
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="validate"> <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. Information contained in DMPs should be validated before being published.
Validation at this stage checks for mandatory fields in the DMP and reports back 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 when necessary information has not been provided by the user. Once the user
add all necessary information, validation is successful. add all necessary information, validation is successful.
</small> </div>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="finalize"> <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 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. 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 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 of sensitive content. Before publishing DMPs, sensitive datasets can be detached
from its core. That way data descriptions are equally protected form being openly from its core. That way data descriptions are equally protected form being openly
shared along with the DMP content. shared along with the DMP content.
</small> </div>
</div> </div>
<div role="tabpanel" class="tab-pane fade " id="dmp"> <div role="tabpanel" class="tab-pane fade" id="dmp">
<small> <div class="nav-tab-inner-text">
Argos ma-DMP outputs carry rich information that exceeds metadata provided in 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 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. DMP Common Standard to comply with global practices on the machine-actinability.
This is important for two reasons: This is important for two reasons:
</small> </div>
<ol style="list-style-type: lower-roman;"> <div class="row pt-2 nav-tab-inner-text">
<li>It enables researchers to switch platforms at anytime and seamlessly work</li> <div class="col-auto" style="width:2.5em;color: #129D99;">I.</div>
<li>Adds to the Scholarly Communication ecology and pushes for best practices <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 in neighbour areas to keep up pace, e.g. deposit in repositories and
classification of DMPs as data management plans and not as publications, classification of DMPs as data management plans and not as publications,</div>
</li> </div>
</ol>
</div> </div>
</div> </div>
</div> </div>
<!-- Images --> <!-- Images -->
<div class="col"> <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 img-sharp" id="img-fragment-dmp-editor" alt="DMP editor">
<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1" id="img-fragment-dmp-editor" alt=""> <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" id="img-fragment-dataset-editor" alt=""> <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" id="img-fragment-validated-is" alt=""> <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" id="img-fragment-finalized-is" alt=""> <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>
</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 class="row title-5">Argos in the OpenAIRE ecosystem</div>
</div> </div>
@ -382,26 +386,35 @@
</div> </div>
<div class="container-small"> <div class="container-small">
<p class="mt-3 pt-4"><b>Useful Resources</b></p> <p class="mt-3 pt-4" style="font-weight: bolder;" >Useful Resources</p>
<p> <div class="resources-list">
<ul style="padding-bottom: 4em;"> <div class="row">
<li> <div class="col-auto" style="padding-top: .5em;">
<div class="blue-dot"></div>
</div>
<div class="col p-0">
Argos RDA output adoption: Argos RDA output adoption:
<br> <br>
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps"> <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 https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
</a> </a>
</li> </div>
<li> </div>
<div class="row" >
<div class="col-auto" style="padding-top: .5em;">
<div class="blue-dot"></div>
</div>
<div class="col p-0">
Webinar: Webinar:
<br> <br>
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps"> <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 https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
</a> </a>
(starts at 30:15) (starts at 30:15)
</li> </div>
</ul> </div>
</p> </div>

62
dmp-frontend/src/assets/splash/css/styles.css
View File

@ -385,7 +385,7 @@ hr {
} }
/* ABOUT HOW IT WORKDS PAGE REDESIGN */ /* ABOUT HOW-IT-WORKDS PAGE REDESIGN */
.red-dot{ .red-dot{
width: 27px; width: 27px;
@ -405,9 +405,6 @@ hr {
border-radius: 50%; border-radius: 50%;
} }
/* .tooltip{
background-color: red;
} */
.tooltip >.tooltip-inner { .tooltip >.tooltip-inner {
padding: 2em; padding: 2em;
background-color: #FFF; background-color: #FFF;
@ -444,15 +441,22 @@ border-bottom-color: #fff;
} }
.image-coloured { .image-coloured {
width: 100%;
height: auto;
display: block;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0px; top: 0px;
/* position: absolute; */
clip-path: polygon(0% 0%); clip-path: polygon(0% 0%);
opacity: 0;
transition: opacity 200ms 50ms ease-in-out;
} }
.image-grey { .image-grey {
width: 100%;
height: auto;
display: block;
z-index: 0; z-index: 0;
filter: grayscale(100%); 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%); 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; width: 100%; height: auto; display: block; z-index: 2;
position: absolute; position: absolute;
top:0; top:0;
@ -482,7 +486,7 @@ border-bottom-color: #fff;
transition-duration: 300ms; transition-duration: 300ms;
transition-delay: 50ms; transition-delay: 50ms;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} } */
@ -499,6 +503,7 @@ border-bottom-color: #fff;
margin-bottom: 1.2em; margin-bottom: 1.2em;
} }
.options-menu .nav-tabs .nav-item .nav-link{ .options-menu .nav-tabs .nav-item .nav-link{
font-weight: normal;
border-radius: 0px !important; border-radius: 0px !important;
padding: 0.2rem 0rem !important; padding: 0.2rem 0rem !important;
} }
@ -507,9 +512,10 @@ border-bottom-color: #fff;
} }
.options-menu .nav-tabs .nav-link.active{ .options-menu .nav-tabs .nav-link.active{
border-left-color: transparent !important; font-weight: bold;
border-top-color: transparent !important; border-left:0px!important;
border-right-color: transparent !important; border-top:0px !important;
border-right:0px !important;
} }
.options-menu .nav-tabs .nav-link:hover:not(.active){ .options-menu .nav-tabs .nav-link:hover:not(.active){
@ -533,6 +539,8 @@ border-bottom-color: #fff;
margin-bottom: 1em; margin-bottom: 1em;
} }
.options-menu .nav-pills .nav-link{ .options-menu .nav-pills .nav-link{
padding: .3rem 1.3rem !important;
font-weight: normal;
border-radius: 40px; border-radius: 40px;
border: 1px solid #1A1A1A; border: 1px solid #1A1A1A;
color: #1A1A1A; color: #1A1A1A;
@ -541,6 +549,7 @@ border-bottom-color: #fff;
} }
.options-menu .nav-pills .nav-link.active{ .options-menu .nav-pills .nav-link.active{
background-color: #129D99; background-color: #129D99;
font-weight: bold;
color: #F9FBFC; color: #F9FBFC;
border: 1px solid transparent; border: 1px solid transparent;
opacity: 1; opacity: 1;
@ -550,7 +559,9 @@ border-bottom-color: #fff;
} }
.img-fragment-step{ .img-fragment-step{
width: auto; max-height:23em; width: auto;
max-width: 100%;
max-height:23em;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
transition: opacity 200ms 50ms ease-out; transition: opacity 200ms 50ms ease-out;
@ -561,4 +572,31 @@ border-bottom-color: #fff;
} }
.opacity-1{ .opacity-1{
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 */

39
dmp-frontend/src/assets/splash/js/how-it-works.js
View File

@ -9,7 +9,6 @@ jQuery(function(){
const mutationObserver = new MutationObserver(function(mutations) { const mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(mutation=>{ mutations.forEach(mutation=>{
if(mutation.attributeName === 'class'){//class changed if(mutation.attributeName === 'class'){//class changed
// console.log(mutation);
const isActive = mutation.target.className.includes('active'); const isActive = mutation.target.className.includes('active');
const target_image_id = mutation.target.attributes['data-img-fragment'].value; const target_image_id = mutation.target.attributes['data-img-fragment'].value;
@ -48,7 +47,8 @@ jQuery(function(){
current_mode = mode; current_mode = mode;
$img_coloured.addClass(mode); $img_coloured.addClass(mode);
$img_preface.addClass('opacity-0'); // $img_preface.addClass('opacity-0');
$img_coloured.addClass('opacity-1');
$action_dots.each(function(){ $action_dots.each(function(){
if($(this).attr('data-clip-mode') != mode){ if($(this).attr('data-clip-mode') != mode){
@ -64,33 +64,42 @@ jQuery(function(){
$lifecycle_img_container.on('mouseleave', function(){ $lifecycle_img_container.on('mouseleave', function(){
if(current_mode){ if(current_mode){
const mode = 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; current_mode = null;
}); });
// $('[data-img-fragment]').each(function(){
// console.log($(this).attr('data-img-fragment'));
// })
$("[data-img-fragment]").each(function(){ $("[data-img-fragment]").each(function(){
const nodeElement = $(this)[0]; const nodeElement = $(this)[0];
mutationObserver.observe(nodeElement ,{attributes:true}); mutationObserver.observe(nodeElement ,{attributes:true});
}) });
$('.navigate-dot').on('click', function(){
const navigate_to = $(this).attr('data-navigate-to');
// mutationObserver.observe($("[data-img-fragment]")[1] ,{attributes:true});
if(navigate_to){
const $navigate_to = $('#'+navigate_to);
$navigate_to.click();
const offset = $('#options-menu').offset().top - 120;
window.scrollTo({top:offset, behavior:'smooth'})
}
});
}); });