VIVO-201: combined some duplicate css selctors in separate files into a single css file for drag and drop.

This commit is contained in:
Tim Worrall 2014-09-02 16:51:49 -04:00
parent 19f1db691d
commit 2983cf69b0
7 changed files with 28 additions and 125 deletions

View file

@ -51,7 +51,7 @@
<h3>${i18n().manage_authors}</h3> <h3>${i18n().manage_authors}</h3>
<ul id="authorships" ${ulClass}> <ul id="dragDropList" ${ulClass}>
<script type="text/javascript"> <script type="text/javascript">
var authorshipData = []; var authorshipData = [];
@ -67,10 +67,10 @@
<li class="authorship"> <li class="authorship">
<#-- span.author will be used in the next phase, when we display a message that the author has been <#-- 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. --> 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, <#-- 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. --> 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)> <#if (authorUri?length > 0)>
<span class="authorName">${authorName}</span> <span class="authorName">${authorName}</span>
<#else> <#else>
@ -108,7 +108,7 @@
<h3>${i18n().add_an_author}</h3> <h3>${i18n().add_an_author}</h3>
<div style="display:inline"> <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> <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" /> <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> <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" />', ${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/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/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>')} ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>')}

View file

@ -1,54 +1,26 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */ /* $This file is distributed under the terms of the license in /doc/license.txt$ */
#authorships { #dragDropList {
margin-left: 0; margin: 0 0 1.5em 0;
} }
#authorships li { #dragDropList li {
list-style: none; list-style: none;
margin-bottom: .75em; margin-bottom: .75em;
} }
/* Use class dd rather than jQuery UI's class ui-sortable, so that we can remove /* 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 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. */ class, in case we want to re-enable DD without a page reload. */
#authorships.dd li { #dragDropList.dd li {
padding-left: 1em; padding-left: 1em;
background: url("../images/sortable_icon.png") no-repeat left center; background: url("../images/sortable_icon.png") no-repeat left center;
cursor: move; cursor: move;
} }
#authorships .authorNameWrapper { #dragDropList .itemName {
display: inline-block; display: inline-block;
width: 15em; width: 15em;
} }
#showAddForm span.or { #dragDropList .extra-wide {
display: none; width: 20em !important;
}
#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;
} }
#content form p.inline { #content form p.inline {
clear: left; clear: left;
@ -79,24 +51,6 @@ form a:hover.cancel,
#content form p.submit { #content form p.submit {
margin-top: 3em; 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 { form#addAuthorForm {
display: none; display: none;
} }

View file

@ -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;
}

View file

@ -367,7 +367,7 @@ var addAuthorForm = {
/* Drag-and-drop */ /* Drag-and-drop */
initAuthorDD: function() { initAuthorDD: function() {
var authorshipList = $('#authorships'), var authorshipList = $('#dragDropList'),
authorships = authorshipList.children('li'); authorships = authorshipList.children('li');
if (authorships.length < 2) { 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. ?? // 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), var pos = addAuthorForm.getPosition(ui.item),
nextpos = pos + 1, nextpos = pos + 1,
authorships = $('#authorships'), authorships = $('#dragDropList'),
next = addAuthorForm.findAuthorship('position', nextpos); next = addAuthorForm.findAuthorship('position', nextpos);
if (next.length) { if (next.length) {
@ -719,7 +719,7 @@ var addAuthorForm = {
// Disable DD and associated cues if only one author remains // Disable DD and associated cues if only one author remains
disableAuthorDD: function() { disableAuthorDD: function() {
var authorships = $('#authorships'), var authorships = $('#dragDropList'),
authorNameWrapper = $('.authorNameWrapper'); authorNameWrapper = $('.authorNameWrapper');
authorships.sortable({ disable: true } ); authorships.sortable({ disable: true } );

View file

@ -61,7 +61,7 @@ var manageWebpages = {
/* Drag-and-drop */ /* Drag-and-drop */
initDragAndDrop: function() { initDragAndDrop: function() {
var webpages = $('#webpageList'); var webpages = $('#dragDropList');
// No DD if < 2 items // No DD if < 2 items
if (webpages.children('li') < 2) { 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. ?? // 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), var pos = manageWebpages.getPosition(ui.item),
nextpos = pos + 1, nextpos = pos + 1,
webpages = $('#webpageList'), webpages = $('#dragDropList'),
next = manageWebpages.findWebpage('position', nextpos); next = manageWebpages.findWebpage('position', nextpos);
if (next.length) { if (next.length) {
@ -222,9 +222,9 @@ var manageWebpages = {
// Disable DD and associated cues if only one item remains // Disable DD and associated cues if only one item remains
disableDD: function() { 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 /* 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 * 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 * class, in case we want to re-enable DD without a page reload (e.g., if implementing

View file

@ -26,7 +26,7 @@
<p>${i18n().has_no_webpages}</p> <p>${i18n().has_no_webpages}</p>
</#if> </#if>
<ul id="webpageList" ${ulClass} role="list"> <ul id="dragDropList" ${ulClass} role="list">
<#list editConfiguration.pageData.webpages as webpage> <#list editConfiguration.pageData.webpages as webpage>
<li class="webpage" role="listitem"> <li class="webpage" role="listitem">
<#if webpage.label??> <#if webpage.label??>
@ -35,7 +35,7 @@
<#assign anchor=webpage.url > <#assign anchor=webpage.url >
</#if> </#if>
<span class="webpageName"> <span class="itemName extra-wide">
<a href="${webpage.url}" title="${i18n().webpage_url}">${anchor}</a> <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>) <#if webpage.typeLabel??>(<#if webpage.typeLabel == "URL">Standard Web Link<#else>${webpage.typeLabel}</#if></#if>)
</span> </span>
@ -57,8 +57,8 @@
<#-- There is no editConfig at this stage, so we don't need to go through postEditCleanup.jsp on cancel. <#-- 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 These can just be ordinary links, rather than a v:input element, as in
addAuthorsToInformationResource.jsp. --> 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> <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}"/> <img id="indicator" class="indicator hidden" src="${urls.base}/images/indicatorWhite.gif" alt="${i18n().processing_indicator}"/>
</section> </section>
@ -78,7 +78,7 @@ var i18nStrings = {
</script> </script>
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/customForm.css" />', ${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" />')} '<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>', ${scripts.add('<script type="text/javascript" src="${urls.base}/js/utils.js"></script>',

View file

@ -205,8 +205,8 @@ form textarea {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
} }
#authorships a.remove:link, #itemList a.remove:link,
#webpageList a.remove:link, #itemList a.remove:visited,
#showAddForm a.cancel:link, #showAddForm a.cancel:link,
form a:link.cancel, form a:link.cancel,
form a:visited.cancel{ form a:visited.cancel{
@ -215,10 +215,8 @@ form a:visited.cancel{
border-color: none; border-color: none;
padding-left: 3px; padding-left: 3px;
} }
#authorships a.remove:hover, #itemList a.remove:hover,
#authorships a.remove:active, #itemList a.remove:active,
#webpageList a.remove:hover,
#webpageList a.remove:active,
#showAddForm a.cancel:hover, #showAddForm a.cancel:hover,
#showAddForm a.cancel:active, #showAddForm a.cancel:active,
form a:hover.cancel, form a:hover.cancel,