honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): improve styling of completed Roadmap projects (#42620) 

This commit improves the styling of the "Completed projects" section of
the Roadmap by (a) making it consistent with the rest of the Roadmap
sections and (b) making it more similar with `<details>` elements on
other pages.

**Before:**
  _Collapsed:_ ![completed projects collapsed (before)][1]
  _Expanded:_ ![completed projects expanded (before)][2]
**After:**
  _Collapsed:_ ![completed projects collapsed (after)][3]
  _Expanded:_ ![completed projects expanded (after)][4]

[1]: https://user-images.githubusercontent.com/8604205/122917101-50c2ca00-d366-11eb-8348-01efd69cedf2.png
[2]: https://user-images.githubusercontent.com/8604205/122917109-515b6080-d366-11eb-9f18-c794fcea8dd1.png
[3]: https://user-images.githubusercontent.com/8604205/122917115-528c8d80-d366-11eb-947a-2d7da3950069.png
[4]: https://user-images.githubusercontent.com/8604205/122917117-53252400-d366-11eb-93e7-9384a7431c0d.png

PR Close #42620
This commit is contained in:
George Kalpakas 2021-06-22 21:48:13 +03:00 committed by Jessica Janiuk
parent fd78678284
commit e5b4b83778
3 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
aio/content/guide/roadmap.md
View File

@ -80,10 +80,16 @@ A long-standing feature request is to add the ability to add directives to host
A common problem with web applications is their slow initial load time. A way to improve it is to apply more granular code-splitting on a component level. To encourage this practice, we’ll be working on more ergonomic code-splitting APIs.
<details class="roadmap-done-details" open="true">
<summary class="roadmap-done-summary">
<details class="completed-details" open="true">
<summary>
<h2>Done</h2>
<span class="actions">
<span class="action-expand">Show all</span>
<span class="action-collapse">Hide all</span>
<i class="material-icons expand">expand_more</i>
</span>
</summary>
<div class="details-content">
### Accelerated debugging and performance profiling with Angular DevTools
@ -163,4 +169,5 @@ _Completed Q4 2020_
We are actively investing up to 50% of our engineering capacity on triaging issues and PRs until we have a clear understanding of broader community needs. After that, we'll commit up to 20% of our engineering capacity to keep up with new submissions promptly.
</div>
</details>

7
aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
View File

@ -1,11 +1,12 @@
@use 'sass:color';
@use 'sass:map';
@use '../../constants';
@mixin theme($theme) {
$is-dark-theme: map.get($theme, is-dark);
.roadmap-done-summary::marker {
color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
.page-guide-roadmap {
.completed-details {
border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
}
}
}

25
aio/src/styles/2-modules/roadmap/_roadmap.scss
View File

@ -1,13 +1,16 @@
.roadmap-done-details {
padding: 0 20px 20px;
margin: 0 -20px;
}
.page-guide-roadmap {
.completed-details {
box-shadow: none;
margin-top: 4rem;
padding: 4rem 0 2rem;
.roadmap-done-summary {
margin: 0 -20px;
font-size: 3.2rem;
height: 40px;
padding-bottom: 0;
display: list-item;
user-select: none;
> summary {
justify-content: space-between;
padding: 0;
}
> .details-content {
padding: 0;
}
}
}