From 615d30b9770c1543efcaf97a67aaf5f8cb629a50 Mon Sep 17 00:00:00 2001 From: Kristan Ntavidi Date: Wed, 10 Mar 2021 18:43:49 +0200 Subject: [PATCH] About Page (How it works). Polishing UI. When click red dots navigate to more info tab. Sharpening images. --- .../src/assets/splash/about/how-it-works.html | 109 ++++++++++-------- dmp-frontend/src/assets/splash/css/styles.css | 62 ++++++++-- .../src/assets/splash/js/how-it-works.js | 39 ++++--- 3 files changed, 135 insertions(+), 75 deletions(-) diff --git a/dmp-frontend/src/assets/splash/about/how-it-works.html b/dmp-frontend/src/assets/splash/about/how-it-works.html index 7f94ce1d6..704a265a3 100644 --- a/dmp-frontend/src/assets/splash/about/how-it-works.html +++ b/dmp-frontend/src/assets/splash/about/how-it-works.html @@ -151,25 +151,25 @@
- - - + Dmp Lifecycle + Dmp Lifecycle + -
+
-
+
-
+
-
+
@@ -177,33 +177,33 @@
-
+
-
- +
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. - + to enable compliance with the RDA DMP Common Standard. +
+
  • @@ -216,22 +216,22 @@
    - +
    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. - +
    - +
    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. - +
    @@ -239,15 +239,15 @@
- +
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. - +
- +
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. - +
-
- +
+
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: - +
-
    -
  1. It enables researchers to switch platforms at anytime and seamlessly work
    2. -
  2. Adds to the Scholarly Communication ecology and pushes for best practices +
    +
    I.
    +
    It enables researchers to switch platforms at anytime and seamlessly work
    +
    +
    +
    II.
    +
    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, -
    3. -
+ classification of DMPs as data management plans and not as publications,
+
+
- - - - - + DMP editor + DMP outputs + Dataset editor + Validated DMP + Finalized DMP
-
+
-
+
Argos in the OpenAIRE ecosystem
@@ -382,26 +386,35 @@
-

Useful Resources

-

-

+
+
+
+
+
+
Webinar:
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps (starts at 30:15) - - -

+
+
+
+ diff --git a/dmp-frontend/src/assets/splash/css/styles.css b/dmp-frontend/src/assets/splash/css/styles.css index 8986dae25..4fdd15185 100644 --- a/dmp-frontend/src/assets/splash/css/styles.css +++ b/dmp-frontend/src/assets/splash/css/styles.css @@ -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; -} \ No newline at end of file +} + +.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 */ \ No newline at end of file diff --git a/dmp-frontend/src/assets/splash/js/how-it-works.js b/dmp-frontend/src/assets/splash/js/how-it-works.js index ca07cbb6e..7aad01b62 100644 --- a/dmp-frontend/src/assets/splash/js/how-it-works.js +++ b/dmp-frontend/src/assets/splash/js/how-it-works.js @@ -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'}) + } + }); });