From d5683e23bc987a25fe64a040ecaf2e591bda011f Mon Sep 17 00:00:00 2001
From: Alex Eng <aeng@redhat.com>
Date: Thu, 28 Nov 2013 13:36:09 +1000
Subject: [PATCH] WIP: update ui with new css

---
 .../zanata/webtrans/public/Application.xhtml  |   1 -
 .../layout/version-group/languages-tab.xhtml  | 272 +++++++++---------
 .../layout/version-group/projects-tab.xhtml   | 272 +++++++++---------
 .../main/webapp/WEB-INF/template/banner.xhtml | 121 +++++---
 .../webapp/WEB-INF/template/right_menu.xhtml  |  42 ---
 .../webapp/WEB-INF/template/template.xhtml    |   1 -
 .../webapp/WEB-INF/template/template_2x.xhtml |   1 -
 7 files changed, 349 insertions(+), 361 deletions(-)
 delete mode 100644 zanata-war/src/main/webapp/WEB-INF/template/right_menu.xhtml

diff --git a/zanata-war/src/main/resources/org/zanata/webtrans/public/Application.xhtml b/zanata-war/src/main/resources/org/zanata/webtrans/public/Application.xhtml
index 96ed2b61a4..2103b5fe80 100644
--- a/zanata-war/src/main/resources/org/zanata/webtrans/public/Application.xhtml
+++ b/zanata-war/src/main/resources/org/zanata/webtrans/public/Application.xhtml
@@ -51,7 +51,6 @@
     <div class="new-zanata-base">
       <div class="new-zanata">
         <ui:include src="../WEB-INF/template/left_menu.xhtml"/>
-        <ui:include src="../WEB-INF/template/right_menu.xhtml"/>
       </div>
     </div>
 
diff --git a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/languages-tab.xhtml b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/languages-tab.xhtml
index 7ccefe15bf..8d2628ad93 100644
--- a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/languages-tab.xhtml
+++ b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/languages-tab.xhtml
@@ -8,57 +8,56 @@
 
 <div class="panels--2">
 <div class="g--collapsed">
-<div class="g__item w--1-2 w--1-2-s panels__panel">
-  <div class="bg--pop-high">
-    <div class="panels__panel__header">
-      <div class="g--tight">
-        <div class="g__item w--1-2 w--1-2-s">
-          <h2 class="heading--secondary epsilon">
-            <i class="i i--language"></i>
-            #{messages['jsf.Languages']}
-          </h2>
-        </div>
-        <div
-          class="g__item w--1-2 w--1-2-s txt--align-right txt--s-align-right">
-          <zanata:sortlist id="languages-language_sorting"
-            sortAction="#{versionGroupHomeAction.sortLanguageList()}"
-            render="languages-language_form"
-            sortingList="#{versionGroupHomeAction.languageSortingList}"/>
-        </div>
+<div class="g__item w--1-2 w--1-2-s panels__panel panel">
+  <div class="panels__panel__header panel__header">
+    <div class="bx--table">
+      <div class="bx--table__cell w--1 w--1-s">
+        <h2 class="heading--secondary epsilon">
+          <i class="i i--language"></i>
+          #{messages['jsf.Languages']}
+        </h2>
+      </div>
+      <div
+        class="txt--nowrap txt--align-right txt--s-align-right">
+        <zanata:sortlist id="languages-language_sorting"
+          sortAction="#{versionGroupHomeAction.sortLanguageList()}"
+          render="languages-language_form"
+          sortingList="#{versionGroupHomeAction.languageSortingList}"/>
       </div>
     </div>
-    <h:form id="languages-language_form" styleClass="l--push-bottom-0">
-      <s:fragment
-        rendered="#{versionGroupHomeAction.getActiveLocales().isEmpty()}">
-        <div class="l--pad-all-half">
-          <p class="txt--meta">#{messages['jsf.NoActiveLanguages']}</p>
-          <s:fragment
-            rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
-            <p>
-              <a href="#settings-languages" class="button--primary"
-                onclick="updateHashAndGotoUrl(this)">
-                #{messages['jsf.AddLanguages']}
-              </a>
-            </p>
-          </s:fragment>
-        </div>
-      </s:fragment>
+  </div>
+  <h:form id="languages-language_form" styleClass="l--push-bottom-0">
+    <s:fragment
+      rendered="#{versionGroupHomeAction.getActiveLocales().isEmpty()}">
+      <div class="l--pad-all-half">
+        <p class="txt--meta">#{messages['jsf.NoActiveLanguages']}</p>
+        <s:fragment
+          rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
+          <p>
+            <a href="#settings-languages" class="button--primary"
+              onclick="updateHashAndGotoUrl(this)">
+              #{messages['jsf.AddLanguages']}
+            </a>
+          </p>
+        </s:fragment>
+      </div>
+    </s:fragment>
 
-      <s:fragment
-        rendered="#{!versionGroupHomeAction.getActiveLocales().isEmpty()}">
-        <ul class="list--stats" id="languages-language_list">
-          <ui:repeat
-            value="#{versionGroupHomeAction.getActiveLocales()}"
-            var="hLocale">
-            <li
-              class="progress-bar__expander panels__panel__item bg--highest--hover">
-              <a4j:commandLink
-                action="#{versionGroupHomeAction.setSelectedLocale(hLocale)}"
-                render="languages-project_list, language-label"
-                onclick="updateActiveRow(this);toggleColumn('languages_content')"
-                styleClass="bx--block">
-                <div class="list__item">
-                  <div class="list__item__info">
+    <s:fragment
+      rendered="#{!versionGroupHomeAction.getActiveLocales().isEmpty()}">
+      <ul class="list--stats" id="languages-language_list">
+        <ui:repeat
+          value="#{versionGroupHomeAction.getActiveLocales()}"
+          var="hLocale">
+          <li
+            class="progress-bar__expander panels__panel__item bg--highest--hover">
+            <a4j:commandLink
+              action="#{versionGroupHomeAction.setSelectedLocale(hLocale)}"
+              render="languages-project_list, language-label"
+              onclick="updateActiveRow(this);toggleColumn('languages_content')"
+              styleClass="bx--block">
+              <div class="list__item">
+                <div class="list__item__info">
                       <span class="list__title">
                         ${hLocale.retrieveDisplayName()}
                         <a4j:outputPanel
@@ -68,9 +67,9 @@
                           #{versionGroupHomeAction.getMissingVersion(hLocale.localeId).size()}
                         </a4j:outputPanel>
                       </span>
-                  </div>
-                  <s:div styleClass="list__item__stats"
-                    rendered="#{versionGroupHomeAction.pageRendered}">
+                </div>
+                <s:div styleClass="list__item__stats"
+                  rendered="#{versionGroupHomeAction.pageRendered}">
                        <span class="stats--small txt--state-neutral">
                           <span class="stats__figure">
                             ${versionGroupHomeAction.getStatisticFigureForLocale(versionGroupHomeAction.languageSortingList.selectedSortOption, hLocale.localeId)}
@@ -79,89 +78,87 @@
                             ${versionGroupHomeAction.getStatisticUnit(versionGroupHomeAction.languageSortingList.selectedSortOption)}
                           </span>
                         </span>
-                  </s:div>
-                </div>
+                </s:div>
+              </div>
 
-                <zanata:statistic
-                  value="${versionGroupHomeAction.getStatisticsForLocale(hLocale.localeId)}"
-                  rendered="#{versionGroupHomeAction.pageRendered}"/>
+              <zanata:statistic
+                value="${versionGroupHomeAction.getStatisticsForLocale(hLocale.localeId)}"
+                rendered="#{versionGroupHomeAction.pageRendered}"/>
 
-                <zanata:loader type="large"
-                  rendered="#{!versionGroupHomeAction.pageRendered}"/>
-              </a4j:commandLink>
-            </li>
-          </ui:repeat>
-        </ul>
-      </s:fragment>
-    </h:form>
-  </div>
+              <zanata:loader type="large"
+                rendered="#{!versionGroupHomeAction.pageRendered}"/>
+            </a4j:commandLink>
+          </li>
+        </ui:repeat>
+      </ul>
+    </s:fragment>
+  </h:form>
 </div>
 
-<div class="g__item w--1-2 w--1-2-s panels__panel">
-  <s:div styleClass="bg--pop-higher">
-    <div class="panels__panel__header">
-      <div class="g--tight">
-        <div class="g__item w--1-2 w--1-2-s">
-          <h2 class="heading--secondary epsilon">
-                <span class="is-hidden--l-up">
-                  <a href="#"
-                    onclick="removeActiveRows('languages-language_list');toggleColumn('languages_content')"
-                    title="#{messages['Languages']}">
-                    <i class="i i--language"></i>
-                  </a>
-                  <i class="i i--arrow-right"></i>
-                </span>
-            <i class="i i--project"></i>
-            <a4j:outputPanel id="language-label">
-              #{versionGroupHomeAction.selectedLocale.retrieveDisplayName()}
-            </a4j:outputPanel>
-            #{messages['Projects']}
-          </h2>
-        </div>
-        <div
-          class="g__item w--1-2 w--1-2-s txt--align-right txt--s-align-right">
-          <zanata:sortlist id="languages-project_sorting"
-            sortAction="#{versionGroupHomeAction.sortProjectList(versionGroupHomeAction.selectedLocale.localeId)}"
-            render="languages-project_list"
-            sortingList="#{versionGroupHomeAction.projectSortingList}"/>
-        </div>
+<div class="g__item w--1-2 w--1-2-s panels__panel panel bg--pop-higher">
+  <div class="panel__header">
+    <div class="bx--table">
+      <div class="is-hidden--l-up bx--table-cell txt--nowrap">
+        <a href="#" class="l--pad-all-half bx--inline-block"
+          onclick="removeActiveRows('languages-language_list');toggleColumn('languages_content')"
+          title="#{messages['Languages']}">
+          <i class="i--huge i--arrow-left"></i>
+        </a>
+      </div>
+
+      <div class="bx--table__cell w--1 w--1-s l--pad-all-half d--left">
+        <h2 class="heading--secondary epsilon">
+          <i class="i i--project l--push-right-quarter"></i>
+          <a4j:outputPanel id="language-label">
+            #{versionGroupHomeAction.selectedLocale.retrieveDisplayName()}
+          </a4j:outputPanel>
+          #{messages['Projects']}
+        </h2>
+      </div>
+      <div
+        class="txt--align-right txt--s-align-right txt--nowrap l--push-right-half">
+        <zanata:sortlist id="languages-project_sorting"
+          sortAction="#{versionGroupHomeAction.sortProjectList(versionGroupHomeAction.selectedLocale.localeId)}"
+          render="languages-project_list"
+          sortingList="#{versionGroupHomeAction.projectSortingList}"/>
       </div>
     </div>
-    <h:form id="languages-project_list" styleClass="l--push-bottom-0">
-      <s:fragment
-        rendered="#{versionGroupHomeAction.selectedLocale == null}">
-        <div class="l--pad-all-half">
-          <p class="txt--meta">
-            #{messages['jsf.SelectALanguageFromList']}
-          </p>
-        </div>
-      </s:fragment>
-      <s:fragment
-        rendered="#{versionGroupHomeAction.selectedLocale != null and versionGroupHomeAction.getProjectIterations().isEmpty()}">
-        <div class="l--pad-all-half">
-          <p class="txt--meta">#{messages['jsf.NoProjectsInGroup']}</p>
+  </div>
+  <h:form id="languages-project_list" styleClass="l--push-bottom-0">
+    <s:fragment
+      rendered="#{versionGroupHomeAction.selectedLocale == null}">
+      <div class="l--pad-all-half">
+        <p class="txt--meta">
+          #{messages['jsf.SelectALanguageFromList']}
+        </p>
+      </div>
+    </s:fragment>
+    <s:fragment
+      rendered="#{versionGroupHomeAction.selectedLocale != null and versionGroupHomeAction.getProjectIterations().isEmpty()}">
+      <div class="l--pad-all-half">
+        <p class="txt--meta">#{messages['jsf.NoProjectsInGroup']}</p>
 
-          <s:fragment
-            rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
-            <p>
-              <a href="#settings-projects" class="button--primary"
-                onclick="updateHashAndGotoUrl(this)">
-                #{messages['jsf.AddProjectVersions']}
-              </a>
-            </p>
-          </s:fragment>
-        </div>
-      </s:fragment>
-      <s:fragment
-        rendered="#{versionGroupHomeAction.selectedLocale != null and !versionGroupHomeAction.getProjectIterations().isEmpty()}">
-        <ul class="list--stats">
-          <ui:repeat
-            value="#{versionGroupHomeAction.getProjectIterations()}"
-            var="version">
-            <li
-              class="progress-bar__expander panels__panel__item bg--highest--hover">
-              <div class="list__item">
-                <div class="list__item__info">
+        <s:fragment
+          rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
+          <p>
+            <a href="#settings-projects" class="button--primary"
+              onclick="updateHashAndGotoUrl(this)">
+              #{messages['jsf.AddProjectVersions']}
+            </a>
+          </p>
+        </s:fragment>
+      </div>
+    </s:fragment>
+    <s:fragment
+      rendered="#{versionGroupHomeAction.selectedLocale != null and !versionGroupHomeAction.getProjectIterations().isEmpty()}">
+      <ul class="list--stats">
+        <ui:repeat
+          value="#{versionGroupHomeAction.getProjectIterations()}"
+          var="version">
+          <li
+            class="progress-bar__expander panels__panel__item bg--highest--hover">
+            <div class="list__item">
+              <div class="list__item__info">
                       <span class="list__title">
                         <h:outputLink
                           value="#{request.contextPath}/webtrans/Application.seam"
@@ -194,8 +191,8 @@
                             class="badge--danger">#{messages['jsf.Missing']}</span>
                         </s:link>
                       </span>
-                </div>
-                <div class="list__item__stats">
+              </div>
+              <div class="list__item__stats">
                       <span class="stats--small">
                         <span class="stats__figure">
                           ${versionGroupHomeAction.getStatisticFigureForProjectWithLocale(versionGroupHomeAction.projectSortingList.selectedSortOption, versionGroupHomeAction.selectedLocale.localeId, version.id)}
@@ -204,16 +201,15 @@
                           ${versionGroupHomeAction.getStatisticUnit(versionGroupHomeAction.projectSortingList.selectedSortOption)}
                         </span>
                       </span>
-                </div>
               </div>
-              <zanata:statistic
-                value="${versionGroupHomeAction.getSelectedLocaleStatistic(version.id)}"/>
-            </li>
-          </ui:repeat>
-        </ul>
-      </s:fragment>
-    </h:form>
-  </s:div>
+            </div>
+            <zanata:statistic
+              value="${versionGroupHomeAction.getSelectedLocaleStatistic(version.id)}"/>
+          </li>
+        </ui:repeat>
+      </ul>
+    </s:fragment>
+  </h:form>
 </div>
 </div>
 </div>
diff --git a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/projects-tab.xhtml b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/projects-tab.xhtml
index 0fc8c8d367..f289e8ac04 100644
--- a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/projects-tab.xhtml
+++ b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/projects-tab.xhtml
@@ -8,57 +8,55 @@
 
 <div class="panels--2">
 <div class="g--collapsed">
-<div class="g__item w--1-2 w--1-2-s panels__panel">
-  <div class="bg--pop-high">
-    <div class="panels__panel__header">
-      <div class="g--tight">
-        <div class="g__item w--1-2 w--1-2-s">
-          <h2 class="heading--secondary epsilon">
-            <i class="i i--project"></i>
-            #{messages['jsf.Projects']}
-          </h2>
-        </div>
-        <div
-          class="g__item w--1-2 w--1-2-s txt--align-right txt--s-align-right">
-          <zanata:sortlist id="projects-project_sorting"
-            sortAction="#{versionGroupHomeAction.sortProjectList()}"
-            render="projects-project_form"
-            sortingList="#{versionGroupHomeAction.projectSortingList}"/>
-        </div>
+<div class="g__item w--1-2 w--1-2-s panels__panel panel">
+  <div class="panels__panel__header panel__header">
+    <div class="bx--table">
+      <div class="bx--table__cell w--1 w--1-s">
+        <h2 class="heading--secondary epsilon">
+          <i class="i i--project"></i>
+          #{messages['jsf.Projects']}
+        </h2>
+      </div>
+      <div
+        class="txt--nowrap txt--align-right txt--s-align-right">
+        <zanata:sortlist id="projects-project_sorting"
+          sortAction="#{versionGroupHomeAction.sortProjectList()}"
+          render="projects-project_form"
+          sortingList="#{versionGroupHomeAction.projectSortingList}"/>
       </div>
     </div>
-    <h:form id="projects-project_form" styleClass="l--push-bottom-0">
-      <s:fragment
-        rendered="#{versionGroupHomeAction.getProjectIterations().isEmpty()}">
-        <div class="l--pad-all-half">
-          <p class="txt--meta">#{messages['jsf.NoProjectsInGroup']}</p>
-
-          <s:fragment
-            rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
-            <p>
-              <a href="#settings-projects" class="button--primary"
-                onclick="updateHashAndGotoUrl(this)">
-                #{messages['jsf.AddProjectVersions']}
-              </a>
-            </p>
-          </s:fragment>
-        </div>
-      </s:fragment>
-      <s:fragment
-        rendered="#{!versionGroupHomeAction.getProjectIterations().isEmpty()}">
-        <ul class="list--stats" id="projects-project_list">
-          <ui:repeat
-            value="#{versionGroupHomeAction.getProjectIterations()}"
-            var="version">
-            <li
-              class="progress-bar__expander panels__panel__item bg--highest--hover">
-              <a4j:commandLink
-                action="#{versionGroupHomeAction.setSelectedVersion(version)}"
-                render="projects-language_list, project-label"
-                onclick="updateActiveRow(this);toggleColumn('projects_content')"
-                styleClass="bx--block">
-                <div class="list__item">
-                  <div class="list__item__info">
+  </div>
+  <h:form id="projects-project_form" styleClass="l--push-bottom-0">
+    <s:fragment
+      rendered="#{versionGroupHomeAction.getProjectIterations().isEmpty()}">
+      <div class="l--pad-all-half">
+        <p class="txt--meta">#{messages['jsf.NoProjectsInGroup']}</p>
+        <s:fragment
+          rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
+          <p>
+            <a href="#settings-projects" class="button--primary"
+              onclick="updateHashAndGotoUrl(this)">
+              #{messages['jsf.AddProjectVersions']}
+            </a>
+          </p>
+        </s:fragment>
+      </div>
+    </s:fragment>
+    <s:fragment
+      rendered="#{!versionGroupHomeAction.getProjectIterations().isEmpty()}">
+      <ul class="list--stats" id="projects-project_list">
+        <ui:repeat
+          value="#{versionGroupHomeAction.getProjectIterations()}"
+          var="version">
+          <li
+            class="progress-bar__expander panels__panel__item bg--highest--hover">
+            <a4j:commandLink
+              action="#{versionGroupHomeAction.setSelectedVersion(version)}"
+              render="projects-language_list, project-label"
+              onclick="updateActiveRow(this);toggleColumn('projects_content')"
+              styleClass="bx--block">
+              <div class="list__item">
+                <div class="list__item__info">
                         <span class="list__title">
                           #{version.project.slug} <i
                           class="i i--version"></i> #{version.slug}
@@ -70,9 +68,9 @@
                             #{versionGroupHomeAction.getMissingLocale(version).size()}
                           </a4j:outputPanel>
                         </span>
-                  </div>
-                  <s:div styleClass="list__item__stats"
-                    rendered="#{versionGroupHomeAction.pageRendered}">
+                </div>
+                <s:div styleClass="list__item__stats"
+                  rendered="#{versionGroupHomeAction.pageRendered}">
                          <span class="stats--small txt--state-neutral">
                             <span class="stats__figure">
                               ${versionGroupHomeAction.getStatisticFigureForProject(versionGroupHomeAction.projectSortingList.selectedSortOption, version.id)}
@@ -81,87 +79,86 @@
                               ${versionGroupHomeAction.getStatisticUnit(versionGroupHomeAction.projectSortingList.selectedSortOption)}
                             </span>
                           </span>
-                  </s:div>
-                </div>
-                <zanata:statistic
-                  value="${versionGroupHomeAction.getStatisticForProject(version.id)}"
-                  rendered="#{versionGroupHomeAction.pageRendered}"/>
+                </s:div>
+              </div>
+              <zanata:statistic
+                value="${versionGroupHomeAction.getStatisticForProject(version.id)}"
+                rendered="#{versionGroupHomeAction.pageRendered}"/>
 
-                <zanata:loader type="large"
-                  rendered="#{!versionGroupHomeAction.pageRendered}"/>
-              </a4j:commandLink>
-            </li>
-          </ui:repeat>
-        </ul>
-      </s:fragment>
-    </h:form>
-  </div>
+              <zanata:loader type="large"
+                rendered="#{!versionGroupHomeAction.pageRendered}"/>
+            </a4j:commandLink>
+          </li>
+        </ui:repeat>
+      </ul>
+    </s:fragment>
+  </h:form>
 </div>
 
-<div class="g__item w--1-2 w--1-2-s panels__panel is-active">
-  <s:div styleClass="bg--pop-higher">
-    <div class="panels__panel__header">
-      <div class="g--tight">
-        <div class="g__item w--1-2 w--1-2-s">
-          <h2 class="heading--secondary epsilon">
-                <span class="is-hidden--l-up">
-                  <a href="#"
-                    onclick="removeActiveRows('projects-project_list');toggleColumn('projects_content')"
-                    title="#{messages['Projects']}">
-                    <i class="i i--project"></i>
-                  </a>
-                  <i class="i i--arrow-right"></i>
-                </span>
-            <i class="i i--language"></i>
-            <a4j:outputPanel id="project-label">
-              #{versionGroupHomeAction.selectedVersion.project.slug}
-            </a4j:outputPanel>
-            #{messages['Languages']}
-          </h2>
-        </div>
-        <div
-          class="g__item w--1-2 w--1-2-s txt--align-right txt--s-align-right">
-          <zanata:sortlist id="projects-language_sorting"
-            sortAction="#{versionGroupHomeAction.sortLanguageList(versionGroupHomeAction.selectedVersion.id)}"
-            render="projects-language_list"
-            sortingList="#{versionGroupHomeAction.languageSortingList}"/>
-        </div>
+<div class="g__item w--1-2 w--1-2-s panels__panel panel bg--pop-higher">
+  <div class="panel__header">
+    <div class="bx--table">
+      <div class="is-hidden--l-up bx--table-cell txt--nowrap">
+        <a href="#" class="l--pad-all-half bx--inline-block"
+          onclick="removeActiveRows('projects-project_list');toggleColumn('projects_content')"
+          title="#{messages['Projects']}">
+          <i class="i--huge i--arrow-left"></i>
+        </a>
+      </div>
+
+      <div class="bx--table__cell w--1 w--1-s l--pad-all-half d--left">
+        <h2 class="heading--secondary epsilon">
+          <i class="i i--language l--push-right-quarter"></i>
+          <a4j:outputPanel id="project-label">
+            #{versionGroupHomeAction.selectedVersion.project.slug}
+          </a4j:outputPanel>
+          #{messages['Languages']}
+        </h2>
+      </div>
+
+      <div
+        class="txt--align-right txt--s-align-right txt--nowrap l--push-right-half">
+        <zanata:sortlist id="projects-language_sorting"
+          sortAction="#{versionGroupHomeAction.sortLanguageList(versionGroupHomeAction.selectedVersion.id)}"
+          render="projects-language_list"
+          sortingList="#{versionGroupHomeAction.languageSortingList}"/>
       </div>
     </div>
-    <h:form id="projects-language_list" styleClass="l--push-bottom-0">
-      <s:fragment
-        rendered="#{versionGroupHomeAction.selectedVersion == null}">
-        <div class="l--pad-all-half">
-          <p class="txt--meta">
-            #{messages['jsf.SelectAProjectFromList']}
+  </div>
+  <h:form id="projects-language_list" styleClass="l--push-bottom-0">
+    <s:fragment
+      rendered="#{versionGroupHomeAction.selectedVersion == null}">
+      <div class="l--pad-all-half">
+        <p class="txt--meta">
+          #{messages['jsf.SelectAProjectFromList']}
+        </p>
+      </div>
+    </s:fragment>
+    <s:fragment
+      rendered="#{versionGroupHomeAction.selectedVersion != null and versionGroupHomeAction.getActiveLocales().isEmpty()}">
+      <div class="l--pad-all-half">
+        <p class="txt--meta">#{messages['jsf.NoActiveLanguages']}</p>
+        <s:fragment
+          rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
+          <p>
+            <a href="#settings-languages" class="button--primary"
+              onclick="updateHashAndGotoUrl(this)">
+              #{messages['jsf.AddLanguages']}
+            </a>
           </p>
-        </div>
-      </s:fragment>
-      <s:fragment
-        rendered="#{versionGroupHomeAction.selectedVersion != null and versionGroupHomeAction.getActiveLocales().isEmpty()}">
-        <div class="l--pad-all-half">
-          <p class="txt--meta">#{messages['jsf.NoActiveLanguages']}</p>
-          <s:fragment
-            rendered="#{s:hasPermission(versionGroupHome.instance, 'update')}">
-            <p>
-              <a href="#settings-languages" class="button--primary"
-                onclick="updateHashAndGotoUrl(this)">
-                #{messages['jsf.AddLanguages']}
-              </a>
-            </p>
-          </s:fragment>
-        </div>
-      </s:fragment>
-      <s:fragment
-        rendered="#{versionGroupHomeAction.selectedVersion != null and !versionGroupHomeAction.getActiveLocales().isEmpty()}">
-        <ul class="list--stats">
-          <ui:repeat
-            value="#{versionGroupHomeAction.getActiveLocales()}"
-            var="hLocale">
-            <li
-              class="progress-bar__expander panels__panel__item bg--highest--hover">
-              <div class="list__item">
-                <div class="list__item__info">
+        </s:fragment>
+      </div>
+    </s:fragment>
+    <s:fragment
+      rendered="#{versionGroupHomeAction.selectedVersion != null and !versionGroupHomeAction.getActiveLocales().isEmpty()}">
+      <ul class="list--stats">
+        <ui:repeat
+          value="#{versionGroupHomeAction.getActiveLocales()}"
+          var="hLocale">
+          <li
+            class="progress-bar__expander panels__panel__item bg--highest--hover">
+            <div class="list__item">
+              <div class="list__item__info">
                       <span class="list__title">
                         <h:outputLink
                           value="#{request.contextPath}/webtrans/Application.seam"
@@ -193,8 +190,8 @@
                         </s:link>
 
                       </span>
-                </div>
-                <div class="list__item__stats">
+              </div>
+              <div class="list__item__stats">
                       <span class="stats--small">
                         <span class="stats__figure">
                           ${versionGroupHomeAction.getStatisticFigureForProjectWithLocale(versionGroupHomeAction.languageSortingList.selectedSortOption, hLocale.localeId, versionGroupHomeAction.selectedVersion.id)}
@@ -203,16 +200,15 @@
                           ${versionGroupHomeAction.getStatisticUnit(versionGroupHomeAction.languageSortingList.selectedSortOption)}
                         </span>
                       </span>
-                </div>
               </div>
-              <zanata:statistic
-                value="${versionGroupHomeAction.getSelectedVersionStatistic(hLocale.localeId)}"/>
-            </li>
-          </ui:repeat>
-        </ul>
-      </s:fragment>
-    </h:form>
-  </s:div>
+            </div>
+            <zanata:statistic
+              value="${versionGroupHomeAction.getSelectedVersionStatistic(hLocale.localeId)}"/>
+          </li>
+        </ui:repeat>
+      </ul>
+    </s:fragment>
+  </h:form>
 </div>
 </div>
 </div>
diff --git a/zanata-war/src/main/webapp/WEB-INF/template/banner.xhtml b/zanata-war/src/main/webapp/WEB-INF/template/banner.xhtml
index 45c43d06e3..ad8599d5ec 100644
--- a/zanata-war/src/main/webapp/WEB-INF/template/banner.xhtml
+++ b/zanata-war/src/main/webapp/WEB-INF/template/banner.xhtml
@@ -1,4 +1,4 @@
-<header role="banner" class="bg--pop-highest txt--s-align-center"
+<header role="banner" class="header bg--highest"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:h="http://java.sun.com/jsf/html"
@@ -8,12 +8,12 @@
   xmlns:rich="http://richfaces.org/rich">
 
   <a href="#off-canvas--left"
-    class="off-canvas__toggle--left is-hidden--m-up l--float-left">
+    class="off-canvas__toggle--left is-hidden--m-up header__main-nav__toggle">
     <i class="i i--huge i--list"></i>
     <span class="is-invisible">#{messages['jsf.Menu']}</span>
   </a>
 
-  <h1 class="header__title heading--sub">
+  <h1 class="header__title">
     <s:link view="/home.xhtml" propagation="none" id="home">
       <img class="header__site-logo"
         src="#{applicationConfiguration.webAssetsUrl}/logo.svg"/>
@@ -21,18 +21,85 @@
     </s:link>
   </h1>
 
-  <s:fragment rendered="#{identity.loggedIn and personHome.instance.account.enabled}">
-    <a href="#off-canvas--right" id="user_avatar"
-      class="off-canvas__toggle--right l--float-right"
-      title="#{personHome.instance.account.username}">
-      <i class="i i--huge i--list l--float-left l--pad-left-0"></i>
-      <span class="badge__container">
-        <span class="badge--bl"><!--  This is for notification count --></span>
-        <img src="#{gravatarServiceImpl.getUserImageUrl(72)}"
-          alt="#{personHome.instance.name}"/>
-      </span>
-    </a>
+  <nav id="nav-main" class="header__main-nav is-hidden--s">
+    <form action="" class="form--search header__search js-form--search">
+      <label class="form--search__label"
+        for="form--search">Search Projects</label>
+      <input type="text" class="form--search__input js-form--search__input"
+        id="form--search" placeholder="Search projects"/>
+      <button class="form--search__submit button--link js-form--search__button"
+        type="submit"><i class="i i--search"></i></button>
+    </form>
+
+    <ul class="header__main-nav__menu">
+      <li>
+        <s:link id="projects_link" view="/project/home.xhtml"
+          propagation="none">#{messages['jsf.Projects']}</s:link>
+      </li>
+      <li>
+        <s:link id="version-groups_link" view="/version-group/home.xhtml"
+          propagation="none">#{messages['jsf.Groups']}</s:link>
+      </li>
+      <li>
+        <s:link id="languages_link" view="/language/home.xhtml"
+          propagation="none">#{messages['jsf.Languages']}</s:link>
+      </li>
+      <s:fragment rendered="#{identity.loggedIn}">
+        <li>
+          <s:link id="glossary_link" view="/glossary/view.xhtml"
+            propagation="none">#{messages['jsf.Glossary']}</s:link>
+        </li>
+      </s:fragment>
+
+      <li>
+        <s:link id="help_link" view="/help/view.xhtml"
+          propagation="none">#{messages['jsf.Help']}</s:link>
+      </li>
+    </ul>
+  </nav>
+
+  <s:fragment
+    rendered="#{identity.loggedIn and personHome.instance.account.enabled}">
+    <nav class="header__user-nav js-dropdown">
+      <a href="#nav-user" class="header__user-nav__toggle js-dropdown__toggle"
+        title="#{personHome.instance.account.username}">
+        <div class="badge__container">
+          <div class="bx--round header__avatar">
+            <img src="#{gravatarServiceImpl.getUserImageUrl(72)}"
+              alt="#{personHome.instance.name}"/>
+          </div>
+        </div>
+      </a>
+      <ul id="nav-user" class="header__user-nav__menu js-dropdown__content">
+        <li>
+          <s:link id="dashboard" view="/dashboard/home.xhtml"
+            propagation="none">
+            <i class="i i--user"></i> #{messages['jsf.Dashboard']}
+          </s:link>
+        </li>
+        <li>
+          <s:link id="profile" view="/profile/view.xhtml" propagation="none">
+            <i class="i i--settings"></i> #{messages['jsf.Settings']}
+          </s:link>
+        </li>
+        <s:fragment rendered="#{s:hasRole('admin')}">
+          <li>
+            <s:link id="administration" view="/admin/home.xhtml"
+              propagation="none">
+              <i class="i i--user"></i> #{messages['jsf.Administration']}
+            </s:link>
+          </li>
+        </s:fragment>
+        <li>
+          <s:link id="right_menu_sign_out_link" view="/account/logout.seam"
+            propagation="none">
+            <i class="i i--cancel"></i> #{messages['jsf.Logout']}
+          </s:link>
+        </li>
+      </ul>
+    </nav>
   </s:fragment>
+
   <s:fragment rendered="#{not identity.loggedIn}">
     <s:div styleClass="header__login l--float-right">
       <s:link id="register_link_internal_auth" view="/account/register.xhtml"
@@ -62,30 +129,4 @@
     </s:div>
   </s:fragment>
 
-  <nav id="nav-main" class="header__menu is-hidden--s l--push-left-half">
-    <ul class="list--horizontal">
-      <li class="l--push-left-half">
-        <s:link id="projects_link" view="/project/home.xhtml"
-          propagation="none">#{messages['jsf.Projects']}</s:link>
-      </li>
-      <li class="l--push-left-half">
-        <s:link id="version-groups_link" view="/version-group/home.xhtml"
-          propagation="none">#{messages['jsf.Groups']}</s:link>
-      </li>
-      <li class="l--push-left-half">
-        <s:link id="languages_link" view="/language/home.xhtml"
-          propagation="none">#{messages['jsf.Languages']}</s:link>
-      </li>
-      <s:fragment rendered="#{identity.loggedIn}">
-        <li class="l--push-left-half">
-          <s:link id="glossary_link" view="/glossary/view.xhtml"
-            propagation="none">#{messages['jsf.Glossary']}</s:link>
-        </li>
-      </s:fragment>
-
-      <li class="l--push-left-half"><s:link id="help_link"
-        view="/help/view.xhtml"
-        propagation="none">#{messages['jsf.Help']}</s:link></li>
-    </ul>
-  </nav>
 </header>
diff --git a/zanata-war/src/main/webapp/WEB-INF/template/right_menu.xhtml b/zanata-war/src/main/webapp/WEB-INF/template/right_menu.xhtml
deleted file mode 100644
index e24770c404..0000000000
--- a/zanata-war/src/main/webapp/WEB-INF/template/right_menu.xhtml
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="off-canvas__target off-canvas--right" id="off-canvas--right"
-  data-off-canvas="under" xmlns="http://www.w3.org/1999/xhtml"
-  xmlns:ui="http://java.sun.com/jsf/facelets"
-  xmlns:h="http://java.sun.com/jsf/html"
-  xmlns:a="http://richfaces.org/a4j"
-  xmlns:f="http://java.sun.com/jsf/core"
-  xmlns:s="http://jboss.org/schema/seam/taglib"
-  xmlns:rich="http://richfaces.org/rich">
-
-  <header class="off-canvas__header">
-    <a href="#off-canvas--right" class="off-canvas__close">
-      <i class="i i--cross"></i>
-      <span class="is-invisible">Close</span>
-    </a>
-  </header>
-  <nav id="nav-user">
-    <ul class="list--slat list--block-links txt--invert">
-      <li>
-        <s:link id="dashboard" view="/dashboard/home.xhtml" propagation="none">
-          <span
-            class="badge--highlight badge--inline l--float-right"><!-- This is for notification count --></span>
-          #{messages['jsf.Dashboard']}
-        </s:link>
-      </li>
-      <li><s:link id="profile" view="/profile/view.xhtml"
-        propagation="none">#{messages['jsf.Settings']}</s:link></li>
-      <s:fragment rendered="#{identity.loggedIn and s:hasRole('admin')}">
-        <li>
-          <s:link id="administration" view="/admin/home.xhtml"
-            propagation="none">
-            #{messages['jsf.Administration']}
-          </s:link>
-        </li>
-      </s:fragment>
-      <li>
-        <s:link id="right_menu_sign_out_link" view="/account/logout.seam"
-          propagation="none">#{messages['jsf.Logout']}</s:link>
-      </li>
-    </ul>
-  </nav>
-
-</div>
diff --git a/zanata-war/src/main/webapp/WEB-INF/template/template.xhtml b/zanata-war/src/main/webapp/WEB-INF/template/template.xhtml
index 319a1a5e72..33f018f40a 100755
--- a/zanata-war/src/main/webapp/WEB-INF/template/template.xhtml
+++ b/zanata-war/src/main/webapp/WEB-INF/template/template.xhtml
@@ -50,7 +50,6 @@
   <h:body styleClass="new-zanata">
     <div class="off-canvas__outer new-zanata">
       <ui:include src="left_menu.xhtml"/>
-      <ui:include src="right_menu.xhtml"/>
 
       <div class="off-canvas__inner">
         <ui:include src="banner.xhtml"/>
diff --git a/zanata-war/src/main/webapp/WEB-INF/template/template_2x.xhtml b/zanata-war/src/main/webapp/WEB-INF/template/template_2x.xhtml
index 7d0c932f5c..876ee701b1 100644
--- a/zanata-war/src/main/webapp/WEB-INF/template/template_2x.xhtml
+++ b/zanata-war/src/main/webapp/WEB-INF/template/template_2x.xhtml
@@ -32,7 +32,6 @@
       <div class="new-zanata-base">
         <div class="new-zanata">
           <ui:include src="left_menu.xhtml"/>
-          <ui:include src="right_menu.xhtml"/>
         </div>
       </div>