[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[GNUnet-SVN] [gnunet-webui] 03/05: -wip service/routing design
|
From: |
gnunet |
|
Subject: |
[GNUnet-SVN] [gnunet-webui] 03/05: -wip service/routing design |
|
Date: |
Sat, 09 Jun 2018 12:17:29 +0200 |
This is an automated email from the git hooks/post-receive script.
phil pushed a commit to branch master
in repository gnunet-webui.
commit 4c01dd54cc3c68ddfd700d586fad000df075506f
Author: Phil <address@hidden>
AuthorDate: Sat May 19 22:58:53 2018 +0200
-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 ++
.../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.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 +++++++++++++++++
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';
})
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 feug [...]
+ {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 feug [...]
+ {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 feug [...]
];
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 @@
<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
- <h1>
- {{ title }}
- </h1>
- <app-rest-apis></app-rest-apis>
+<header class="u-bgcolor-purple u-color-white u-p-x3">
+ <div class="o-container o-container--size-small">
+ <div class="o-media o-media--middle">
+ <div class="o-media__fixed">
+ <img src="svg/logo.svg"> GNUnet API
+ </div>
+ <div class="o-media__fluid u-text-right">
+ <nav>
+ <ul class="o-list o-list--inline o-list--gutter-x4">
+ <li class="o-list__item">
+ <a routerLink="/" class="c-link">Item</a>
+ </li>
+ <li class="o-list__item">
+ <a routerLink="apis" class="c-link">Item1</a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ </div>
+</header>
+
+<main class="u-pv-x5">
<router-outlet></router-outlet>
-</div>
-<div class="o-container u-bgcolor-grey-light">
- <div class="o-grid o-grid--gutter-x4">
- <div class="o-grid__col u-1/address@hidden u-bgcolor-white">
- Test
- </div>
- <div class="o-grid__col u-1/address@hidden u-bgcolor-white">
- Test
- </div>
- </div>
-<h2 class="">Here are some links to help you start: </h2>
-<ul class="o-list">
- <li class="o-list__item"><a target="_blank" rel="noopener"
href="https://angular.io/tutorial";>Tour of Heroes</a></li>
- <li class="o-list__item"><a target="_blank" rel="noopener"
href="https://github.com/angular/angular-cli/wiki";>CLI Documentation</a></li>
- <li class="o-list__item"><a target="_blank" rel="noopener"
href="https://blog.angular.io/";>Angular blog</a></li>
-</ul>
-</div>
+</main>
+
+<footer class="u-bgcolor-purple u-color-white u-p-x3">
+ <div class="o-container o-container--size-small">
+ <div class="o-media o-media--middle">
+ <div class="o-media__fixed">
+ <a class="c-link">Impressum</a>
+ </div>
+ <div class="o-media__fluid u-text-right">
+ Copyright things
+ </div>
+ </div>
+ </div>
+</footer>
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 <br>id: {{hero.id}}<br>name: {{hero.name}}
+<br>
+<br>
+<input [(ngModel)]="hero.name" placeholder="name">
diff --git a/src/app/rest-apis/rest-apis.component.scss
b/src/app/heroes/heroes.component.scss
similarity index 100%
rename from src/app/rest-apis/rest-apis.component.scss
rename to 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 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+ let component: HeroesComponent;
+ let fixture: ComponentFixture<HeroesComponent>;
+
+ 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';
+
address@hidden({
+ 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 @@
+<div class="o-container">
+ <div class="c-card">
+ <div class="o-container">
+ <h1 class="u-text-center u-pb-x3 o-type-35">
+ GNUnet Web User Interface
+ </h1>
+ <p>
+ 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 com [...]
+
+ 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 sceleris [...]
+ </p>
+ </div>
+ </div>
+</div>
+<div class="u-text-center">
+ <app-rest-apis></app-rest-apis>
+</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 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainPageComponent } from './main-page.component';
+
+describe('MainPageComponent', () => {
+ let component: MainPageComponent;
+ let fixture: ComponentFixture<MainPageComponent>;
+
+ 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';
+
address@hidden({
+ 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 @@
-<div *ngFor="let api of apis">
- {{api.name}}{{api.desc}}<a href="{{api.link}}">Link</a>
+<div class="o-container o-container--size-small">
+ <div class="o-grid" >
+ <div class="o-grid__col u-1/3 u-p-x2" *ngFor="let api of apis">
+ <div class="c-card">
+ <h1 class="o-type-28">{{api.name}}</h1>
+ <br>
+ {{api.desc}} ...<a routerLink="{{api.link}}">Read more</a>
+ </div>
+ </div>
+ </div>
</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';
@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 @@
<meta charset="utf-8">
<title>GnunetWebui</title>
<base href="/">
-
+ <link
href="https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i";
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</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 @@
+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';
address@hidden 'components/button';
address@hidden '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 */
address@hidden 'scss/settings/baseline';
address@hidden 'scss/settings/core';
address@hidden 'scss/settings/colors';
address@hidden 'scss/settings/type';
address@hidden 'scss/settings/spacing';
+
address@hidden 'scss/tools/core';
+//@import 'scss/tools/breakpoint';
+//@import 'scss/tools/ms';
+//@import 'scss/tools/rtl';
address@hidden 'scss/tools/type';
+
address@hidden 'scss/base/initialize';
address@hidden 'scss/base/body';
address@hidden 'scss/base/types';
+
address@hidden 'scss/objects/container';
address@hidden 'scss/objects/grid';
address@hidden 'scss/objects/list';
address@hidden 'scss/objects/media';
address@hidden 'scss/objects/type';
+
address@hidden 'scss/components/button';
address@hidden 'scss/components/card';
address@hidden 'scss/components/link';
+
+//@import 'scss/utilities/align-items';
+//@import 'scss/utilities/align';
address@hidden 'scss/utilities/bgcolor';
+//@import 'scss/utilities/clearfix';
address@hidden 'scss/utilities/color';
address@hidden 'scss/utilities/display';
+//@import 'scss/utilities/flex-direction';
+//@import 'scss/utilities/float';
+//@import 'scss/utilities/justify-content';
address@hidden 'scss/utilities/margin';
+//@import 'scss/utilities/opacity';
address@hidden 'scss/utilities/padding';
+//@import 'scss/utilities/position';
+//@import 'scss/utilities/pull';
+//@import 'scss/utilities/push';
address@hidden 'scss/utilities/size';
address@hidden 'scss/utilities/text';
+//@import 'scss/utilities/transform';
+//@import 'scss/utilities/weight';
--
To stop receiving notification emails like this one, please contact
address@hidden