Skip to content

Commit 8414c43

Browse files
lahmatiylahmatiy
committed
Tweak styles and adoption for latest discovery
1 parent b5843ce commit 8414c43

20 files changed

+134
-68
lines changed

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"dependencies": {},
1717
"devDependencies": {
18-
"@discoveryjs/discovery": "1.0.0-beta.50",
18+
"@discoveryjs/discovery": "1.0.0-beta.51",
1919
"@discoveryjs/cli": "^1.15.0",
2020
"css-tree": "^1.0.1",
2121
"git-repo-info": "^2.1.0"

‎ui/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = {
1111
},
1212
assets: [
1313
'./page/common.css',
14+
'./page/default.css',
1415
'./page/default.js',
1516
'./page/def.js',
1617
'./page/def.css',

‎ui/page/common.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,13 @@
1414
padding: 5px 8px 6px;
1515
margin: -3px 6px -3px -8px;
1616
}
17+
18+
.discovery-root-darkmode .view-badge,
19+
.discovery-root-darkmode .view-pill-badge {
20+
background-image: linear-gradient(0deg, #242424a0, #242424a0);
21+
opacity: .65;
22+
}
23+
24+
.page td:first-child {
25+
white-space: nowrap;
26+
}

‎ui/page/def.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,15 @@ discovery.page.define('def', {
1717
view: 'context',
1818
data: 'defs.pick(<id = #.id>)',
1919
content: [
20-
`badge:{
21-
text: source.spec.props.title,
22-
href: source.spec.id.pageLink("spec"),
23-
color: "#fae2ec"
24-
}`,
25-
'h1:props.name',
20+
{
21+
view: 'page-header',
22+
prelude: `badge:{
23+
text: source.spec.props.title,
24+
href: source.spec.id.pageLink("spec"),
25+
color: "rgba(237, 177, 9, 0.35)"
26+
}`,
27+
content: 'h1:props.name'
28+
},
2629
definitionConfig,
2730
{
2831
view: 'context',

‎ui/page/default.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.page-default .source {
2+
color: #888;
3+
opacity: .8;
4+
font-size: 12px;
5+
}
6+
.page-default .view-indicator .value {
7+
font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
8+
font-weight: 100;
9+
}

‎ui/page/default.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
/* global discovery */
22

33
discovery.page.define('default', [
4-
'h1:#.name',
54
{
6-
view: 'h5',
5+
view: 'page-header',
76
content: [
8-
'text:"Source: "',
9-
'link:{ href: source.home, text: "w3c/csswg-drafts" }',
10-
'text:" commit " + source.commitShort + " on " + source.commitDate'
7+
'h1:#.name',
8+
{
9+
view: 'block',
10+
className: 'source',
11+
content: [
12+
'text:"Source: "',
13+
'link:{ href: source.home, text: "w3c/csswg-drafts" }',
14+
'text:" commit "',
15+
{ view: 'link', data: '{ text: source.commitShort, href: `${source.home}commit/${source.commit}` }' },
16+
{ view: 'text', when: 'source.commitDate', data: '" on " + source.commitDate' },
17+
'text:`, updated at ${#.createdAt.datetime()}`'
18+
]
19+
}
1120
]
1221
},
1322
{
@@ -52,7 +61,7 @@ discovery.page.define('default', [
5261
{
5362
title: 'IDL sections by spec',
5463
query: 'idls.group(<source.spec>).sort(<key.props.title>)',
55-
view: '{\n view: \'list\',\n item: [\n \'h1:key.props.title\',\n {\n view: \'list\',\n data: \'value\',\n item: {\n view: \'definition\',\n content: \'source:{content}\'\n }\n }\n ]\n}'
64+
view: '{\n view: \'list\',\n item: [\n \'h2:key.props.title\',\n {\n view: \'list\',\n data: \'value\',\n item: {\n view: \'definition\',\n content: \'source:{content}\'\n }\n }\n ]\n}'
5665
}
5766
]
5867
}

‎ui/page/defs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ discovery.page.define('defs', {
22
view: 'context',
33
data: '(defs + prods).[name = #.id]',
44
content: [
5-
'h1:props.name',
5+
'h1:name',
66
{
77
view: 'list',
88
item: {

‎ui/page/prod.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
discovery.page.define('prod', {
22
view: 'context',
3-
data: 'prods.pick(<id = #.id>)',
3+
data: 'prods[=>id = #.id]',
44
content: [
5-
`badge:{
6-
text: source.spec.props.title,
7-
href: source.spec.id.pageLink("spec"),
8-
color: "#fae2ec"
9-
}`,
10-
'h1:"<" + name + ">"',
5+
{
6+
view: 'page-header',
7+
prelude: `badge:{
8+
text: source.spec.props.title,
9+
href: source.spec.id.pageLink("spec"),
10+
color: "rgba(237, 177, 9, 0.35)"
11+
}`,
12+
content: 'h1:`<${name}>`'
13+
},
1114
'syntax:value',
1215
'h5:"Defined in: " + source.spec.file + " on line " + source.line',
1316
{

‎ui/page/spec.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
discovery.page.define('spec', {
22
view: 'context',
3-
data: `specs.pick(<id = #.id>).($spec:$;{
3+
data: `specs[=>id = #.id].({
4+
$spec:$;
5+
46
...,
57
defs: @.defs.[source.spec = $spec],
68
idls: @.idls.[source.spec = $spec]
79
})`,
810
content: [
9-
'h1:props.title',
11+
{
12+
view: 'page-header',
13+
prelude: 'badge:props | { text: status, color: status.color() }',
14+
content: 'h1:props.title'
15+
},
1016
{
1117
view: 'definition',
1218
content: {
1319
view: 'key-value',
1420
data: 'props',
15-
limit: 10,
21+
limit: '=size() > 13 and 10',
1622
value: {
1723
view: 'switch',
1824
content: [
1925
{ when: 'key="status"', content: 'badge:{ text: value, color: value.color() }'},
20-
{ when: 'key in ["ed", "tr"]', content: { view:'pre', content: 'link:{ href: value, external: true }' } },
26+
{ when: 'key in ["ed", "tr"]', content: { view: 'pre', content: 'link:{ href: value, external: true }' } },
2127
{ when: 'value.isArray() and value', content: { view: 'ul', data: 'value', item: 'pre' } },
2228
{ content: 'pre:value' }
2329
]

‎ui/prepare.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const TZ = new Date().getTimezoneOffset() * 60 * 1000;
2+
13
function generateColor(value) {
24
return 'hsl(' + String(value).split('').reduce((r, c) => (r + r ^ c.charCodeAt(0)), 0) + ', 50%, 85%)';
35
}
@@ -103,6 +105,7 @@ discovery.setPrepare(function(data, { defineObjectMarker, addQueryHelpers }) {
103105
addQueryHelpers({
104106
isArray: value => Array.isArray(value),
105107
color: value => colorMap.has(value) ? colorMap.get(value) : generateColor(value),
108+
datetime: value => new Date(value - TZ).toISOString().replace(/T/, ' ').replace(/\..+$/, ''),
106109
syntaxChildren(current) {
107110
const children = [];
108111

‎ui/view/def.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.view-def {
22
padding: 4px 12px;
33
margin: 1px 0;
4-
border: 1px solid #f0f0f0;
4+
border: 1px solid rgba(217, 217, 217, 0.4);
55
line-height: 2;
66
}
77
.view-def .header {
@@ -10,8 +10,6 @@
1010
.view-def .header .view-link + .view-badge {
1111
font-size: 12px;
1212
margin-left: 1ex;
13-
background: #d8e1f3;
14-
color: #4869a9;
1513
}
1614
.view-def .view-spec-location {
1715
font-size: 12px;

‎ui/view/definition.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
.view-definition {
2-
border: 1px solid #d1e2ec;
2+
border: 1px solid rgba(101, 158, 191, 0.3);
33
border-radius: 4px;
4+
overflow: hidden;
45
padding: 2px;
56
margin-bottom: .5em;
67
}
78
.view-definition > .view-header {
8-
background: #e3f3fb;
9+
background: rgba(115, 195, 235, 0.2);
910
margin: -2px;
1011
margin-bottom: 2px;
1112
padding: 4px 18px;

‎ui/view/key-value.css

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
.view-key-value {
2-
display: table;
3-
border-collapse: collapse;
4-
border: solid #fafafa;
5-
border-width: 4px 8px;
2+
display: grid;
3+
grid-template-columns: auto 1fr;
4+
grid-template-rows: auto;
65
margin: 1px 0;
7-
}
8-
9-
.view-key-value-item {
10-
display: table-row;
6+
padding: 4px 8px;
7+
background-color: rgba(155, 155, 155, 0.05);
118
}
129

1310
.view-key-value-item-key,
1411
.view-key-value-item-value {
15-
display: table-cell;
16-
background: #fafafa;
17-
background-clip: padding-box;
1812
border-width: 0;
19-
border-bottom: 1px solid #eee;
2013
font-size: 12px;
2114
}
15+
.view-key-value-item-key ~ .view-key-value-item-key,
16+
.view-key-value-item-value ~ .view-key-value-item-value {
17+
border-top: 1px solid rgba(187, 187, 187, 0.25);
18+
}
2219

2320
.view-key-value-item-key {
2421
padding: 2px 12px 2px 8px;
2522
color: #888;
2623
}
24+
.view-key-value-item-value {
25+
padding: 2px 0;
26+
}
2727
.view-key-value-item-value > .view-struct {
2828
padding: 5px 4px;
2929
margin: 0;
3030
}
31+
32+
.view-key-value .more-buttons {
33+
grid-column: 1/3;
34+
}

‎ui/view/key-value.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ discovery.view.define('key-value-item', function(el, config, data, context) {
1111

1212
valueEl.className = 'view-key-value-item-value';
1313
this.render(valueEl, value, data, context);
14-
});
14+
}, { tag: null });
1515

1616
discovery.view.define('key-value', function(el, config, data, context) {
1717
const { itemConfig, key, value, limit } = config;

‎ui/view/sidebar.css

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
}
44

55
.discovery-sidebar .view-toc-section > .header {
6-
overflow: hidden;
7-
white-space: nowrap;
8-
text-overflow: ellipsis;
6+
display: flex;
97
text-transform: none;
108
}
119
.discovery-sidebar .view-toc-section.empty > .content {
@@ -14,15 +12,36 @@
1412

1513
.discovery-sidebar .header > .view-link {
1614
color: #dd0077;
17-
text-decoration-color: #f2aecb;
15+
text-decoration-color: #dd007763;
16+
white-space: nowrap;
17+
overflow: hidden;
18+
text-overflow: ellipsis;
19+
}
20+
.discovery-root-darkmode .discovery-sidebar .header > .view-link {
21+
color: #b74884;
22+
text-decoration-color: #b7488480;
1823
}
1924
.discovery-sidebar .header > .view-link:hover {
2025
text-decoration-color: currentColor;
2126
}
2227

2328
.discovery-sidebar .view-badge {
2429
font-size: 11px;
25-
color: #4869a9;
30+
color: #635d33;
31+
background-color: rgba(182, 167, 60, 0.4);
32+
opacity: .5;
33+
margin-left: 3px;
34+
}
35+
.discovery-root-darkmode .discovery-sidebar .view-badge {
36+
color: #dcd7ad;
37+
background-image: none;
38+
}
39+
40+
.discovery-sidebar .variants {
41+
display: inline-block;
42+
margin: 0 4px;
43+
color: #888;
44+
font-size: 12px;
2645
}
2746

2847
.view-link + .view-pill-badge,

‎ui/view/sidebar.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
discovery.view.define('sidebar', {
22
view: 'tabs',
33
name: 'splitBy',
4+
beforeTabs: 'text:"Definitions"',
45
tabs: [
56
{ value: 'byspec', text: 'By spec' },
6-
{ value: 'byentry', text: 'Index' }
7+
{ value: 'byentry', text: 'Alphabetically' }
78
],
89
content: {
910
view: 'content-filter',
@@ -51,7 +52,7 @@ discovery.view.define('sidebar', {
5152
view: 'auto-link',
5253
content: 'text-match:{ text, match: #.filter }'
5354
},
54-
'badge:{ text: type, color: "#d8e1f3" }'
55+
'badge:type'
5556
]
5657
}
5758
}
@@ -64,7 +65,7 @@ discovery.view.define('sidebar', {
6465
limit: 100,
6566
data: `
6667
(defs + prods)
67-
.[no #.filter or name ~= #.filter]
68+
.[name ~= #.filter]
6869
.group(=>name)
6970
.({
7071
id: key,
@@ -85,14 +86,15 @@ discovery.view.define('sidebar', {
8586
content: 'text-match'
8687
},
8788
{
88-
view: 'pill-badge',
89+
view: 'block',
90+
className: 'variants',
8991
when: 'count > 1',
90-
data: '{ text: count }'
92+
content: 'text:`x ${count}`'
9193
},
9294
{
9395
view: 'inline-list',
9496
data: 'type',
95-
item: 'badge:{ text: $, color: "#d8e1f3" }'
97+
item: 'badge'
9698
}
9799
]
98100
}

‎ui/view/spec-location.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55
.view-spec-location a {
66
color: #888;
7-
text-decoration-color: #ddd;
7+
text-decoration-color: rgba(170, 170, 170, 0.4);
88
}
99
.view-spec-location a:hover {
1010
text-decoration-color: currentColor;

0 commit comments

Comments
 (0)