Skip to content

Commit aecf5dc

Browse files
mrholekmrholek
committed
docs: improve responsive design
1 parent a8ab9fd commit aecf5dc

File tree

9 files changed

+62
-29
lines changed

9 files changed

+62
-29
lines changed

‎docs/assets/scss/_header.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@
22

33
.docs-header {
44
--#{$prefix}header-bg: #{var(--cui-body-bg)};
5+
6+
.header-brand {
7+
color: var(--cui-body-color);
8+
}
59
}

‎docs/assets/scss/_layout.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
.docs-main {
2121
grid-area: main;
2222

23-
@include media-breakpoint-down(lg) {
23+
@include media-breakpoint-down(xl) {
2424
max-width: 760px;
2525
margin-inline: auto;
2626
}
2727

28-
@include media-breakpoint-up(md) {
28+
@include media-breakpoint-up(lg) {
2929
display: grid;
3030
grid-template-areas:
3131
"intro"
@@ -35,7 +35,7 @@
3535
gap: $grid-gutter-width;
3636
}
3737

38-
@include media-breakpoint-up(lg) {
38+
@include media-breakpoint-up(xl) {
3939
grid-template-areas:
4040
"intro toc"
4141
"content toc";

‎docs/assets/scss/_toc.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@use "../../../scss/vendor/rfs" as *;
77

88
.docs-toc {
9-
@include media-breakpoint-up(lg) {
9+
@include media-breakpoint-up(xl) {
1010
position: sticky;
1111
top: 5rem;
1212
right: 0;
@@ -56,7 +56,7 @@
5656
width: 100%;
5757
}
5858

59-
@include media-breakpoint-down(md) {
59+
@include media-breakpoint-down(lg) {
6060
color: var(--cui-body-color);
6161
border: 1px solid var(--cui-border-color);
6262
@include border-radius(var(--cui-border-radius));
@@ -78,7 +78,7 @@
7878
}
7979

8080
.docs-toc-collapse {
81-
@include media-breakpoint-down(md) {
81+
@include media-breakpoint-down(lg) {
8282
nav {
8383
padding: 1.25rem 1.25rem 1.25rem 1rem;
8484
background-color: var(--cui-tertiary-bg);
@@ -87,7 +87,7 @@
8787
}
8888
}
8989

90-
@include media-breakpoint-up(md) {
90+
@include media-breakpoint-up(lg) {
9191
display: block !important; // stylelint-disable-line declaration-no-important
9292
}
9393
}

‎docs/assets/scss/search.scss

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,7 @@
5959
--docsearch-searchbox-background: #{rgba($black, .1)};
6060
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
6161

62-
min-width: 200px;
63-
min-height: 38px;
62+
margin: 0;
6463
font-family: $input-font-family;
6564
font-weight: $input-font-weight;
6665
line-height: $input-line-height;
@@ -92,12 +91,21 @@
9291
background-color: $form-file-button-hover-bg;
9392
}
9493

94+
@include media-breakpoint-down(md) {
95+
&,
96+
&:hover,
97+
&:focus {
98+
background: transparent;
99+
border: 0;
100+
box-shadow: none;
101+
}
102+
}
103+
95104
.DocSearch-Search-Icon {
96105
opacity: .65;
97106
}
98107
}
99108

100-
101109
.DocSearch-Button-Keys {
102110
min-width: 0;
103111
padding: 0 .25rem;

‎docs/layouts/_default/docs.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ <h2>Other frameworks</h2>
3434
</div>
3535

3636
{{ if (eq .Page.Params.toc true) }}
37-
<div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
38-
<button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none" type="button" data-coreui-toggle="collapse" data-coreui-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
37+
<div class="docs-toc mt-4 mb-5 my-lg-0 ps-xl-5 mb-lg-5 text-body-secondary">
38+
<button class="btn btn-link p-lg-0 mb-2 mb-lg-0 text-decoration-none docs-toc-toggle d-lg-none" type="button" data-coreui-toggle="collapse" data-coreui-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
3939
On this page
40-
<svg xmlns="http://www.w3.org/2000/svg" class="icon d-md-none ms-2" aria-hidden="true" viewBox="0 0 512 512">
40+
<svg xmlns="http://www.w3.org/2000/svg" class="icon d-lg-none ms-2" aria-hidden="true" viewBox="0 0 512 512">
4141
<polygon fill="var(--ci-primary-color, currentColor)" points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627" class="ci-primary"/>
4242
</svg>
4343
</button>
44-
<strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
44+
<strong class="d-none d-lg-block h6 mb-2 pb-2 border-bottom">On this page</strong>
4545
<div class="collapse docs-toc-collapse" id="tocContents">
4646
{{ .TableOfContents }}
4747
</div>

‎docs/layouts/partials/header.html

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,35 @@
33
<button class="header-toggler d-lg-none" type="button" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
44
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "32" "height" "32") }}
55
</button>
6-
<div class="docs-search" id="docsearch"></div>
7-
8-
<ul class="header-nav ms-auto">
6+
<div class="header-brand d-lg-none">
7+
{{ partial "icons/coreui-signet.svg" (dict "height" "32") }}
8+
</div>
9+
<ul class="header-nav me-auto d-none d-xl-flex">
910
<li class="nav-item">
11+
<a class="nav-link" href="https://coreui.io/pricing/?framework=bootstrap&src=coreui-docs&cta=coreui-header-pricing">
12+
Pricing
13+
</a>
14+
</li>
15+
<li class="nav-item">
16+
<a class="nav-link" href="https://coreui.requestshub.com/p/coreui-for-bootstrap/roadmap" target="blank" rel="noopener noreferrer">
17+
Roadmap
18+
{{ partial "icons/external-link.svg" (dict "class" "icon icon-sm ms-1") }}
19+
</a>
20+
</li>
21+
</ul>
22+
<div class="docs-search ms-auto" id="docsearch"></div>
23+
<ul class="header-nav ms-2">
24+
<li class="nav-item d-none d-sm-block">
1025
<a class="nav-link" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
1126
{{ partial "icons/github.svg" (dict "class" "icon icon-xl") }}
1227
</a>
1328
</li>
14-
<li class="nav-item">
29+
<li class="nav-item d-none d-sm-block">
1530
<a class="nav-link" href="https://x.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
1631
{{ partial "icons/x.svg" (dict "class" "icon icon-xl") }}
1732
</a>
1833
</li>
19-
<li class="nav-item">
34+
<li class="nav-item d-none d-sm-block">
2035
<a class="nav-link" href="https://discord.gg/pQRWe5XdGm" target="_blank" rel="noopener">
2136
{{ partial "icons/discord.svg" (dict "class" "icon icon-xl") }}
2237
</a>
@@ -62,16 +77,12 @@
6277
<hr class="d-lg-none my-2 text-white-50">
6378
</li>
6479
</ul>
65-
<a class="btn btn-outline-primary d-lg-inline-block my-2 my-md-0 ms-md-3" href="/getting-started/download/">
66-
{{ partial "icons/cloud-download.svg" (dict "class" "icon me-lg-2") }}
67-
<span class="d-none d-lg-inline-block">Download</span>
68-
</a>
69-
<a class="btn btn-outline-primary d-lg-inline-block my-2 my-md-0 ms-md-3" href="https://coreui.io/about/services/?docs=coreui-header-button">
70-
{{ partial "icons/handshake.svg" (dict "class" "icon me-2") }}
80+
<a class="btn btn-outline-primary d-none d-lg-inline-block ms-md-3" href="https://coreui.io/about/services/?docs=coreui-header-button">
81+
{{ partial "icons/handshake.svg" (dict "class" "icon me-xxl-2 d-none d-xxl-inline") }}
7182
Hire Us
7283
</a>
73-
<a class="btn btn-primary d-lg-inline-block my-2 my-md-0 ms-md-3" href="https://coreui.io/pricing/?framework=bootstrap&docs=coreui-header-button">
74-
Buy CoreUI PRO
84+
<a class="btn btn-primary d-lg-inline-block ms-md-3" href="https://coreui.io/pricing/?framework=bootstrap&docs=coreui-header-button">
85+
Get CoreUI PRO<span class="d-none d-xxl-inline"> all-access</span> →
7586
</a>
7687
</nav>
7788
</header>

‎docs/layouts/partials/icons/coreui-signet.svg

Lines changed: 6 additions & 0 deletions
Loading

‎docs/layouts/partials/icons/external-link.svg

Lines changed: 4 additions & 0 deletions
Loading

‎docs/layouts/partials/sidebar.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="sidebar sidebar-lg sidebar-fixed sidebar-self-hiding-md border-end px-xl-4 docs-sidebar elevation-0" id="sidebar">
1+
<div class="sidebar sidebar-lg sidebar-fixed border-end px-lg-4 docs-sidebar elevation-0" id="sidebar">
22
<div class="sidebar-brand justify-content-start ps-3">
33
{{ partial "icons/coreui-base.svg" (dict "class" "d-block mt-4 mb-5" "height" "50") }}
44
</div>
@@ -8,7 +8,7 @@
88
JavaScript / Vanilla JS
99
</button>
1010
<ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
11-
<li><a class="dropdown-item" href="https://coreui.io/angular/docs/4.0/getting-started/introduction">Angular</a></li>
11+
<li><a class="dropdown-item" href="https://coreui.io/angular/docs/getting-started/introduction">Angular</a></li>
1212
<li><a class="dropdown-item" href="https://coreui.io/react/docs/" target="_blank">React.js</a></li>
1313
<li><a class="dropdown-item" href="https://coreui.io/vue/docs/" target="_blank">Vue.js</a></li>
1414
</ul>

0 commit comments

Comments
 (0)