Skip to content

Commit f4c005e

Browse files
reakaleekreakaleek
authored
Fix layout and horizontal scrollable tables (#772)
* Fix layout and horizontal scrollable tables mend * Use spacing var * Add custom scrollbar * tweaks
1 parent 7215a40 commit f4c005e

File tree

10 files changed

+51
-37
lines changed

10 files changed

+51
-37
lines changed

‎src/Elastic.Markdown/Assets/markdown/table.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1+
12
@layer components {
3+
24
.table-wrapper {
35

4-
@apply max-w-full overflow-x-scroll my-4;
6+
@apply w-full overflow-x-scroll my-4;
7+
8+
&::-webkit-scrollbar {
9+
@apply h-2 bg-grey-10 border-b-1 border-grey-20;
10+
}
11+
&::-webkit-scrollbar-thumb {
12+
@apply bg-grey-80 rounded-full;
13+
}
514

15+
&::-webkit-scrollbar-thumb:hover {
16+
@apply bg-grey-100;
17+
}
18+
619
table {
720
@apply w-full border-collapse border-1 border-grey-20;
821
}
@@ -13,6 +26,9 @@
1326

1427
thead {
1528
@apply font-sans font-semibold text-left align-top border-b-1 border-grey-20 bg-grey-10;
29+
:empty {
30+
display: none;
31+
}
1632
}
1733

1834
tbody {

‎src/Elastic.Markdown/Helpers/Htmx.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ public static string GetHxSelectOob(FeatureFlags features, string? pathPrefix, s
1414
if (features.IsPrimaryNavEnabled && currentUrl == pathPrefix + "/")
1515
return "#main-container,#primary-nav,#secondary-nav";
1616

17-
var selectTargets = "#primary-nav,#secondary-nav,#content-container";
17+
var selectTargets = "#primary-nav,#secondary-nav,#content-container,#toc-nav";
1818
if (!HasSameTopLevelGroup(pathPrefix, currentUrl, targetUrl) && features.IsPrimaryNavEnabled)
1919
selectTargets += ",#pages-nav";
2020
return selectTargets;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)] order-1 w-[80%] md:w-60 shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
2+
<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)] order-1 w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
33

44
<nav
55
id="pages-nav"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-grey-20 w-60">
2+
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-grey-20">
33
<nav id="toc-nav" class="sidebar-nav pl-6">
44
<div class="pt-6 pb-20">
55
@if (Model.PageTocItems.Count > 0)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
class="hover:underline hover:text-black active:text-blue-elastic-100 font-semibold text-sm @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
3535
href="@item.Group.Index.Url"
3636
hx-get="@item.Group.Index.Url"
37-
hx-select-oob="#pages-nav,#content-container"
37+
hx-select-oob="#pages-nav,#content-container,#toc-nav"
3838
hx-push-url="true"
3939
preload>@item.Group.Index.NavigationTitle</a>
4040
</li>

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,25 @@
1313
@functions {
1414
private async Task DefaultLayout()
1515
{
16-
<div class="flex container">
16+
<div class="grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*60)_auto] lg:grid-cols-[1fr_3fr_1fr] gap-4 container">
1717
@await RenderPartialAsync(_PagesNav.Create(Model))
18-
<div id="content-container" class="order-2 flex w-full">
19-
@await RenderPartialAsync(_TableOfContents.Create(Model))
20-
<main class="w-full order-1 relative pb-30">
21-
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
22-
<div class="h-[2px] w-full overflow-hidden">
23-
<div class="progress w-full h-full bg-pink-70 left-right"></div>
24-
</div>
25-
<div class="sr-only">Loading</div>
18+
@await RenderPartialAsync(_TableOfContents.Create(Model))
19+
<main id="content-container" class="w-full order-2 relative pb-30 overflow-x-hidden">
20+
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
21+
<div class="h-[2px] w-full overflow-hidden">
22+
<div class="progress w-full h-full bg-pink-70 left-right"></div>
2623
</div>
27-
<div class="content-container md:px-6">
28-
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
29-
</div>
30-
<article id="markdown-content" class="content-container markdown-content md:px-6">
31-
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
32-
@await RenderBodyAsync()
33-
</article>
34-
@await RenderPartialAsync(_PrevNextNav.Create(Model))
35-
</main>
36-
</div>
24+
<div class="sr-only">Loading</div>
25+
</div>
26+
<div class="content-container md:px-6">
27+
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
28+
</div>
29+
<article id="markdown-content" class="content-container markdown-content md:px-6">
30+
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
31+
@await RenderBodyAsync()
32+
</article>
33+
@await RenderPartialAsync(_PrevNextNav.Create(Model))
34+
</main>
3735
</div>
3836
}
3937
}

‎tests/Elastic.Markdown.Tests/Inline/AnchorLinkTests.cs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ [Sub Requirements](testing/req.md#sub-requirements)
7575
public void GeneratesHtml() =>
7676
// language=html
7777
Html.Should().Contain(
78-
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
78+
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
7979
);
8080

8181
[Fact]
@@ -93,7 +93,7 @@ [Sub Requirements](testing/req.md#new-reqs)
9393
public void GeneratesHtml() =>
9494
// language=html
9595
Html.Should().Contain(
96-
"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
96+
"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
9797
);
9898

9999
[Fact]
@@ -110,7 +110,7 @@ public class ExternalPageAnchorAutoTitleTests(ITestOutputHelper output) : Anchor
110110
public void GeneratesHtml() =>
111111
// language=html
112112
Html.Should().Contain(
113-
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements &gt; Sub Requirements</a></p>"""
113+
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements &gt; Sub Requirements</a></p>"""
114114
);
115115

116116
[Fact]
@@ -146,7 +146,7 @@ [Sub Requirements](testing/req.md#sub-requirements2)
146146
public void GeneratesHtml() =>
147147
// language=html
148148
Html.Should().Contain(
149-
"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
149+
"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
150150
);
151151

152152
[Fact]
@@ -165,7 +165,7 @@ [Heading inside dropdown](testing/req.md#heading-inside-dropdown)
165165
public void GeneratesHtml() =>
166166
// language=html
167167
Html.Should().Contain(
168-
"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Heading inside dropdown</a>"""
168+
"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Heading inside dropdown</a>"""
169169
);
170170
[Fact]
171171
public void HasError() => Collector.Diagnostics.Should().HaveCount(0);

‎tests/Elastic.Markdown.Tests/Inline/DirectiveBlockLinkTests.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ [Sub Requirements](testing/req.md#hint_ref)
6666
public void GeneratesHtml() =>
6767
// language=html
6868
Html.Should().Contain(
69-
"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
69+
"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
7070
);
7171

7272
[Fact]

‎tests/Elastic.Markdown.Tests/Inline/InlineAnchorTests.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ [Sub Requirements](testing/req.md#custom-anchor)
200200
public void GeneratesHtml() =>
201201
// language=html
202202
Html.Should().Contain(
203-
"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
203+
"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
204204
);
205205

206206
[Fact]

‎tests/Elastic.Markdown.Tests/Inline/InlineLinkTests.cs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ public class InlineLinkTests(ITestOutputHelper output) : LinkTestBase(output,
4949
public void GeneratesHtml() =>
5050
// language=html
5151
Html.Should().Contain(
52-
"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Elasticsearch</a></p>"""
52+
"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Elasticsearch</a></p>"""
5353
);
5454

5555
[Fact]
@@ -66,7 +66,7 @@ public class LinkToPageTests(ITestOutputHelper output) : LinkTestBase(output,
6666
public void GeneratesHtml() =>
6767
// language=html
6868
Html.Should().Contain(
69-
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Requirements</a></p>"""
69+
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Requirements</a></p>"""
7070
);
7171

7272
[Fact]
@@ -86,7 +86,7 @@ public class InsertPageTitleTests(ITestOutputHelper output) : LinkTestBase(outpu
8686
public void GeneratesHtml() =>
8787
// language=html
8888
Html.Should().Contain(
89-
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></p>"""
89+
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></p>"""
9090
);
9191

9292
[Fact]
@@ -108,7 +108,7 @@ public class LinkReferenceTest(ITestOutputHelper output) : LinkTestBase(output,
108108
public void GeneratesHtml() =>
109109
// language=html
110110
Html.Should().Contain(
111-
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">test</a></p>"""
111+
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">test</a></p>"""
112112
);
113113

114114
[Fact]
@@ -270,10 +270,10 @@ public void GeneratesHtml() =>
270270
Html.ReplaceLineEndings().TrimEnd().Should().Be("""
271271
<p>Links:</p>
272272
<ul>
273-
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
273+
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
274274
</ul>
275275
<ul>
276-
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
276+
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
277277
</ul>
278278
""".ReplaceLineEndings());
279279

0 commit comments

Comments
 (0)