Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 064b781

Browse files
jeff-matthewsjeff-matthews
authored
Merge pull request #223 from magento-devdocs/roadmap-work
Roadmap: Updates to template, data, and styles
2 parents ed615a4 + ba11e83 commit 064b781

File tree

2 files changed

+141
-157
lines changed

2 files changed

+141
-157
lines changed

‎src/_data/roadmap.yml

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,63 @@
1-
categories:
2-
- name: In progress
1+
roadmap:
2+
- name: In Progress
33
features:
44
- name: Framework updates (e.g. KnockoutJS, RequireJS, etc.)
5+
status: inProgress
56
- name: GraphQL - Admin configuration
7+
status: inProgress
68
- name: GraphQL - Caching updates
9+
status: inProgress
710
- name: jQuery 3.6.x support
11+
status: inProgress
812
- name: OpenSearch 1.x support
13+
status: inProgress
914
- name: PayPal and Braintree updates
15+
status: inProgress
16+
type: Extension
1017
- name: PHP 8.1 support
18+
status: inProgress
1119
- name: PWA - Global theming/styling
20+
status: inProgress
1221
- name: PWA - Custom product attributes
22+
status: inProgress
1323
- name: PWA - Performance optimizations
24+
status: inProgress
1425
- name: PWA - Shopping and cart improvements
26+
status: inProgress
1527
- name: Security and quality improvements
28+
status: inProgress
1629
- name: Vendor Bundled Extensions (VBEs) – Updates
30+
status: inProgress
31+
type: Extension
1732
- name: Planned
1833
features:
1934
- name: Accelerated checkout powered by Bolt (extension)
35+
status: Planned
36+
type: Extension
2037
- name: Accessibility improvements for storefront/admin
38+
status: Planned
2139
- name: Framework updates (e.g. KnockoutJS, RequireJS, etc.)
40+
status: Planned
2241
- name: GraphQL - Personalization updates
42+
status: Planned
2343
- name: GraphQL - Page Builder improvements
44+
status: Planned
2445
- name: GraphQL - Inventory improvements
25-
- name: Walmart Marketplace (extension)
46+
status: Planned
2647
- name: Page Builder - Mobile layout optimization
48+
status: Planned
2749
- name: Page Builder - Column grid layouts (viewports)
50+
status: Planned
2851
- name: Payment services (extension)
52+
status: Planned
2953
- name: PWA - Server-side rendering (SSR)
54+
status: Planned
3055
- name: PWA - Extensibility improvements (payment/ship)
56+
status: Planned
3157
- name: PWA - Bundle product type
58+
status: Planned
3259
- name: Security and quality improvements
60+
status: Planned
61+
- name: Walmart Marketplace (extension)
62+
status: Planned
63+
type: Extension

‎src/_includes/roadmap.md

Lines changed: 107 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,179 +1,132 @@
1-
<!-- {% assign categories = include.data.categories %}
2-
{% if include.categories %}
3-
{% assign categories = include.data.categories | where: "name", include.categories %}
4-
{% endif %} -->
5-
6-
<!-- <table class="status-table">
7-
<tbody>
8-
<tr class="category-name">
9-
<th>In progress</th>
10-
<th>Planned</th>
11-
</tr>
12-
{% for categories in categories %}
13-
{% for categoryFeature in categories.features %}
14-
<tr class="category-feature">
15-
{% if categories.name == "In progress" %}
16-
<td>{{ categoryFeature.name }}</td>
17-
<td></td>
18-
{% elsif categories.name == "Planned" %}
19-
<td></td>
20-
<td>{{ categoryFeature.name }}</td>
21-
{% endif %}
22-
</tr>
1+
{% assign roadmap = include.data.roadmap %}
2+
{% if include.roadmap %}
3+
{% assign roadmap = include.data.roadmap | where: "name", include.roadmap %}
4+
{% endif %}
5+
6+
![Extension icon]({{ site.baseurl }}/common/images/Smock_Extension_18_N.svg) — Indicates extensions available on the Commerce Marketplace.
7+
8+
<table class="roadmap-table">
9+
<tr class="roadmap-header">
10+
{% for roadmap in roadmap %}
11+
<th>{{roadmap.name}}</th>
2312
{% endfor %}
13+
</tr>
14+
<tr>
15+
{% for roadmap in roadmap %}
16+
<td class="table-container">
17+
<table class="inner-table">
18+
{% for roadmapFeature in roadmap.features %}
19+
<tr class="inner-row"><td class="inner-cell">{{ roadmapFeature.name }}<span class="icon {{ roadmapFeature.type }}"></span></td></tr>
20+
{% endfor %}
21+
</table>
22+
</td>
2423
{% endfor %}
25-
</tbody>
26-
</table> -->
27-
28-
<table class="status-table">
29-
<tbody>
30-
<tr class="category-name">
31-
<th>In progress</th>
32-
<th>Planned</th>
33-
</tr>
34-
<tr class="category-feature">
35-
<td>Framework updates (e.g. KnockoutJS, RequireJS, etc.)</td>
36-
<td>Accelerated checkout powered by Bolt (extension) <img src="{{ site.baseurl }}/common/images/Smock_Extension_18_N.svg"></td>
37-
</tr>
38-
<tr class="category-feature">
39-
<td>GraphQL - Admin configuration</td>
40-
<td>Accessibility improvements for storefront/admin</td>
41-
</tr>
42-
<tr class="category-feature">
43-
<td>GraphQL - Caching updates</td>
44-
<td>Framework updates (e.g. KnockoutJS, RequireJS, etc.)</td>
45-
</tr>
46-
<tr class="category-feature">
47-
<td>jQuery 3.6.x support</td>
48-
<td>GraphQL - Personalization updates</td>
49-
</tr>
50-
<tr class="category-feature">
51-
<td>OpenSearch 1.x support</td>
52-
<td>GraphQL - Page Builder improvements</td>
53-
</tr>
54-
<tr class="category-feature">
55-
<td>PayPal and Braintree updates <img src="{{ site.baseurl }}/common/images/Smock_Extension_18_N.svg"></td>
56-
<td>GraphQL - Inventory improvements</td>
57-
</tr>
58-
<tr class="category-feature">
59-
<td>PHP 8.1 support</td>
60-
<td>Page Builder - Mobile layout optimization</td>
61-
</tr>
62-
<tr class="category-feature">
63-
<td>PWA - Global theming/styling</td>
64-
<td>Page Builder - Column grid layouts (viewports)</td>
65-
</tr>
66-
<tr class="category-feature">
67-
<td>PWA - Custom product attributes</td>
68-
<td>Payment services (extension) <img src="{{ site.baseurl }}/common/images/Smock_Extension_18_N.svg"></td>
69-
</tr>
70-
<tr class="category-feature">
71-
<td>PWA - Performance optimizations</td>
72-
<td>PWA - Server-side rendering (SSR)</td>
73-
</tr>
74-
<tr class="category-feature">
75-
<td>PWA - Shopping and cart improvements</td>
76-
<td>PWA - Extensibility improvements (payment/ship)</td>
77-
</tr>
78-
<tr class="category-feature">
79-
<td>Security and quality improvements</td>
80-
<td>PWA - Bundle product type</td>
81-
</tr>
82-
<tr class="category-feature">
83-
<td>Vendor Bundled Extensions (VBEs) – Updates <img src="{{ site.baseurl }}/common/images/Smock_Extension_18_N.svg"></td>
84-
<td>Security and quality improvements</td>
85-
</tr>
86-
<tr class="category-feature">
87-
<td></td>
88-
<td>Walmart Marketplace (extension) <img src="{{ site.baseurl }}/common/images/Smock_Extension_18_N.svg"></td>
89-
</tr>
90-
</tbody>
24+
</tr>
9125
</table>
9226

93-
![Extension icon]({{ site.baseurl }}/common/images/Smock_Extension_18_N.svg) Indicates extensions available on the Commerce Marketplace.
94-
9527
<style>
96-
/***Table***/
9728

98-
.status-table {
99-
table-layout: fixed;
100-
}
29+
/****************/
30+
/*****Tables*****/
31+
/****************/
10132

102-
/***Rows***/
33+
/***Main Table***/
34+
table.roadmap-table {
35+
padding: 1rem;
36+
margin: 0;
37+
border: 1px solid #ddd;
38+
}
10339

104-
.category-feature {
105-
transition: all .2s;
106-
height: 26px;
40+
/***Inner Tables**/
41+
table.roadmap-table tr td.table-container table.inner-table {
42+
padding: 0.5rem;
43+
margin: 0;
44+
border: none;
10745
}
10846

109-
.category-feature:hover {
110-
background: rgba(20,115,230,10%);
47+
/*****************/
48+
/*****Headers*****/
49+
/*****************/
50+
51+
/***Main Table Header***/
52+
table.roadmap-table tr.roadmap-header th {
53+
padding: .7rem;
54+
margin: 0;
55+
border-bottom: 1px solid #ddd;
56+
text-align: left;
57+
background-color: #f1f1f1;
58+
font-weight: bold;
59+
color: #333;
60+
font-size: 1rem;
11161
}
11262

113-
tbody tr.category-feature:last-child td {
114-
padding-bottom: 5px;
63+
/**************/
64+
/*****Rows*****/
65+
/**************/
66+
67+
/***Main Table Row***/
68+
table.roadmap-table tr {
69+
padding: 0.7rem;
70+
margin-left: 1rem;
71+
border-collapse: collapse;
72+
}
73+
table.roadmap-table tr:hover {
74+
background-color: #fff;
11575
}
11676

117-
/***Columns***/
77+
/***Inner Table Rows***/
78+
table.roadmap-table tr td.table-container table.inner-table tr.inner-row {
79+
padding: 0.7rem;
80+
margin: 0;
81+
border-bottom: 1px solid #ddd;
82+
}
11883

119-
.category-name th {
120-
padding: 10px;
121-
font-size: 14px !important;
122-
font-weight: bold;
123-
color: black;
124-
background-color: #f1f1f1;
84+
/***************/
85+
/*****Cells*****/
86+
/***************/
87+
88+
/***Main Table Cell***/
89+
table.roadmap-table tr td.table-container {
90+
padding: 0;
91+
margin: 0;
92+
border: none;
93+
border-collapse: collapse;
94+
min-height: 100%;
12595
}
12696

127-
/*.category-name th:nth-child(1) {
128-
width: 100%;
97+
table.roadmap-table tr td.table-container {
98+
border-right: 1px solid #ddd;
12999
}
130100

131-
.category-name th:nth-child(2) {
132-
width: 90px;
133-
text-align: center;
134-
} */
101+
/***Inner Table Cell***/
102+
table.roadmap-table tr td.table-container table.inner-table tr.inner-row td.inner-cell {
103+
margin: 0;
104+
padding: 0.8rem;
105+
border-collapse: collapse;
106+
font-size: 1.1rem;
107+
border: none;
108+
}
135109

136-
/***Cells***/
110+
/***************/
111+
/*****Icons*****/
112+
/***************/
137113

138-
.category-feature td {
139-
padding: 10px;
114+
.icon {
115+
height: 18px;
116+
font-size: 14px;
117+
font-weight: 400;
118+
padding: 5px 0;
140119
}
141120

142-
/*.category-feature td:nth-child(2) {
143-
text-align: center;
144-
}*/
145-
146-
/***Icons***/
147-
148-
.status {
149-
height: 32px;
150-
font-size: 14px;
151-
font-weight: 400;
152-
}
153-
154-
.status::before {
155-
content: '';
156-
display: inline-block;
157-
width: 8px;
158-
height: 8px;
159-
border-radius: 50%;
160-
margin: 0 12px;
161-
}
162-
163-
.status.complete::before {
164-
background: rgb(45, 157, 120);
165-
}
166-
167-
.status.in-progress::before {
168-
background: rgb(230, 134, 25);
169-
}
170-
171-
.status.planned {
172-
font-style: italic;
173-
}
174-
175-
.status.planned::before {
176-
background: rgb(179, 179, 179);
177-
}
121+
.icon.Extension::before {
122+
display: inline-block;
123+
content: '';
124+
background-image: url({{ site.baseurl }}/common/images/Smock_Extension_18_N.svg);
125+
background-size: 16px 16px;
126+
height: 16px;
127+
width: 16px;
128+
margin-left: 5px;
129+
margin-bottom: -2px;
130+
}
178131

179132
</style>

0 commit comments

Comments
 (0)