[bug] about page on small devices

CHANGELOG.md

@@ -11,6 +11,8 @@
 - Fix a bug: the count of successfully updated events was not correct
 - Fix a bug: german watermark was missing
 - Fix a bug: invoices are not generated in test/development for locale with region (eg. fr-CA)
+- Fix a bug: cannot access to "about" page on small devices
+- Fix a bug: "about" page shows a non-functional menu icon
 - Fix a security issue: updated underscore to 1.12.1 to fix [CVE-2021-23358](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-23358)
 - Fix a security issue: updated lodash to 4.17.21 to fix [CVE-2021-23337](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-23337)
 - Fix a security issue: updated url-parse to 1.5.1 to fix [CVE-2021-27515](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-27515)

app/frontend/src/javascript/controllers/header.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Application.Controllers.controller('HeaderController', ['$scope', '$rootScope', '$state',
+  function ($scope, $rootScope, $state) {
+    $scope.aboutPage = ($state.current.name === 'app.public.about');
+
+    $rootScope.$on('$stateChangeStart', function (event, toState) {
+      $scope.aboutPage = (toState.name === 'app.public.about');
+    });
+  }
+]);

app/frontend/src/javascript/router.js

@@ -21,7 +21,8 @@ angular.module('application.router', ['ui.router'])
         abstract: true,
         views: {
           header: {
-            templateUrl: '/shared/header.html.erb'
+            templateUrl: '/shared/header.html.erb',
+            controller: 'HeaderController'
           },
           leftnav: {
             templateUrl: '/shared/leftnav.html',

app/frontend/templates/shared/header.html.erb

@@ -1,7 +1,12 @@
 
   <div class="navbar-header">
-    <a ng-click="toggleNavSize($event)" class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"><i class="fa fa-bars"></i></a>
-    <a ui-sref="app.public.home" class="navbar-brand" ng-click="goabout = false">
+    <a ng-click="toggleNavSize($event)" class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav" ng-hide="aboutPage">
+      <i class="fa fa-bars"></i>
+    </a>
+    <a ui-sref="app.public.home"  class="btn btn-link visible-xs" ng-show="aboutPage">
+      <i class="fa fa-caret-up"></i>
+    </a>
+    <a ui-sref="app.public.home" class="navbar-brand">
       <img ng-src="{{logo.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="m-r-sm"/>
       <%= "<label class='label-staging label label-warning text-sm hidden-sm hidden-xs'>Staging</label>".html_safe if Rails.env.staging? %>
     </a>
@@ -9,12 +14,12 @@
 
   <ul class="nav navbar-nav hidden-xs">
     <li class="about-page-link">
-      <a href class="about-link font-sbold text-sm" ng-click="goabout = !goabout" ui-sref="app.public.about" ng-show="!goabout">
+      <a href class="about-link font-sbold text-sm" ui-sref="app.public.about" ng-show="!aboutPage">
         <span class="label label-theme rounded text-lg text-white m-r-sm font-ebold">?</span>
           {{ linkName }}
       </a>
-      <a href class="about-link font-sbold text-sm" ng-click="goabout = !goabout" ui-sref="app.public.home" ng-show="goabout">
-        <span class="label label-theme label-icon rounded text-lg text-white m-r-sm font-ebold"><i class="fa fa-caret-up" ng-show="goabout"></i></span>
+      <a href class="about-link font-sbold text-sm" ui-sref="app.public.home" ng-show="aboutPage">
+        <span class="label label-theme label-icon rounded text-lg text-white m-r-sm font-ebold"><i class="fa fa-caret-up" ng-show="aboutPage"></i></span>
           {{ 'app.public.common.return' | translate }}
       </a>
     </li>

app/frontend/templates/shared/leftnav.html

@@ -62,6 +62,11 @@
                 </a>
             </li>
             <!-- Common menu entries -->
+            <li class="hidden-sm hidden-md hidden-lg">
+              <a class="auto pointer" ui-sref="app.public.about">
+                <i class="fa fa-question-circle-o"></i> <span>{{ linkName }}</span>
+              </a>
+            </li>
             <li class="{{navLink.class}}" ng-repeat="navLink in navLinks">
               <a ng-click="toggleNavSize($event)" ui-sref="{{navLink.state}}" ui-sref-active="active" class="auto" data-toggle="class:nav-off-screen" data-target="#nav" ng-if="navLink.state">
                 <i class="fa fa-{{navLink.linkIcon}} fa-lg"></i>