Skip to content

C
console
Commit 8ff09af6 authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

页面

parent 364b4620
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 21 deletions
app/app-detail.component.css
View file @ 8ff09af6
.my-content { .my-content {
min-height: 1000px; min-height: 1000px;
padding-left: 20px;
padding-top: 20px;
} }
md-sidenav { md-sidenav {
...@@ -8,4 +10,16 @@ md-sidenav { ...@@ -8,4 +10,16 @@ md-sidenav {
.example-full-width { .example-full-width {
width: 100%; width: 100%;
}
#info {
display: flex;
}
h1 {
margin: 4px 0;
}
#info-contents {
margin-left: 8px;
} }
\ No newline at end of file
app/app-detail.component.html
View file @ 8ff09af6
<md-sidenav-container *ngIf="app"> <md-sidenav-container *ngIf="app">
<md-sidenav mode="side" opened="true"> <md-sidenav mode="side" opened="true">
<h3 md-subheader>信息中心</h3>
<md-nav-list>
<a md-list-item href="#">概览</a>
</md-nav-list>
<h3 md-subheader>编辑应用</h3>
<md-nav-list> <md-nav-list>
<a md-list-item href="#">详情</a> <a md-list-item href="#">详情</a>
<a md-list-item href="#">文件</a> <a md-list-item href="#">文件</a>
...@@ -7,6 +12,25 @@ ...@@ -7,6 +12,25 @@
</md-sidenav> </md-sidenav>
<div class="my-content"> <div class="my-content">
<div id="info">
<div>
<img src="https://lh6.ggpht.com/mUAFCY_JUfHQBlAE4JsnwyrghcxIldv-uk0iPPL66IpPxM8-KQCof6NN4usLm6LUpA=h80-rw" alt="喵帕斯~">
</div>
<div id="info-contents">
<h1>{{app.name['zh-CN']}}</h1>
<div>
<span>{{app.id}}</span>
<a target="_blank" href="https://mycard.moe"> 在商店中查看 </a>
</div>
<div class="IDWJ4SB-Yf-i">
<span style="color:#84a000;">已发布</span>
<span>2014年2月20日</span>
<a class="gwt-Anchor" href="javascript:">取消发布应用</a>
<a class="gwt-Anchor">删除应用</a>
</div>
</div>
</div>
<h3 md-subheader>基本信息</h3> <h3 md-subheader>基本信息</h3>
<form class="example-form"> <form class="example-form">
<md-input-container class="example-full-width"> <md-input-container class="example-full-width">
...@@ -26,23 +50,52 @@ ...@@ -26,23 +50,52 @@
</md-input-container> </md-input-container>
</p> </p>
<table class="example-full-width" cellspacing="0"><tr> <table class="example-full-width" cellspacing="0">
<td><md-input-container class="example-full-width"> <tr>
<input md-input placeholder="City"> <td>
</md-input-container></td> <md-input-container class="example-full-width">
<td><md-input-container class="example-full-width"> <input md-input placeholder="City">
<input md-input placeholder="State"> </md-input-container>
</md-input-container></td> </td>
<td><md-input-container class="example-full-width"> <td>
<input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043"> <md-input-container class="example-full-width">
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint> <input md-input placeholder="State">
</md-input-container></td> </md-input-container>
</tr></table> </td>
</form> <td>
<md-input-container class="example-full-width">
<input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
</md-input-container>
</td>
</tr>
</table>
<button md-raised-button color="primary">提交</button>
</form>
<h3 md-subheader>语言</h3>
<md-tab-group>
<md-tab>
<template md-tab-label>
The <em>best</em> pasta
</template>
<h1>Best pasta restaurants</h1>
<p>...</p>
</md-tab>
<md-tab>
<template md-tab-label>
<md-icon>home</md-icon> The worst sushi
</template>
<h1>Terrible sushi restaurants</h1>
<p>...</p>
</md-tab>
</md-tab-group>
Main content Main content
<!--<md-icon class="md-24 fa-lg" fontSet="fa" fontIcon="fa-trophy"></md-icon>-->
</div> </div>
</md-sidenav-container> </md-sidenav-container>
\ No newline at end of file
<md-icon fontSet="fa" fontIcon="fa-square"></md-icon>
\ No newline at end of file
app/app-detail.component.ts
View file @ 8ff09af6
...@@ -3,6 +3,8 @@ import App from '../models/app'; ...@@ -3,6 +3,8 @@ import App from '../models/app';
import {AppService} from './app.service'; import {AppService} from './app.service';
import {ActivatedRoute, Params} from '@angular/router'; import {ActivatedRoute, Params} from '@angular/router';
import 'rxjs/Rx'; import 'rxjs/Rx';
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
@Component({ @Component({
selector: 'app-detail', selector: 'app-detail',
...@@ -13,7 +15,14 @@ import 'rxjs/Rx'; ...@@ -13,7 +15,14 @@ import 'rxjs/Rx';
export class AppDetailComponent implements OnInit { export class AppDetailComponent implements OnInit {
app: App; app: App;
constructor(private appService: AppService, private route: ActivatedRoute) { constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
// iconRegistry.registerFontClassAlias('fontawesome', 'fa');
// iconRegistry
// .addSvgIconSetInNamespace('thumbs-up', 'fonts/core-icon-set.svg')
// iconRegistry.addSvgIcon(
// 'thumbs-up',
// sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')
// );
} }
async ngOnInit() { async ngOnInit() {
......
app/mycard.module.ts
View file @ 8ff09af6
...@@ -2,17 +2,14 @@ import {NgModule} from '@angular/core'; ...@@ -2,17 +2,14 @@ import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import 'hammerjs'; import 'hammerjs';
import {AppsComponent} from './apps.component'; import {AppsComponent} from './apps.component';
import {MaterialModule} from '@angular/material'; import {MaterialModule, MdIconRegistry} from '@angular/material';
import {MyCardComponent} from './mycard.component'; import {MyCardComponent} from './mycard.component';
import {RoutingModule} from './routing.module'; import {RoutingModule} from './routing.module';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {AppService} from './app.service'; import {AppService} from './app.service';
import {HttpModule} from '@angular/http'; import {HttpModule} from '@angular/http';
import 'rxjs/add/observable/of'; import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw'; import 'rxjs/add/observable/throw';
// Observable operators
import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged'; import 'rxjs/add/operator/distinctUntilChanged';
...@@ -20,7 +17,7 @@ import 'rxjs/add/operator/do'; ...@@ -20,7 +17,7 @@ import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/switchMap';
import {AppDetailComponent} from "./app-detail.component"; import {AppDetailComponent} from './app-detail.component';
@NgModule({ @NgModule({
...@@ -29,7 +26,11 @@ import {AppDetailComponent} from "./app-detail.component"; ...@@ -29,7 +26,11 @@ import {AppDetailComponent} from "./app-detail.component";
], ],
declarations: [AppsComponent, MyCardComponent, AppDetailComponent], declarations: [AppsComponent, MyCardComponent, AppDetailComponent],
bootstrap: [MyCardComponent], bootstrap: [MyCardComponent],
providers: [AppService], providers: [AppService, MdIconRegistry],
}) })
export class AppModule { export class AppModule {
constructor(mdIconRegistry: MdIconRegistry) {
mdIconRegistry.registerFontClassAlias('fa', 'fontawesome');
mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
} }
index.html
View file @ 8ff09af6
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
<base href="/"> <base href="/">
<link rel="stylesheet" href="public/stylesheets/style.css"> <link rel="stylesheet" href="public/stylesheets/style.css">
<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> <link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
<link href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
<link href="node_modules/font-awesome/css/font-awesome.min.css">
<!-- Polyfill(s) for older browsers --> <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment