Commit ac8bc9e1 authored by Zéfling's avatar Zéfling 🎨

Basic CSS + browser-compat-data Interfaces

parent 5078bd2f
ul {
padding-left: 20px;
}
.folder > div {
font-weight: bold;
}
.file {
&:hover {
background-color: antiquewhite;
cursor: pointer;
}
}
\ No newline at end of file
......@@ -2,47 +2,47 @@ import { Component, Input } from '@angular/core';
import { DataValue, AppService } from './app.service';
@Component({
selector: 'app-nav',
templateUrl: './app-nav.component.html',
styleUrls: ['./app-nav.component.scss']
selector: 'app-nav',
templateUrl: './app-nav.component.html',
styleUrls: ['./app-nav.component.scss']
})
export class AppNavComponent {
@Input() path = '';
@Input() data: DataValue;
get folders(): { name: string; data: DataValue; }[] {
const list = [];
for (const i in this.data) {
if (i.match(/[^\d]+/)) {
list.push({
name: i,
data: this.data[i]
});
}
@Input() path = '';
@Input() data: DataValue;
get folders(): { name: string; data: DataValue; }[] {
const list = [];
for (const i in this.data) {
if (i.match(/[^\d]+/)) {
list.push({
name: i,
data: this.data[i]
});
}
}
return list;
}
return list;
}
get files(): { fileName: string; name: string; }[] {
const list = [];
for (const i in this.data) {
if (i.match(/[\d]+/)) {
list.push({
fileName: this.data[i],
name: (this.data[i] as string).replace('.json', '')
});
}
get files(): { fileName: string; name: string; }[] {
const list = [];
for (const i in this.data) {
if (i.match(/[\d]+/)) {
list.push({
fileName: this.data[i],
name: (this.data[i] as string).replace('.json', '')
});
}
}
return list;
}
return list;
}
constructor(private appService: AppService) { }
constructor(private appService: AppService) { }
action(path: string) {
this.appService.show(this.path + '/' + path);
}
action(path: string) {
this.appService.show(this.path + '/' + path);
}
}
......@@ -3,6 +3,9 @@
<app-nav [data]="data">
</app-nav>
</nav>
<h1>
Section
</h1>
<div>
<router-outlet></router-outlet>
</div>
......
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
app-root {
display: grid;
grid-template: [header-left] "nav title" auto [header-right]
[footer-left] "nav page" 1fr [footer-right] / 350px 1fr;
}
nav {
grid-area: nav;
}
h1 {
grid-area: title;
margin: 0;
padding: 10px 0;
}
div {
grid-area: page;
}
\ No newline at end of file
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { AppService, DataValue } from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
version = '0.1.0';
......
......@@ -3,6 +3,8 @@ import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { BcdData } from './browser-compat-data';
export type DataValue = (string | { [key: string]: DataValue })[];
const pattern = /\.\/([^\/]+)\/(.*)/;
......@@ -19,6 +21,7 @@ export class AppService {
browsers: string[] = [];
data: { [key: string]: DataValue } = {};
page: BcdData;
constructor(
private http: HttpClient
......@@ -85,11 +88,9 @@ export class AppService {
this.http
.get('./assets/browser-compat-data' + path, { responseType: 'json' })
.subscribe(
(data: any) => {
(data: BcdData) => {
console.log(data);
this.page = data;
},
() => { },
() => {
......
export interface BcdSupport {
version_added: boolean | string;
partial_implementation?: boolean;
notes?: string | string[];
}
export interface BcdSupport {
__compat: {
mdn_url: string;
description?: string;
status: {
deprecated: boolean;
experimental: boolean;
standard_track: boolean;
};
support: {
[key: string]: BcdSupport | BcdSupport[];
}
};
}
export interface BcdDataType {
[key: string]: BcdDataType;
}
export interface BcdData {
[key: string]: BcdDataType & BcdSupport;
}
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