Skip to content

Commit 3a34170

Browse files
dschodscho
committed
Merge branch 'To1ne/dark-mode'
This adds a responsive header, and other nice improvements. Signed-off-by: Johannes Schindelin <[email protected]>
2 parents 432ee98 + 3e7d9fc commit 3a34170

File tree

8 files changed

+88
-66
lines changed

8 files changed

+88
-66
lines changed

‎assets/js/application.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,12 @@ var Search = {
223223
$("#show-results-label").text("No matching pages found.");
224224
return;
225225
}
226-
$("#show-results-label").text("Show all results...");
226+
227+
const language = document.querySelector("html")?.getAttribute("lang");
228+
$("#show-results-label")
229+
.text("Show all results...")
230+
.attr('href', `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`);
231+
227232
const loadButton = $("#load-more-results");
228233
loadButton.text(`Loading ${
229234
results.results.length < 2
@@ -300,11 +305,6 @@ var Search = {
300305
selectResultOption: function() {
301306
var link = $('#search-results a')[Search.selectedIndex];
302307
var url = $(link).attr('href');
303-
if(!url) {
304-
const term = $('#search-text').val();
305-
const language = document.querySelector("html")?.getAttribute("lang");
306-
url = `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`;
307-
}
308308
window.location.href = url;
309309
selectedIndex = 0;
310310
},
@@ -567,7 +567,7 @@ var DarkMode = {
567567
|| (!prefersDarkScheme && currentTheme === "dark")) {
568568
button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
569569
}
570-
button.show();
570+
button.css("display", "block");
571571

572572
button.click(function(e) {
573573
e.preventDefault();

‎assets/sass/application.scss

+3-5
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,11 @@ pre {
5454

5555
#dark-mode-button {
5656
display: none;
57-
z-index: 10;
58-
position: absolute;
59-
top: 6px;
60-
right: -50px;
61-
width: 35px;
57+
width: 28px;
6258
background-color: transparent;
6359
text-decoration: none;
60+
align-self: center;
61+
margin: 5px;
6462
}
6563

6664
@media (max-width: $default + 100) {

‎assets/sass/forms.scss

+2-10
Original file line numberDiff line numberDiff line change
@@ -31,20 +31,17 @@ input, textarea {
3131
}
3232

3333
form#search {
34-
position: absolute;
35-
top: 10px;
36-
right: 0;
3734
z-index: 1000;
38-
width: 262px;
35+
width: 100%;
3936
padding-left: 32px;
37+
margin: 9px;
4038
@include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
4139
background-color: var(--main-bg) !important;
4240
border: solid 1px var(--search-border);
4341
@include border-radius(20px);
4442
@include box-shadow(inset 0 1px 4px #ddd);
4543

4644
input {
47-
@include border-radius(20px);
4845
width: 100%;
4946
height: 20px;
5047
margin-top: 4px;
@@ -64,17 +61,12 @@ form#search {
6461
// Breakpoint ----------------
6562
@media (max-width: $default) {
6663
form#search{
67-
@include center-transformX;
68-
margin-top: 7px;
69-
top: unset;
70-
width: 92%;
7164
}
7265
}
7366

7467
// Mobile
7568
@media (max-width: $mobile-m) {
7669
form#search{
77-
width: 84%;
7870
#search-text {
7971
padding: 0.3rem 0.1rem;
8072
}

‎assets/sass/layout.scss

+20-11
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,29 @@ aside {
110110

111111
// Header
112112
header {
113-
position: relative;
114113
padding-bottom: 26px;
115114
margin-top: 14px;
116115

116+
display: flex;
117+
flex-direction: row;
118+
119+
div {
120+
display: flex;
121+
flex-direction: row;
122+
align-items: center;
123+
124+
&:first-child {
125+
flex-grow: 4;
126+
}
127+
}
128+
#logo {
129+
display: flex;
130+
}
131+
117132
#tagline {
118-
position: absolute;
119-
top: 11px;
120-
left: 120px;
121133
display: block;
122-
margin-top: 1px;
123-
font-size: 24px;
134+
margin-left: 8px;
135+
font-size: clamp(0.8rem, 2vw, 1.3rem);
124136
line-height: 24px;
125137
color: var(--light-font-color);
126138

@@ -439,13 +451,11 @@ table.benchmarks {
439451
.responsive-table { overflow-x: auto; }
440452
.center img { height: 100%; }
441453
header{
442-
padding-bottom: 2.5rem;
443454
a, span {
444455
padding-left: 1rem;
445456
margin-bottom: 10px ;
446457
}
447458
}
448-
#home { .inner { > header { padding-bottom: 2rem; } } }
449459
#content { width: 100%; }
450460
.inner { width: 100%; }
451461
#content-wrapper { padding: 0.8rem; }
@@ -481,10 +491,9 @@ table.benchmarks {
481491
header {
482492
padding-bottom: 3rem;
483493
#tagline {
484-
font-size: 0.8rem;
485-
top: 0;
486-
padding-right: 1rem;
494+
font-size: clamp(0.8rem, 3vw, 1.3rem);
487495
}
496+
flex-direction: column;
488497
}
489498
#home { .inner { > header { padding-bottom: 2.5rem; } } }
490499
#masthead {

‎assets/sass/search.scss

+25-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
@import "variables";
22
@import "mixins";
33

4+
#search-container {
5+
position: relative;
6+
width: 300px;
7+
padding-left: 60px;
8+
9+
* {
10+
box-sizing: border-box;
11+
}
12+
}
13+
414
#search-results {
515
position: absolute;
6-
top: 2px;
7-
right: -8px;
16+
left: 0;
817
z-index: 900;
918
display: none;
10-
width: 384px;
1119
background: #398a94 url($baseurl + "images/bg/search-header.jpg") 0 1px repeat-x;
1220
@include border-radius(3px);
1321
@include box-shadow(0 0 7px rgba(0, 0, 0, 0.25));
1422
border-bottom: solid 1px var(--base-border-color);
1523

24+
width: calc(100% - 1px);
25+
height: 100%;
26+
1627
header {
17-
height: 44px;
28+
width: 100%;
29+
height: 100%;
1830
padding: 0;
1931
margin: 0;
2032
text-indent: -9999px;
@@ -36,7 +48,7 @@
3648

3749
td.category {
3850
width: 67px;
39-
padding: 10px 12px 0 0;
51+
padding-top: 10px;
4052
font-size: 11px;
4153
color: var(--blue);
4254
text-align: right;
@@ -130,14 +142,19 @@ ol.full-search-results {
130142

131143
// Breakpoint ---
132144
@media (max-width: $default) {
145+
#search-container {
146+
padding-left: 0;
147+
}
133148
#search-results{
134-
@include center-transformX;
135-
top: unset;
136-
width: 98%;
149+
width: 100%;
137150
}
138151
}
139152
// Mobile
140153
@media (max-width: $mobile-m) {
154+
#search-container {
155+
width: inherit;
156+
margin-left: 15px;
157+
}
141158
#search-results{
142159
margin-top: 4px;
143160
}

‎assets/sass/variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ $base-font-size: 14px;
1212
$base-line-height: 22px;
1313

1414
$fixed-width-font-family: Courier, monospace;
15-
$fixed-width-line-height: 18px;
15+
$fixed-width-line-height: 18px;

‎layouts/partials/header.html

+26-22
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
<header>
2+
<div id="brand">
3+
<a id="logo" href="{{ relURL "" }}"><img src="{{ relURL "images/[email protected]" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
4+
<span id="tagline"></span>
5+
<script type="text/javascript">
6+
const taglines = [
7+
"fast-version-control",
8+
"everything-is-local",
9+
"distributed-even-if-your-workflow-isnt",
10+
"local-branching-on-the-cheap",
11+
"distributed-is-the-new-centralized"
12+
];
13+
var tagline = taglines[Math.floor(Math.random() * taglines.length)];
14+
document.getElementById('tagline').innerHTML = '--' + tagline;
15+
</script>
16+
</div>
217

3-
<a href="{{ relURL "" }}"><img src="{{ relURL "images/[email protected]" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
4-
<span id="tagline"></span>
5-
<script type="text/javascript">
6-
const taglines = [
7-
"fast-version-control",
8-
"everything-is-local",
9-
"distributed-even-if-your-workflow-isnt",
10-
"local-branching-on-the-cheap",
11-
"distributed-is-the-new-centralized"
12-
];
13-
var tagline = taglines[Math.floor(Math.random() * taglines.length)];
14-
document.getElementById('tagline').innerHTML = '--' + tagline;
15-
</script>
16-
17-
<img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
18-
{{ if ne (.Scratch.Get "section") "search" }}
19-
<form id="search" action="{{ relURL "search/results" }}">
20-
<input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
21-
</form>
22-
<div id="search-results"></div>
23-
{{ end }}
24-
18+
<div>
19+
{{ if ne (.Scratch.Get "section") "search" }}
20+
<div id="search-container">
21+
<form id="search" action="{{ relURL "search/results" }}">
22+
<input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
23+
</form>
24+
<div id="search-results"></div>
25+
</div>
26+
{{ end }}
27+
<img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
28+
</div>
2529
</header>

‎tests/git-scm.spec.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,8 @@ test('search', async ({ page }) => {
115115
// Expect the first search result to be "git-commit"
116116
const searchResults = page.locator('#search-results')
117117
await expect(searchResults.getByRole("link")).not.toHaveCount(0)
118-
await expect(searchResults.getByRole("link").nth(0)).toHaveText('git-commit')
118+
await expect(searchResults.getByRole("link").nth(0)).toHaveText('Show all results...')
119+
await expect(searchResults.getByRole("link").nth(1)).toHaveText('git-commit')
119120

120121
// Expect the search page to show up
121122
await searchBox.press('Enter')
@@ -137,7 +138,8 @@ test('search', async ({ page }) => {
137138
await page.goto(`${url}docs/git-commit/fr`)
138139
await searchBox.fill('add')
139140
await searchBox.press('Shift')
140-
await expect(searchResults.getByRole("link").nth(0)).toHaveAttribute('href', /\/docs\/git-add\/fr(\.html)?$/)
141+
await expect(searchResults.getByRole("link").nth(0)).toHaveAttribute('href', /\/search\/results\?search=add&language=fr$/)
142+
await expect(searchResults.getByRole("link").nth(1)).toHaveAttribute('href', /\/docs\/git-add\/fr(\.html)?$/)
141143

142144
// pressing the Enter key should navigate to the full search results page
143145
await searchBox.press('Enter')

0 commit comments

Comments
 (0)