Skip to content

Commit af573c4

Browse files
authored
Action buttons redesign (#1078)
1 parent 37f7505 commit af573c4

File tree

2 files changed

+39
-40
lines changed

2 files changed

+39
-40
lines changed

src/Elastic.Markdown/Assets/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
@apply text-blue-elastic hover:text-blue-elastic-100 inline-flex items-center justify-center font-sans font-semibold text-nowrap;
6969

7070
.link-icon {
71-
@apply mr-1 ml-0 size-4 shrink-0;
71+
@apply mr-2 ml-0 size-4 shrink-0;
7272
}
7373

7474
.link-arrow {

src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,9 @@
22
<aside class="sidebar hidden lg:block order-3">
33
<nav id="toc-nav" class="sidebar-nav pl-4">
44
<div class="pt-6 pb-20">
5-
@if (Model.LegacyUrl is not null)
6-
{
7-
<div class="edit-this-page">
8-
<a href="@Model.LegacyUrl" class="link" target="_blank">
9-
<svg class="link-icon"
10-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="1 0 22 22" stroke-width="1.5" stroke="currentColor">
11-
<path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
12-
</svg>
13-
View previous version
14-
</a>
15-
</div>
16-
}
17-
@if (Model.GithubEditUrl is not null)
18-
{
19-
<div class="edit-this-page">
20-
<a href="@Model.GithubEditUrl" class="link" target="_blank">
21-
<svg class="link-icon"
22-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" stroke-width="1" stroke="currentColor">
23-
<path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z"/>
24-
<path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z"/>
25-
</svg>
26-
Edit this page
27-
</a>
28-
</div>
29-
<div class="report-an-issue">
30-
<a href="@Model.ReportIssueUrl" class="link" target="_blank">
31-
<svg class="link-icon"
32-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" stroke="currentColor">
33-
<path fill-rule="evenodd" d="M1 8.74c0 .983.713 1.825 1.69 1.943.904.108 1.817.19 2.737.243.363.02.688.231.85.556l1.052 2.103a.75.75 0 0 0 1.342 0l1.052-2.103c.162-.325.487-.535.85-.556.92-.053 1.833-.134 2.738-.243.976-.118 1.689-.96 1.689-1.942V4.259c0-.982-.713-1.824-1.69-1.942a44.45 44.45 0 0 0-10.62 0C1.712 2.435 1 3.277 1 4.26v4.482Zm3-3.49a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 5.25ZM4.75 7a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z" clip-rule="evenodd"/>
34-
</svg>
35-
Report an issue
36-
</a>
37-
</div>
38-
}
39-
@if (Model.GithubEditUrl is not null || Model.LegacyUrl is not null)
40-
{
41-
<div class="mb-2"></div>
42-
}
435
@if (Model.PageTocItems.Count > 0)
446
{
45-
<div class="mb-4">
7+
<div>
468
<div class="font-bold mb-2">On this page</div>
479
<div class="relative toc-progress-container font-body">
4810
<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
@@ -61,6 +23,43 @@
6123
</div>
6224
</div>
6325
}
26+
27+
<ul class="mt-6">
28+
@if (Model.LegacyUrl is not null)
29+
{
30+
<li class="edit-this-page not-first:mt-1">
31+
<a href="@Model.LegacyUrl" class="link text-sm" target="_blank">
32+
<svg class="link-icon"
33+
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="1 0 22 22" stroke-width="1.5" stroke="currentColor">
34+
<path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
35+
</svg>
36+
View previous version
37+
</a>
38+
</li>
39+
}
40+
@if (Model.GithubEditUrl is not null)
41+
{
42+
<li class="edit-this-page not-first:mt-1">
43+
<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
44+
45+
46+
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
47+
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
48+
</svg>
49+
50+
Edit this page
51+
</a>
52+
</li>
53+
<li class="report-an-issue not-first:mt-1">
54+
<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
55+
<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
56+
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
57+
</svg>
58+
Report an issue
59+
</a>
60+
</li>
61+
}
62+
</ul>
6463
</div>
6564

6665
</nav>

0 commit comments

Comments
 (0)