Merge branch 'staging' into portfolio-defense-component-bug

templates/components/sidenav_item.html

@@ -1,5 +1,5 @@
 {% macro SidenavItem(label, href, active=False) -%}
-  <li>
+  <li class="sidenav__item">
     <a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
       <span class="sidenav__link-label">
         {{label}}

templates/help/index.html

@@ -6,29 +6,26 @@
 
 {% block content %}
   <div class='global-layout'>
-    <div class='global-navigation sidenav'>
-      <ul>
-
-        {{ SidenavItem("JEDI Cloud Help",
-          href = url_for("atst.helpdocs"),
-          active = not doc,
-        )}}
-
-        {% for doc_item in docs %}
-          {% set active = doc and doc == doc_item %}
-
-          {{ SidenavItem(doc_item | title,
-            href = url_for("atst.helpdocs", doc=doc_item),
-            active = active,
-          )}}
-        {% endfor %}
-
-      </ul>
+    <div class='global-navigation'>
+      <div class="sidenav-container">
+        <div class="sidenav">
+          <ul class="sidenav__list sidenav__list--no-header">
+            {{ SidenavItem("JEDI Cloud Help",
+              href = url_for("atst.helpdocs"),
+              active = not doc,
+            )}}
+            {% for doc_item in docs %}
+              {% set active = doc and doc == doc_item %}
+              {{ SidenavItem(doc_item | title,
+                href = url_for("atst.helpdocs", doc=doc_item),
+                active = active,
+              )}}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
     </div>
-
-
     <div class='global-panel-container'>
-
       <div class='panel'>
         <div class='panel__heading panel__heading--divider'>
           <h1>
@@ -40,16 +37,12 @@
             {% endif %}
           </h1>
         </div>
-
         <div class='panel__content'>
-
           {% block doc_content %}
             <p>Welcome to the JEDI Cloud help documentation.</p>
           {% endblock %}
-
         </div>
       </div>
     </div>
-
   </div>
 {% endblock %}

templates/navigation/global_sidenav.html

@@ -1,39 +1,34 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/sidenav_item.html" import SidenavItem %}
 
-
-<div v-cloak is="SidenavToggler" class="global-navigation">
-  <template slot-scope='props'>
-    <div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
-      <div class="sidenav-container__fixed">
-        <div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
-          <div v-bind:class="{'sidenav__header': props.isVisible, 'sidenav__header--minimized': !props.isVisible}" class="row">
-            <template v-if="props.isVisible">
-              <span class="sidenav__title col col--grow">My Portfolios</span>
-              <a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
-                {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--primary") }}
-                <span>Hide</span>
-              </a>
-            </template>
-            <template v-else>
-              <a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
-                <span>Show</span>
-                {{ Icon('angle-double-right-solid', classes="toggle-arrows icon--primary") }}
-              </a>
-            </template>
-          </div>
-          <div v-if="props.isVisible">
-            <ul class="sidenav__list--padded">
-              {% for other_portfolio in portfolios|sort(attribute='name') %}
-                {{ SidenavItem(other_portfolio.name,
-                  href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
-                  active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
-                  ) }}
-              {% endfor %}
-            </ul>
-          </div>
+<div class="global-navigation">
+  <sidenav-toggler v-cloak inline-template>
+    <div v-bind:class="{'sidenav-container': isVisible, 'sidenav-container--minimized': !isVisible}">
+      <div v-bind:class="{'sidenav': isVisible, 'sidenav--minimized': !isVisible}">
+        <div v-bind:class="{'sidenav__header': isVisible, 'sidenav__header--minimized': !isVisible}" class="row">
+          <template v-if="isVisible">
+            <span class="sidenav__title col col--grow">My Portfolios</span>
+            <a href="#" v-on:click="toggle" class="sidenav__toggle col">
+              {{ Icon('angle-double-left-solid', classes="sidenav__toggle-arrows icon--primary") }}
+              <span>Hide</span>
+            </a>
+          </template>
+          <template v-else>
+            <a href="#" v-on:click="toggle" class="sidenav__toggle col">
+              <span>Show</span>
+              {{ Icon('angle-double-right-solid', classes="sidenav__toggle-arrows icon--primary") }}
+            </a>
+          </template>
         </div>
+        <ul class="sidenav__list" v-if="isVisible">
+          {% for other_portfolio in portfolios|sort(attribute='name') %}
+            {{ SidenavItem(other_portfolio.name,
+              href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
+              active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
+              ) }}
+          {% endfor %}
+        </ul>
       </div>
     </div>
-  </template>
+  </sidenav-toggler>
 </div>

templates/navigation/topbar.html

@@ -8,7 +8,6 @@
         {{ "navigation.topbar.jedi_cloud_link_text" | translate }}
       </span>
     </a>
-
     <div class="topbar__context">
       {% if g.current_user %}
         <a href="{{ url_for('users.user') }}" class="topbar__link">