- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component + + +

Travopti - Prototype

+ + + +
+ + home + Home + + subject + Impressum
- -
- - - Angular Material -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- - - Build for Production + +
+
+
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
- - - - - - - - + - \ No newline at end of file diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index e69de29..4b38409 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -0,0 +1,56 @@ +:host { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + +} + +.toolbar { + flex: 0 0 auto; + box-sizing: border-box; + + .menu-btn { + margin-right: 1rem; + } +} + +.drawer { + padding: 1rem; + + .nav { + display: flex; + flex-direction: column; + + >a { + margin-bottom: 0.5rem; + text-align: start; + + >span { + padding-left: 2rem; + } + } + } +} + +.content { + flex: 1 1 auto; + box-sizing: border-box; +} + +.routed-component-wrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + + .routed-component { + flex: 0 1 auto; + box-sizing: border-box; + padding: 1rem; + width: 100%; + max-width: 700px; + } +} + + diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 0cadd23..1ab64de 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -4,15 +4,35 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {MatToolbarModule} from '@angular/material/toolbar'; +import {MatIconModule} from '@angular/material/icon'; +import {MatButtonModule} from '@angular/material/button'; +import {MatSidenavModule} from '@angular/material/sidenav'; +import { HomeComponent } from './containers/home/home.component'; +import {MatCardModule} from '@angular/material/card'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; +import {MatSelectModule} from '@angular/material/select'; +import { NotfoundComponent } from './containers/notfound/notfound.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + HomeComponent, + NotfoundComponent ], imports: [ BrowserModule, AppRoutingModule, - BrowserAnimationsModule + BrowserAnimationsModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatSidenavModule, + MatCardModule, + MatFormFieldModule, + MatInputModule, + MatSelectModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/containers/home/home.component.html b/frontend/src/app/containers/home/home.component.html new file mode 100644 index 0000000..4a9c6b7 --- /dev/null +++ b/frontend/src/app/containers/home/home.component.html @@ -0,0 +1,28 @@ + + + Search + + + + + Start + + + + End + + + + Price + + Budget + Mid-Range + Luxury + + + + diff --git a/frontend/src/app/containers/home/home.component.scss b/frontend/src/app/containers/home/home.component.scss new file mode 100644 index 0000000..825a777 --- /dev/null +++ b/frontend/src/app/containers/home/home.component.scss @@ -0,0 +1,9 @@ +:host { + margin: 0; + box-sizing: border-box; +} + +.search-container { + display: flex; + flex-direction: column; +} diff --git a/frontend/src/app/containers/home/home.component.spec.ts b/frontend/src/app/containers/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/frontend/src/app/containers/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/containers/home/home.component.ts b/frontend/src/app/containers/home/home.component.ts new file mode 100644 index 0000000..f56c8c1 --- /dev/null +++ b/frontend/src/app/containers/home/home.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/frontend/src/app/containers/notfound/notfound.component.html b/frontend/src/app/containers/notfound/notfound.component.html new file mode 100644 index 0000000..d8bc964 --- /dev/null +++ b/frontend/src/app/containers/notfound/notfound.component.html @@ -0,0 +1 @@ +

404 - Not Found :(

diff --git a/frontend/src/app/containers/notfound/notfound.component.scss b/frontend/src/app/containers/notfound/notfound.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/containers/notfound/notfound.component.spec.ts b/frontend/src/app/containers/notfound/notfound.component.spec.ts new file mode 100644 index 0000000..052a1f6 --- /dev/null +++ b/frontend/src/app/containers/notfound/notfound.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotfoundComponent } from './notfound.component'; + +describe('NotfoundComponent', () => { + let component: NotfoundComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotfoundComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotfoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/containers/notfound/notfound.component.ts b/frontend/src/app/containers/notfound/notfound.component.ts new file mode 100644 index 0000000..0fc16d1 --- /dev/null +++ b/frontend/src/app/containers/notfound/notfound.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-notfound', + templateUrl: './notfound.component.html', + styleUrls: ['./notfound.component.scss'] +}) +export class NotfoundComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 7e7239a..17408fa 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,4 +1,8 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; } +html, body { + height: 100%; + box-sizing: border-box; +} + body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }