aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil <phil.buschmann@tum.de>2018-05-19 22:58:53 +0200
committerPhil <phil.buschmann@tum.de>2018-05-19 22:58:53 +0200
commit4c01dd54cc3c68ddfd700d586fad000df075506f (patch)
tree954bbb370ce9b7c9b4cc494ee862e550f34766fb
parent57efd4f24d238ca649ef25e9922b7f64fa4cc417 (diff)
downloadgnunet-webui-4c01dd54cc3c68ddfd700d586fad000df075506f.tar.gz
gnunet-webui-4c01dd54cc3c68ddfd700d586fad000df075506f.zip
-wip service/routing design
-rw-r--r--src/app/api.service.ts6
-rw-r--r--src/app/app-routing.module.ts2
-rw-r--r--src/app/app.component.html59
-rw-r--r--src/app/app.component.ts6
-rw-r--r--src/app/app.module.ts4
-rw-r--r--src/app/hero.ts4
-rw-r--r--src/app/heroes/heroes.component.html4
-rw-r--r--src/app/heroes/heroes.component.scss (renamed from src/app/rest-apis/rest-apis.component.scss)0
-rw-r--r--src/app/heroes/heroes.component.spec.ts25
-rw-r--r--src/app/heroes/heroes.component.ts20
-rw-r--r--src/app/main-page/main-page.component.html17
-rw-r--r--src/app/main-page/main-page.component.spec.ts25
-rw-r--r--src/app/main-page/main-page.component.ts14
-rw-r--r--src/app/rest-apis/rest-apis.component.html12
-rw-r--r--src/app/rest-apis/rest-apis.component.ts3
-rw-r--r--src/index.html2
-rw-r--r--src/scss/base/_body.scss4
-rw-r--r--src/scss/base/_types.scss3
-rw-r--r--src/scss/components/_button.scss40
-rw-r--r--src/scss/components/_card.scss8
-rw-r--r--src/scss/components/_link.scss9
-rw-r--r--src/scss/main.scss2
-rw-r--r--src/scss/objects/_media.scss2
-rw-r--r--src/scss/settings/_colors.scss1
-rw-r--r--src/styles.scss45
25 files changed, 283 insertions, 34 deletions
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';
7}) 7})
8export class ApiService { 8export class ApiService {
9 apis: RestAPI[] = [ 9 apis: RestAPI[] = [
10 {name: 'Rest API 1', desc: 'What it does', link: '#'}, 10 {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'},
11 {name: 'Rest API 1', desc: 'What it does', link: '#'}, 11 {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'},
12 {name: 'Rest API 1', desc: 'What it does', link: '#'} 12 {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'}
13 ]; 13 ];
14 14
15 constructor() { } 15 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';
2import { RouterModule, Routes } from '@angular/router'; 2import { RouterModule, Routes } from '@angular/router';
3 3
4import { RestApisComponent } from './rest-apis/rest-apis.component'; 4import { RestApisComponent } from './rest-apis/rest-apis.component';
5import { MainPageComponent } from './main-page/main-page.component';
5 6
6 7
7const routes: Routes = [ 8const routes: Routes = [
9 { path: '', component: MainPageComponent },
8 { path: 'apis', component: RestApisComponent } 10 { path: 'apis', component: RestApisComponent }
9]; 11];
10 12
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 @@
1<!--The content below is only a placeholder and can be replaced.--> 1<!--The content below is only a placeholder and can be replaced.-->
2<div style="text-align:center"> 2<header class="u-bgcolor-purple u-color-white u-p-x3">
3 <h1> 3 <div class="o-container o-container--size-small">
4 {{ title }} 4 <div class="o-media o-media--middle">
5 </h1> 5 <div class="o-media__fixed">
6 <app-rest-apis></app-rest-apis> 6 <img src="svg/logo.svg"> GNUnet API
7 </div>
8 <div class="o-media__fluid u-text-right">
9 <nav>
10 <ul class="o-list o-list--inline o-list--gutter-x4">
11 <li class="o-list__item">
12 <a routerLink="/" class="c-link">Item</a>
13 </li>
14 <li class="o-list__item">
15 <a routerLink="apis" class="c-link">Item1</a>
16 </li>
17 </ul>
18 </nav>
19 </div>
20 </div>
21 </div>
22</header>
23
24<main class="u-pv-x5">
7 <router-outlet></router-outlet> 25 <router-outlet></router-outlet>
8</div> 26</main>
9<div class="o-container u-bgcolor-grey-light"> 27
10 <div class="o-grid o-grid--gutter-x4"> 28<footer class="u-bgcolor-purple u-color-white u-p-x3">
11 <div class="o-grid__col u-1/2@sm u-bgcolor-white"> 29 <div class="o-container o-container--size-small">
12 Test 30 <div class="o-media o-media--middle">
13 </div> 31 <div class="o-media__fixed">
14 <div class="o-grid__col u-1/2@sm u-bgcolor-white"> 32 <a class="c-link">Impressum</a>
15 Test 33 </div>
16 </div> 34 <div class="o-media__fluid u-text-right">
17 </div> 35 Copyright things
18<h2 class="">Here are some links to help you start: </h2> 36 </div>
19<ul class="o-list"> 37 </div>
20 <li class="o-list__item"><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></li> 38 </div>
21 <li class="o-list__item"><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></li> 39</footer>
22 <li class="o-list__item"><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></li>
23</ul>
24</div>
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';
3@Component({ 3@Component({
4 selector: 'app-root', 4 selector: 'app-root',
5 templateUrl: './app.component.html', 5 templateUrl: './app.component.html',
6 styleUrls: ['./../scss/main.scss'] 6 //styleUrls: ['./../scss/main.scss']
7}) 7})
8
9
8export class AppComponent { 10export class AppComponent {
9 title = 'GNUnet Web User Interface'; 11 title = '';
10} 12}
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';
6import { HeroesComponent } from './heroes/heroes.component'; 6import { HeroesComponent } from './heroes/heroes.component';
7import { RestApisComponent } from './rest-apis/rest-apis.component'; 7import { RestApisComponent } from './rest-apis/rest-apis.component';
8import { AppRoutingModule } from './/app-routing.module'; 8import { AppRoutingModule } from './/app-routing.module';
9import { MainPageComponent } from './main-page/main-page.component';
9 10
10@NgModule({ 11@NgModule({
11 declarations: [ 12 declarations: [
12 AppComponent, 13 AppComponent,
13 HeroesComponent, 14 HeroesComponent,
14 RestApisComponent 15 RestApisComponent,
16 MainPageComponent
15 ], 17 ],
16 imports: [ 18 imports: [
17 BrowserModule, 19 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 @@
1export class Hero {
2 id: number;
3 name: string;
4}
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 @@
1{{hero.name | uppercase}} Details <br>id: {{hero.id}}<br>name: {{hero.name}}
2<br>
3<br>
4<input [(ngModel)]="hero.name" placeholder="name">
diff --git a/src/app/rest-apis/rest-apis.component.scss b/src/app/heroes/heroes.component.scss
index e69de29..e69de29 100644
--- a/src/app/rest-apis/rest-apis.component.scss
+++ b/src/app/heroes/heroes.component.scss
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 @@
1import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3import { HeroesComponent } from './heroes.component';
4
5describe('HeroesComponent', () => {
6 let component: HeroesComponent;
7 let fixture: ComponentFixture<HeroesComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ HeroesComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(HeroesComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25});
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 @@
1import { Component, OnInit } from '@angular/core';
2import { Hero } from '../hero';
3
4@Component({
5 selector: 'app-heroes',
6 templateUrl: './heroes.component.html',
7 styleUrls: ['./heroes.component.scss']
8})
9export class HeroesComponent implements OnInit {
10 hero: Hero ={
11 id: 1,
12 name: 'Windstorm'
13 };
14
15 constructor() { }
16
17 ngOnInit() {
18 }
19
20}
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 @@
1<div class="o-container">
2 <div class="c-card">
3 <div class="o-container">
4 <h1 class="u-text-center u-pb-x3 o-type-35">
5 GNUnet Web User Interface
6 </h1>
7 <p>
8 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.
9
10 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.
11 </p>
12 </div>
13 </div>
14</div>
15<div class="u-text-center">
16 <app-rest-apis></app-rest-apis>
17</div>
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 @@
1import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3import { MainPageComponent } from './main-page.component';
4
5describe('MainPageComponent', () => {
6 let component: MainPageComponent;
7 let fixture: ComponentFixture<MainPageComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ MainPageComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(MainPageComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25});
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 @@
1import { Component, OnInit } from '@angular/core';
2
3@Component({
4 selector: 'app-main-page',
5 templateUrl: './main-page.component.html'
6})
7export class MainPageComponent implements OnInit {
8
9 constructor() { }
10
11 ngOnInit() {
12 }
13
14}
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 @@
1<div *ngFor="let api of apis"> 1<div class="o-container o-container--size-small">
2 {{api.name}}{{api.desc}}<a href="{{api.link}}">Link</a> 2 <div class="o-grid" >
3 <div class="o-grid__col u-1/3 u-p-x2" *ngFor="let api of apis">
4 <div class="c-card">
5 <h1 class="o-type-28">{{api.name}}</h1>
6 <br>
7 {{api.desc}} ...<a routerLink="{{api.link}}">Read more</a>
8 </div>
9 </div>
10 </div>
3</div> 11</div>
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';
4 4
5@Component({ 5@Component({
6 selector: 'app-rest-apis', 6 selector: 'app-rest-apis',
7 templateUrl: './rest-apis.component.html', 7 templateUrl: './rest-apis.component.html'
8 styleUrls: ['./rest-apis.component.scss']
9}) 8})
10export class RestApisComponent implements OnInit { 9export class RestApisComponent implements OnInit {
11 10
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 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>GnunetWebui</title> 5 <title>GnunetWebui</title>
6 <base href="/"> 6 <base href="/">
7 7 <link href="https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
8 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <link rel="icon" type="image/x-icon" href="favicon.ico"> 9 <link rel="icon" type="image/x-icon" href="favicon.ico">
10</head> 10</head>
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 @@
1body {
2 background-color: $color-grey-light;
3 font-family: Archivo, sans-serif;
4}
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 @@
1body {
2 @include iota-type( $type-16);
3}
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 @@
1$button-padding : $baseline-x2 $baseline-x4;
2$button-bgcolor : $color-blue;
3$button-bgcolor-hover : darken($color-blue, 10%);
4$button-color : $color-white;
5$button-radius : 3px;
6
7$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
8$button-outline-bgcolor: transparent;
9$button-outline-color: $color-blue;
10$button-outline-color-hover: darken( $color-blue, 10% );
11
12.c-button {
13 padding: $button-padding;
14 display: inline-block;
15 font: inherit;
16 color: $button-color;
17 white-space: nowrap;
18 text-align: center;
19 vertical-align: middle;
20 cursor: pointer;
21 text-decoration: none;
22 border: none;
23 background-color: $button-bgcolor;
24 border-radius: $button-radius;
25}
26
27.c-button:hover { background-color: $button-bgcolor-hover;}
28
29.c-button--outline {
30 padding: $button-outline-padding;
31 color: $button-outline-color;
32 border: 1px solid $button-outline-color;
33 background-color: $button-outline-bgcolor;
34}
35
36.c-button--outline:hover {
37 color: #1893E0;
38 border-color: $button-outline-color-hover;
39 background-color: $button-outline-bgcolor;
40}
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 @@
1.c-card {
2 padding: $baseline-x5;
3 background: rgba($color-white, 0.8);
4 border-radius: 2px;
5 box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28);
6}
7
8.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 @@
1.c-link {
2 text-decoration: none;
3 color: $color-white;
4 font-weight: bold;
5}
6
7.c-link:hover {
8 opacity: 0.8;
9}
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 @@
18//@import 'objects/media'; 18//@import 'objects/media';
19@import 'objects/type'; 19@import 'objects/type';
20 20
21@import 'components/button';
22@import 'components/card';
21//@import 'utilities/align-items'; 23//@import 'utilities/align-items';
22//@import 'utilities/align'; 24//@import 'utilities/align';
23@import 'utilities/bgcolor'; 25@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 @@
6 * Type: Boolean 6 * Type: Boolean
7 */ 7 */
8 8
9$iota-objs-media-aligned: false; 9$iota-objs-media-aligned: true;
10 10
11 11
12/** 12/**
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;
4$color-grey: #A3ADBF; 4$color-grey: #A3ADBF;
5$color-grey-light: #F5F5F7; 5$color-grey-light: #F5F5F7;
6$color-white: #FFFFFF; 6$color-white: #FFFFFF;
7$color-blue: #38B2FF;
7 8
8$colors: ( 9$colors: (
9 'black' : $color-black, 10 '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 @@
1/* You can add global styles to this file, and also import other style files */ 1/* You can add global styles to this file, and also import other style files */
2@import 'scss/settings/baseline';
3@import 'scss/settings/core';
4@import 'scss/settings/colors';
5@import 'scss/settings/type';
6@import 'scss/settings/spacing';
7
8@import 'scss/tools/core';
9//@import 'scss/tools/breakpoint';
10//@import 'scss/tools/ms';
11//@import 'scss/tools/rtl';
12@import 'scss/tools/type';
13
14@import 'scss/base/initialize';
15@import 'scss/base/body';
16@import 'scss/base/types';
17
18@import 'scss/objects/container';
19@import 'scss/objects/grid';
20@import 'scss/objects/list';
21@import 'scss/objects/media';
22@import 'scss/objects/type';
23
24@import 'scss/components/button';
25@import 'scss/components/card';
26@import 'scss/components/link';
27
28//@import 'scss/utilities/align-items';
29//@import 'scss/utilities/align';
30@import 'scss/utilities/bgcolor';
31//@import 'scss/utilities/clearfix';
32@import 'scss/utilities/color';
33@import 'scss/utilities/display';
34//@import 'scss/utilities/flex-direction';
35//@import 'scss/utilities/float';
36//@import 'scss/utilities/justify-content';
37@import 'scss/utilities/margin';
38//@import 'scss/utilities/opacity';
39@import 'scss/utilities/padding';
40//@import 'scss/utilities/position';
41//@import 'scss/utilities/pull';
42//@import 'scss/utilities/push';
43@import 'scss/utilities/size';
44@import 'scss/utilities/text';
45//@import 'scss/utilities/transform';
46//@import 'scss/utilities/weight';