From b6bb649532c4a03ac0418f59a40ff50ecab5b60d Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 26 Apr 2020 20:05:08 +0200 Subject: [PATCH 1/3] Getting started done --- package-lock.json | 27 +- src/app/app-routing.module.ts | 8 + src/app/app.module.ts | 7 +- .../click-outside.directive.spec.ts | 12 + src/app/directives/click-outside.directive.ts | 31 ++ .../getting-started.component.css | 348 ++++++++++++++++++ .../getting-started.component.html | 51 ++- .../getting-started.component.ts | 57 ++- src/app/header/header.component.html | 1 + src/app/maps/maps.component.html | 5 +- src/assets/yana-tree-noHands.svg | 21 ++ src/styles.css | 3 +- 12 files changed, 555 insertions(+), 16 deletions(-) create mode 100644 src/app/directives/click-outside.directive.spec.ts create mode 100644 src/app/directives/click-outside.directive.ts create mode 100644 src/assets/yana-tree-noHands.svg diff --git a/package-lock.json b/package-lock.json index d32346a..16267e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13800,7 +13800,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -13843,7 +13844,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -13854,7 +13856,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -13971,7 +13974,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -13983,6 +13987,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -14012,6 +14017,7 @@ "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -14030,6 +14036,7 @@ "version": "0.5.3", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -14133,6 +14140,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -14210,7 +14218,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -14246,6 +14255,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -14265,6 +14275,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -14308,12 +14319,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e2c56a4..fcf1cbe 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -16,6 +16,10 @@ const routes: Routes = [ redirectTo: '/preventive-measures', pathMatch: 'full' }, + { + path: 'getting-started', + component: GettingStartedComponent + }, { path: 'maps', component: MapsComponent @@ -39,6 +43,10 @@ const routes: Routes = [ { path: 'signup', component: SignupComponent + }, + { + path: 'maps/:canton', + component: MapsComponent } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2204cd9..b32ad19 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -57,9 +57,10 @@ export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); } -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core'; import { GeocodeService } from './services/geocode.service'; +import { ClickOutsideDirective } from './directives/click-outside.directive'; @NgModule({ @@ -74,7 +75,8 @@ import { GeocodeService } from './services/geocode.service'; ArticleComponent, NavButtonComponent, LoginComponent, - SignupComponent + SignupComponent, + ClickOutsideDirective ], imports: [ BrowserModule, @@ -82,6 +84,7 @@ import { GeocodeService } from './services/geocode.service'; CommonModule, HttpClientModule, FormsModule, + ReactiveFormsModule, AgmCoreModule.forRoot({ apiKey: 'AIzaSyD9crBwGrLUT3_iH_wi1ZqKNhGhwjzHp5I' }), diff --git a/src/app/directives/click-outside.directive.spec.ts b/src/app/directives/click-outside.directive.spec.ts new file mode 100644 index 0000000..a78541f --- /dev/null +++ b/src/app/directives/click-outside.directive.spec.ts @@ -0,0 +1,12 @@ +import { ClickOutsideDirective } from './click-outside.directive'; + +describe('ClickOutsideDirective', () => { + it('should create an instance', () => { + let elRefMock = { + nativeElement: document.createElement('div') //Mock + }; + console.log("spec"); + const directive = new ClickOutsideDirective(elRefMock); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/directives/click-outside.directive.ts b/src/app/directives/click-outside.directive.ts new file mode 100644 index 0000000..4946e19 --- /dev/null +++ b/src/app/directives/click-outside.directive.ts @@ -0,0 +1,31 @@ +import { Directive, Input, Output, EventEmitter, ElementRef, HostListener, OnInit, OnDestroy } from '@angular/core'; +import { Subject, Subscription } from 'rxjs'; + +@Directive({ + selector: '[appClickOutside]', +}) +export class ClickOutsideDirective implements OnInit, OnDestroy { + @Output() clickOutside: EventEmitter = new EventEmitter(false); + + private clicksOutside = new Subject(); + private subscription: Subscription; + + constructor(private elementRef: ElementRef) { } + + ngOnInit() { + this.subscription = this.clicksOutside + .subscribe((e: boolean) => this.clickOutside.emit(e)); + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } + + @HostListener('document:click', ['$event.target']) + public onListenerTriggered(target: ElementRef) { + const clickedInside = this.elementRef.nativeElement.contains(target); + if(!clickedInside){ + this.clicksOutside.next(!clickedInside); + } + } +} diff --git a/src/app/getting-started/getting-started.component.css b/src/app/getting-started/getting-started.component.css index e69de29..029e5e4 100644 --- a/src/app/getting-started/getting-started.component.css +++ b/src/app/getting-started/getting-started.component.css @@ -0,0 +1,348 @@ +#background{ + position: relative; + width: 100%; + height: 100vh; + background: #8C93D8; + padding-right: 7.5%; + padding-left: 7.5%; + overflow: auto; + overflow-x: hidden; +} + +.overflow{ + position: absolute; + right: 0%; + top: 0; + width: 40%; + height: 110vh; + overflow: hidden; + pointer-events: none; +} + +.overflow img{ + position: absolute; + width: 140%; + height: 140%; + margin-right: -100%; + margin-top: -60%; +} + +.flexbox{ + position: relative; + display: flex; +} + +#title{ + position: relative; + width: 55%; + float: left; + display: flex; + flex-direction: column; + align-items: center; +} + +#title > h1{ + position: relative; + + font-family: 'Nova Round', cursive; + font-style: normal; + font-weight: normal; + margin: 0; + font-size: 122px; + align-items: center; + text-align: center; + font-feature-settings: 'kern' off; + + color: #FF9848; + + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +#title > h2{ + position: relative; + + font-family: 'Nova Round', cursive; + font-style: normal; + font-weight: normal; + font-size: 52px; + margin: 1% 0; + align-items: center; + text-align: center; + + color: #FF9848; + + text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); +} + +#title > .line1{ + width: 100%; + border: 3px solid #999FDE; +} + +#title > p{ + position: relative; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + margin: 3% 0; + line-height: 29px; + align-items: center; + text-align: center; + + color: #2E3192; +} + +.emergency{ + position: relative; + + padding: 2%; + margin: 5% 0; + + border: 4px solid #FF9848; + box-sizing: border-box; + border-radius: 28.9474px; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; + align-items: center; + text-align: center; + + color: #FFFAE7; +} + +span{ + color: #FF9848; +} + +#inputbox{ + position: relative; + width: 85%; + + justify-self: center; + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 3px 10px rgba(255, 152, 72, 0.28); + border-radius: 31px; +} + +#inputbox > h2{ + position: relative; + width: 90%; + padding-top: 1%; + + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 36px; + line-height: 44px; + justify-self: center; + + color: #2E3192; +} + +#inputbox > .line2{ + position: relative; + height: 0px; + width: 95%; + justify-self: center; + text-align: center; + border: 1px solid #BEBEBE; +} + +#optionbox{ + width: 80%; + height: 100%; + display: flex; + flex-direction: column; +} + +.selbox{ + border: 2px solid #FC5C14; + box-sizing: border-box; + border-radius: 30px; + justify-items: center; + justify-content: center; + display: flex; + align-items: center; + margin: 2% 0; + transition-duration: 0.4s; +} + +.selbox:hover{ + background: #FF9848; + color: #FFFFFF; + cursor: pointer; + +} + +.selbox:hover > p{ + color: #FFFFFF; +} + +.langboxes{ + position: relative; + display: flex; + justify-content: space-evenly; +} + +.langboxes > .selbox{ + position: relative; + width: 6vw; + height: 4vw; +} + +.selbox > p{ + position: relative; + margin-bottom: 0; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + + color: #FC5C14; +} + +.cantonbox{ + height: 4vw; +} + +.age{ + position: relative; + display: flex; + align-items: flex-start; + justify-content: space-evenly; +} + +.age > .selbox{ + position: relative; + width: 30%; + height: 4vw; +} + +.submitbox{ + position: relative; + display: flex; + justify-content: space-evenly; +} + +.submit{ + border: 2px solid #8C93D8; +} + +.submit > p{ + color: #2E3192;} + +.submitbox > .selbox{ + position: relative; + width: 13vw; + height: 4vw; +} + +.submitbox .selbox:hover{ + background: #2E3192; + color: #FFFFFF; +} + +.submitbox .selbox:hover > p{ + color: #FFFFFF; +} + +.selected{ + background: #FF9848; +} + +.selected > p{ + color: #FFFFFF; +} + + + + +/*auto-suggest form*/ + + +.filter-wrapper, +.keyword-wrapper { + display: flex; + justify-content: center; +} +.filter-wrapper { + min-height: 100%; + flex-flow: column wrap; + position: relative; +} +.keyword-wrapper { + width: 100%; + position: relative; +} +#keyword { + border: 1px solid #ccc; + box-sizing: border-box; + border-radius: 30px; + padding: 10px; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + width: 50%; + outline: none; + transition: border 0.5s ease-in-out +} +#keyword:focus { + border-color : rgba(81, 203, 238, 1);; +} + +.filter-select { + width: 50%; + margin-top: 1%; + font-family: 'Montserrat', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 24px; + text-align: center; + font-size: 1.1em; + color: rgb(105, 105, 105); + border: 1px solid #ccc; + box-sizing: border-box; + border-radius: 50; + + position: absolute; + z-index: 99; + left: 25%; + top: calc(50% + 25px); + max-height: 500%; + overflow-y: auto; + background: #fff; + padding-inline-start: 0px; + } + + + .filter-select-list:hover .tags { + color: #fff; + } + .filter-select-list { + cursor: pointer; + padding: 10px 10px; + } + .artist-name { + display: inline-block; + position: absolute; + } + .filter-select-list:hover { + background: #C0C0C0; + color: #fff + } + .list-highlight, + .list-highlight:hover { + background: rgb(55, 55, 55); + color: #fff + } \ No newline at end of file diff --git a/src/app/getting-started/getting-started.component.html b/src/app/getting-started/getting-started.component.html index 842470a..8ec9ab9 100644 --- a/src/app/getting-started/getting-started.component.html +++ b/src/app/getting-started/getting-started.component.html @@ -1 +1,50 @@ -

getting-started works!

+
+
+
+

YANA.help

+

You Are Not Alone

+
+

Welcome to the safe place ! Here you can find help and useful information. Come and join the community !

+
Are you in an emergency ? Call 147 or find help near you
+
+
+

Find help

+
+
+
+
+

{{ language }}

+
+
+
+
+
+ +
+
    +
  • +

    {{result}}

    +
+
+
+
+
+

I am a child

+
+
+

I am an adult

+
+
+
+
+

Get Started

+
+
+
+
+
+
+ YANA tree +
+
+ diff --git a/src/app/getting-started/getting-started.component.ts b/src/app/getting-started/getting-started.component.ts index 91d9ed4..617ecfc 100644 --- a/src/app/getting-started/getting-started.component.ts +++ b/src/app/getting-started/getting-started.component.ts @@ -1,4 +1,8 @@ import { Component, OnInit } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { LangService } from '../services/lang.service'; +import { FormControl } from '@angular/forms'; +import * as sampleData from '../../assets/maps/cantons.json'; @Component({ selector: 'app-getting-started', @@ -7,9 +11,60 @@ import { Component, OnInit } from '@angular/core'; }) export class GettingStartedComponent implements OnInit { - constructor() { } + isClicked: boolean = false; + translate: TranslateService; + langSelector: any = null; + ageSelector: any = null; + cantonSelector: String = null; + queryField: FormControl = new FormControl(); + show: boolean = false; + results: any[] = []; + cantons: String[] = (sampleData as any).default; + + constructor(public lang: LangService) { + this.translate = lang.getTranslateService(); + } + + onClickLang(button): void { + if (this.langSelector === button) { + this.langSelector = null; + } else { + this.langSelector = button; + } + } + + onClickAge(button): void { + if (this.ageSelector === button) { + this.ageSelector = null; + } else { + this.ageSelector = button; + } + } + + suggest(data : string){ + var newArr = this.cantons.filter(canton => canton.toLowerCase().includes(data.toLowerCase())); + console.log(newArr); + return newArr; + } + + send(){ + console.log(this.queryField.value + " waw"); + if(this.queryField.value == null){ + this.results = this.cantons; + this.show = true; + console.log("sent"); + } + } + + change(result){ + this.cantonSelector = result; + this.queryField.setValue(result); + this.show = false; + } ngOnInit(): void { + this.queryField.valueChanges + .subscribe(query => this.results = this.suggest(query)); } } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 470ee00..8fcbb7c 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -11,6 +11,7 @@ - - - + \ No newline at end of file diff --git a/src/assets/yana-tree-noHands.svg b/src/assets/yana-tree-noHands.svg new file mode 100644 index 0000000..d755af5 --- /dev/null +++ b/src/assets/yana-tree-noHands.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index e50a47e..71ae9b1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,2 @@ -/* You can add global styles to this file, and also import other style files */ \ No newline at end of file +/* You can add global styles to this file, and also import other style files */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Nova+Round&display=swap'); \ No newline at end of file -- GitLab From 1c7408492895c6da0d8498d7e5e52ed1a5c6a3dc Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 26 Apr 2020 22:52:02 +0200 Subject: [PATCH 2/3] first mezzo fix for login and signup --- .../getting-started.component.css | 9 ++- src/app/login/login.component.css | 24 ++++--- src/app/login/login.component.html | 63 +++++++++---------- src/app/signup/signup.component.css | 19 +++--- 4 files changed, 54 insertions(+), 61 deletions(-) diff --git a/src/app/getting-started/getting-started.component.css b/src/app/getting-started/getting-started.component.css index 029e5e4..f3d0620 100644 --- a/src/app/getting-started/getting-started.component.css +++ b/src/app/getting-started/getting-started.component.css @@ -1,12 +1,11 @@ #background{ position: relative; - width: 100%; + width: calc(100%-20rem); height: 100vh; background: #8C93D8; - padding-right: 7.5%; - padding-left: 7.5%; - overflow: auto; - overflow-x: hidden; + padding: 0 6%; + display: inline-flex; + overflow: hidden; } .overflow{ diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css index ed28a07..eaf8892 100644 --- a/src/app/login/login.component.css +++ b/src/app/login/login.component.css @@ -1,3 +1,12 @@ +.back{ + height: 100vh; + width: calc(100vw - 20rem); + background: #FFFAE7; + background-image: url(../../assets/images/yana-tree-noHands.svg); + background-repeat: space; + background-position: bottom; +} + form { text-align: center; min-width: 300px; @@ -25,13 +34,11 @@ h2{ margin-left: 34%; margin-top: 10%; - color: #2E3192; font-style: normal; } - .form-group{ padding-top: 2%; margin-left: 5%; @@ -137,22 +144,13 @@ button{ border-radius: 28.9474px; box-sizing: border-box; margin-left: 30%; - margin-top: 2%; + padding-top: 2%; } -.back{ - - height: 850px; - background: #FFFAE7; - background-image: url(../../assets/images/yana-tree-noHands.svg); - background-repeat: space; - background-image-size: 100%; - background-position: bottom; -} p{ - ont-family: Montserrat; + font-family: Montserrat; font-weight: normal; font-size: 22px; line-height: 27px; diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 6f2b546..cc373c4 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,38 +1,35 @@
-
-
-
Are you in an emergency ? Call 147 or find help near you
-
-

Login

-
-
- - -
-
- - -
- Forgot password? - -

Don't have an account yet?

- Sign Up -
-

{{ errorMessage }}

-
-
- -
- +
+
Are you in an emergency ? Call 147 or find help near you
+
+

Login

+
+
+ + +
+
+ + +
+ Forgot password? + +

Don't have an account yet?

+ Sign Up +
+

{{ errorMessage }}

+
+ + diff --git a/src/app/signup/signup.component.css b/src/app/signup/signup.component.css index 63461cb..3114d08 100644 --- a/src/app/signup/signup.component.css +++ b/src/app/signup/signup.component.css @@ -1,3 +1,11 @@ +.back{ + width: calc(100vw - 20rem); + height: 100vh; + background: #FFFAE7; + background-image: url(../../assets/images/yana-tree-noHands.svg); + background-repeat: space; + background-position: bottom; +} form { text-align: center; @@ -138,19 +146,10 @@ button{ border-radius: 28.9474px; box-sizing: border-box; margin-left: 30%; - margin-top: 2%; + padding-top: 2%; } -.back{ - - height: 850px; - background: #FFFAE7; - background-image: url(../../assets/images/yana-tree-noHands.svg); - background-repeat: space; - background-image-size: 100%; - background-position: bottom; -} -- GitLab From 2f990fcef4df35d39f708d29ad78bbf0c0f5c5fb Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 26 Apr 2020 22:56:23 +0200 Subject: [PATCH 3/3] suggest box fix --- src/app/getting-started/getting-started.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/getting-started/getting-started.component.css b/src/app/getting-started/getting-started.component.css index f3d0620..f5aae28 100644 --- a/src/app/getting-started/getting-started.component.css +++ b/src/app/getting-started/getting-started.component.css @@ -318,7 +318,7 @@ span{ z-index: 99; left: 25%; top: calc(50% + 25px); - max-height: 500%; + max-height: 400%; overflow-y: auto; background: #fff; padding-inline-start: 0px; -- GitLab