Skip to content

Commit 61a4351

Browse files
lamATnginxlamATnginx
authored
Adding responsive layout for mainframe (#114)
1 parent 71984f6 commit 61a4351

File tree

5 files changed

+215
-46
lines changed

5 files changed

+215
-46
lines changed

‎assets/css/v2/style.css

Lines changed: 155 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@
1616
--color-background: #FFFFFF;
1717
--color-foreground: #000000;
1818
--color-shadow: #D2D2D2;
19+
20+
--sidebar-width: 24rem;
21+
--side-gutter-width: 20rem;
22+
--text-content-width-iphone-13: 30rem;
23+
--text-content-width-mbp-14: 40rem;
24+
--text-content-width-mbp-16: 50rem;
25+
--text-content-width-4k-display: 60rem;
26+
--component-gap: 3.5rem;
27+
1928
}
2029

2130
@supports (font-variation-settings: normal) {
@@ -33,19 +42,62 @@ h1, h2, h3, h4, h5, h6, .breadcrumb {
3342
font-weight: 500;
3443
}
3544

36-
/* layout */
45+
/* header */
3746
header {
3847
margin: 2rem 2rem;
3948

4049
.navbar {
4150

4251
}
52+
53+
.header-container {
54+
display: flex;
55+
flex-direction: row;
56+
justify-content: space-between;
57+
align-items: center;
58+
width: 100%;
59+
}
60+
61+
ul {
62+
list-style: none;
63+
}
64+
65+
.dropdown-content {
66+
position: absolute;
67+
background-color: white;
68+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
69+
z-index: 1;
70+
right: 0;
71+
display: none;
72+
width: 400px;
73+
max-width: 80vw;
74+
margin-right: 8px;
75+
}
76+
77+
.dropdown-content ul {
78+
padding: 20px 10px;
79+
}
80+
81+
.navbar-button {
82+
padding: 0.5rem 0.5rem;
83+
border: none;
84+
border-radius: 0.25rem;
85+
text-align: center;
86+
text-decoration: none;
87+
cursor: pointer;
88+
}
89+
}
90+
91+
/* footer */
92+
footer {
93+
background-color: #32302f;
94+
padding: 0.5rem;
4395
}
96+
4497
/* breadcrumbs */
4598
nav {
4699
display: flex;
47100
align-items: center;
48-
padding: 1rem;
49101

50102
.logo {
51103
height: 3rem;
@@ -58,9 +110,94 @@ nav {
58110
}
59111
}
60112

113+
#searchbox {
114+
width: 24rem;
115+
display:none;
116+
grid-column: 1;
117+
}
118+
119+
/* main content */
120+
.docs-container * {
121+
box-sizing: border-box;
122+
}
123+
124+
.docs-container {
125+
min-width: 100%;
126+
}
127+
128+
.breadcrumb-layout {
129+
margin: 0 2rem;
130+
}
131+
132+
.main-layout {
133+
display: grid;
134+
grid-template-columns: 1fr;
135+
}
136+
137+
.sidebar-container {
138+
display: flex;
139+
flex-direction: column;
140+
}
141+
142+
.content-layout {
143+
display: grid;
144+
grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width);
145+
column-gap: var(--component-gap);
146+
}
147+
148+
.text-content {
149+
grid-column-start: 1;
150+
}
151+
152+
@media (min-width: 1512px) { /* Macbook Pro 14 */
153+
.base-layout {
154+
display: grid;
155+
grid-template-rows: repeat(2, auto);
156+
column-gap: var(--component-gap);
157+
}
158+
159+
.breadcrumb-layout {
160+
display: grid;
161+
grid-template-columns: var(--sidebar-width) 1fr;
162+
column-gap: var(--component-gap);
163+
align-items: center;
164+
}
165+
166+
.main-layout {
167+
display: grid;
168+
grid-template-columns: var(--sidebar-width) 1fr;
169+
column-gap: var(--component-gap);
170+
}
171+
172+
.content-layout {
173+
display: grid;
174+
grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width);
175+
column-gap: var(--component-gap);
176+
}
177+
178+
.content-layout .side-gutter {
179+
grid-column-start: 2;
180+
}
181+
}
182+
183+
@media (min-width: 1728px) { /* Macbook Pro 16 */
184+
.content-layout {
185+
display: grid;
186+
grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width);
187+
column-gap: var(--component-gap);
188+
}
189+
}
190+
191+
@media (min-width: 2560px) { /* 4k Desktop */
192+
.content-layout {
193+
display: grid;
194+
grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width);
195+
column-gap: var(--component-gap);
196+
}
197+
}
198+
61199
.main {
62200
display: flex;
63-
margin: 0 1rem;
64201
}
65202

66203
.sidebar {
@@ -87,14 +224,11 @@ p {
87224
line-height: 1.5rem;
88225
}
89226

90-
.breadcrumb {
91-
font-size: 0.875rem;
92-
margin: 0 0 2rem 0;
93-
}
94-
95227
.breadcrumb {
96228
color: var(--color-foreground);
97229
text-decoration: none;
230+
font-size: 0.875rem;
231+
grid-column: 2 / -1;
98232
}
99233

100234
.breadcrumb .active {
@@ -169,6 +303,16 @@ pre.chroma {
169303
box-sizing: border-box;
170304
}
171305

306+
.f5-logo-footer {
307+
height: 32px;
308+
width: 32px;
309+
}
310+
311+
.nginx-logo-footer {
312+
height: 72x;
313+
width: 156px;
314+
}
315+
172316
/* FILTHY HACKS BEGIN */
173317

174318
/* Override logo with black text version */
@@ -179,6 +323,9 @@ pre.chroma {
179323
/* non-tiling background logo */
180324
background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg);
181325
background-repeat: no-repeat;
326+
background-size: contain;
327+
background-position: left center;
328+
width: 200px; /* Adjust the width as needed to fit the logo */
182329

183330
img {
184331
display: none;

‎assets/js/theme-switcher.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,13 @@ function useNewTheme(useNewTheme) {
4040
document.getElementById(elementId).style.display = useNewTheme ? "": "none";
4141
});
4242

43+
const mfElements = ['[data-mf="true"]'];
44+
mfElements.forEach((elementId) => {
45+
document
46+
.querySelectorAll(elementId)
47+
.forEach(
48+
(element) => (element.style.display = useNewTheme ? "" : "none")
49+
);
50+
});
51+
4352
}

‎layouts/_default/baseof.html

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,17 +45,22 @@
4545
{{ block "header" . }}{{end}}
4646
</header>
4747

48-
{{ if not .IsHome }}
49-
{{ if not (in .Params.display_breadcrumb "false" ) }}
50-
{{ partial "breadcrumb" .}}
51-
{{ end }}
52-
{{ end }}
53-
54-
<div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
55-
56-
{{ block "main" . }}{{ end }}
57-
58-
</div>
48+
<section class="base-layout">
49+
<section class="breadcrumb-layout">
50+
<div data-mf="true" id="searchbox">
51+
<div class="CoveoSearchbox" data-placeholder='Search NGINX Docs...'></div>
52+
</div>
53+
{{ if not .IsHome }}
54+
{{ if not (in .Params.display_breadcrumb "false" ) }}
55+
{{ partial "breadcrumb" .}}
56+
{{ end }}
57+
{{ end }}
58+
</section>
59+
60+
<div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
61+
{{ block "main" . }}{{ end }}
62+
</div>
63+
</section>
5964

6065
<footer>
6166

‎layouts/_default/docs.html

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{{ define "main" }}
2-
<div class="row override-sidebar-collapse">
2+
<div class="docs-container row override-sidebar-collapse">
33
<nav id="sidebar" class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top">
44
{{ partial "sidebar.html" . }}
55
</nav>
6-
7-
<nav id="sidebar-v2" class="" style="display:none">
8-
Sidebar placeholder
9-
</nav>
106

117
{{if (.Params.catalog) }}
128
<main class="content content-has-toc" role="main">
@@ -16,32 +12,44 @@
1612
<main class="content col d-block align-top content-no-toc" role="main">
1713
{{ end }}
1814

19-
<h1>{{ .Title }}</h1>
15+
<section class="main-layout">
16+
<div class="sidebar-container">
17+
<nav data-mf="true" id="sidebar-v2" class="sidebar-v2" style="display:none;">
18+
Sidebar placeholder
19+
</nav>
20+
</div>
2021

21-
{{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
22+
<section class="content-layout">
23+
<div class="text-content">
24+
<h1>{{ .Title }}</h1>
25+
{{ .Content }}
26+
{{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
27+
{{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
2228

23-
{{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
29+
<hr>
2430

25-
{{ .Content }}
26-
{{ partial "version-list" . }}
27-
{{ partial "qualtrics-feedback.html" }}
28-
<hr>
29-
30-
{{ if .Page.Lastmod }}
31-
<div class="last-modified">
32-
Last modified {{ .Page.Lastmod.Format "January 2, 2006" }}
33-
</div>
34-
{{ end }}
31+
{{ if .Page.Lastmod }}
32+
<div class="last-modified">
33+
Last modified {{ .Page.Lastmod.Format "January 2, 2006" }}
34+
</div>
35+
{{ end }}
36+
37+
{{ partial "version-list" . }}
38+
{{ partial "qualtrics-feedback.html" }}
3539

36-
{{ partial "previous-next-links-in-section-with-title.html" . }}
37-
</main>
38-
{{ if and (gt .WordCount 200 ) (.Params.toc) }}
39-
{{ if (add (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
40-
<div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
41-
{{ partial "toc.html" . }}
40+
{{ partial "previous-next-links-in-section-with-title.html" . }}
41+
</main>
42+
{{ if and (gt .WordCount 200 ) (.Params.toc) }}
43+
{{ if (add (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
44+
<div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
45+
{{ partial "toc.html" . }}
46+
</div>
47+
{{ end }}
48+
{{ end }}
49+
4250
</div>
43-
{{ end }}
44-
{{ end }}
51+
</section>
52+
</section>
4553

4654
</div>
4755
<!-- If there is a script defined in the page metadata, load it -->

‎layouts/partials/header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{ define "header" }}
22
<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
3-
<div class="container-fluid flex-md-row flex-column">
3+
<div class="container-fluid flex-md-row flex-column header-container">
44
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
55
<img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
66
</a>

0 commit comments

Comments
 (0)