[chg] Rework toolbar

Author: j-a-n

README.md

@@ -17,7 +17,7 @@ and create a Merge Request/Pull Request (gitlab.uib.de or github).
 ### Edit via docs.opsi.org
 <a name="edit-docs"></a>
 
-1) To Start go to [docs.opsi.org](https://docs.opsi.org) and click `Edit this Page` on the right of the page you want to edit.
+1) First, go to [docs.opsi.org] (https://docs.opsi.org) and click the `Edit this page` button at the top right of the page you want to edit.
 
 ![opsidoc-edit-page-en](assets/images/en/readme/opsidoc-edit-page-en.png)
 
@@ -315,7 +315,7 @@ Diese Listings besitzen den folgenden Aufbau:
 ```
 Gültige Typen sind beispielweise: `console`, `shell`, `bash`, `ini`, `xml`, `html`, `css`.
 
-*Achtung:* Es gibt einen Unterschied zwischen `[source,console]` und `[source,shell]`: 
+*Achtung:* Es gibt einen Unterschied zwischen `[source,console]` und `[source,shell]`:
 
 * `[source,console]` stellt Text dar, das in eine Konole (also eine Terminalanwendung) eingegeben wird
 * `[source,shell]` ist für Inhalte von Shellskripten (Alternative: `[source,bash]`, `[source,zsh]`)

antora-ui/.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": "standard",
+  "ignorePatterns": ["search-ui.js"],
   "rules": {
     "arrow-parens": ["error", "always"],
     "comma-dangle": ["error", {

antora-ui/gulp.d/tasks/lint-js.js

@@ -6,7 +6,7 @@ const vfs = require('vinyl-fs')
 module.exports = (files) => (done) =>
   vfs
     .src(files)
-    .pipe(eslint())
+    .pipe(eslint({fix:true}))
     .pipe(eslint.format())
     .pipe(eslint.failAfterError())
     .on('error', done)

antora-ui/src/css/header.css

@@ -171,7 +171,7 @@ body {
 
 @media screen and (min-width: 769px) {
   #search-input {
-    width: 200px;
+    width: 100%;
   }
 }
 

antora-ui/src/css/opsi.css

@@ -300,7 +300,7 @@ nav.navbar {
 }
 
 #search-input {
-  width: 200px;
+  width: 100%;
   padding: 0.2rem 0.25rem 0.2rem 0.25rem;
   font-size: calc(15 / var(--rem-base) * 1rem);
   color: var(--toolbar-font-color);

antora-ui/src/css/page-versions.css

@@ -2,6 +2,7 @@
   margin: 0 0.2rem 0 auto;
   position: relative;
   line-height: 1;
+  min-width: 4rem;
 }
 
 @media screen and (min-width: 1024px) {

antora-ui/src/css/toolbar.css

@@ -25,6 +25,7 @@
   padding: 0;
   height: var(--toolbar-height);
   width: var(--toolbar-height);
+  min-width: var(--toolbar-height);
   margin-right: -0.25rem;
 }
 
@@ -44,6 +45,7 @@
   background: url(../img/home-o.svg) no-repeat center;
   height: calc(var(--toolbar-height) / 2);
   width: calc(var(--toolbar-height) / 2);
+  min-width: calc(var(--toolbar-height) / 2);
   margin: calc(var(--toolbar-height) / 4);
 }
 
@@ -53,16 +55,10 @@
 }
 
 .edit-this-page {
-  display: none;
-  padding-right: 0.5rem;
-}
-
-@media screen and (min-width: 1024px) {
-  .edit-this-page {
-    display: block;
-  }
-}
-
-.toolbar .edit-this-page a {
-  color: var(--toolbar-muted-color);
+  display: block;
+  background: url(../img/edit-page.svg) no-repeat center;
+  height: calc(var(--toolbar-height) / 2);
+  width: calc(var(--toolbar-height) / 2);
+  min-width: calc(var(--toolbar-height) / 2);
+  margin: calc(var(--toolbar-height) / 4);
 }

antora-ui/src/img/edit-page.svg

@@ -205,7 +205,7 @@
       searchResultDataset.appendChild(createSearchResultItem(doc, sectionTitle, item, highlightingResult, query))
     })
   }
-  
+
 
   function createSearchResultItem (doc, sectionTitle, item, highlightingResult, query) {
     console.log("createSearchResultItem");
@@ -225,7 +225,7 @@
     const documentHit = document.createElement('div')
     documentHit.classList.add('search-result-document-hit')
     const documentHitLink = document.createElement('a')
-  
+
     //documentHitLink.href = siteRootPath + doc.url + (sectionTitle ? '#' + sectionTitle.hash : '')
     //set query param to search query
     let url = new URL(siteRootPath + doc.url, window.location.href)
@@ -234,7 +234,7 @@
     }
     url.searchParams.set('q', query)
     documentHitLink.href = url.href
-  
+
     documentHit.appendChild(documentHitLink)
     if (highlightingResult.sectionTitleNodes.length > 0) {
       const documentSectionTitle = document.createElement('div')
@@ -275,7 +275,7 @@
         url.searchParams.set('q',  node.text)
         documentHitLink.href = url.href
       }
-      
+
       documentHitLink.appendChild(element)
     })
     const searchResultItem = document.createElement('div')
@@ -309,7 +309,7 @@
     const componentFilter = componentFilterInput && componentFilterInput.checked && componentFilterInput.dataset.componentFilter;
     const versionFilter = versionFilterInput && versionFilterInput.checked && versionFilterInput.dataset.versionFilter;
     if (componentFilter || versionFilter) {
-      
+
       return result.filter((item) => {
         const ids = item.ref.split('-');
         const docId = ids[0];
@@ -453,16 +453,16 @@
   }
 
 
- 
+
 
   function highliteMatches () {
     const params = new URLSearchParams(window.location.search.slice(1))
-    
+
     const query = params.get('q')
     if (query == undefined || query == null) return
     searchWord(query)
   }
-  
+
   function searchWord(searchText) {
     let cont = document.querySelector("article");
     let pattern = new RegExp("(" + searchText + ")", "gi");
@@ -473,12 +473,12 @@
         hrefs.push(links[i].href)
     }
     cont.innerHTML = cont.innerHTML.replace(pattern, "<mark>$1</mark>");
-   
+
     let new_links = document.querySelectorAll(".xref");
     for (var i = 0; i < links.length; i++) {
         new_links[i].href = hrefs[i]
     }
-    
+
     let scrollPos = document.querySelector("mark").offsetTop - 200;
     window.scroll({ top: scrollPos, behavior: "auto" });
   }
@@ -509,10 +509,10 @@
       componentFilterInput.addEventListener('change', (e) => toggleFilter(e, index));
     }
     document.documentElement.addEventListener('click', clearSearchResults);
-    
+
     highliteMatches()
-    
-    
+
+
   }
 
   // disable the search input until the index is loaded

supplemental_ui/js/search-ui.js antora-ui/src/js/search-ui.jssupplemental_ui/js/search-ui.js renamed to antora-ui/src/js/search-ui.js

@@ -7,18 +7,19 @@
 
       <div class="navbar-item search hide-for-print">
         <div id="search-field" class="field">
-          <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
+          <input id="search-input" type="text" placeholder="{{#if page.attributes.search-placeholder }}{{ page.attributes.search-placeholder }}{{else}}Search the docs{{/if}}"{{#if page.home}} autofocus{{/if}}>
 
           <label class="filter checkbox" style="display: none">
-            <input type="checkbox" data-facet-filter="component:{{page.component.name}}" checked> In this project
+            <input type="checkbox" data-component-filter="component:{{page.component.name}}" data-version-filter="version:{{page.version}}" checked> In this project
           </label>
         </div>
       </div>
 
   {{> page-versions}}
+
   {{#if (and page.fileUri (not env.CI))}}
-  <div class="edit-this-page"><a href="{{page.fileUri}}">Edit this Page</a></div>
+  <div><a class="edit-this-page" href="{{page.fileUri}}" title="{{#if page.attributes.edit-label }}{{ page.attributes.edit-label }}{{else}}Edit this Page{{/if}}"></a></div>
   {{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
-  <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
+  <div><a class="edit-this-page" href="{{page.editUrl}}" title="{{#if page.attributes.edit-label }}{{ page.attributes.edit-label }}{{else}}Edit this Page{{/if}}"></a></div>
   {{/if}}
 </div>