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 {
min-height: 1000px;
padding-left: 20px;
padding-top: 20px;
}
md-sidenav {
......@@ -8,4 +10,16 @@ md-sidenav {
.example-full-width {
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 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>
<a md-list-item href="#">详情</a>
<a md-list-item href="#">文件</a>
......@@ -7,6 +12,25 @@
</md-sidenav>
<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>
<form class="example-form">
<md-input-container class="example-full-width">
......@@ -26,23 +50,52 @@
</md-input-container>
</p>
<table class="example-full-width" cellspacing="0"><tr>
<td><md-input-container class="example-full-width">
<input md-input placeholder="City">
</md-input-container></td>
<td><md-input-container class="example-full-width">
<input md-input placeholder="State">
</md-input-container></td>
<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>
</form>
<table class="example-full-width" cellspacing="0">
<tr>
<td>
<md-input-container class="example-full-width">
<input md-input placeholder="City">
</md-input-container>
</td>
<td>
<md-input-container class="example-full-width">
<input md-input placeholder="State">
</md-input-container>
</td>
<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
<!--<md-icon class="md-24 fa-lg" fontSet="fa" fontIcon="fa-trophy"></md-icon>-->
</div>
</md-sidenav-container>
\ No newline at end of file
</md-sidenav-container>
<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';
import {AppService} from './app.service';
import {ActivatedRoute, Params} from '@angular/router';
import 'rxjs/Rx';
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
@Component({
selector: 'app-detail',
......@@ -13,7 +15,14 @@ import 'rxjs/Rx';
export class AppDetailComponent implements OnInit {
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() {
......
app/mycard.module.ts
View file @ 8ff09af6
......@@ -2,17 +2,14 @@ import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import 'hammerjs';
import {AppsComponent} from './apps.component';
import {MaterialModule} from '@angular/material';
import {MaterialModule, MdIconRegistry} from '@angular/material';
import {MyCardComponent} from './mycard.component';
import {RoutingModule} from './routing.module';
import {FormsModule} from '@angular/forms';
import {AppService} from './app.service';
import {HttpModule} from '@angular/http';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
......@@ -20,7 +17,7 @@ import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import {AppDetailComponent} from "./app-detail.component";
import {AppDetailComponent} from './app-detail.component';
@NgModule({
......@@ -29,7 +26,11 @@ import {AppDetailComponent} from "./app-detail.component";
],
declarations: [AppsComponent, MyCardComponent, AppDetailComponent],
bootstrap: [MyCardComponent],
providers: [AppService],
providers: [AppService, MdIconRegistry],
})
export class AppModule {
constructor(mdIconRegistry: MdIconRegistry) {
mdIconRegistry.registerFontClassAlias('fa', 'fontawesome');
mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
}
index.html
View file @ 8ff09af6
......@@ -7,6 +7,8 @@
<base href="/">
<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/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 -->
<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