Merge branch 'To1ne/dark-mode'

This adds a responsive header, and other nice improvements.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/js/application.js

@@ -223,7 +223,12 @@ var Search = {
             $("#show-results-label").text("No matching pages found.");
             return;
           }
-          $("#show-results-label").text("Show all results...");
+
+          const language = document.querySelector("html")?.getAttribute("lang");
+          $("#show-results-label")
+            .text("Show all results...")
+            .attr('href', `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`);
+
           const loadButton = $("#load-more-results");
           loadButton.text(`Loading ${
             results.results.length < 2
@@ -300,11 +305,6 @@ var Search = {
   selectResultOption: function() {
     var link = $('#search-results a')[Search.selectedIndex];
     var url = $(link).attr('href');
-    if(!url) {
-      const term = $('#search-text').val();
-      const language = document.querySelector("html")?.getAttribute("lang");
-      url = `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`;
-    }
     window.location.href = url;
     selectedIndex = 0;
   },
@@ -567,7 +567,7 @@ var DarkMode = {
         || (!prefersDarkScheme && currentTheme === "dark")) {
       button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
     }
-    button.show();
+    button.css("display", "block");
 
     button.click(function(e) {
       e.preventDefault();

assets/sass/application.scss

@@ -54,13 +54,11 @@ pre {
 
 #dark-mode-button {
     display: none;
-    z-index: 10;
-    position: absolute;
-    top: 6px;
-    right: -50px;
-    width: 35px;
+    width: 28px;
     background-color: transparent;
     text-decoration: none;
+    align-self: center;
+    margin: 5px;
 }
 
 @media (max-width: $default + 100) {

assets/sass/forms.scss

@@ -31,20 +31,17 @@ input, textarea {
 }
 
 form#search {
-  position: absolute;
-  top: 10px;
-  right: 0;
   z-index: 1000;
-  width: 262px;
+  width: 100%;
   padding-left: 32px;
+  margin: 9px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
   background-color: var(--main-bg) !important;
   border: solid 1px var(--search-border);
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);
 
   input {
-    @include border-radius(20px);
     width: 100%;
     height: 20px;
     margin-top: 4px;
@@ -64,17 +61,12 @@ form#search {
 // Breakpoint ----------------
 @media (max-width: $default) {
   form#search{
-    @include center-transformX;
-    margin-top: 7px;
-    top: unset;
-    width: 92%;
   }
 }
 
 // Mobile
 @media (max-width: $mobile-m) {
   form#search{
-    width: 84%;
     #search-text {
       padding: 0.3rem 0.1rem;
     }

assets/sass/layout.scss

@@ -110,17 +110,29 @@ aside {
 
 // Header
 header {
-  position: relative;
   padding-bottom: 26px;
   margin-top: 14px;
 
+  display: flex;
+  flex-direction: row;
+
+  div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:first-child {
+      flex-grow: 4;
+    }
+  }
+  #logo {
+    display: flex;
+  }
+
   #tagline {
-    position: absolute;
-    top: 11px;
-    left: 120px;
     display: block;
-    margin-top: 1px;
-    font-size: 24px;
+    margin-left: 8px;
+    font-size: clamp(0.8rem, 2vw, 1.3rem);
     line-height: 24px;
     color: var(--light-font-color);
 
@@ -439,13 +451,11 @@ table.benchmarks {
   .responsive-table { overflow-x: auto; }
   .center img { height: 100%; }
   header{
-      padding-bottom: 2.5rem;
     a, span {
       padding-left: 1rem;
       margin-bottom: 10px ;
     }
   }
-  #home { .inner { > header { padding-bottom: 2rem; } } }
   #content { width: 100%; }
   .inner { width: 100%; }
   #content-wrapper { padding: 0.8rem; }
@@ -481,10 +491,9 @@ table.benchmarks {
   header {
     padding-bottom: 3rem;
     #tagline {
-      font-size: 0.8rem;
-      top: 0;
-      padding-right: 1rem;
+      font-size: clamp(0.8rem, 3vw, 1.3rem);
     }
+    flex-direction: column;
   }
   #home { .inner { > header { padding-bottom: 2.5rem; } } }
   #masthead {

assets/sass/search.scss

@@ -1,20 +1,32 @@
 @import "variables";
 @import "mixins";
 
+#search-container {
+  position: relative;
+  width: 300px;
+  padding-left: 60px;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
 #search-results {
   position: absolute;
-  top: 2px;
-  right: -8px;
+  left: 0;
   z-index: 900;
   display: none;
-  width: 384px;
   background: #398a94 url($baseurl + "images/bg/search-header.jpg") 0 1px repeat-x;
   @include border-radius(3px);
   @include box-shadow(0 0 7px rgba(0, 0, 0, 0.25));
   border-bottom: solid 1px var(--base-border-color);
 
+  width: calc(100% - 1px);
+  height: 100%;
+
   header {
-    height: 44px;
+    width: 100%;
+    height: 100%;
     padding: 0;
     margin: 0;
     text-indent: -9999px;
@@ -36,7 +48,7 @@
 
     td.category {
       width: 67px;
-      padding: 10px 12px 0 0;
+      padding-top: 10px;
       font-size: 11px;
       color: var(--blue);
       text-align: right;
@@ -130,14 +142,19 @@ ol.full-search-results {
 
 // Breakpoint ---
 @media (max-width: $default) {
+  #search-container {
+    padding-left: 0;
+  }
   #search-results{
-    @include center-transformX;
-    top: unset;
-    width: 98%;
+    width: 100%;
   }
 }
 // Mobile
 @media (max-width: $mobile-m) {
+  #search-container {
+    width: inherit;
+    margin-left: 15px;
+  }
   #search-results{
     margin-top: 4px;
   }

assets/sass/variables.scss

@@ -12,4 +12,4 @@ $base-font-size:   14px;
 $base-line-height: 22px;
 
 $fixed-width-font-family: Courier, monospace;
-$fixed-width-line-height: 18px;
+$fixed-width-line-height: 18px;

layouts/partials/header.html

@@ -1,25 +1,29 @@
 <header>
+  <div id="brand">
+    <a id="logo" href="{{ relURL "" }}"><img src="{{ relURL "images/[email protected]" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
+    <span id="tagline"></span>
+    <script type="text/javascript">
+     const taglines = [
+       "fast-version-control",
+       "everything-is-local",
+       "distributed-even-if-your-workflow-isnt",
+       "local-branching-on-the-cheap",
+       "distributed-is-the-new-centralized"
+     ];
+     var tagline = taglines[Math.floor(Math.random() * taglines.length)];
+     document.getElementById('tagline').innerHTML = '--' + tagline;
+    </script>
+  </div>
 
-  <a href="{{ relURL "" }}"><img src="{{ relURL "images/[email protected]" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
-  <span id="tagline"></span>
-  <script type="text/javascript">
-    const taglines = [
-      "fast-version-control",
-      "everything-is-local",
-      "distributed-even-if-your-workflow-isnt",
-      "local-branching-on-the-cheap",
-      "distributed-is-the-new-centralized"
-    ];
-    var tagline = taglines[Math.floor(Math.random() * taglines.length)];
-    document.getElementById('tagline').innerHTML = '--' + tagline;
-  </script>
-
-  <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
-  {{ if ne (.Scratch.Get "section") "search" }}
-  <form id="search" action="{{ relURL "search/results" }}">
-    <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
-  </form>
-  <div id="search-results"></div>
-  {{ end }}
-
+  <div>
+    {{ if ne (.Scratch.Get "section") "search" }}
+    <div id="search-container">
+      <form id="search" action="{{ relURL "search/results" }}">
+        <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
+      </form>
+      <div id="search-results"></div>
+    </div>
+    {{ end }}
+    <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
+  </div>
 </header>

tests/git-scm.spec.js

@@ -115,7 +115,8 @@ test('search', async ({ page }) => {
   // Expect the first search result to be "git-commit"
   const searchResults = page.locator('#search-results')
   await expect(searchResults.getByRole("link")).not.toHaveCount(0)
-  await expect(searchResults.getByRole("link").nth(0)).toHaveText('git-commit')
+  await expect(searchResults.getByRole("link").nth(0)).toHaveText('Show all results...')
+  await expect(searchResults.getByRole("link").nth(1)).toHaveText('git-commit')
 
   // Expect the search page to show up
   await searchBox.press('Enter')
@@ -137,7 +138,8 @@ test('search', async ({ page }) => {
   await page.goto(`${url}docs/git-commit/fr`)
   await searchBox.fill('add')
   await searchBox.press('Shift')
-  await expect(searchResults.getByRole("link").nth(0)).toHaveAttribute('href', /\/docs\/git-add\/fr(\.html)?$/)
+  await expect(searchResults.getByRole("link").nth(0)).toHaveAttribute('href', /\/search\/results\?search=add&language=fr$/)
+  await expect(searchResults.getByRole("link").nth(1)).toHaveAttribute('href', /\/docs\/git-add\/fr(\.html)?$/)
 
   // pressing the Enter key should navigate to the full search results page
   await searchBox.press('Enter')