Skip to content

Commit 69fab5f

Browse files
reakaleekreakaleek
authored
Responsive design: Show some right sidebar buttons on mobile and tablet sizes (#1399)
* Show some right sidebar buttons on mobile * Remove unnecessary lg class * Fix version dropdown checkmark * Prettier
1 parent a5b1762 commit 69fab5f

File tree

3 files changed

+34
-32
lines changed

3 files changed

+34
-32
lines changed

‎src/Elastic.Documentation.Site/Assets/web-components/VersionDropdown.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,11 @@ const VersionDropdown = ({
136136
{
137137
id: 0,
138138
title: (
139-
<EuiFlexGroup gutterSize="s" alignItems="center">
139+
<EuiFlexGroup
140+
gutterSize="s"
141+
alignItems="center"
142+
responsive={false}
143+
>
140144
<EuiFlexItem grow={0}>
141145
<EuiIcon type="check" size="s" />
142146
</EuiFlexItem>

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,17 @@
55
<version-dropdown all-versions-url="@Model.AllVersionsUrl" current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdownSerializedModel))' />
66
</div>
77
<ul class="mt-6">
8-
98
@if (Model.GithubEditUrl is not null)
109
{
11-
<li class="edit-this-page not-first:mt-1">
10+
<li class="edit-this-page lg:not-first:mt-1">
1211
<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
13-
14-
1512
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
1613
<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"/>
1714
</svg>
18-
1915
Edit this page
2016
</a>
2117
</li>
22-
<li class="report-an-issue not-first:mt-1">
18+
<li class="report-an-issue lg:not-first:mt-1">
2319
<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
2420
<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
2521
<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"/>
@@ -29,7 +25,7 @@
2925
</li>
3026
}
3127
</ul>
32-
<div class="pt-6">
28+
<div class="pt-6 hidden lg:block">
3329
@if (Model.PageTocItems.Count > 0)
3430
{
3531
<div>

‎src/Elastic.Markdown/Slices/_Layout.cshtml

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,34 +34,36 @@
3434
<div class="max-w-(--max-layout-width) w-full h-full grid
3535
grid-cols-1
3636
md:grid-cols-[var(--max-sidebar-width)_1fr]
37-
lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
3837
">
3938
@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
40-
<div class="justify-center grid
41-
grid-cols-1
42-
px-6 lg:px-0
43-
lg:grid-cols-[1fr_var(--max-text-width)_1fr]
44-
">
45-
<div class="spacer"></div>
46-
<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
47-
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
48-
<div class="h-[2px] w-full overflow-hidden">
49-
<div class="progress w-full h-full bg-pink-70 left-right"></div>
39+
<div class="lg:grid lg:grid-cols-[1fr_var(--max-sidebar-width)]">
40+
@await RenderPartialAsync(_TableOfContents.Create(Model))
41+
<div class="justify-center grid
42+
grid-cols-1
43+
px-6 lg:px-0
44+
lg:grid-cols-[1fr_var(--max-text-width)_1fr]
45+
lg:order-1
46+
">
47+
<div class="spacer"></div>
48+
<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
49+
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
50+
<div class="h-[2px] w-full overflow-hidden">
51+
<div class="progress w-full h-full bg-pink-70 left-right"></div>
52+
</div>
53+
<div class="sr-only">Loading</div>
54+
</div>
55+
<div class="content-container md:px-4">
56+
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
5057
</div>
51-
<div class="sr-only">Loading</div>
52-
</div>
53-
<div class="content-container md:px-4">
54-
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
55-
</div>
56-
<article id="markdown-content" class="content-container markdown-content md:px-4">
57-
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
58-
@await RenderBodyAsync()
59-
</article>
60-
@await RenderPartialAsync(_PrevNextNav.Create(Model))
61-
</main>
62-
<div class="spacer"></div>
58+
<article id="markdown-content" class="content-container markdown-content md:px-4">
59+
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
60+
@await RenderBodyAsync()
61+
</article>
62+
@await RenderPartialAsync(_PrevNextNav.Create(Model))
63+
</main>
64+
<div class="spacer"></div>
65+
</div>
6366
</div>
64-
@await RenderPartialAsync(_TableOfContents.Create(Model))
6567
</div>
6668
}
6769
}

0 commit comments

Comments
 (0)