From 2983cf69b0325f12c958232acc72941846e5f460 Mon Sep 17 00:00:00 2001
From: Tim Worrall <tlw72@cornell.edu>
Date: Tue, 2 Sep 2014 16:51:49 -0400
Subject: [PATCH] VIVO-201: combined some duplicate css selctors in separate
 files into a single css file for drag and drop.

---
 .../forms/addAuthorsToInformationResource.ftl | 10 ++--
 ...ionResource.css => manageDragDropList.css} | 60 +++----------------
 .../forms/css/manageWebpagesForIndividual.css | 49 ---------------
 .../js/addAuthorsToInformationResource.js     |  6 +-
 .../forms/js/manageWebpagesForIndividual.js   |  8 +--
 .../forms/manageWebpagesForIndividual.ftl     | 10 ++--
 themes/wilma/css/wilma.css                    | 10 ++--
 7 files changed, 28 insertions(+), 125 deletions(-)
 rename productMods/templates/freemarker/edit/forms/css/{addAuthorsToInformationResource.css => manageDragDropList.css} (50%)
 delete mode 100644 productMods/templates/freemarker/edit/forms/css/manageWebpagesForIndividual.css

diff --git a/productMods/templates/freemarker/edit/forms/addAuthorsToInformationResource.ftl b/productMods/templates/freemarker/edit/forms/addAuthorsToInformationResource.ftl
index 1b9af363..f7a1c460 100644
--- a/productMods/templates/freemarker/edit/forms/addAuthorsToInformationResource.ftl
+++ b/productMods/templates/freemarker/edit/forms/addAuthorsToInformationResource.ftl
@@ -51,7 +51,7 @@
 
 <h3>${i18n().manage_authors}</h3>
 
-<ul id="authorships" ${ulClass}>
+<ul id="dragDropList" ${ulClass}>
 
 <script type="text/javascript">
     var authorshipData = [];
@@ -67,10 +67,10 @@
 	<li class="authorship">
 			<#-- span.author will be used in the next phase, when we display a message that the author has been
 			removed. That text will replace the a.authorName, which will be removed. -->    
-			<span class="author">
+			<span class="authorship">
 					<#-- This span is here to assign a width to. We can't assign directly to the a.authorName,
 					for the case when it's followed by an em tag - we want the width to apply to the whole thing. -->
-					<span class="authorNameWrapper">
+					<span class="itemName">
 							<#if (authorUri?length > 0)>
 									<span class="authorName">${authorName}</span>
 								<#else>      
@@ -108,7 +108,7 @@
     <h3>${i18n().add_an_author}</h3>
 
     <div style="display:inline">
-        <input type="radio" name="authorType" class="person-radio" value="" role="radio" checked style="display:inline;margin-top:20px" />
+        <input type="radio" name="authorType" class="person-radio" value="" role="radio" checked />
         <label class="inline" for="Person" >${i18n().person_capitalized}</label>
         <input type="radio" name="authorType" class="org-radio" value="http://xmlns.com/foaf/0.1/Organization" role="radio" style="display:inline;margin-left:18px" />
         <label class="inline" for="Organization">${i18n().organization_capitalized}</label>
@@ -199,7 +199,7 @@ var i18nStrings = {
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />',
 					'<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/customForm.css" />',
 					'<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/autocomplete.css" />',
-					'<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/addAuthorsToInformationResource.css" />')}
+					'<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/manageDragDropList.css" />')}
 
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>')}
diff --git a/productMods/templates/freemarker/edit/forms/css/addAuthorsToInformationResource.css b/productMods/templates/freemarker/edit/forms/css/manageDragDropList.css
similarity index 50%
rename from productMods/templates/freemarker/edit/forms/css/addAuthorsToInformationResource.css
rename to productMods/templates/freemarker/edit/forms/css/manageDragDropList.css
index a8106be2..0957e991 100644
--- a/productMods/templates/freemarker/edit/forms/css/addAuthorsToInformationResource.css
+++ b/productMods/templates/freemarker/edit/forms/css/manageDragDropList.css
@@ -1,54 +1,26 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
 
-#authorships {
-    margin-left: 0;
+#dragDropList {
+    margin: 0 0 1.5em 0;
 }
-#authorships li {
+#dragDropList li {
     list-style: none;
     margin-bottom: .75em;
 }
 /* Use class dd rather than jQuery UI's class ui-sortable, so that we can remove 
 the class if there's fewer than one author. We don't want to remove the ui-sortable
 class, in case we want to re-enable DD without a page reload. */
-#authorships.dd li {
+#dragDropList.dd li {
     padding-left: 1em;
     background: url("../images/sortable_icon.png") no-repeat left center;  
     cursor: move;  
 }
-#authorships .authorNameWrapper {
+#dragDropList .itemName {
     display: inline-block;
     width: 15em;
 }
-#showAddForm span.or {
-    display: none;
-}
-#showAddForm a.cancel {
-    margin-left: 2em;
-}
-form h3 {
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-form a:link.cancel, 
-form a:visited.cancel,
-#authorships a:link.remove, 
-#authorships a:visited.remove,
-#authorships a:link.undo, 
-#authorships a:visited.undo,  
-#showAddForm a:link.cancel, 
-#showAddForm a:visited.cancel {
-    color: #f70;
-    border-color: #f70;
-}
-form a:hover.cancel,
-#authorships a:hover.remove,
-#authorships a:hover.undo,
-#showAddForm a:hover.cancel {
-    color: #fff;
-    background: #f70;
-}
-#authorships a.undo {
-    margin-left: 1em;
+#dragDropList .extra-wide {
+    width: 20em !important;
 }
 #content form p.inline {
     clear: left;
@@ -79,24 +51,6 @@ form a:hover.cancel,
 #content form p.submit {
     margin-top: 3em;
 }
-/* Disabling undo links for the present. Add back later. */
-/*
-a.undo {
-    display:  none;
-}
-*/
-
-/* Hide elements not used in non-JS version of form */
-/* rjy7 Currently not supporting non-JS version of this form. */
-/*
-#showAddForm,
-a.remove,
-a.undo {
-    display: none;
-}
-*/
-
-/* These styles will need to be redone or removed to support a non-JS version of the form. */
 form#addAuthorForm {
     display: none;
 }
\ No newline at end of file
diff --git a/productMods/templates/freemarker/edit/forms/css/manageWebpagesForIndividual.css b/productMods/templates/freemarker/edit/forms/css/manageWebpagesForIndividual.css
deleted file mode 100644
index 1975a818..00000000
--- a/productMods/templates/freemarker/edit/forms/css/manageWebpagesForIndividual.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/* $This file is distributed under the terms of the license in /doc/license.txt$ */
-
-#webpageList {
-    margin-left: 0;
-}
-
-#webpageList li {
-    list-style: none;
-    margin-bottom: .75em;
-}
-
-/* Use class dd rather than jQuery UI's class ui-sortable, so that we can remove 
-the class if there's fewer than one author. We don't want to remove the ui-sortable
-class, in case we want to re-enable DD without a page reload. */
-#webpageList.dd li {
-    padding-left: 1em;
-    background: url("../images/sortable_icon.png") no-repeat left center;  
-    cursor: move;  
-}
-
-#webpageList .webpageName {
-    display: inline-block;
-    width: 15em;
-}
-
-#addAndCancelLinks {
-    margin-top: 1.5em;
-}
-
-#returnToIndividual {
-    margin-left: 2em;
-}
-
-#showAddForm a:hover.cancel {
-    color: #fff;
-    background: #f70;
-}
-
-#showAddForm a:hover.cancel {
-    color: #fff;
-    background: #f70;
-}
-
-#webpageList a:link.remove, 
-#webpageList a:visited.remove,  
-#webpageList a:hover.remove {
-    color: #f70;
-    background: #fff;
-}
diff --git a/productMods/templates/freemarker/edit/forms/js/addAuthorsToInformationResource.js b/productMods/templates/freemarker/edit/forms/js/addAuthorsToInformationResource.js
index 55151aba..7c2ab7c8 100644
--- a/productMods/templates/freemarker/edit/forms/js/addAuthorsToInformationResource.js
+++ b/productMods/templates/freemarker/edit/forms/js/addAuthorsToInformationResource.js
@@ -367,7 +367,7 @@ var addAuthorForm = {
     /* Drag-and-drop */
     initAuthorDD: function() {
         
-        var authorshipList = $('#authorships'),
+        var authorshipList = $('#dragDropList'),
             authorships = authorshipList.children('li');
         
         if (authorships.length < 2) {
@@ -420,7 +420,7 @@ var addAuthorForm = {
                     // Seems we need to do this by hand. Can't see any way to do it with jQuery UI. ??
                     var pos = addAuthorForm.getPosition(ui.item),                       
                         nextpos = pos + 1, 
-                        authorships = $('#authorships'), 
+                        authorships = $('#dragDropList'), 
                         next = addAuthorForm.findAuthorship('position', nextpos);
                     
                     if (next.length) {
@@ -719,7 +719,7 @@ var addAuthorForm = {
     
     // Disable DD and associated cues if only one author remains
     disableAuthorDD: function() {
-        var authorships = $('#authorships'),
+        var authorships = $('#dragDropList'),
             authorNameWrapper = $('.authorNameWrapper');
             
         authorships.sortable({ disable: true } );
diff --git a/productMods/templates/freemarker/edit/forms/js/manageWebpagesForIndividual.js b/productMods/templates/freemarker/edit/forms/js/manageWebpagesForIndividual.js
index 7972c171..dd30e5ad 100644
--- a/productMods/templates/freemarker/edit/forms/js/manageWebpagesForIndividual.js
+++ b/productMods/templates/freemarker/edit/forms/js/manageWebpagesForIndividual.js
@@ -61,7 +61,7 @@ var manageWebpages = {
     /* Drag-and-drop */
     initDragAndDrop: function() {
         
-        var webpages = $('#webpageList');
+        var webpages = $('#dragDropList');
         
         // No DD if < 2 items
         if (webpages.children('li') < 2) {
@@ -113,7 +113,7 @@ var manageWebpages = {
                     // Seems we need to do this by hand. Can't see any way to do it with jQuery UI. ??
                     var pos = manageWebpages.getPosition(ui.item),                       
                         nextpos = pos + 1, 
-                        webpages = $('#webpageList'), 
+                        webpages = $('#dragDropList'), 
                         next = manageWebpages.findWebpage('position', nextpos);
                     
                     if (next.length) {
@@ -222,9 +222,9 @@ var manageWebpages = {
     
     // Disable DD and associated cues if only one item remains
     disableDD: function() {
-        var webpages = $('#webpageList');
+        var webpages = $('#dragDropList');
         
-        $('#webpageList').sortable({ disable: true } )
+        $('#dragDropList').sortable({ disable: true } )
                          /* Use class dd rather than jQuery UI's class ui-sortable, so that we can remove
                           * the class if there's fewer than one webpage. We don't want to remove the ui-sortable
                           * class, in case we want to re-enable DD without a page reload (e.g., if implementing
diff --git a/productMods/templates/freemarker/edit/forms/manageWebpagesForIndividual.ftl b/productMods/templates/freemarker/edit/forms/manageWebpagesForIndividual.ftl
index 6e1c81fd..b9aad7e2 100644
--- a/productMods/templates/freemarker/edit/forms/manageWebpagesForIndividual.ftl
+++ b/productMods/templates/freemarker/edit/forms/manageWebpagesForIndividual.ftl
@@ -26,7 +26,7 @@
     <p>${i18n().has_no_webpages}</p>
 </#if>
 
-<ul id="webpageList" ${ulClass} role="list">
+<ul id="dragDropList" ${ulClass} role="list">
     <#list editConfiguration.pageData.webpages as webpage>
         <li class="webpage" role="listitem">
             <#if webpage.label??>
@@ -35,7 +35,7 @@
                 <#assign anchor=webpage.url >
             </#if>
             
-            <span class="webpageName">
+            <span class="itemName extra-wide">
                 <a href="${webpage.url}" title="${i18n().webpage_url}">${anchor}</a> 
                 <#if webpage.typeLabel??>(<#if webpage.typeLabel == "URL">Standard Web Link<#else>${webpage.typeLabel}</#if></#if>)
             </span>
@@ -57,8 +57,8 @@
     <#-- There is no editConfig at this stage, so we don't need to go through postEditCleanup.jsp on cancel.
          These can just be ordinary links, rather than a v:input element, as in 
          addAuthorsToInformationResource.jsp. -->   
-    <a href="${showAddFormUrl}" id="showAddForm" class="button green" title="${i18n().add_new_web_page}">${i18n().add_new_web_page}</a>
-       
+    <a href="${showAddFormUrl}" id="showAddFormButton" title="${i18n().add_new_web_page}">${i18n().add_new_web_page}</a>
+     <span class="or"> ${i18n().or} </span>  
     <a href="${cancelUrl}" id="returnToIndividual" class="return" title="${i18n().return_to_profile}">${i18n().return_to_profile}</a>
     <img id="indicator" class="indicator hidden" src="${urls.base}/images/indicatorWhite.gif" alt="${i18n().processing_indicator}"/>
 </section>
@@ -78,7 +78,7 @@ var i18nStrings = {
 </script>
 
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/customForm.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/manageWebpagesForIndividual.css" />',
+                  '<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/manageDragDropList.css" />',
                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/utils.js"></script>',
diff --git a/themes/wilma/css/wilma.css b/themes/wilma/css/wilma.css
index 38e8523a..65553925 100644
--- a/themes/wilma/css/wilma.css
+++ b/themes/wilma/css/wilma.css
@@ -205,8 +205,8 @@ form textarea {
     margin-top: 20px;
     width: 100%;
 }
-#authorships a.remove:link,
-#webpageList a.remove:link,
+#itemList a.remove:link,
+#itemList a.remove:visited,
 #showAddForm a.cancel:link,
 form a:link.cancel, 
 form a:visited.cancel{
@@ -215,10 +215,8 @@ form a:visited.cancel{
     border-color: none;
     padding-left: 3px;
 }
-#authorships a.remove:hover,
-#authorships a.remove:active,
-#webpageList a.remove:hover,
-#webpageList a.remove:active,
+#itemList a.remove:hover,
+#itemList a.remove:active,
 #showAddForm a.cancel:hover,
 #showAddForm a.cancel:active,
 form a:hover.cancel,