MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

Add get-started assets and scrollspy on all pages

This commit is contained in:
Alex Martzios 2022-03-03 08:33:56 +02:00
parent 4554febac9
commit 51e40a6ab0
11 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/get-started/get-started.component.css Normal file
View File

@ -0,0 +1,6 @@
.floating-number {
transform: translateY(-50%);
}
.floating-text {
transform: translate(50%, 50%);
}

28
src/app/get-started/get-started.component.html
View File

@ -1,14 +1,14 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div class="">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large uk-section uk-padding-remove-top" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-padding-small uk-margin-small-top uk-text-center">
<h1>Lorem ipsum dolor <br> sit amet, consetetur<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large">
<h1 uk-scrollspy-class>Lorem ipsum dolor <br> sit amet, consetetur<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large" uk-scrollspy-class>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br> sed diam nonumy eirmod tempor invidunt ut labore et <br> dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>
@ -17,24 +17,28 @@
<div class="mixed-background">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section">
<div class="uk-padding-small uk-text-center uk-width-1-2 uk-margin-auto uk-grid uk-child-width-1-2" uk-grid>
<div class="">
provide
<div class="uk-padding-small uk-margin-auto uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-flex uk-flex-column floating-text">
<icon name="description" ratio="3" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon>
<span class="uk-text-lead uk-text-bold uk-text-uppercase">Provide some <br> information</span>
</div>
<div class="">
contact
<div class="uk-flex uk-flex-column floating-text">
<icon name="email" ratio="3" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon>
<span class="uk-text-lead uk-text-bold uk-text-uppercase">We contact <br> you</span>
</div>
</div>
</div>
</div>
<div class="normal-background">
<div class="uk-container uk-container-large uk-section uk-padding-remove-vertical">
<div class="uk-padding-small uk-padding-remove-vertical uk-text-center uk-width-1-2 uk-margin-auto uk-grid uk-child-width-1-2 uk-position-relative" uk-grid>
<div class="uk-padding-small uk-padding-remove-vertical uk-margin-auto uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2 uk-position-relative" uk-grid>
<div class="floating-number">
1
<img src="assets/monitor-assets/get-started/1.svg" alt="">
</div>
<div class="floating-number">
2
<img src="assets/monitor-assets/get-started/2.svg" alt="">
</div>
</div>
<!-- <div class="uk-padding-small uk-text-center">

1
src/app/get-started/get-started.component.ts
View File

@ -19,6 +19,7 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
@Component({
selector: 'get-started',
templateUrl: './get-started.component.html',
styleUrls: ['get-started.component.css']
})
export class GetStartedComponent implements OnInit {
public url: string = null;

4
src/app/get-started/get-started.module.ts
View File

@ -15,13 +15,15 @@ import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOServi
import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module";
import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
@NgModule({
imports: [
GetStartedRoutingModule, CommonModule, RouterModule,
AlertModalModule, RecaptchaModule, HelperModule,
Schema2jsonldModule, SEOServiceModule, ContactUsModule, BreadcrumbsModule, LoadingModule
Schema2jsonldModule, SEOServiceModule, ContactUsModule, BreadcrumbsModule, LoadingModule,
IconsModule
],
declarations: [
GetStartedComponent

2
src/app/home/home.component.html
View File

@ -27,7 +27,7 @@
</div>
<div left class="uk-width-1-1 uk-width-1-2@m uk-background-primary monitor-dark-logo-background uk-position-z-index">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
<img id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
<img class="uk-animation-fade" id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
</div>
<div scroll class="uk-width-expand">

2
src/app/learn-how/learn-how.component.html
View File

@ -100,7 +100,7 @@
</div>
</div>
<div class="uk-section uk-margin-large-top uk-container uk-container-large">
<div class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</div>
<span class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</span>
<h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<div class="uk-padding-large">
<how></how>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 894ce0add6f88ac2ea10998f76befef280c25042
Subproject commit 4698a5fafd51fa7d8a0969b0d4e2691cce53ccf4

10
src/assets/monitor-assets/get-started/1.svg Normal file
View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="152.064" height="298.117" viewBox="0 0 152.064 298.117">
<g id="Group_13811" data-name="Group 13811" transform="translate(-311 -600)">
<g id="Group_13810" data-name="Group 13810" transform="translate(311 600)" style="isolation: isolate">
<path id="Path_104582" data-name="Path 104582" d="M103.163-138h-28.3c-15.812,0-30.793,4.161-46.189,12.9L-37.9-85.57v54.095L45.739-77.664V149.117h57.424V-138Z" transform="translate(37.9 138)" fill="#3086ed"/>
</g>
<g id="Group_13399" data-name="Group 13399" transform="translate(248.031 -0.441)" style="mix-blend-mode: multiply;isolation: isolate">
<path id="Path_104582-2" data-name="Path 104582" d="M103.164-138h-28.3c-15.812,0-30.793,4.161-46.189,12.9L-37.9-85.57v54.095L45.739-77.664V149.117h57.424V-138Z" transform="translate(110.869 748.441)" fill="none" stroke="#3086ed" stroke-width="2"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 930 B

6
src/assets/monitor-assets/get-started/2.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="219.715" height="298.559" viewBox="0 0 219.715 298.559">
<g id="Group_13812" data-name="Group 13812" transform="translate(-767.284 -600)">
<path id="Path_104612" data-name="Path 104612" d="M35.232,101.726,87.361,50.819C138.675.726,156.187-24.524,156.187-59.956,156.187-108.012,123.607-141,61.7-141-1.422-141-38.889-108.012-44.591-47.738L-45-43.665H10.8l.407-4.073c3.665-33.8,17.1-51.315,45.206-51.315,26.065,0,40.319,17.512,40.319,42.355,0,26.879-15.069,46.835-52.944,83.9L-50.7,119.645v26.472H154.151V101.726Z" transform="translate(817.984 741)" fill="#3086ed"/>
<path id="Path_104583" data-name="Path 104583" d="M35.232,101.726,87.361,50.819C138.675.726,156.187-24.524,156.187-59.956,156.187-108.012,123.607-141,61.7-141-1.422-141-38.89-108.012-44.591-47.738L-45-43.665H10.8l.407-4.073c3.665-33.8,17.1-51.315,45.206-51.315,26.065,0,40.319,17.512,40.319,42.355,0,26.879-15.069,46.835-52.944,83.9L-50.7,119.645v26.472H154.151V101.726Z" transform="translate(829.813 751.441)" fill="none" stroke="#3086ed" stroke-width="2" style="mix-blend-mode: multiply;isolation: isolate"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
src/assets/monitor-custom.css
View File

@ -93,8 +93,4 @@ main {
/*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/
/* border-left: 1px solid #DEDEDE;*/
/*}*/
.floating-number {
font-size: 200px;
transform: translateY(-50%);
}
/*}*/

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 559ea1a77d57e2e94d8b72a1089704dbfe5889b2
Subproject commit 60be89ef464a3eb6a485b1f68bd9f3dcde0393a0