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 @@
-
-
-
+
+
+
-
+
-
+
-
+
-
@@ -177,33 +177,33 @@
-
-
+
-
+
Argos in the OpenAIRE ecosystem
@@ -382,26 +386,35 @@
-
Useful Resources
-
-
- -
+
Useful Resources
+
+
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'})
+ }
+ });
});