Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
angular
web-table
Commits
ac8bc9e1
Commit
ac8bc9e1
authored
Apr 14, 2019
by
Zéfling
🎨
Browse files
Basic CSS + browser-compat-data Interfaces
parent
5078bd2f
Changes
7
Hide whitespace changes
Inline
Side-by-side
src/app/app-nav.component.scss
View file @
ac8bc9e1
ul
{
padding-left
:
20px
;
}
.folder
>
div
{
font-weight
:
bold
;
}
.file
{
&
:hover
{
background-color
:
antiquewhite
;
cursor
:
pointer
;
}
}
\ No newline at end of file
src/app/app-nav.component.ts
View file @
ac8bc9e1
...
...
@@ -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
;
}
r
et
urn
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
'
,
''
)
});
}
g
et
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
);
}
}
src/app/app.component.html
View file @
ac8bc9e1
...
...
@@ -3,6 +3,9 @@
<app-nav
[data]=
"data"
>
</app-nav>
</nav>
<h1>
Section
</h1>
<div>
<router-outlet></router-outlet>
</div>
...
...
src/app/app.component.scss
View file @
ac8bc9e1
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
src/app/app.component.ts
View file @
ac8bc9e1
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
'
;
...
...
src/app/app.service.ts
View file @
ac8bc9e1
...
...
@@ -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
;
},
()
=>
{
},
()
=>
{
...
...
src/app/browser-compat-data.ts
0 → 100644
View file @
ac8bc9e1
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
;
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment