Skip to content

Commit a2d8d43

Browse files
lahmatiylahmatiy
committed
Various fixes and improvements
1 parent ce23f3d commit a2d8d43

File tree

6 files changed

+53
-23
lines changed

6 files changed

+53
-23
lines changed

‎src/syntax/prepare.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-env browser */
22
/* global ga */
3-
const csstree = require('css-tree');
3+
import * as csstree from 'css-tree';
44
const { definitionSyntax } = csstree;
55
const functionSyntaxes = new WeakMap();
66

@@ -215,7 +215,8 @@ module.exports = function(data, { defineObjectMarker, addQueryHelpers, query })
215215
Object.entries(atrules).reduce(
216216
(res, [key, { descriptors }]) =>
217217
descriptors
218-
? res.concat(Object.entries(descriptors).map(([name, value]) => [key + '/' + name, value]))
218+
? res.concat(Object.entries(descriptors)
219+
.map(([name, value]) => [value.id = key + '/' + name, value]))
219220
: res,
220221
[]
221222
)
@@ -227,9 +228,9 @@ module.exports = function(data, { defineObjectMarker, addQueryHelpers, query })
227228
const markers = Object.fromEntries(Object.keys(typeDict).map(type => [
228229
type,
229230
defineObjectMarker(type, {
230-
refs: [value => `${value.type}:${value.name}`],
231-
lookupRefs: [value => `${value.type}:${value.name}`],
232-
ref: 'name',
231+
refs: [value => `${value.type}:${value.id || value.name}`],
232+
lookupRefs: [value => `${value.type}:${value.id || value.name}`],
233+
ref: value => value.id || value.name,
233234
title: obj => syntaxName(obj),
234235
page: type
235236
})

‎src/syntax/ui/page/default.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ discovery.page.define('default', [
5555
{
5656
title: 'CSSTree difference over mdn-data',
5757
query: '$csstree: dict\n .({ type, name, mdn: mdn().syntax, csstree: syntax(), patch: patch() })\n .[patch and csstree!="(generic)" and type!="Function"];\n$mdnRemoved: patch\n .(\n properties.entries().({ type: \'Property\', name: key, csstree: null, patch: value }).sort(name asc) + \n syntaxes.entries().({ type: \'Type\', name: key, csstree: null, patch: value }).sort(name asc)\n )\n .[no patch.syntax]\n .({ ..., mdn: mdn().syntax });\n($csstree + $mdnRemoved)\n.group(=>\n no csstree and no mdn ? \'Redundant remove\' :\n no csstree ? \'Removed\' :\n no mdn ? \'Added / mdn-data missed\' :\n mdn=csstree ? \'Redundant patch\' :\n \'Patched\'\n)',
58-
view: '{\n view: \'list\',\n item: {\n view: \'expand\',\n header: \'h3:key + " (" + value.size() + ")"\',\n content: {\n view: \'table\',\n data: \'value\',\n cols: [\n {\n header: \'Name\',\n content: {\n view: \'nowrap\',\n content: {\n view: \'auto-link\',\n fallback: \'text:formatName()\'\n }\n }\n },\n {\n header: \'Syntax\',\n content: {\n view: \'switch\',\n content: [\n {\n when: \'csstree and mdn\',\n content: [\n \'html:"<div style=color:#aaa;margin-bottom:5px>" + patch.comment\',\n \'diff-syntax:{ before: mdn, after: csstree }\'\n ]\n },\n {\n when: \'mdn and csstree\',\n content: {\n view: \'diff\',\n data: \'{before:mdn, after:csstree}\',\n type: \'char\'\n }\n },\n {\n content: [\n \'html:"<div style=color:#aaa;margin-bottom:5px>" + patch.comment\',\n \'syntax:{..., syntax: csstree or mdn}\'\n ]\n }\n ]\n }\n }\n ]\n }\n }\n}'
58+
view: '{\n view: \'list\',\n item: {\n view: \'expand\',\n header: \'h3:key + " (" + value.size() + ")"\',\n content: {\n view: \'table\',\n data: \'value\',\n cols: [\n {\n header: \'Name\',\n content: {\n view: \'nowrap\',\n content: {\n view: \'auto-link\',\n fallback: \'text:formatName()\'\n }\n }\n },\n {\n header: \'Syntax\',\n content: {\n view: \'switch\',\n content: [\n {\n when: \'csstree and mdn\',\n content: [\n \'html:"<div style=color:#aaa;margin-bottom:5px>" + (patch.comment ?? "")\',\n \'diff-syntax:{ before: mdn, after: csstree }\'\n ]\n },\n {\n when: \'mdn and csstree\',\n content: {\n view: \'diff\',\n data: \'{before:mdn, after:csstree}\',\n type: \'char\'\n }\n },\n {\n content: [\n \'syntax:{..., syntax: csstree or mdn}\',\n { view: \'html\', when: \'patch.comment\', data: \'"<div style=color:#888b;margin-top:5px>Note: " + patch.comment\' }\n ]\n }\n ]\n }\n }\n ]\n }\n }\n}'
5959
},
6060
{
6161
title: 'mdn-data syntax code style problems',

‎src/syntax/ui/page/syntax-page.css

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,23 @@
2525
.syntax-section > .view-syntax-tree,
2626
.syntax-section .view-tabs-content > .view-syntax,
2727
.syntax-section .view-tabs-content > .view-syntax-tree,
28-
.syntax-section .syntax-diff {
28+
.syntax-section .definition-syntax-diff {
2929
background: rgba(185, 185, 185, 0.1);
3030
padding: 10px;
3131
margin: 0 0 8px;
3232
font-size: 13px;
3333
font-family: Consolas, Menlo, Courier New, monospace;
3434
}
35-
.syntax-section .syntax-diff {
35+
.syntax-section .definition-syntax-diff {
3636
padding: 4px;
3737
}
38+
.syntax-section .definition-syntax-diff .syntax-diff {
39+
background: none;
40+
border-color: transparent;
41+
}
42+
.syntax-section .definition-syntax-diff .view-key-value-item > * {
43+
background: none;
44+
}
3845
.syntax-section > .view-syntax,
3946
.syntax-section .view-tabs-content > .view-syntax {
4047
display: block;
@@ -65,10 +72,18 @@
6572
white-space: nowrap;
6673
}
6774
.syntax-section .view-tabs-buttons-before {
68-
margin: -3px 3ex 0 -5px;
75+
margin: -3px 0 0 0;
76+
padding-right: 3ex;
6977
}
7078
.syntax-section .view-tabs-buttons-before .view-header {
71-
margin: 0;
79+
margin: 0 0 0 -10px;
80+
}
81+
.syntax-section .view-tabs-buttons-after .view-badge {
82+
display: inline-block;
83+
}
84+
.syntax-section .view-tabs-buttons-after .view-badge .prefix {
85+
display: inline-block;
86+
padding-top: 3px;
7287
}
7388
.syntax-section .view-tab {
7489
margin-top: -2px;

‎src/syntax/ui/page/syntax-page.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
const page = {
44
view: 'context',
5-
data: 'dict[=>type=#.page and name=#.id]',
5+
data: 'dict[=>type=#.page and (id=#.id or name=#.id)]',
66
content: [
77
{
88
view: 'page-header',
@@ -45,7 +45,7 @@ const page = {
4545
afterTabs: {
4646
view: 'badge',
4747
when: 'patch() and mdn()',
48-
data: '{ prefix: "Patched", color: "#f1eccb", text: patch().comment }'
48+
data: '{ prefix: "Patched", color: "#f1eccb", darkColor: "#5c5737", text: patch().comment or "no notes" }'
4949
},
5050
content: {
5151
view: 'switch',
@@ -60,7 +60,7 @@ const page = {
6060
] },
6161
{ content: {
6262
view: 'block',
63-
className: 'syntax-diff',
63+
className: 'definition-syntax-diff',
6464
content: 'diff-syntax:{ before: mdn().syntax, after: syntax() }'
6565
} }
6666
]

‎src/syntax/ui/sidebar.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
width: 300px;
33
}
44

5+
.discovery-sidebar .view-toc-section > .header {
6+
padding-top: 7px;
7+
padding-bottom: 10px;
8+
margin-top: -1px;
9+
}
10+
511
.discovery-sidebar .nested {
612
padding-left: 20px;
713
}

‎src/syntax/ui/view/key-value.css

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
.view-key-value {
2-
display: table;
3-
border-collapse: collapse;
4-
border: solid rgba(205, 205, 205, 0.1);
5-
border-width: 4px 8px;
2+
display: inline-grid;
3+
grid-template-columns: auto auto;
4+
background: rgba(205, 205, 205, 0.1);
5+
border: solid transparent;
6+
border-width: 4px 8px 2px;
67
margin: 1px 0;
8+
gap: 2px 0;
79
}
810

911
.view-key-value-item {
10-
display: table-row;
12+
display: contents;
1113
}
1214

1315
.view-key-value-item-key,
1416
.view-key-value-item-value {
15-
display: table-cell;
16-
background: rgba(205, 205, 205, 0.1);
17-
background-clip: padding-box;
18-
border-width: 0;
1917
border-bottom: 1px solid rgba(198, 198, 198, 0.3);
2018
}
2119

20+
.view-key-value-item:last-child > :is(.view-key-value-item-key, .view-key-value-item-value) {
21+
border: none;
22+
}
23+
2224
.view-key-value-item-key {
23-
padding: 2px 12px 2px 8px;
25+
padding: 2px 12px 5px 8px;
2426
font-size: 12px;
2527
color: #888;
2628
}
29+
.view-key-value-item-value {
30+
padding: 2px 8px 5px 0;
31+
}
32+
.view-key-value-item-value > .view-diff {
33+
display: contents;
34+
}
2735
.view-key-value-item-value > .view-struct {
2836
padding: 5px 4px;
2937
margin: 0;

0 commit comments

Comments
 (0)