UX: fixed top menu when backlink to the site exists (#222)

In this PR we introduced backlink to the site #220 This PR introduces a fixed position menu on top. Without it, when there are a lot of errors, the user has to scroll to the top to see the back button.
discourse · Feb 15, 2024 · f4fb543 · f4fb543
1 parent e8ac14c
commit f4fb543
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+- 2024-02-15: 2.17.1
+
+  - UX: fixed top menu when backlink to the site exists
+
 - 2024-02-15: 2.17.0
 
   - FEATURE: backlink to site

diff --git a/client-app/app/controllers/index.js b/client-app/app/controllers/index.js
@@ -39,6 +39,11 @@ export default class IndexController extends Controller {
     return Preload.get("back_to_site_link_path");
   }
 
+  @computed
+  get hasTopMenu() {
+    return this.backToSiteLinkText && this.backToSiteLinkPath;
+  }
+
   get actionsInMenu() {
     return (
       /mobile/i.test(navigator.userAgent) && !/iPad/.test(navigator.userAgent)

diff --git a/client-app/app/styles/app.css b/client-app/app/styles/app.css
@@ -277,10 +277,22 @@ tbody tr {
   bottom: 320px;
   overflow: auto;
 }
+#top-panel.with-top-menu {
+  top: 35px;
+}
+
+#top-menu {
+  position: fixed;
+  z-index: 900;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
 
 #back-to-site-panel {
   padding: 10px;
   background-color: #f1f1f1;
+  height: 15px;
 }
 
 .message-info {

diff --git a/client-app/app/templates/index.hbs b/client-app/app/templates/index.hbs
@@ -1,8 +1,12 @@
-<div id="top-panel">
-  <BackToSiteLink
-    @path={{this.backToSiteLinkPath}}
-    @text={{this.backToSiteLinkText}}
-  />
+{{#if this.hasTopMenu}}
+  <div id="top-menu">
+    <BackToSiteLink
+      @path={{this.backToSiteLinkPath}}
+      @text={{this.backToSiteLinkText}}
+    />
+  </div>
+{{/if}}
+<div id="top-panel" class={{if this.hasTopMenu "with-top-menu"}}>
   <div id="log-table">
     {{#if this.model.moreBefore}}
       <div {{on "click" this.showMoreBefore}} class="show-more">

diff --git a/lib/logster/version.rb b/lib/logster/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Logster
-  VERSION = "2.17.0"
+  VERSION = "2.17.1"
 end