Skip to content

Commit bf58edc

Browse files
reakaleekreakaleek
committed
New applies_to tags styling
1 parent 1440a52 commit bf58edc

File tree

9 files changed

+114
-93
lines changed

9 files changed

+114
-93
lines changed

‎docs/syntax/applies.md‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -422,9 +422,37 @@ applies_to:
422422

423423
This allows you to annotate various facets as defined in [](../migration/versioning.md)
424424

425-
## Inline Examples
425+
## Look and feel
426426

427-
### Stack
427+
### Block
428+
429+
```{applies_to}
430+
stack: preview 9.1
431+
serverless: planned
432+
433+
apm_agent_dotnet: ga 1.0.0
434+
apm_agent_java: beta 1.0.0
435+
edot_dotnet: preview 1.0.0
436+
edot_python:
437+
edot_node: ga 1.0.0
438+
elasticsearch: preview 9.0.0
439+
security: removed 9.0.0
440+
observability: deprecated 9.0.0
441+
```
442+
443+
### Inline
444+
445+
#### In text
446+
447+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam. Mauris sed eleifend erat,
448+
sit amet auctor odio. Donec ac placerat nunc. {applies_to}`stack: preview` Aenean scelerisque viverra lectus
449+
nec dignissim. Vestibulum ut felis nec massa auctor placerat. Maecenas vel dictum.
450+
451+
- {applies_to}`elasticsearch: preview` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam. Mauris sed eleifend erat, sit amet auctor odio. Donec ac placerat nunc.
452+
- {applies_to}`observability: preview` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam.
453+
- {applies_to}`security: preview` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut libero diam. Mauris sed eleifend erat, sit amet auctor odio. Donec ac placerat nunc. Aenean scelerisque viverra lectus nec dignissim.
454+
455+
#### Stack
428456

429457
| `applies_to` | result |
430458
|--------------------------------------------|--------------------------------------|
@@ -455,7 +483,7 @@ This allows you to annotate various facets as defined in [](../migration/version
455483
| `` {applies_to}`stack: removed 9.1` `` | {applies_to}`stack: removed 9.1` |
456484
| `` {applies_to}`stack: removed 99.0` `` | {applies_to}`stack: removed 99.0` |
457485

458-
### Serverless
486+
#### Serverless
459487

460488
| `applies_to` | result |
461489
|-------------------------------------------------|-------------------------------------------|

‎docs/testing/req.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,26 @@
1+
---
2+
applies_to:
3+
stack: preview 9.0, ga 9.1
4+
---
5+
16
# Requirements
27

8+
```{applies_to}
9+
stack: preview 9.0, ga 9.1
10+
```
11+
12+
13+
{applies_to}`stack: preview 9.0` This tutorial is based on Elasticsearch 9.0.
14+
This tutorial is based on Elasticsearch 9.0. This tutorial is based on Elasticsearch 9.0.
15+
This tutorial is based on Elasticsearch 9.0.
16+
17+
what
18+
19+
320
To follow this tutorial you will need to install the following components:
421

22+
23+
524
- An installation of Elasticsearch, based on our hosted [Elastic Cloud](https://www.elastic.co/cloud) service (which includes a free trial period), or a self-hosted service that you run on your own computer. See the Install Elasticsearch section above for installation instructions.
625
- A [Python](https://python.org) interpreter. Make sure it is a recent version, such as Python 3.8 or newer.
726

‎src/Elastic.Documentation.Site/Assets/markdown/applies-to.css‎

Lines changed: 39 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,53 @@
11
@layer components {
2-
.applies,
3-
.applies-inline {
2+
.applies {
43
cursor: default;
4+
5+
@apply text-subdued;
56

67
[data-tippy-content]:not([data-tippy-content='']) {
7-
cursor: help;
8-
border-radius: 9999px;
9-
&:hover {
10-
text-decoration: underline;
11-
}
12-
}
13-
14-
.applicable-meta-removed {
15-
color: var(--color-red-90);
16-
}
17-
.applicable-meta-ga {
18-
color: var(--color-green-90);
19-
}
20-
.applicable-meta-technical-preview {
21-
color: var(--color-blue-elastic-80);
8+
@apply cursor-help;
229
}
23-
.applicable-meta-deprecated {
24-
color: var(--color-pink-90);
25-
}
26-
.applicable-meta-beta {
27-
color: var(--color-poppy-90);
28-
}
29-
.applicable-meta-planned {
30-
color: var(--color-grey-90);
31-
}
32-
}
33-
34-
.applies {
35-
@apply font-sans;
36-
border-bottom: 1px solid var(--color-grey-20);
37-
padding-bottom: calc(var(--spacing) * 3);
38-
font-variant: all-petite-caps;
39-
10+
4011
.applicable-info {
41-
padding: calc(var(--spacing) * 0.5);
42-
padding-left: calc(var(--spacing) * 2);
43-
padding-right: calc(var(--spacing) * 2);
44-
margin: calc(var(--spacing) * 0.5);
45-
display: inline-block;
46-
font-size: 0.8em;
47-
border-radius: 0.4em;
48-
background-color: var(--color-white);
49-
border: 1px solid var(--color-grey-20);
50-
}
51-
.applicable-version {
52-
font-weight: bold;
53-
margin-left: calc(var(--spacing) * 0.5);
54-
font-variant: none;
55-
font-size: 0.87em;
12+
@apply bg-white
13+
border-[1px]
14+
inline-grid
15+
grid-cols-[auto_1fr_auto]
16+
border-grey-20
17+
cursor-default
18+
pt-1.5
19+
pb-1.5
20+
pl-3
21+
pr-3
22+
rounded-full
23+
;
24+
}
25+
26+
.applicable-name, .applicable-meta {
27+
@apply text-xs text-nowrap;
5628
}
57-
.applicable-lifecycle {
58-
font-weight: bold;
29+
30+
.applicable-separator {
31+
width: 1px;
32+
height: 100%;
33+
background-color: var(--color-grey-20);
34+
margin-left: calc(var(--spacing) * 2);
35+
margin-right: calc(var(--spacing) * 2)
5936
}
6037
}
61-
.applies-inline {
62-
@apply font-sans;
63-
font-variant: all-petite-caps;
38+
39+
.applies.applies-block {
40+
@apply border-b-grey-20 border-b-1 pb-4 flex flex-wrap gap-2;
41+
}
42+
43+
.applies.applies-inline {
44+
display: inline-block;
45+
vertical-align: bottom;
6446
.applicable-info {
65-
cursor: default;
66-
padding: calc(var(--spacing) * 0.5);
67-
padding-left: calc(var(--spacing) * 2);
68-
padding-right: calc(var(--spacing) * 2);
69-
margin-left: calc(var(--spacing) * 0.5);
70-
margin-right: calc(var(--spacing) * 0.5);
71-
display: inline-block;
72-
font-size: 0.8em;
73-
border-radius: 0.4em;
74-
background-color: var(--color-white);
75-
border: 1px solid var(--color-grey-20);
76-
font-weight: normal;
77-
}
78-
.applicable-version {
79-
font-weight: bold;
80-
margin-left: calc(var(--spacing) * 0.5);
81-
font-variant: none;
82-
font-size: 0.87em;
47+
@apply pt-1 pb-1 pl-1.5 pr-1.5 rounded-sm;
8348
}
84-
.applicable-lifecycle {
85-
font-weight: bold;
49+
.applicable-name, .applicable-meta {
50+
font-size: 0.65em;
8651
}
8752
}
8853
}

‎src/Elastic.Documentation.Site/Assets/theme.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
--color-ink: #343741;
2424
--color-ink-light: #535966;
2525
--color-ink-dark: #1c1e23;
26+
--color-subdued: #516381;
2627

2728
--color-blue-sky: #36b9ff;
2829
--color-blue-midnight: #20377d;

‎src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@if (appliesTo.Stack is not null)
1212
{
1313
@RenderProduct(
14-
"Elastic Stack",
14+
"Stack",
1515
"Part of the versioned Elastic Stack\n\nAvailable in ECH, ECE, ECK, and self-managed deployments, unless otherwise stated",
1616
VersioningSystemId.Stack,
1717
appliesTo.Stack
@@ -206,27 +206,35 @@
206206

207207
var badgeTextChanged = badgeText != name;
208208
<span class="applicable-info">
209-
<span class="applicable-name" data-tippy-content="@description">@name</span>
210-
<span class="applicable-meta applicable-meta-@lifecycleClass" data-tippy-content="@lifecycleTooltip">
211-
@if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable && !badgeTextChanged)
212-
{
213-
<span class="applicable-lifecycle applicable-lifecycle-@lifecycleClass">@applicability.GetLifeCycleName()</span>
209+
<span class="applicable-name" data-tippy-content="@description">@name</span>
210+
211+
@{
212+
var showLifeCycle = applicability.Lifecycle != ProductLifecycle.GenerallyAvailable && !badgeTextChanged;
213+
var showVersion = applicability.Version is not null and not AllVersions;
214214
}
215-
@if (applicability.Version is not null and not AllVersions)
215+
216+
@if (showLifeCycle || showVersion)
216217
{
217-
@if (versioningSystem.Current >= applicability.Version)
218+
<span class="applicable-separator"></span>
219+
}
220+
<span class="applicable-meta applicable-meta-@lifecycleClass" data-tippy-content="@lifecycleTooltip">
221+
@if (showLifeCycle)
222+
{
223+
<span class="applicable-lifecycle applicable-lifecycle-@lifecycleClass">@applicability.GetLifeCycleName()</span>
224+
}
225+
@if (showVersion)
226+
{
227+
@if (versioningSystem.Current >= applicability.Version!)
218228
{
219229
<span class="applicable-version applicable-version-@lifecycleClass">
220230
@applicability.Version
221231
</span>
222232
}
223233
else
224234
{
225-
<span class="applicable-lifecycle applicable-lifecycle-@lifecycleClass">
226-
@badgeText
227-
</span>
235+
@badgeText
228236
}
229-
}
237+
}
230238
</span>
231239
</span>
232240
}

‎src/Elastic.Markdown/Myst/Directives/AppliesTo/AppliesToView.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@using Elastic.Markdown.Myst.Components
22
@inherits RazorSlice<ApplicableToViewModel>
33

4-
<p class="applies">
4+
<p class="applies applies-block">
55
@await RenderPartialAsync(ApplicableToComponent.Create(Model))
66
</p>

‎src/Elastic.Markdown/Myst/FrontMatter/Applicability.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ public record Applicability
108108
public string GetLifeCycleName() =>
109109
Lifecycle switch
110110
{
111-
ProductLifecycle.TechnicalPreview => "Technical Preview",
111+
ProductLifecycle.TechnicalPreview => "Preview",
112112
ProductLifecycle.Beta => "Beta",
113113
ProductLifecycle.Development => "Development",
114114
ProductLifecycle.Deprecated => "Deprecated",

‎src/Elastic.Markdown/Myst/Roles/AppliesTo/ApplicableToRole.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@using Elastic.Markdown.Myst.Components
22
@inherits RazorSlice<ApplicableToViewModel>
33

4-
<span class="applies-inline">
4+
<span class="applies applies-inline">
55
@await RenderPartialAsync(ApplicableToComponent.Create(Model))
66
</span>

‎src/Elastic.Markdown/Page/Index.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
6262
@if (Model.AppliesTo is not null)
6363
{
64-
<p class="applies">
64+
<p class="applies applies-block">
6565
@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
6666
{
6767
AppliesTo = Model.AppliesTo,

0 commit comments

Comments
 (0)