diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts index 8ceeea0a5..76fff95f3 100644 --- a/dmp-frontend/src/app/app-routing.module.ts +++ b/dmp-frontend/src/app/app-routing.module.ts @@ -154,6 +154,13 @@ const appRoutes: Routes = [ breadcrumb: true } }, + { + path: 'guest', + loadChildren: () => import('./ui/guest/guest.module').then(m => m.GuestModule), + data: { + breadcrumb: true + } + }, { path: 'splash', loadChildren: () => import('./ui/splash/splash.module').then(m => m.SplashModule), diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html index 632595d63..4da74d4e8 100644 --- a/dmp-frontend/src/app/app.component.html +++ b/dmp-frontend/src/app/app.component.html @@ -1,42 +1,17 @@ -
- -
- -
- - -
-
+
+ + + + + + +
+ +
+
+
- - - - - + diff --git a/dmp-frontend/src/app/app.component.scss b/dmp-frontend/src/app/app.component.scss index 51ca45e9b..68549ddb0 100644 --- a/dmp-frontend/src/app/app.component.scss +++ b/dmp-frontend/src/app/app.component.scss @@ -6,9 +6,26 @@ width: 100%; } +// .main-container { +// margin-top: 64px; +// padding-top: 10px; +// } + .main-container { - margin-top: 64px; - padding-top: 10px; + top: 80px; + left: 0; + right: 0; +} + +.sidenav { + display: flex; + align-items: center; + justify-content: center; + width: 260px; + background: #ffffff 0% 0% no-repeat padding-box; + box-shadow: 0px 0px 16px 2px #00000029; + border-right-width: 0px; + opacity: 1; } .sidebar-shadow { diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts index 5b777bc75..39a950841 100644 --- a/dmp-frontend/src/app/app.component.ts +++ b/dmp-frontend/src/app/app.component.ts @@ -32,7 +32,6 @@ export class AppComponent implements OnInit { sideNavOpen = false; helpContentEnabled: boolean; private statusChangeSubscription: Subscription; - onlySplash = false; constructor( private router: Router, @@ -61,18 +60,17 @@ export class AppComponent implements OnInit { } ngOnInit() { - if (this.location.path() === '') { - if (!this.configurationService.useSplash) { - this.onlySplash = false; + if (this.location.path() === '' || this.location.path() === '/home') { + if (this.isAuthenticated()) { this.router.navigate(['/reload']).then(() => this.router.navigate(['/home'])); - } else { - this.onlySplash = true; - this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash'])); + } else if (!this.isAuthenticated()) { + this.router.navigate(['/reload']).then(() => this.router.navigate(['/guest'])); } - } else if (this.location.path() === '/splash') { - this.onlySplash = true; - } else { - this.onlySplash = false; + // if (!this.configurationService.useSplash) { + // this.router.navigate(['/reload']).then(() => this.router.navigate(['/home'])); + // } else { + // this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash'])); + // } } if (!this.cookieService.check("cookiesConsent")) { this.cookieService.set("cookiesConsent", "false", 356); @@ -171,5 +169,9 @@ export class AppComponent implements OnInit { this.authentication.current() && this.authentication.current().culture ? this.cultureService.cultureSelected(this.authentication.current().culture) : this.cultureService.cultureSelected(this.configurationService.defaultCulture); this.authentication.current() && this.authentication.current().language ? this.language.changeLanguage(this.authentication.current().language) : this.language.changeLanguage('en'); } + + toggleNavbar(event) { + document.getElementById('hamburger').classList.toggle("change"); + } } diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index 556d685a1..e8ca4ec64 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -31,6 +31,7 @@ import { TranslateServerLoader } from './core/services/language/server.loader'; import { BaseHttpService } from './core/services/http/base-http.service'; import { ConfigurationService } from './core/services/configuration/configuration.service'; import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module'; +import { GuestModule } from './ui/guest/guest.module'; // AoT requires an exported function for factories export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) { @@ -98,6 +99,7 @@ const cookieConfig: NgcCookieConsentConfig = { DatasetCreateWizardModule, NavbarModule, SidebarModule, + GuestModule, NgcCookieConsentModule.forRoot(cookieConfig), Oauth2DialogModule ], diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.html b/dmp-frontend/src/app/ui/auth/login/login.component.html index dd1c8fc9e..c3000c009 100644 --- a/dmp-frontend/src/app/ui/auth/login/login.component.html +++ b/dmp-frontend/src/app/ui/auth/login/login.component.html @@ -3,22 +3,22 @@
--> diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts index bff497006..916c6cf74 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts @@ -24,6 +24,7 @@ import { takeUntil } from 'rxjs/operators'; export class RecentEditedActivityComponent extends BaseComponent implements OnInit { dmpActivities: DmpListingModel[]; recentActivityTypeEnum = RecentActivityType; + isDraft: boolean; constructor( private router: Router, diff --git a/dmp-frontend/src/app/ui/guest/guest.component.html b/dmp-frontend/src/app/ui/guest/guest.component.html new file mode 100644 index 000000000..e99a92ed9 --- /dev/null +++ b/dmp-frontend/src/app/ui/guest/guest.component.html @@ -0,0 +1,344 @@ +
+ + + +
+
+
+
+

Plan and follow your data

+
+
+

Create

 
machine actionable DMPs.
+
+
+

Configure

 
to best fit your dicsipline.
+
+
+

Link

 
to EOSC components out of the box.
+
+
+

Share

 
easily in your repository.
+
+
+
+

Bring your Data Management Plans closer to where data are generated, analysed and stored.

+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+

Start your

+
+

Argos

 

experience

+
+
+
+

1

 

Select Templates

+
+
+

2

 

Fill the information

+
+
+

3

 

Share DMP

+
+
+
+
+ +
+
+
+
+ +
+
+
Features
+
+
+
+
+
+
+
Produce DMP outputs
+
+
+
+ Close the data management planning lifecycle by publishing your DMPs in a FAIR manner. Assign licenses, PIDs and publish DMPs in a repository of your choice. +
+
+
+
+
+ +
+
+
Update DMPs
+
+
+
+ Treat DMPs as living documents. Secure their provenance and continue work in new versions (new DOIs assigned). +
+
+
+
+
+
+
+ +
+
+
Re-use datasets & templates
+
+
+
+ Identify datasets to be re-used in your DMP. Copy or clone dataset descriptions to other DMPs. +
+
+
+
+
+ +
+
+
Import and Export DMPs
+
+
+
+ Import a .json file of your DMP and continue work in ARGOS. Export DMPs in machine readable (.xml) and machine-actionable (.json) formats. +
+
+
+
+
+
+
+ +
+
+
Customise dataset descriptions
+
+
+
+ Differentiate DMPs from dataset descriptions. Describe your datasets with more than one template and tailor its content to your specific needs. +
+
+
+
+
+ +
+
+
Connect with OpenAIRE & EOSC
+
+
+
+ Use OpenAIRE and EOSC underlying services, sources and semantics to ease completion of DMPs and trace the quality of your research. +
+
+
+
+
+
+ +
+
+
+
+
+ Who Benefits +
+
+
+ +
+
+
+
+
+
+
+
+ Funders +
+
+ Include DMPs in data management policies. +
+
+
+ + Add, update and modify DMP templates +
+
+ + Enrich your organisations’ research graph +
+
+ + Link argos to your  + Monitoring Dashboard +
+
+
+
+
+
+ Researchers +
+
+ Become Research Data Management literate and lead Open Science cultural change/ practices. +
+
+
+ + Comply with DMP requirements +
+
+ + Learn and apply best practices for DMPs +
+
+ + Co-edit DMPs and manage workload +
+
+
+
+
+
+ Institutions +
+
+ Support Open and FAIR Data Management Planning. +
+
+
+ + Add, update and modify DMP templates +
+
+ + Connect your organisations’ services +
+
+ + Ensure research integrity and excellence +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ + co-branding +
+
+ + ARGOS is based on OpenDMP, an open source software that can be deployed by third parties. ARGOS development team welcomes contributions by the international community to strengthen functionalities and further align with global fora. + +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + +
+ +
+ +
+
+
+
Unless otherwise indicated, all materials created by OpenAIRE are licenced under
  +
ATTRIBUTION 4.0 INTERNATIONAL LICENSE.
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/guest/guest.component.scss b/dmp-frontend/src/app/ui/guest/guest.component.scss new file mode 100644 index 000000000..e0c5c508c --- /dev/null +++ b/dmp-frontend/src/app/ui/guest/guest.component.scss @@ -0,0 +1,724 @@ +// Contact +.main-contact { + padding: 3rem 16.5rem; +} + +.required { + color: #E54242; + font-weight: 400; + font-family: 'Roboto', sans-serif; + font-size: 1rem; +} + +.form { + padding-top: 3.5rem; +} + +.form-title { + text-align: left; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 1.12rem; + color: #212121; +} + +// Footer +.footer { + background: #F3F3F3 0% 0% no-repeat padding-box; + opacity: 1; +} + +.footer-text { + text-align: left; + font-size: 0.75rem; + font-weight: 300; + font-family: 'Roboto', sans-serif; + color: #000000; + opacity: 1; + max-width: 460px; + margin: 0rem 2.5rem; +} + +.btn-social { + border: 1px solid black !important; + color: black; + font-size: 28px; + opacity: 0.8; + padding: 0.2rem 1.2rem; +} + +// .twitter, .youtube, .linkedin { +// padding: .375rem .575rem !important; +// } + +.newsletter { + text-align: left; + font-weight: 500; + font-size: 1.18rem; + color: #000000; + opacity: 1; +} + +.wifi-rotate { + color: black; + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.conditions-policy { + text-align: left; + text-decoration: underline; + font-weight: 400; + font-family: 'Roboto',sans-serif; + font-size: 1rem; + color: #000000; + opacity: 1; +} + +.licence { + text-align: left; + font-weight: 300; + font-family: 'Roboto',sans-serif; + font-size: 0.75rem; + line-height: 2.4; + color: #000000; + opacity: 1; +} + +// Header +header.head { + text-align: center; + color: #fff; + background-image: url("../../../assets/splash/assets/img/gradinet-background.svg"); + background-repeat: no-repeat; + background-size: cover; +} + +.head-subtitles { + margin-top: 1.93rem; +} + +.head-subtitle { + margin-top: 1.65rem; + width: 23.4rem; +} + +.head-start-dmp { + display: flex; + margin-top: 2.6rem; +} + +@media (min-width: 768px) { + header.head { + padding-top: 3.8rem; + /* padding-bottom: calc(100% - 3.8rem); */ + padding-bottom: 5.4rem; + } +} + +// Navbar +.bootstrap-overrides .navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding-top: 3.18rem; + padding-left: 0; + padding-right: 0; + background-color: white; + margin-bottom: 0px !important; +} + +.bootstrap-overrides .navbar .container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} + +.bootstrap-overrides .navbar-brand { + display: inline-block; + width: 135px; + height: 51px; + font-size: 1.25rem; + line-height: inherit; + white-space: nowrap; +} + +.bootstrap-overrides .navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + margin-left: auto; + list-style: none; +} + +.bootstrap-overrides .navbar-nav .nav-link { + padding-right: 0; + padding-left: 0; +} + +.bootstrap-overrides .navbar-nav .dropdown-menu { + position: static; + float: none; +} + +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; + padding-top: 0.5rem; +} + +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +.navbar-toggler:hover, .navbar-toggler:focus { + text-decoration: none; +} + +.navbar-toggler-icon { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; + content: ""; + background: no-repeat center center; + background-size: 100% 100%; +} + +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +.my-nav-link { + display: block; + padding: 0.5rem 1rem; + margin-left: 1rem; + cursor: pointer; + text-align: left; + font: Bold 14px/17px Roboto; + letter-spacing: 0px; + color: #000000; + opacity: 1; +} + +.my-nav-link:hover, .my-nav-link:focus { + text-decoration: none; +} + +.my-nav-link.disabled { + color: #6c757d; + pointer-events: none; + cursor: default; +} + +.active-nav-link { + border-bottom: 4px solid #23BCBA !important; + border-left: 0 !important; + border-right: 0 !important; + border-radius: 0px !important; +} + +.my-nav-item { + margin-bottom: -1px; + position: relative; + display: inline-block; +} + +.my-nav-link { + width: fit-content; + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +/* .my-nav-link:hover { + border-bottom: 4px solid #23BCBA !important; + border-left: 0 !important; + border-right: 0 !important; + border-radius: 0px !important; +} */ + +.my-nav-link.disabled { + color: #6c757d; + background-color: transparent; + border-color: transparent; +} + +.my-nav-link.active, .my-nav-item.show .my-nav-link { + color: #495057; + background-color: #fff; + border-color: #dee2e6 #dee2e6 #fff; +} + +.my-nav-link { + border-radius: 0.25rem; +} + +.my-nav-link.active, .show>.my-nav-link { + color: #000000; + background-color: #23BCBA; +} + +.nav-fill .my-nav-item { + flex: 1 1 auto; + text-align: center; +} + +.nav-justified .my-nav-item { + flex-basis: 0; + flex-grow: 1; + text-align: center; +} + +.navbar-expand { + flex-flow: row nowrap; + justify-content: flex-start; +} + +.navbar-expand>.container, .navbar-expand>.container-fluid, .navbar-expand>.container-sm, .navbar-expand>.container-md, .navbar-expand>.container-lg, .navbar-expand>.container-xl { + padding-right: 0; + padding-left: 0; +} + +.navbar-expand .navbar-nav { + flex-direction: row; +} + +.navbar-expand .navbar-nav .dropdown-menu { + position: absolute; +} + +.navbar-expand .navbar-nav .my-nav-link { + padding-right: 1rem; + padding-left: 1rem; +} + +.navbar-expand>.container, .navbar-expand>.container-fluid, .navbar-expand>.container-sm, .navbar-expand>.container-md, .navbar-expand>.container-lg, .navbar-expand>.container-xl { + flex-wrap: nowrap; +} + +.navbar-expand .navbar-collapse { + display: flex !important; + flex-basis: auto; +} + +.navbar-expand .navbar-toggler { + display: none; +} + +.dropdown-top { + width: 0px; + border-bottom: 10px solid #23BCBA; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + margin: 0 20%; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + z-index: 2; +} + +.dropdown-options { + background-color: #23BCBA; + border-radius: 5px; + min-width: 160px; + width: 214px; + overflow: auto; + padding: 20px 0px; +} + +.dropdown-content a { + text-align: left; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 0.87rem; + color: #FFFFFF; + text-transform: uppercase; + opacity: 1; + padding: 8px 28px; + text-decoration: none; + display: block; +} + +.dropdown-options a:hover { + background-color: rgba(255, 255, 255, 0.609) !important; +} + +.dropdown-options a:hover { + background-color: #ddd; +} + +.my-nav-item:hover .dropdown-content { + display: block; +} + +.show { + display: block; +} + +@media (max-width: 991.98px) { + .navbar-expand-lg>.container { + padding-right: 0; + padding-left: 0; + } + #nav.navbar-shrink { + padding-top: 1rem; + padding-bottom: 1rem; + background-color: #212529 !important; + } + #nav.navbar-shrink .navbar-brand { + font-size: 1.25em; + } + #nav.navbar-shrink .navbar-brand svg { + height: 1.5rem; + } + #nav.navbar-shrink .my-nav-link, #nav.navbar-shrink button { + color: white; + } + #nav.navbar-shrink .my-nav-link:hover { + color: #23BCBA; + } +} + +@media (min-width: 992px) { + .navbar-expand-lg { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-lg .navbar-nav { + flex-direction: row; + } + .navbar-expand-lg .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-lg .navbar-nav .my-nav-link { + padding-right: 1.2rem; + padding-left: 1.2rem; + } + .navbar-expand-lg>.container { + flex-wrap: nowrap; + } + .navbar-expand-lg .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-lg .navbar-toggler { + display: none; + } +} + +@media (min-width: 992px) { + #nav { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + border: none; + background-color: transparent; + transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; + } + #nav .navbar-brand { + font-size: 1.5em; + transition: font-size 0.3s ease-in-out; + } + #nav .navbar-brand img { + /* height: 2rem; */ + transition: height 0.3s ease-in-out; + } + #nav.navbar-shrink { + padding-top: 1rem; + padding-bottom: 1rem; + background-color: #212529 !important; + } + #nav.navbar-shrink .navbar-brand { + font-size: 1.25em; + } + #nav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img { + height: 1.5rem; + } + #nav.navbar-shrink .my-nav-link, #nav.navbar-shrink button { + color: white; + } + #nav.navbar-shrink .my-nav-link:hover { + color: #23BCBA; + } + #nav .navbar-nav .my-nav-item { + margin-right: 1rem; + } + #nav .navbar-nav .my-nav-item:last-child { + margin-right: 0; + } +} + +// Section + +section.start { + text-align: center; + color: #fff; + background: #23BCBA 0% 0% no-repeat padding-box; +} + +.template-img { + margin-right: 6.8rem; +} + +.options { + padding-top: 4rem; +} + +.option-row { + cursor: pointer; +} + +.option-number { + text-align: left; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 3.25rem; + line-height: 1; + letter-spacing: 0px; + color: #0E6978; + opacity: 1; + padding: 0rem 1rem; +} + +.option-text { + display: flex; + align-items: center; + text-align: left; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 1.56rem; + line-height: 1.68rem; + letter-spacing: 0px; + color: #FFFFFF; +} + +.selected { + opacity: 1; +} + +.not-selected { + opacity: 0.6; +} + +.features-layout { + display: flex; + justify-content: space-around; + padding-bottom: 4rem; +} + +.features-title { + display: flex; + justify-content: center; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + padding-bottom: 3rem; + color: #212121; + opacity: 1; +} + +.feature-subtitle { + text-align: center; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 1.87rem; + padding: 1.5rem 0rem; + color: #000000; + opacity: 0.8; +} + +.feature-img { + display: flex; + justify-content: center; +} + +.feature-desc { + text-align: center; + font-size: 1rem; + color: #292747; + opacity: 1; + max-width: 429px; +} + +section.benefits { + background: #F3F3F3 0% 0% no-repeat padding-box; + opacity: 1; +} + +.section-title-1 { + text-align: center; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + color: #212121; +} + +.section-title-2 { + text-align: center; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + color: #212121; +} + +.section-title-3 { + text-align: left; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 2.37rem; + color: #212121; +} + +.benefit-card { + width: 370px; + height: 378px; + background: #FFFFFF 0% 0% no-repeat padding-box; + box-shadow: 0px 6px 15px #0000001A; + border-radius: 36px; + opacity: 1; +} + +.benefit-card-title { + text-align: center; + font-weight: 300; + font-family: 'Roboto', sans-serif; + font-size: 1.68rem; + color: #292747; + opacity: 1; + padding: 2.81rem 0rem 1.5rem 0rem; +} + +.benefit-desc { + text-align: center; + color: #292747; + max-width: 226px; +} + +.benefit-desc-1 { + text-align: center; + color: #292747; + max-width: 250px; +} + +.benefit-card hr { + width: 286px; + border: 1px solid #DBDBDB; + opacity: 1; + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.benefit-card-subtitle { + text-align: left; + font-weight: 400; + font-family: 'Roboto', sans-serif; + font-size: 0.87rem; + color: #292747; + padding-left: 10px; +} + +.benefit-card-sub-color { + text-align: left; + font-weight: 400; + font-family: 'Roboto', sans-serif; + font-size: 0.87rem; + color: #008887; +} + +.benefit-ic { + margin-left: 40px !important; + margin-bottom: .8rem; +} + +.branding-logo { + display: flex; + align-items: flex-end; +} + +.co-branding-text { + text-align: left; + font-family: 'Roboto', sans-serif; + font-weight: 300; + font-size: 1rem; + color: #212121; + opacity: 0.81; + max-width: 357px; + padding-top: 1.5rem; +} + +.media-kit-logo-title, .moo-card-logo-title { + text-align: left; + font-weight: 300; + font-family: 'Roboto',sans-serif; + font-size: 1.25rem; + letter-spacing: 0px; + color: #212121; + opacity: 0.81; +} + +.co-branding p, .user-guide p, .media-kit p { + text-align: left; + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 0.87rem; + line-height: 1.6rem; + letter-spacing: 0px; + color: #212121; + opacity: 0.8; + padding: 2rem 0rem; +} + +section.media-kit-logo { + background: #F3F3F3; + opacity: 1; +} + +@media (min-width: 768px) { + section.start, section.features, section.co-branding, section.user-guide, section.media-kit .footer { + padding-top: 6rem; + padding-bottom: 5.4rem; + } + section.benefits { + padding-top: 3.8rem; + padding-bottom: 5.4rem; + } + section.contact { + padding-top: 2.8rem; + padding-bottom: 0.5rem; + } + section.how-it-works { + padding-top: 2.8rem; + padding-bottom: 3.8rem; + } + section.media-kit-logo, section.moo-cards { + padding-top: 4rem; + padding-bottom: 5rem; + } + .footer { + padding-top: 4.8rem; + padding-bottom: 2rem; + } +} + + diff --git a/dmp-frontend/src/app/ui/guest/guest.component.ts b/dmp-frontend/src/app/ui/guest/guest.component.ts new file mode 100644 index 000000000..08dc66cb3 --- /dev/null +++ b/dmp-frontend/src/app/ui/guest/guest.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialog } from '@angular/material'; +import { SignInDialogComponent } from '@common/modules/sign-in-dialog/sign-in-dialog.component'; + +@Component({ + selector: 'app-guest-component', + templateUrl: './guest.component.html', + styleUrls: ['./guest.component.scss'] +}) +export class GuestComponent implements OnInit { + + constructor(public dialog: MatDialog) { + + } + + ngOnInit() { + this.navbarCollapse(); + window.addEventListener('scroll', this.scroll, true); + } + + ngOnDestroy() { + window.removeEventListener('scroll', this.scroll, true); + } + + public toggleClass(ids, option) { + ids.forEach(id => { + var element = document.getElementById(id); + var className = element.getAttribute("class").replace(/ .*/, ''); + console.log(className); + if (id === option) { + element.classList.replace(className, "selected"); + } else { + element.classList.replace(className, "not-selected"); + } + }) + } + + public navbarCollapse() { + var element = document.getElementById('nav'); + if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { + element.classList.add("navbar-shrink"); + element.classList.add("fixed-top"); + } else { + element.classList.remove("navbar-shrink"); + element.classList.remove("fixed-top"); + } + }; + + scroll = (event): void => { + this.navbarCollapse(); + }; + + public openSignInDialog(): void { + const dialogRef = this.dialog.open(SignInDialogComponent); + + dialogRef.afterClosed().subscribe(result => { + console.log(`Dialog result: ${result}`); + }); + } + +} + diff --git a/dmp-frontend/src/app/ui/guest/guest.module.ts b/dmp-frontend/src/app/ui/guest/guest.module.ts new file mode 100644 index 000000000..33d89c021 --- /dev/null +++ b/dmp-frontend/src/app/ui/guest/guest.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonUiModule } from '@common/ui/common-ui.module'; +import { GuestComponent } from './guest.component'; +import { GuestRoutingModule } from './guest.routing'; +import { SignInDialogModule } from '@common/modules/sign-in-dialog/sign-in-dialog.module'; + +@NgModule({ + imports: [ + CommonUiModule, + GuestRoutingModule, + SignInDialogModule + ], + declarations: [ + GuestComponent + ] +}) +export class GuestModule { } diff --git a/dmp-frontend/src/app/ui/guest/guest.routing.ts b/dmp-frontend/src/app/ui/guest/guest.routing.ts new file mode 100644 index 000000000..835cb3d1c --- /dev/null +++ b/dmp-frontend/src/app/ui/guest/guest.routing.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { GuestComponent } from './guest.component'; + +const routes: Routes = [ + { + path: '', + component: GuestComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class GuestRoutingModule { } diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.css b/dmp-frontend/src/app/ui/misc/search/search.component.css index ad462e08a..d16d59fd3 100644 --- a/dmp-frontend/src/app/ui/misc/search/search.component.css +++ b/dmp-frontend/src/app/ui/misc/search/search.component.css @@ -1,5 +1,6 @@ .input-search { - width: 300px; + width: 150px; + /* width: 300px; */ border: 1px solid rgb(218, 218, 218); border-radius: 6px; padding-left: 10px; diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html index 90b73b423..ddf49f8e3 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.html +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html @@ -1,95 +1,52 @@ - -
- -
+ + + + + diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss index fb7101ca8..40d70c923 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss @@ -18,7 +18,69 @@ $mat-card-header-size: 40px !default; .fixed-navbar { position: fixed; z-index: 1000; - height: 70px; + height: 80px; + + display: flex; + background: #ffffff 0% 0% no-repeat padding-box; + box-shadow: 0px 0px 6px #00000029; + opacity: 1; + top: 0; + left: 0; + right: 0; +} + +.logo { + width: 98px; + height: 37px; + margin-top: 15px; + margin-left: 5px; +} + +.faq-title { + text-align: left; + font: Bold 15px/18px "Roboto"; + letter-spacing: 0px; + color: #000000; + opacity: 1; + cursor: pointer; +} + +.faq-title:hover { + color: #23bcba; +} + +.lang { + opacity: 0.8; +} + +.hamburger { + display: inline-block; + cursor: pointer; + padding: 0.4rem 1.5rem 0rem; +} + +.icon-bar1, +.icon-bar2, +.icon-bar3 { + width: 18px; + height: 2px; + background-color: #333; + margin: 3px 0; + transition: 0.4s; +} + +.change .icon-bar1 { + -webkit-transform: rotate(-45deg) translate(-3px, 3px); + transform: rotate(-45deg) translate(-3px, 3px); +} + +.change .icon-bar2 { + opacity: 0; +} + +.change .icon-bar3 { + -webkit-transform: rotate(45deg) translate(-4px, -4px); + transform: rotate(45deg) translate(-4px, -4px); } ::ng-deep.lang-parent { diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts index 47ffa62d6..ebaf49689 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts @@ -1,5 +1,5 @@ import { Location } from '@angular/common'; -import { Component, ElementRef, OnInit } from '@angular/core'; +import { Component, ElementRef, EventEmitter, OnInit, Output } from '@angular/core'; import { MatDialog } from '@angular/material'; import { Router } from '@angular/router'; import { AppRole } from '@app/core/common/enum/app-role'; @@ -11,6 +11,7 @@ import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog. import { DATASETS_ROUTES, DMP_ROUTES, GENERAL_ROUTES } from '../sidebar/sidebar.component'; import { LanguageService } from '@app/core/services/language/language.service'; import { UserService } from '@app/core/services/user/user.service'; +import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component'; const availableLanguages: any[] = require('../../../assets/resources/language.json'); @@ -29,7 +30,8 @@ export class NavbarComponent extends BaseComponent implements OnInit { languages = availableLanguages; language = this.languages[0]; currentRoute: string; - + selectedLanguage = 'en'; + @Output() sidebarToggled: EventEmitter = new EventEmitter(); constructor(location: Location, private element: ElementRef, @@ -50,17 +52,17 @@ export class NavbarComponent extends BaseComponent implements OnInit { this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle)); // this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle)); this.listTitles.push(DATASETS_ROUTES.filter(listTitle => listTitle)); - const navbar: HTMLElement = this.element.nativeElement; - this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; - this.router.events.subscribe((event) => { - this.sidebarClose(); - var $layer: any = document.getElementsByClassName('close-layer')[0]; - this.currentRoute = this.router.url; - if ($layer) { - $layer.remove(); - this.mobile_menu_visible = 0; - } - }); + // const navbar: HTMLElement = this.element.nativeElement; + // this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; + // this.router.events.subscribe((event) => { + // this.sidebarClose(); + // var $layer: any = document.getElementsByClassName('close-layer')[0]; + // this.currentRoute = this.router.url; + // if ($layer) { + // $layer.remove(); + // this.mobile_menu_visible = 0; + // } + // }); this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => { setTimeout(() => { this.progressIndication = x; }); @@ -210,4 +212,30 @@ export class NavbarComponent extends BaseComponent implements OnInit { position: { top: '64px', right: '1em' } }); } + + openFaqDialog() { + if (this.dialog.openDialogs.length > 0) { + this.dialog.closeAll(); + } + else { + const dialogRef = this.dialog.open(FaqDialogComponent, { + disableClose: true, + data: { + isDialog: true + } + }); + } + } + + getLanguage(selectedLanguage: string) { + this.selectedLanguage = selectedLanguage; + } + + toggleNavbar(event) { + document.getElementById('hamburger').classList.toggle("change"); + } + + sidebarToggleOutput(event) { + this.sidebarToggled.emit(event); + } } diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css index 62dc5de9d..776e1cf71 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css @@ -1,9 +1,8 @@ .sidebar-footer { padding: white; - color: rgb(117, 117, 117); - background-color: #3333333d; - /* background-color: #ffffff; */ - /* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */ + font-weight: 700; + font-size: 0.75rem; + } .sidebar-footer .option { @@ -11,13 +10,12 @@ padding-top: 2px; padding-bottom: 2px; border-radius: 0px; - color: white; cursor: pointer; display: inline-flex; font-size: small; } -.sidebar-footer :hover { +.sidebar-footer .option:hover { color: #00b29f; } diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html index 5c35b14c0..b6a3793fb 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html @@ -1,41 +1,33 @@