fix: multiple small faq issues

SEED-platform · Mar 5, 2021 · 7e18fcd · 7e18fcd
1 parent d1b64a5
commit 7e18fcd
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   },
   "scripts": {
     "postinstall": "cd vendors && npm install",
-    "lint": "./node_modules/.bin/eslint './seed/landing/static/**/*.js' './seed/static/seed/**/*.js'",
+    "lint": "./node_modules/.bin/eslint './seed/docs/static/**/*.js' './seed/landing/static/**/*.js' './seed/static/seed/**/*.js'",
     "lint:fix": "npm run lint -- --fix",
     "test": "./node_modules/.bin/protractor seed/static/seed/tests/protractor-tests/protractorConfig.js"
   },

diff --git a/seed/docs/static/docs/images/mapping_diagram.png b/seed/docs/static/docs/images/mapping_diagram.png
diff --git a/seed/docs/static/docs/js/faq.js b/seed/docs/static/docs/js/faq.js
@@ -1,20 +1,28 @@
 angular.module('BE.docs.controller.faq', [])
   .controller('faq_controller', [
     '$scope',
-    function($scope) {
+    '$timeout',
+    function ($scope, $timeout) {
       // faq-data must be a script JSON element templated into the page
-      const faqScript = document.getElementById('faq-data')
-      if (faqScript == undefined) {
-        console.error('Failed to find FAQ data with id faq-data. Ensure it is inserted before the controller is used.')
+      const faqScript = angular.element('#faq-data')[0];
+      if (!faqScript) {
+        console.error('Failed to find FAQ data with id faq-data. Ensure it is inserted before the controller is used.');
       }
 
-      $scope.faqData = JSON.parse(faqScript.textContent)
+      // Autofocus on the input
+      angular.element('.faq-search-input')[0].focus();
 
-      $scope.updateFilter = (search) => {
-        if (search == "") {
-          $('.collapse.faq-category-content').collapse('hide')
+      // $scope.faqData = JSON.parse(faqScript[0].textContent);
+      $scope.faqData = JSON.parse(faqScript.textContent);
+
+      $scope.updateFilter = search => {
+        if (!search) {
+          angular.element('.collapse.faq-category-content').collapse('hide');
         } else {
-          $('.collapse.faq-category-content').collapse('show')
+          // Timeout to allow ng-if to evaluate first
+          $timeout(function () {
+            angular.element('.collapse.faq-category-content').collapse('show');
+          }, 0);
         }
-      }
-  }])
+      };
+    }]);
diff --git a/seed/docs/templates/docs/faq.html b/seed/docs/templates/docs/faq.html
@@ -5,14 +5,14 @@
 
 {% block content %}
 <div ng-controller="menu_controller" class="ng-cloak">
-    
+
     {% include "seed/_sidebar.html" %}
-    
+
     <div class="display">
         <div ng-class="{narrow: narrow_controller, wide: wide_controller, content: true, hide_transition:is_initial_state}">
-            
+
             {% include "seed/_header.html" %}
-            
+
             <div class="page">
                 {{ faq_data|json_script:"faq-data" }}
                 <div ng-controller="faq_controller" class="faq-container">
@@ -24,22 +24,22 @@ <h1>Frequently Asked Questions</h1>
                         <div class="faq-category" ng-repeat="(categoryName, faqItems) in faqData" ng-show="(faqItems | filter:search).length > 0" ng-init="categoryIndex = $index">
                             <div class="faq-category-title">
                                 <h3>
-                                    <a data-toggle="collapse" data-parent="#accordion-categories" href="#category-{$ categoryIndex $}" style="display: block;">
-                                        {$ categoryName $}
+                                    <a data-toggle="collapse" data-parent="#accordion-categories" href="#category-{$:: categoryIndex $}" style="display: block;">
+                                        {$:: categoryName $}
                                     </a>
                                 </h3>
                             </div>
-                            <div id="category-{$ categoryIndex $}" class="faq-category-content collapse">
-                                <div class="panel-group" id="accordion-{$ categoryIndex $}">
+                            <div id="category-{$:: categoryIndex $}" class="faq-category-content collapse">
+                                <div class="panel-group" id="accordion-{$:: categoryIndex $}">
                                     <div ng-repeat="faqItem in faqItems | filter:search" class="panel panel-default">
                                         <div class="panel-heading">
                                             <h4 class="panel-title">
-                                                <a class="faq-question" data-toggle="collapse" data-parent="#accordion-{$ categoryIndex $}" href="#collapse-{$ categoryIndex $}-{$ $index $}" style="display: block;">
-                                                    {$ faqItem.question $}
+                                                <a class="faq-question" data-toggle="collapse" data-parent="#accordion-{$:: categoryIndex $}" href="#collapse-{$:: categoryIndex $}-{$:: $index $}" style="display: block;">
+                                                    {$:: faqItem.question $}
                                                 </a>
                                             </h4>
                                         </div>
-                                        <div id="collapse-{$ categoryIndex $}-{$ $index $}" class="panel-collapse collapse">
+                                        <div id="collapse-{$:: categoryIndex $}-{$:: $index $}" class="panel-collapse collapse">
                                             <div class="panel-body faq-answer" ng-bind-html="faqItem.answer"></div>
                                         </div>
                                     </div>
@@ -53,4 +53,4 @@ <h4 class="panel-title">
     </div>
 </div>
 
-{% endblock %}
+{% endblock %}
diff --git a/seed/docs/views.py b/seed/docs/views.py
@@ -13,6 +13,7 @@
 import markdown
 import yaml
 
+from seed.views.main import _get_default_org
 
 YAML_DOC_BOUNDARY = re.compile(r"^-{3,}\s*$", re.MULTILINE)
 FaqItem = namedtuple('FaqItem', ['question', 'answer', 'tags'])
@@ -62,4 +63,9 @@ def faq_page(request):
                 # convert to dict so json conversion works when templating
                 faq_data[category_name].append(parsed_faq._asdict())
 
-    return render(request, 'docs/faq.html', {'faq_data': faq_data})
+    if not request.user.is_anonymous:
+        initial_org_id, initial_org_name, initial_org_user_role = _get_default_org(
+            request.user
+        )
+
+    return render(request, 'docs/faq.html', locals())
diff --git a/seed/static/seed/js/controllers/menu_controller.js b/seed/static/seed/js/controllers/menu_controller.js
@@ -66,21 +66,16 @@ angular.module('BE.seed.controller.menu', [])
       $scope.$on('organization_list_updated', function () {
         init();
       });
-      $scope.is_active = function (menu_item) {
-        if (menu_item === $location.path()) {
-          return true;
-        } else if (menu_item !== '/' && _.startsWith($location.path(), menu_item)) {
+      $scope.is_active = function (menu_item, use_pathname) {
+        var current_path = $location.path();
+        if (use_pathname) {
+          current_path = $window.location.pathname;
+        }
+
+        if (menu_item === current_path) {
           return true;
-        } else if (menu_item === '/seed/data' && !_.includes($location.absUrl(), '#')) {
-          if (_.includes($location.absUrl(), menu_item)) return true;
-          if (_.includes($location.absUrl(), 'worksheet')) return true;
-          if (_.includes($location.absUrl(), 'mapping')) return true;
-          if (_.includes($location.absUrl(), 'cleaning')) return true;
-          if (_.includes($location.absUrl(), 'merge')) return true;
-          if (_.includes($location.absUrl(), 'import')) return true;
-          return false;
         } else {
-          return false;
+          return menu_item !== '/' && _.startsWith(current_path, menu_item);
         }
       };
 

diff --git a/seed/static/seed/scss/style.scss b/seed/static/seed/scss/style.scss
@@ -271,11 +271,9 @@ a:not([href]) {
         display: inline;
       }
 
-      &.disabled-item,
-      &.disabled-item path {
+      &.disabled-item {
+        opacity: 0.07;
         pointer-events: none;
-        color: lighten($gray, 5%);
-        fill: lighten($gray, 5%);
       }
 
       .icon {
@@ -3714,9 +3712,13 @@ $pairedCellWidth: 60px;
 FAQ page
 */
 .faq-container {
-  padding: 0px 20px;
+  padding: 0 20px;
   max-width: 700px;
   margin: auto;
+
+  a:focus, a:hover {
+    text-decoration: none;
+  }
 }
 
 .faq-search-input {
@@ -3735,7 +3737,7 @@ FAQ page
   }
 
   h3 {
-    margin: 0px;
+    margin: 0;
   }
 }
 
@@ -3744,6 +3746,9 @@ FAQ page
 }
 
 .faq-answer {
+  a:hover {
+    text-decoration: underline;
+  }
 
   img {
     display: block;

diff --git a/seed/templates/seed/_sidebar.html b/seed/templates/seed/_sidebar.html
@@ -8,39 +8,26 @@
             </div>
         </a>
         <div class="divider"></div>
-        <a id="sidebar-profile" class="item" ng-class="{'disabled-item': !logged_in}" ui-sref="profile" ui-sref-active="active">
+        <a id="sidebar-profile" class="item" ng-class="{active: is_active('/profile'), 'disabled-item': !logged_in}" href="{% url "seed:home" %}#/profile">
             <div class="icon"><i class="fa fa-cog"></i></div>
             <div ng-show="!is_initial_state" class="item_name">{$ username $}</div>
         </a>
         <div class="divider"></div>
         <a id="sidebar-inventory" ng-class="{item: true, active: is_active('/properties') || is_active('/taxlots'), 'disabled-item': !logged_in}" href="{% url "seed:home" %}#/properties">
             <div class="icon">
-                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
-                    <g>
-                        <g>
-                            <path fill="#FFFFFF" d="M20,48h8v-8h-8V48z M52,40h8v-8h-8V40z M68,40h8v-8h-8V40z M84,40h8v-8h-8V40z M52,24h8v-8h-8V24z M68,24h8
-                                v-8h-8V24z M84,24h8v-8h-8V24z M52,72h8v-8h-8V72z M68,72h8v-8h-8V72z M84,72h8v-8h-8V72z M52,88h8v-8h-8V88z M84,88h8v-8h-8V88z
-                                    M52,104h8v-8h-8V104z M84,104h8v-8h-8V104z M108,96h8v-8h-8V96z M108,72v8h8v-8H108z M108,112h8v-8h-8V112z M52,56h8v-8h-8V56z
-                                    M68,56h8v-8h-8V56z M84,56h8v-8h-8V56z M20,64h8v-8h-8V64z M20,80h8v-8h-8V80z M20,96h8v-8h-8V96z M20,112h8v-8h-8V112z M68,88h8
-                                v-8h-8V88z"/>
-                        </g>
-                    </g>
-                    <path fill="#FFFFFF" d="M124,120c0,4.4-3.6,8-8,8H12c-4.4,0-8-3.6-8-8V32c0-4.4,3.6-8,8-8h24V8c0-4.4,3.6-8,8-8h56c4.4,0,8,3.6,8,8v48
-                        h8c4.4,0,8,3.6,8,8V120z M36,32H12v88h24V32z M100,8H44v112h24V96h8v24h24V8z M116,64h-8v56h8V64z"/>
-                </svg>
+                <img src="{{ STATIC_URL }}seed/images/icon-city.svg" title="{$:: 'Inventory' | translate $}">
             </div>
             <div ng-show="!is_initial_state" class="item_name" translate>Inventory</div>
         </a>
         <a id="sidebar-data" ng-class="{item: true, active: is_active('/data'), 'disabled-item': !logged_in}" title="{$:: 'Data' | translate $}" href="{% url "seed:home" %}#/data" ng-show="menu.user.organization.user_role !== 'viewer'">
             <div class="icon"><i class="fa fa-sitemap"></i></div>
             <div ng-show="!is_initial_state" class="item_name" translate>Data</div>
-            <div ng-show="!is_initial_state" class="badge badge_menu">{$ datasets_count | number:0 $}</div>
+            <div ng-show="!is_initial_state && logged_in" class="badge badge_menu">{$ datasets_count | number:0 $}</div>
         </a>
         <a id="sidebar-accounts" ng-class="{item: true, active: is_active('/accounts'), 'disabled-item': !logged_in}" title="{$:: 'Organizations' | translate $}" href="{% url "seed:home" %}#/accounts">
             <div class="icon"><i class="fa fa-users"></i></div>
             <div ng-show="!is_initial_state" class="item_name" translate>Organizations</div>
-            <div ng-show="!is_initial_state" class="badge badge_menu">{$ organizations_count | number:0 $}</div>
+            <div ng-show="!is_initial_state && logged_in" class="badge badge_menu">{$ organizations_count | number:0 $}</div>
         </a>
 
         <div class="divider"></div>
@@ -57,7 +44,7 @@
             <div class="icon"><i class="fa fa-info-circle"></i></div>
             <div ng-show="!is_initial_state" class="item_name" translate>About</div>
         </a>
-        <a id="sidebar-docs" ng-class="{item: true, active: is_active('/documentation')}" title="{$:: 'Documentation' | translate $}" href="/documentation">
+        <a id="sidebar-docs" ng-class="{item: true, active: is_active('/documentation/', true)}" title="{$:: 'Documentation' | translate $}" href="{% url "docs:documentation" %}#/">
             <div class="icon"><i class="fa fa-book"></i></div>
             <div ng-show="!is_initial_state" class="item_name" translate>Documentation</div>
         </a>