From 4c01dd54cc3c68ddfd700d586fad000df075506f Mon Sep 17 00:00:00 2001 From: Phil Date: Sat, 19 May 2018 22:58:53 +0200 Subject: -wip service/routing design --- src/app/api.service.ts | 6 +-- src/app/app-routing.module.ts | 2 + src/app/app.component.html | 59 +++++++++++++++++---------- src/app/app.component.ts | 6 ++- src/app/app.module.ts | 4 +- src/app/hero.ts | 4 ++ src/app/heroes/heroes.component.html | 4 ++ src/app/heroes/heroes.component.scss | 0 src/app/heroes/heroes.component.spec.ts | 25 ++++++++++++ src/app/heroes/heroes.component.ts | 20 +++++++++ src/app/main-page/main-page.component.html | 17 ++++++++ src/app/main-page/main-page.component.spec.ts | 25 ++++++++++++ src/app/main-page/main-page.component.ts | 14 +++++++ src/app/rest-apis/rest-apis.component.html | 12 +++++- src/app/rest-apis/rest-apis.component.scss | 0 src/app/rest-apis/rest-apis.component.ts | 3 +- src/index.html | 2 +- src/scss/base/_body.scss | 4 ++ src/scss/base/_types.scss | 3 ++ src/scss/components/_button.scss | 40 ++++++++++++++++++ src/scss/components/_card.scss | 8 ++++ src/scss/components/_link.scss | 9 ++++ src/scss/main.scss | 2 + src/scss/objects/_media.scss | 2 +- src/scss/settings/_colors.scss | 1 + src/styles.scss | 45 ++++++++++++++++++++ 26 files changed, 283 insertions(+), 34 deletions(-) create mode 100644 src/app/hero.ts create mode 100644 src/app/heroes/heroes.component.html create mode 100644 src/app/heroes/heroes.component.scss create mode 100644 src/app/heroes/heroes.component.spec.ts create mode 100644 src/app/heroes/heroes.component.ts create mode 100644 src/app/main-page/main-page.component.html create mode 100644 src/app/main-page/main-page.component.spec.ts create mode 100644 src/app/main-page/main-page.component.ts delete mode 100644 src/app/rest-apis/rest-apis.component.scss create mode 100644 src/scss/base/_body.scss create mode 100644 src/scss/base/_types.scss create mode 100644 src/scss/components/_card.scss create mode 100644 src/scss/components/_link.scss diff --git a/src/app/api.service.ts b/src/app/api.service.ts index aaf0162..5b45ad3 100644 --- a/src/app/api.service.ts +++ b/src/app/api.service.ts @@ -7,9 +7,9 @@ import { RestAPI } from './rest-api'; }) export class ApiService { apis: RestAPI[] = [ - {name: 'Rest API 1', desc: 'What it does', link: '#'}, - {name: 'Rest API 1', desc: 'What it does', link: '#'}, - {name: 'Rest API 1', desc: 'What it does', link: '#'} + {name: 'Rest API 1', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api1'}, + {name: 'Rest API 2', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api2'}, + {name: 'Rest API 3', desc: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin.', link: 'rest_api3'} ]; constructor() { } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2c25096..498467d 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,9 +2,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { RestApisComponent } from './rest-apis/rest-apis.component'; +import { MainPageComponent } from './main-page/main-page.component'; const routes: Routes = [ + { path: '', component: MainPageComponent }, { path: 'apis', component: RestApisComponent } ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index 566c30f..70136f0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,24 +1,39 @@ -
-

- {{ title }} -

- +
+
+
+
+ GNUnet API +
+
+ +
+
+
+
+ +
-
-
-
-
- Test -
-
- Test -
-
-

Here are some links to help you start:

- -
+ + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4bba0e2..f878638 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,8 +3,10 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./../scss/main.scss'] + //styleUrls: ['./../scss/main.scss'] }) + + export class AppComponent { - title = 'GNUnet Web User Interface'; + title = ''; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cb9bb62..293f9af 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,12 +6,14 @@ import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; import { RestApisComponent } from './rest-apis/rest-apis.component'; import { AppRoutingModule } from './/app-routing.module'; +import { MainPageComponent } from './main-page/main-page.component'; @NgModule({ declarations: [ AppComponent, HeroesComponent, - RestApisComponent + RestApisComponent, + MainPageComponent ], imports: [ BrowserModule, diff --git a/src/app/hero.ts b/src/app/hero.ts new file mode 100644 index 0000000..e3eac51 --- /dev/null +++ b/src/app/hero.ts @@ -0,0 +1,4 @@ +export class Hero { + id: number; + name: string; +} diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html new file mode 100644 index 0000000..0bc287b --- /dev/null +++ b/src/app/heroes/heroes.component.html @@ -0,0 +1,4 @@ +{{hero.name | uppercase}} Details
id: {{hero.id}}
name: {{hero.name}} +
+
+ diff --git a/src/app/heroes/heroes.component.scss b/src/app/heroes/heroes.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/heroes/heroes.component.spec.ts b/src/app/heroes/heroes.component.spec.ts new file mode 100644 index 0000000..66518e4 --- /dev/null +++ b/src/app/heroes/heroes.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroesComponent } from './heroes.component'; + +describe('HeroesComponent', () => { + let component: HeroesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeroesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeroesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts new file mode 100644 index 0000000..0f72ae9 --- /dev/null +++ b/src/app/heroes/heroes.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { Hero } from '../hero'; + +@Component({ + selector: 'app-heroes', + templateUrl: './heroes.component.html', + styleUrls: ['./heroes.component.scss'] +}) +export class HeroesComponent implements OnInit { + hero: Hero ={ + id: 1, + name: 'Windstorm' + }; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html new file mode 100644 index 0000000..659a5d4 --- /dev/null +++ b/src/app/main-page/main-page.component.html @@ -0,0 +1,17 @@ +
+
+
+

+ GNUnet Web User Interface +

+

+ Lorem ipsum dolor sit amet consectetur adipiscing elit sed, diam dictum inceptos nostra mus enim id scelerisque, nam congue ligula penatibus dui arcu cubilia. Placerat dapibus felis euismod ligula pellentesque facilisi magna eu curae ridiculus arcu venenatis, ad justo auctor mollis faucibus viverra odio netus lectus risus vitae. Quisque morbi dapibus mollis ut cursus leo nascetur vitae aliquet venenatis per sociosqu, vivamus pulvinar risus nunc libero feugiat auctor gravida commodo proin. + + Luctus magnis mi odio cursus ut pharetra pretium congue mattis, sagittis taciti iaculis mollis gravida fringilla facilisi faucibus, tincidunt consequat eu fusce arcu potenti proin sapien. Taciti sem placerat fringilla a fusce pretium nunc praesent habitant, sociosqu maecenas conubia mollis aliquam aliquet curae ad, mauris arcu urna pellentesque laoreet inceptos suscipit nullam. Curabitur molestie class gravida donec nisl cum urna integer, sodales etiam placerat vivamus scelerisque sollicitudin. +

+
+
+
+
+ +
diff --git a/src/app/main-page/main-page.component.spec.ts b/src/app/main-page/main-page.component.spec.ts new file mode 100644 index 0000000..39261a3 --- /dev/null +++ b/src/app/main-page/main-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MainPageComponent } from './main-page.component'; + +describe('MainPageComponent', () => { + let component: MainPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MainPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MainPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/main-page/main-page.component.ts b/src/app/main-page/main-page.component.ts new file mode 100644 index 0000000..ad4a333 --- /dev/null +++ b/src/app/main-page/main-page.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-main-page', + templateUrl: './main-page.component.html' +}) +export class MainPageComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/rest-apis/rest-apis.component.html b/src/app/rest-apis/rest-apis.component.html index 5e0e14a..4a15a85 100644 --- a/src/app/rest-apis/rest-apis.component.html +++ b/src/app/rest-apis/rest-apis.component.html @@ -1,3 +1,11 @@ -
- {{api.name}}{{api.desc}}Link +
+
+
+
+

{{api.name}}

+
+ {{api.desc}} ...Read more +
+
+
diff --git a/src/app/rest-apis/rest-apis.component.scss b/src/app/rest-apis/rest-apis.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/rest-apis/rest-apis.component.ts b/src/app/rest-apis/rest-apis.component.ts index c8fc017..f9cd3cf 100644 --- a/src/app/rest-apis/rest-apis.component.ts +++ b/src/app/rest-apis/rest-apis.component.ts @@ -4,8 +4,7 @@ import { ApiService } from '../api.service'; @Component({ selector: 'app-rest-apis', - templateUrl: './rest-apis.component.html', - styleUrls: ['./rest-apis.component.scss'] + templateUrl: './rest-apis.component.html' }) export class RestApisComponent implements OnInit { diff --git a/src/index.html b/src/index.html index 97955cf..82d9839 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ GnunetWebui - + diff --git a/src/scss/base/_body.scss b/src/scss/base/_body.scss new file mode 100644 index 0000000..0310cde --- /dev/null +++ b/src/scss/base/_body.scss @@ -0,0 +1,4 @@ +body { + background-color: $color-grey-light; + font-family: Archivo, sans-serif; +} diff --git a/src/scss/base/_types.scss b/src/scss/base/_types.scss new file mode 100644 index 0000000..6f9c9ef --- /dev/null +++ b/src/scss/base/_types.scss @@ -0,0 +1,3 @@ +body { + @include iota-type( $type-16); +} diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index e69de29..5bd66d9 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -0,0 +1,40 @@ +$button-padding : $baseline-x2 $baseline-x4; +$button-bgcolor : $color-blue; +$button-bgcolor-hover : darken($color-blue, 10%); +$button-color : $color-white; +$button-radius : 3px; + +$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 ); +$button-outline-bgcolor: transparent; +$button-outline-color: $color-blue; +$button-outline-color-hover: darken( $color-blue, 10% ); + +.c-button { + padding: $button-padding; + display: inline-block; + font: inherit; + color: $button-color; + white-space: nowrap; + text-align: center; + vertical-align: middle; + cursor: pointer; + text-decoration: none; + border: none; + background-color: $button-bgcolor; + border-radius: $button-radius; +} + +.c-button:hover { background-color: $button-bgcolor-hover;} + +.c-button--outline { + padding: $button-outline-padding; + color: $button-outline-color; + border: 1px solid $button-outline-color; + background-color: $button-outline-bgcolor; +} + +.c-button--outline:hover { + color: #1893E0; + border-color: $button-outline-color-hover; + background-color: $button-outline-bgcolor; +} diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss new file mode 100644 index 0000000..2370918 --- /dev/null +++ b/src/scss/components/_card.scss @@ -0,0 +1,8 @@ +.c-card { + padding: $baseline-x5; + background: rgba($color-white, 0.8); + border-radius: 2px; + box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28); +} + +.c-card--light { background: rgba($color-white, 0.5)} diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss new file mode 100644 index 0000000..ec9fa4e --- /dev/null +++ b/src/scss/components/_link.scss @@ -0,0 +1,9 @@ +.c-link { + text-decoration: none; + color: $color-white; + font-weight: bold; +} + +.c-link:hover { + opacity: 0.8; +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 5270a83..aaf5e9e 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -18,6 +18,8 @@ //@import 'objects/media'; @import 'objects/type'; +@import 'components/button'; +@import 'components/card'; //@import 'utilities/align-items'; //@import 'utilities/align'; @import 'utilities/bgcolor'; diff --git a/src/scss/objects/_media.scss b/src/scss/objects/_media.scss index 2c52f87..580c4ad 100644 --- a/src/scss/objects/_media.scss +++ b/src/scss/objects/_media.scss @@ -6,7 +6,7 @@ * Type: Boolean */ -$iota-objs-media-aligned: false; +$iota-objs-media-aligned: true; /** diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss index 2a9704d..3be07a9 100644 --- a/src/scss/settings/_colors.scss +++ b/src/scss/settings/_colors.scss @@ -4,6 +4,7 @@ $color-red: #FC4A33; $color-grey: #A3ADBF; $color-grey-light: #F5F5F7; $color-white: #FFFFFF; +$color-blue: #38B2FF; $colors: ( 'black' : $color-black, diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..f533660 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,46 @@ /* You can add global styles to this file, and also import other style files */ +@import 'scss/settings/baseline'; +@import 'scss/settings/core'; +@import 'scss/settings/colors'; +@import 'scss/settings/type'; +@import 'scss/settings/spacing'; + +@import 'scss/tools/core'; +//@import 'scss/tools/breakpoint'; +//@import 'scss/tools/ms'; +//@import 'scss/tools/rtl'; +@import 'scss/tools/type'; + +@import 'scss/base/initialize'; +@import 'scss/base/body'; +@import 'scss/base/types'; + +@import 'scss/objects/container'; +@import 'scss/objects/grid'; +@import 'scss/objects/list'; +@import 'scss/objects/media'; +@import 'scss/objects/type'; + +@import 'scss/components/button'; +@import 'scss/components/card'; +@import 'scss/components/link'; + +//@import 'scss/utilities/align-items'; +//@import 'scss/utilities/align'; +@import 'scss/utilities/bgcolor'; +//@import 'scss/utilities/clearfix'; +@import 'scss/utilities/color'; +@import 'scss/utilities/display'; +//@import 'scss/utilities/flex-direction'; +//@import 'scss/utilities/float'; +//@import 'scss/utilities/justify-content'; +@import 'scss/utilities/margin'; +//@import 'scss/utilities/opacity'; +@import 'scss/utilities/padding'; +//@import 'scss/utilities/position'; +//@import 'scss/utilities/pull'; +//@import 'scss/utilities/push'; +@import 'scss/utilities/size'; +@import 'scss/utilities/text'; +//@import 'scss/utilities/transform'; +//@import 'scss/utilities/weight'; -- cgit v1.2.3