Update to Tenderfoot

selenium/test-output/index.html

@@ -16,7 +16,7 @@
       var suiteTableData = new Array();
     </script>
     <!--
-      <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>
+      <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.12.1.custom.min.js"></script>
      -->
   </head>
 

webapp/src/main/webapp/themes/tenderfoot/css/reset.css

@@ -54,7 +54,7 @@ td {
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
-    font-family: inherit;
+    font-family: "Noto Sans", "Lucida Sans Unicode","Lucida Grande", Geneva, helvetica, sans-serif;
     vertical-align: baseline;
     color: #595b5b;
     font-weight: normal;
@@ -100,3 +100,14 @@ fieldset {
 legend {    
     display: none; 
 }
+.row {
+    font-size: 100%;
+}
+.navbar {
+    margin-bottom: 0px;
+    border: 0px solid transparent;
+}
+.navbar-collapse {
+    padding-left: 0px;
+    padding-right: 0px;
+}

webapp/src/main/webapp/themes/tenderfoot/css/screen.css

@@ -16,7 +16,8 @@ VIVO tenderfoot theme: screen styles
 
 @charset "UTF-8";
 
-@import url("reset.css");
 @import url("../bootstrap/css/bootstrap.min.css");
-@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
+@import url("../bootstrap/css/bootstrap-theme.min.css");
+@import url("reset.css");
 @import url("tenderfoot.css");
+@import url("https://fonts.googleapis.com/css?family=Noto+Sans");

webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css

@@ -157,7 +157,7 @@ h1.vivo-logo {
     position: absolute;
     width: 442px;
     height: 59px;
-    top: 10px;
+    top: 30px;
     left: 0;
     background: url(../images/VIVO-logo.png) 0 0 no-repeat;
 }
@@ -179,3 +179,18 @@ h1.vivo-logo a {
     font-weight: 400;
     transition: all 0.5s;
 }
+
+#individual-intro h1 {
+    font-size: 1.375em;
+    color: #2485ae;
+}
+
+#individual-intro span.display-title {
+    padding-left: 10px;
+    margin-left: 10px;
+}
+
+#individual-intro span.display-title, h1.fn .display-title {
+    font-size: .825em;
+    border-left: 1px solid #a6b1b0;
+}

webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl

@@ -25,14 +25,6 @@
 <#include "individual-orcidInterface.ftl">
 
 <section id="individual-intro" class="vcard person" role="region"><span itemscope itemtype="http://schema.org/Person">
-	<div class="row title" style="margin-bottom: 10px;">
-		<div class="col-md-12">
-			<h1 class="vcard foaf-person">
-				<#-- Label -->
-				<span itemprop="name" class="fn"><@p.label individual editable labelCount localesCount/></span>
-			</h1>
-		</div>
-	</div>
 	<div class="row row-eq-height">
 		<div class="col-md-2 photo-wrapper">
 			<!-- Image -->
@@ -50,8 +42,13 @@
             <!-- div id="photo-wrapper">${individualImage}</div -->
 		${individualImage}
 		</div>
-		<div class="col-md-7 person-details">
+		<div class="col-md-10 person-details">
-			<h2>
+			<div class="row title" style="margin-bottom: 10px;">
+				<div class="col-md-12">
+					<h1 class="vcard foaf-person">
+						<#-- Label -->
+						<span itemprop="name" class="fn"><@p.label individual editable labelCount localesCount/></span>
+
 						<#--  Display preferredTitle if it exists; otherwise mostSpecificTypes -->
 						<#assign title = propertyGroups.pullProperty("http://purl.obolibrary.org/obo/ARG_2000028","http://www.w3.org/2006/vcard/ns#Title")!>
 						<#if title?has_content> <#-- true when the property is in the list, even if not populated (when editing) -->
@@ -70,14 +67,20 @@
 						<#if ! (title.statements)?has_content>
 							<@p.mostSpecificTypes individual />
 						</#if>
-			</h2>
+					</h1>
 				</div>
-		<div class="col-md-3 person-details" style="margin-left: 10px;">
+			</div>
+			<div class="row">
+				<div class="col-md-12 person-details">
+				</div>
+			</div>
+		</div>
+        <!-- div class="col-md-3 person-details" style="margin-left: 10px;">
 			<section id="share-contact" role="region">
 				<!-- Research Areas --    >
 				<#include "individual-researchAreas.ftl">
 			</section>
-		</div>
+		</div -->
 	</div>
 </span></section>
 
@@ -110,10 +113,7 @@
 
 <section style="overflow: hidden">
     <div class="row row-eq-height">
-		<div id="property-tabs" class="col-md-9">
+        <div class="col-md-2">
-			<#include "individual-property-group-tabs.ftl">
-		</div>
-		<div class="col-md-3 person-details" style="margin-left: 10px;">
 		<#include "individual-visualizationFoafPerson.ftl">
 
             <!-- Contact Info -->
@@ -133,6 +133,9 @@
             <!-- Websites -->
 		<#include "individual-webpage.ftl">
         </div>
+        <div id="property-tabs" class="col-md-10">
+		<#include "individual-property-group-tabs.ftl">
+        </div>
     </div>
 </section>
 
@@ -166,14 +169,14 @@
 
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
 '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
+'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>',
+'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip.min.js"></script>',
 '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
 '<script type="text/javascript" src="${urls.base}/js/individual/individualQtipBubble.js"></script>',
 '<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
-              '<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
+'<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
 '<script type="text/javascript" src="${urls.base}/js/imageUpload/imageUploadUtils.js"></script>')}

webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl

@@ -6,7 +6,8 @@ var i18nStrings = {
     allCapitalized: '${i18n().all_capitalized}',
 };
 </script>
-<script type="text/javascript" src="${urls.theme}/js/jquery-2.1.3.min.js"></script>
+<script type="text/javascript" src="${urls.base}/js/jquery-1.12.4.min.js"></script>
+<script type="text/javascript" src="${urls.base}/js/jquery-migrate-1.4.1.js"></script>
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>
 
 <#-- script for enabling new HTML5 semantic markup in IE browsers -->

webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl

@@ -1,13 +1,18 @@
-<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
-<#include "developer.ftl">
-
 <div id="nav">
+    <div class="container-fluid">
         <div class="container">
-		<div class="navbar-collapse collapse">
+            <nav class="navbar navbar-default">
-			<nav role="navigation">
+                <p class="navbar-text visible-xs-inline-block">Menu</p>
-				<ul id="main-nav" role="list" class="nav navbar-nav">
+                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul id="main-nav" role="list" class="nav navbar-nav mr-auto mt-2 mt-md-0">
 					<#list menu.items as item>
-						<li role="listitem" <#if item.active> class="active" </#if>><a href="${item.url}" title="${item.linkText} ${i18n().menu_item}">${item.linkText}</a></li>
+                        <li class="nav-item" role="listitem" <#if item.active> class="active" </#if>><a href="${item.url}" title="${item.linkText} ${i18n().menu_item}" class="nav-link">${item.linkText}</a></li>
 					</#list>
                     </ul>
                     <ul class="nav pull-right navbar-nav">